/* ========================================================================= 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 "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; } :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); } /* 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); } /* 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. */ .wp-page { padding-top: var(--pw-chrome-h); }