/* ========================================================================== Akari Yokocho, design tokens. Direction: "Lamplight, held low." Near-black warm ground, ONE warm lantern accent under 80% saturation, warm neutrals everywhere else. The kinetic energy of a night market is carried by LIGHT and MOTION, never by a second hue. A teal, cyan, magenta or violet anywhere in this build is a rule breach, not a design decision. This file is the single source of truth. styles.css contains no raw colour literal of any kind; every colour, duration and easing resolves from here. (The only two colour literals in the shipped site live in index.html: the favicon data-URI and , both fetched outside the cascade. They track --color-lantern and --color-bg and must move with them.) Palette lineage, so it is traceable: - ground from Rintaro's production #242321 and Son Daven's #2c2824, pushed darker and warmer (references/restaurant.md, both opened) - accent from 21st "Darkmatter" #e78a53 (75.5% sat), warmed to lamplight - motion architecture ported wholesale from Son Daven's duration/easing token scale, retimed with Wagyu's content-speed hierarchy - stagger constants read out of Sakazuki's shipped CSS ========================================================================== */ :root { /* ---- Ground: warm near-black, never pure black ---------------------- Neighbouring dark bands sit within ~1.3:1 of each other, so a band change is always drawn with a hairline seam or a photograph, never with a value step you cannot see. */ --color-bg: #100C09; /* H 25.7 S 28.0% L 4.9% */ --color-surface: #191310; /* H 20.0 S 22.0% L 8.0% 1.11:1 on bg */ --color-surface-2: #241A15; /* H 20.0 S 26.3% L 11.2% 1.29:1 on bg */ --color-border: #2E241D; /* hairline on dark */ /* ---- Warm neutrals (these are NOT accents) --------------------------- */ --color-ink: #F2E7D8; /* bone. 15.94:1 on bg, AAA */ --color-ink-muted: #B3A08A; /* 7.71:1 on bg, 7.28:1 on surface, AAA */ --color-smoke: #6B5C50; /* 3.03:1. GRAPHIC ONLY, never body copy */ /* ---- The ONE accent: lamplight -------------------------------------- */ --color-lantern: #E0A552; /* H 35.1 S 69.6% L 60.0% 8.97:1 on bg */ --color-lantern-bright: #EEC183; /* H 34.8 S 75.9% L 72.4% 11.67:1 on bg */ --color-ember: #8A5A22; /* H 32.3 S 60.5% L 33.7% 3.31:1, NON-TEXT */ --color-on-lantern: #100C09; /* ink on an amber fill, 8.97:1 */ /* lantern-bright and ember are the same lamp at a different distance (hue 32.3 to 35.1 degrees). They are not a second accent, and nothing new may enter this block without recomputing saturation and contrast. */ /* ---- Semantic status. Form state only, never decorative ------------- Success deliberately reuses the lantern: adding a green would add a second hue for a state the accent already carries. */ --color-error: #D77A67; /* 6.37 bg / 6.02 surface / 5.57 surface-2 */ --color-ok: var(--color-lantern); /* ---- Light, not paint. Bloom is alpha, never a new colour ------------ */ --glow-core: rgba(224, 165, 82, 0.55); --glow-mid: rgba(224, 165, 82, 0.20); --glow-soft: rgba(224, 165, 82, 0.09); --glow-none: rgba(224, 165, 82, 0); --bloom-sm: 0 0 18px var(--glow-mid); --bloom-md: 0 0 34px var(--glow-mid), 0 0 12px var(--glow-soft); --bloom-lg: 0 0 72px var(--glow-mid), 0 0 26px var(--glow-core); /* ---- Scrims over photography (alpha of the ground, no new hue) ------- Measured, not guessed: every one of these values exists because text contrast was sampled from a screenshot of the composited page and a lantern in the photograph was winning. */ --scrim-deep: rgba(16, 12, 9, 0.9); --scrim-top: rgba(16, 12, 9, 0.72); --scrim-mid: rgba(16, 12, 9, 0.42); --scrim-none: rgba(16, 12, 9, 0); --scrim-header: rgba(16, 12, 9, 0.86); /* Decorative display text on --color-surface. Mixed from the two warm neutrals already locked above, so it adds no hue; it exists because --color-smoke measured 2.87:1 on --color-surface and large text needs 3:1. This one measures 3.84:1 on surface, 4.06:1 on bg. H 30.0 S 12.5% L 43.9%: a warm neutral, not a second accent. */ --color-smoke-lift: #7E7062; /* ---- Shadow (deep, warm, never a grey drop) -------------------------- */ --shadow-sm: 0 1px 2px rgba(8, 5, 3, 0.55); --shadow-md: 0 14px 34px -16px rgba(8, 5, 3, 0.8); --shadow-lg: 0 34px 80px -34px rgba(8, 5, 3, 0.92); /* ---- Type ------------------------------------------------------------ Display: Big Shoulders Display, tall condensed signage caps, which is what alley signage physically is. 541 bytes over the wire for three weights, so it can be render-blocking without hurting LCP. Serif: Shippori Mincho B1, a real mincho with brush ancestry. It is the type that says "counter", so it never appears in the alley sections. Loaded asynchronously (30 KB) because it is all below the fold. Body: Schibsted Grotesk, a newspaper grotesk that stays readable at small sizes on a near-black ground. 459 bytes for four weights. None are on the banned list (Inter, Roboto, Arial, Open Sans, Helvetica) and none repeat the other two demo builds. */ --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif; --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; --font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif; --step-eyebrow: 0.78rem; --step-small: 0.9375rem; --step-body: 1.0625rem; --step-lead: clamp(1.14rem, 1.5vw, 1.4rem); --step-h4: 1.3rem; --step-h3: clamp(1.7rem, 3.2vw, 2.5rem); --step-h2: clamp(2.5rem, 7vw, 5.5rem); /* 3.4rem is a MEASURED floor, not a default. Round 1 recorded that the two hero lines fill only 61% and 43% of their measure at 375 and asked whether the display face should commit harder there. It was tried at 4.2rem (67px, 76% and 53% fill) and measured at glyph level on the composited page, with the text-shadow rendered by setting the fill to transparent rather than hiding the element: the longer line reaches further right onto a lit sign inside the photograph, and the worst inked pixel fell from 5.52:1 to 3.66:1 live and from 4.21:1 to 2.65:1 in the fallback state, which is below the 3:1 large text owes. The type stays at 3.4rem because the photograph underneath it will not carry more. See BRIEF.md B13. */ --step-hero: clamp(3.4rem, 13vw, 10.5rem); --leading-body: 1.62; --leading-display: 0.88; --measure: 60ch; --tracking-eyebrow: 0.18em; /* the tracked-out label, from Sakazuki */ --tracking-display: -0.005em; /* ---- Spacing (8px grid) --------------------------------------------- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 128px; --space-5xl: 168px; --section-pad: clamp(88px, 11vw, 160px); --container: 1280px; --gutter: clamp(20px, 5vw, 72px); /* ---- Radius: near-square. Lanterns and wooden signs, not pills ------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ---- Motion: a three-tier duration scale plus four named easings. Nothing on this site animates at a duration that is not on this scale; if a value is not from the scale it is a bug. */ --dur-s: 0.3s; /* controls: buttons, nav, fields. Stay fast. */ --dur-m: 0.6s; /* section reveals, hover roll-ups */ --dur-l: 1.2s; /* a rule drawing itself, the hero settling */ --dur-xl: 2s; /* food and room imagery cross-fade ONLY */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* quart-out, default */ --ease-quint: cubic-bezier(0.23, 1, 0.32, 1); /* hover roll-up */ --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --ease-anticip: cubic-bezier(0.6, -0.01, 0.1, 1); /* a little pull-back */ --stagger-hero-start: 0.4s; /* ceremonial, above the fold */ --stagger-start: 0.18s; /* brisk, below the fold */ --stagger-step: 0.14s; /* per sibling, both tiers */ /* Per-component motion tokens, all referencing the scale above. */ --dur-control: var(--dur-s); --dur-reveal: var(--dur-m); --dur-rule: var(--dur-l); --dur-image: var(--dur-xl); --dur-rail: var(--dur-m); --dur-menu-row: var(--dur-m); --dur-lantern: 7s; /* ambient flicker period, slow on purpose */ --marquee-slow: 20s; --marquee-fast: 10s; --img-overscale: 1.12; /* images settle out of an overscale */ /* ---- Signature 3D hand-off (stage 35, motion-3d) --------------------- The WebGL layer reads these through a computed-style probe at runtime (the pattern proven in clients/ironbark-barber-co/three-3d.js), so the 3D moment can never drift off this palette. No new hue is introduced: every value below resolves to the lantern or to the ground. */ --color-3d-lantern-core: var(--color-lantern-bright); --color-3d-lantern-shade: var(--color-lantern); --color-3d-ember: var(--color-ember); --color-3d-fog: var(--color-bg); --color-3d-paper: var(--color-ink); }