/* ========================================================================== DOLL HAUS — tokens.css Design tokens ONLY. No selectors beyond :root. Nothing else lives here. ========================================================================== */ :root { /* ---------------------------------------------------------------------- PALETTE — GRAYSCALE (review build) Colour is deliberately parked. This build is neutral end to end so the structure, type and spacing can be judged without colour doing any of the work. Every token below keeps its ROLE — swapping colour back in later is an edit to this block only, and nothing downstream changes. The site is quiet so the product is loud. ---------------------------------------------------------------------- */ /* Surface — strictly neutral. Every value has R = G = B, enforced by tools/qa.js. No warm cast, no cool cast, no colour of any kind. */ --dh-paper: #F2F2F2; /* default page background */ --dh-paper-deep: #E6E6E6; /* alternating band, tile wells, footer */ --dh-sweep: #FFFFFF; /* product image sweep — PDPs are white sweep */ --dh-ink: #121212; /* primary type, buttons */ --dh-ink-70: #474747; /* subheads */ --dh-ink-45: #787878; /* captions, SKU, meta */ --dh-hairline: #D5D5D5; /* 1px rules, tile borders */ /* Accent — the accent SLOT, currently neutral. Its job is unchanged: limited-edition marks, hover states, the floating tab, and nothing else. Because it is currently ink, hierarchy in those places is carried by size, tracking and position instead of hue. If it appears more than twice in a viewport, remove one. */ --dh-accent: #121212; --dh-accent-hot: #454545; /* hover only */ /* ---------------------------------------------------------------------- PARKED — reinstating colour Uncomment these four lines (and delete the four grayscale lines above them) to bring the Gallery White / Bone palette and lacquer red back. Nothing else in the codebase needs to change. --dh-paper: #F3F0EA; --dh-paper-deep: #E9E4DA; --dh-ink-70: #4A4540; --dh-ink-45: #7C756D; --dh-hairline: #D8D2C7; --dh-accent: #9E1B1B; (lacquer red) --dh-accent-hot: #C8232A; Walmart brand colours, also parked. Brand-locked — do not adjust the values when they are reinstated: --wmt-blue: #0071DC; --wmt-spark: #FFC220; ---------------------------------------------------------------------- */ /* Retail CTA hover, grayscale stand-in for Walmart blue */ --dh-cta-hover: #3A3A3A; /* Inverted surface — used only by the homepage hero overlay header */ --dh-invert: #FFFFFF; --dh-invert-70: rgba(255,255,255,0.72); --dh-scrim: rgba(18,18,18,0.46); /* ---------------------------------------------------------------------- TYPEFACES Chocogom — nav, headlines, product names, section titles, tile labels. Poppins — everything else. There is no third typeface. WARNING: Chocogom ships as a single Regular weight, WOFF only. Never apply font-weight: bold to it — the browser synthesises a fake bold and it looks broken. Hierarchy comes from size, tracking, case and colour only. ---------------------------------------------------------------------- */ --f-display: 'Chocogom', 'Poppins', system-ui, sans-serif; --f-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------------------------------------------------------------------- TYPE SCALE — desktop values. Scaled ~20% down at <=768px (see base.css). Each token ships a matching -lh (line height) and -ls (letter spacing). ---------------------------------------------------------------------- */ /* Chocogom, always UPPERCASE. TRACKING — deliberate departure from the spec's type table. The spec called for NEGATIVE tracking on display and h1 (-0.02em / -0.01em). That is the right instinct for a tight grotesk, but Chocogom is a chunky display face with generous sidebearings already built into the glyphs — pulling it tighter made the letters collide. All Chocogom tracking is now positive and opens up as the size comes down, which is also where the hierarchy comes from, since the face has only one weight. If Chocogom is ever substituted, revisit these five values first. */ --t-display: 96px; --t-display-lh: 1.0; --t-display-ls: 0.03em; --t-h1: 56px; --t-h1-lh: 1.06; --t-h1-ls: 0.04em; --t-h2: 36px; --t-h2-lh: 1.16; --t-h2-ls: 0.05em; --t-h3: 22px; --t-h3-lh: 1.26; --t-h3-ls: 0.06em; --t-nav: 18px; --t-nav-lh: 1; --t-nav-ls: 0.11em; /* Poppins */ --t-body-lg: 19px; --t-body-lg-lh: 1.65; --t-body-lg-ls: 0; --t-body-lg-w: 300; --t-body: 16px; --t-body-lh: 1.7; --t-body-ls: 0; --t-body-w: 400; --t-label: 13px; --t-label-lh: 1; --t-label-ls: 0.14em; --t-label-w: 500; --t-meta: 12px; --t-meta-lh: 1.4; --t-meta-ls: 0.04em; --t-meta-w: 400; /* ---------------------------------------------------------------------- GRID & SPACING — 8px base ---------------------------------------------------------------------- */ --max-w: 1440px; --gutter: 48px; /* 24px tablet / 20px mobile — see base.css */ --col-gap: 24px; /* 12-column grid gutter */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 144px; --s-9: 200px; /* Vertical section rhythm. Editorial breathing room is the single biggest lever on "does this feel premium." */ --section-y: var(--s-8); /* 80px at <=768px, see base.css */ /* HEADER HEIGHT At rest the nav carries EQUAL air above and below the logo — one value, applied both sides, so they cannot drift apart. Once it sticks it condenses: both paddings collapse and the bar drops to the row only. --header-h is the AT-REST total, and is what page layout offsets use. */ --header-pad: 35px; --header-bar-h: 56px; --header-h: calc(var(--header-pad) * 2 + var(--header-bar-h)); /* THE STUCK BAR IS SIZED FROM THE LOGO, NOT GUESSED (Blake, 16 Sep 2026: "add 8 px of padding above and below the logo in the sticky menu"). The lockup is a fixed-ratio image, so its height is arithmetic rather than a mystery: 1957 x 1314, giving height = width x 1314/1957. Deriving the bar from it means the 8px is guaranteed instead of being a number that happened to work at one logo size and quietly stopped when the logo changed — which is exactly what had happened on phones, where the gap was down to 4.9px. max() keeps the desktop bar at the height Blake set on 15 Sep (+20px) rather than shrinking it back: the 8px is a FLOOR, not a target. */ --lockup-w-stuck: 68px; --lockup-h-stuck: calc(var(--lockup-w-stuck) * 1314 / 1957); --lockup-pad-stuck: 8px; --header-h-stuck: max(var(--header-bar-h), calc(var(--lockup-h-stuck) + var(--lockup-pad-stuck) * 2)); /* DESKTOP STICKY BAR +20px (Blake, 15 Sep 2026). Scoped to desktop on purpose: base.css drops --header-bar-h to 50px at <=768px, and adding 20px there as well would eat a phone viewport. Set on the TOKEN rather than on .header, so the tray viewport and the PDP sticky rail — which both measure off --header-h-stuck — move with it automatically. */ --anno-h: 34px; /* ---------------------------------------------------------------------- MOTION — restrained and expensive. Nothing bounces. ---------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 400ms; --dur-tray: 480ms; --dur-scrim: 200ms; --dur-tile: 600ms; --dur-label: 300ms; --dur-reveal: 600ms; /* ---------------------------------------------------------------------- MISC Depth comes from hairlines and space. No gradients. No drop shadows except the tray overlay scrim and the sticky PDP bar. ---------------------------------------------------------------------- */ --hair: 1px solid var(--dh-hairline); /* RETIRED 21 Sep 2026. The focus indicator is now a dual-tone ring defined directly in base.css - an ink ring plus a white one, so it stays visible on light AND dark surfaces. A single-colour token could not do that, and the ink value was silently invisible on every dark component. */ /* Stacking order, low to high. The scrim MUST sit below every surface it dims — getting this wrong opens a panel behind its own overlay, which looks like the nav is broken rather than mis-layered. THE TRAY OUTRANKS THE HEADER. It used to be the other way around, so the wordmark and the social icons painted straight over the open tray — two DOLL HAUS marks on screen at once. The header sat on top to keep it clickable while desktop nav panels B/C were open; those are switched off, and the tray has its own close control, so the tray wins. The scrim also sits ABOVE the header now, so the bar dims with the rest of the page instead of staying bright behind the overlay. */ --z-tab: 700; --z-header: 950; --z-scrim: 955; /* above the header, so the header dims too */ --z-mega: 958; /* desktop nav panels B and C — above the scrim */ --z-tray: 960; /* above everything on the page */ --z-lightbox: 1000; } /* Desktop only — see the note beside --header-h-stuck above. The +20px is Blake's 15 Sep call; max() keeps the 8px logo padding as a floor under it, so whichever is taller wins and the logo can never be crowded. */ @media (min-width: 769px) { :root { --header-h-stuck: max(calc(var(--header-bar-h) + 20px), calc(var(--lockup-h-stuck) + var(--lockup-pad-stuck) * 2)); } } /* Phones run a smaller lockup, so the derived height follows it down. */ @media (max-width: 768px) { :root { --lockup-w-stuck: 60px; } }