/* ========================================================================= Wicked Pines — base tokens. WHY THIS FILE EXISTS -------------------- wickedpines.com is its own site. Its document root is /public/wickedpines, which means this folder IS the top of the web for this domain — "/" starts here, not at the Printed Wicked root one level up. That makes /assets/pw/stage.css unreachable. Not "a different path": there is no URL under this domain that names a file above its own document root, and there is not supposed to be. So the design tokens that stage.css defines — and that pines.css spends most of its length consuming — had to come down here. What was lost while they were missing, and what this restores: - all four typefaces (pines.css asks for --pw-display / --pw-body / --pw-mono by name; undefined, those font-family rules are invalid and the page silently falls back to system serif) - --pw-rule, which draws every hairline in the roster - the frost accent trio, which colours the motion button and focus ring - --pw-chrome-h, used by .wp-frame to size the hero KEEPING IT IN SYNC ------------------ This is a copy of the :root block from /assets/pw/stage.css on printedwicked.com, plus the .pw-accent-frost accent and the .pw-motion button. It is a deliberate fork, not an accident: the two sites are free to drift now, and should. If you change a shared token there and want it here, it is a manual edit — there is no longer a link between them. ========================================================================= */ :root { --pw-void: #050505; --pw-void-2: #0c0c0d; --pw-bone: #f2ede1; --pw-bone-dim: #a39c8c; --pw-bone-faint: #6c665c; --pw-brass: #c9a24b; --pw-brass-bright: #e8c874; --pw-brass-dim: #6b5726; --pw-rule: rgba(242, 237, 225, 0.14); --pw-display: "Cinzel", "Times New Roman", serif; --pw-brutal: "Archivo Black", "Arial Black", sans-serif; --pw-body: "Space Grotesk", system-ui, sans-serif; --pw-mono: "JetBrains Mono", ui-monospace, monospace; /* On printedwicked.com the chrome was TWO fixed bands — a nav strip and a breadcrumb row under it — and --pw-chrome-h was their combined height. This site has one band and no breadcrumbs (a trail needs somewhere to have come from), so the two are the same number here. .wp-frame in pines.css subtracts this from the viewport to size the hero, and .wp-page below pads the top by it so nothing slides under the bar. Change the strip height and both follow — this is the only number to touch. */ --pw-strip-h: 2.65rem; --pw-chrome-h: var(--pw-strip-h); } /* The frost accent — moonlight, taken from the plate itself. On the shared site this was one of several accents selected by a class on ; here there is only ever one, but the class is kept so pines.css's comments still describe what is actually happening. */ .pw-accent-frost { --pw-brass: #a8cfd6; --pw-brass-bright: #d8eef2; --pw-brass-dim: #3f5c62; --pw-rule: rgba(200, 226, 230, 0.13); } /* The network links in the masthead get their own accent rather than the frost one. Frost is deliberately washed out — it is moonlight sitting on top of a photograph — and a link that has to read as clickable at 0.6rem needs more voltage than that. Bright blue, kept in the same family so the bar still looks like one object. Its own tokens and not an override of --pw-brass, because --pw-brass is what the focus ring, the tilt button and every hairline on the page pull from; repointing it here would repaint all of those too. */ :root { --wp-blue: #2f9bff; --wp-blue-bright: #7cc6ff; --wp-blue-dim: #1a4a78; } /* The "Enable tilt" button. Hidden until pines.js finds a device that has orientation permission to ask for — iOS, essentially — so on desktop it never appears and these rules never apply. */ .pw-motion { position: fixed; left: clamp(0.8rem, 3vw, 1.6rem); bottom: clamp(0.8rem, 3vw, 1.6rem); z-index: 61; font-family: var(--pw-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.45rem 0.7rem; border: 2px solid var(--pw-brass); background: rgba(5, 5, 5, 0.72); color: var(--pw-brass); cursor: pointer; } .pw-motion:hover:not(:disabled), .pw-motion:focus-visible { background: var(--pw-brass); color: var(--pw-void); } .pw-motion:disabled { opacity: 0.55; } /* The sound button. Opposite corner from "Enable tilt", because on the one device that shows both — an iPad — two buttons in the same corner is a guessing game. Quieter than .pw-motion by design: a hairline instead of a 2px border and the dim bone rather than the accent. Tilt is a thing the page needs you to grant; sound is a thing the page is offering. The offer should not shout. */ .wp-sound { position: fixed; right: clamp(0.8rem, 3vw, 1.6rem); bottom: clamp(0.8rem, 3vw, 1.6rem); z-index: 61; display: flex; align-items: center; gap: 0.5rem; font-family: var(--pw-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.7rem; border: 1px solid var(--pw-rule); background: color-mix(in srgb, var(--pw-void) 74%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--pw-bone-dim); cursor: pointer; transition: color 160ms ease, border-color 160ms ease; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .wp-sound { background: rgba(4, 7, 10, 0.74); } } .wp-sound:hover, .wp-sound:focus-visible { color: var(--wp-blue-bright); border-color: var(--wp-blue-dim); } .wp-sound[aria-pressed="true"] { color: var(--wp-blue-bright); border-color: var(--wp-blue); } /* Three bars. Flat while off, moving while on — the state is legible from across the room without reading the word, which is the point of having a glyph at all. The animation is the only thing on this page that says "something is happening that you cannot see". */ .wp-sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 0.62rem; } .wp-sound__bars i { display: block; width: 2px; background: currentColor; transition: height 200ms ease; } /* Uneven at rest, on purpose. Three bars of equal height read as an ellipsis — "Sound…", as though the button were going to open something — where a stepped set reads as a meter that is simply not moving yet. */ .wp-sound__bars i:nth-child(1) { height: 3px; } .wp-sound__bars i:nth-child(2) { height: 7px; } .wp-sound__bars i:nth-child(3) { height: 4px; } .wp-sound[aria-pressed="true"] .wp-sound__bars i { animation: wp-bars 1.15s ease-in-out infinite; } .wp-sound[aria-pressed="true"] .wp-sound__bars i:nth-child(2) { animation-delay: -0.38s; } .wp-sound[aria-pressed="true"] .wp-sound__bars i:nth-child(3) { animation-delay: -0.72s; } @keyframes wp-bars { 0%, 100% { height: 2px; } 50% { height: 0.62rem; } } /* Someone who has asked for less motion still gets the button and the sound; they just get a still glyph rather than a bouncing one. Colour alone carries the state here. */ @media (prefers-reduced-motion: reduce) { .wp-sound[aria-pressed="true"] .wp-sound__bars i { animation: none; height: 0.4rem; } .wp-sound { transition: none; } } :focus-visible { outline: 2px solid var(--pw-brass-bright); outline-offset: 2px; } /* ========================================================================= THE STRIP Her masthead, not a navigation bar. The site is one page, so there is nowhere to navigate to; what a visitor arriving from a link actually needs is to know whose site they are on. A row of dead links would answer a question nobody asked and look unfinished doing it. It is deliberately the same silhouette as the Printed Wicked strip — same height, same blur, same mono capitals — because that proportion was already tuned against this stage. Everything identifying is hers. When the shop and gallery exist, they go in here beside the Contact link and nothing else has to change. ========================================================================= */ .wp-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--pw-strip-h); /* Stated rather than left to the defaults, for the same reason the shared stylesheet states them: this is a

, and any future page-level `header { ... }` rule would otherwise outrank nothing and win on whichever property this rule leaves unsaid. */ box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; margin: 0; width: auto; padding: 0 clamp(0.7rem, 2.5vw, 1.5rem); gap: clamp(0.5rem, 2vw, 1.25rem); /* Translucent over the forest rather than opaque: the plate keeps drifting behind it, which is the one thing this page has that a normal header bar does not. --pw-void with alpha, not a hard-coded near-black, so it tracks the pine palette .wp-page sets. */ background: color-mix(in srgb, var(--pw-void) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pw-rule); font-family: var(--pw-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; } /* Safari 15 and anything else without color-mix() gets a plain fallback. Declared after, so a browser that understands the line above keeps it. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .wp-strip { background: rgba(4, 7, 10, 0.82); } } .wp-strip__mark { color: var(--pw-bone); text-decoration: none; font-family: var(--pw-display); font-weight: 900; font-size: 0.82rem; letter-spacing: 0.12em; white-space: nowrap; flex: 0 0 auto; } .wp-strip__mark:hover, .wp-strip__mark:focus-visible { color: var(--pw-brass); } /* The network group. Sits immediately after the wordmark and before the auto margin on .wp-strip__link, so it stays left with the mark and Contact stays pinned right — the arrangement printedwicked.com uses. min-width:0 lets this group be the thing that shrinks when the row runs out of phone, instead of the flex default (auto) which would refuse and push Contact off the edge. */ .wp-strip__nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: clamp(0.5rem, 2vw, 1.1rem); min-width: 0; } /* Styled after .pw-strip__link on the shared site: dim at rest, a hairline underline that only paints on hover, and the same padding so the underline sits clear of the text rather than on it. It inherits the strip's mono / uppercase / 0.14em, so none of that is repeated. */ .wp-strip__nav-link { /* 0 0, not the flex default: these are nowrap, so letting them shrink does not shorten the text, it just shortens the BOX and lets the words spill over their neighbour. Better to keep them at their true width and drop one of them outright at the bottom of the range — see below. */ flex: 0 0 auto; /* A blue-leaning grey at rest, not the full accent: the bar has to stay quiet over the plate, but these two need to look like a different kind of thing from Contact — which goes to an anchor on this page, while these leave it. The accent arrives properly on hover. */ color: #8fa6b8; color: color-mix(in srgb, var(--wp-blue-bright) 45%, var(--pw-bone-dim)); text-decoration: none; white-space: nowrap; padding: 0.15rem 0; border-bottom: 1px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .wp-strip__nav-link:hover, .wp-strip__nav-link:focus-visible { color: var(--wp-blue-bright); border-bottom-color: var(--wp-blue); } /* The unbuilt one. Greyed rather than blued — the accent is what marks a thing you can actually go to, and this reads as a label that is going to become a link rather than one that is broken. No hover colour either: nothing happens when you click it, so nothing should light up. */ .wp-strip__nav-link--soon { color: #63605a; color: color-mix(in srgb, var(--pw-bone-dim) 52%, transparent); cursor: default; } .wp-strip__nav-link--soon:hover { border-bottom-color: transparent; } @media (prefers-reduced-motion: reduce) { .wp-strip__nav-link { transition: none; } } /* margin-left:auto rather than justify-content:space-between, so adding a third item later puts it next to Contact instead of silently respacing the whole row. */ .wp-strip__link { margin-left: auto; flex: 0 0 auto; color: var(--pw-bone-dim); text-decoration: none; white-space: nowrap; } .wp-strip__link:hover, .wp-strip__link:focus-visible { color: var(--pw-brass); } /* Four items is one more than a 360px phone comfortably holds. Rather than hide anything — every one of them is a destination — the row tightens: less tracking, smaller type, smaller gaps. Measured against "WICKED PINES / PRINTED WICKED / WEBSTORE / CONTACT", which is the longest this bar gets. */ @media (max-width: 30rem) { .wp-strip { font-size: 0.58rem; letter-spacing: 0.09em; gap: 0.5rem; padding: 0 0.6rem; } .wp-strip__mark { font-size: 0.72rem; letter-spacing: 0.06em; } .wp-strip__nav { gap: 0.5rem; } } /* Narrowest phones still in use (320px). Four items will not fit honestly, so the placeholder is the one that goes: it is the only item that does not lead anywhere yet. Delete this block the day the shop ships — by then it is a destination and earns its space like the rest. */ @media (max-width: 21.5rem) { .wp-strip__nav-link--soon { display: none; } } /* The strip is fixed, so it is out of flow and the page would start beneath it. On printedwicked.com the shared .pw-on-stage did this; that class is gone with the rest of the borrowed chrome, so .wp-page carries it now. Padding here plus the calc() in .wp-frame together come to exactly one viewport — that is why the page does not gain a scrollbar. That only holds because .wp-frame states box-sizing: border-box and .wp-page zeroes the UA's body margin, both in pines.css; without either the sum overshoots. This site has no global reset, so neither is free. */ .wp-page { padding-top: var(--pw-chrome-h); }