/* ========================================================================== egg with wings — design tokens -------------------------------------------------------------------------- The single source of truth for colour, type, space, radius, shadow, motion, layout and stacking. site.css consumes these and defines no raw values of its own (beyond a handful of alpha compositions noted in place). Load order in : fonts.css -> tokens.css -> site.css. WHITE IS THE BRAND COLOUR. --paper dominates; --yolk is one saturated accent used sparingly, as a surface or a graphic, never as text on white. Every text/background pair used in site.css is listed with its measured WCAG 2.1 contrast ratio in /COMPONENTS.md. ========================================================================== */ :root { /* ---------------------------------------------------------------- colour Brand palette — values fixed by the build brief §4. Do not drift them. */ --ink: #16130F; /* warm near-black — body text, wordmark */ --ink-60: #5C564E; /* secondary text — 7.25:1 on white */ --paper: #FFFFFF; /* page background — dominant */ --shell: #FAF7F2; /* warm off-white surface / alternating bands */ --line: #EAE4DA; /* hairline borders */ --yolk: #FFB020; /* primary accent — the yolk. SURFACE ONLY. */ --yolk-deep: #F08A00; /* accent hover / gradient end. SURFACE ONLY. */ --sky: #5AA9F5; /* secondary accent, "flight". GRAPHIC ONLY. */ /* Derived text-safe accents. --yolk (1.83:1) and --sky (2.49:1) FAIL AA as text on white. These two are their accessible text-weight counterparts and are the only warm/cool accents permitted for text, links and icons that carry meaning. */ --ember: #9A4E00; /* 6.06:1 on paper — links, accent text */ --ember-deep: #6E3800; /* link hover / active */ --sky-deep: #0F5FB2; /* 6.36:1 on paper — cool accent text, rare */ /* Tinted surfaces. Opaque so they composite predictably over any band. */ --wash-yolk: #FFF4DF; /* yolk at ~12% over paper — pills, callouts */ --wash-yolk-2: #FFE9C2; /* yolk at ~22% over paper — hover on the above */ --wash-sky: #EEF5FE; /* sky wash — informational notices */ --wash-ink: #F2EFEA; /* neutral wash — code, table headers, footer */ /* Semantic aliases. Components reference these, not the raw ramp, so a future palette change happens in one place. */ --bg: var(--paper); --bg-alt: var(--shell); --surface: var(--paper); --surface-sunk: var(--shell); --text: var(--ink); --text-muted: var(--ink-60); --text-on-accent: var(--ink); /* NEVER white on --yolk. 10.12:1. */ --border: var(--line); --border-strong: #DCD4C6; /* one step down from --line. 1.47:1 on paper, 1.38:1 on shell — decorative only. No state is ever signalled by border colour alone (cards use shadow and transform, focus uses the --ink ring), so WCAG 1.4.11's 3:1 rule is met by those, not by this hairline. */ --accent: var(--yolk); --accent-hover: var(--yolk-deep); --link: var(--ember); --link-hover: var(--ember-deep); --focus-ring: var(--ink); --focus-halo: var(--paper); /* --------------------------------------------------------------- type */ --font-display: 'Fredoka', 'Baloo 2', 'Nunito', ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable Display', system-ui, sans-serif; --font-body: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-display: 600; /* Fredoka 600 is the wordmark weight */ --fw-display-strong: 700; /* Fluid type scale. Every step is clamp(min, preferred, max) and is tuned so nothing overflows at 320px and nothing bloats past 1920px. The 1vw coefficients assume a 320px -> 1440px ramp. */ --fs-display: clamp(2.5rem, 1.42rem + 5.4vw, 6rem); /* 40 -> 96 px */ --fs-h1: clamp(2.125rem, 1.40rem + 3.6vw, 3.75rem); /* 34 -> 60 px */ --fs-h2: clamp(1.625rem, 1.25rem + 1.9vw, 2.5rem); /* 26 -> 40 px */ --fs-h3: clamp(1.25rem, 1.09rem + 0.8vw, 1.625rem); /* 20 -> 26 px */ --fs-h4: clamp(1.0625rem, 1.00rem + 0.3vw, 1.25rem); /* 17 -> 20 px */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem); /* 17 -> 21 */ --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); /* 16 -> 17 px */ --fs-sm: 0.9375rem; /* 15 px */ --fs-xs: 0.8125rem; /* 13 px */ --fs-eyebrow: 0.8125rem; /* 13 px */ --lh-display: 0.98; --lh-tight: 1.14; --lh-snug: 1.32; --lh-body: 1.65; --lh-loose: 1.8; --ls-display: -0.02em; --ls-tight: -0.012em; --ls-normal: 0; --ls-eyebrow: 0.10em; --measure: 68ch; /* prose column — the comfortable reading measure */ --measure-short: 46ch; /* sub-lines, card copy, footer blurbs */ /* -------------------------------------------------------------- space 4px base, roughly modular. Section padding is fluid. */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 8rem; /* 128 */ --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem); --section-y: clamp(3.5rem, 2.2rem + 6.0vw, 7.5rem); --section-y-sm: clamp(2.5rem, 1.7rem + 3.8vw, 5rem); --stack: var(--space-md); /* default flow gap */ /* ------------------------------------------------------------- radius The brand is an egg. Nothing is sharp. */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 44px; --radius-pill: 999px; /* ------------------------------------------------------------- shadow Warm-tinted, low-alpha. Shadows on white must whisper. */ --shadow-xs: 0 1px 2px rgba(22, 19, 15, 0.05); --shadow-sm: 0 2px 6px rgba(22, 19, 15, 0.05), 0 1px 2px rgba(22, 19, 15, 0.04); --shadow-md: 0 8px 22px rgba(22, 19, 15, 0.07), 0 2px 6px rgba(22, 19, 15, 0.04); --shadow-lg: 0 18px 44px rgba(22, 19, 15, 0.10), 0 4px 12px rgba(22, 19, 15, 0.05); --shadow-header: 0 1px 0 rgba(22, 19, 15, 0.06), 0 6px 20px rgba(22, 19, 15, 0.06); --shadow-yolk: 0 8px 20px rgba(240, 138, 0, 0.22); /* ------------------------------------------------------------- motion Every duration below is multiplied by 0 under prefers-reduced-motion: reduce (see site.css). */ --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 620ms; --ease-out: cubic-bezier(0.22, 0.75, 0.32, 1); --ease-in-out: cubic-bezier(0.62, 0.05, 0.30, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.48, 1); /* hover-lift, wing flap */ /* ------------------------------------------------------------- layout */ --w-full: 100%; --w-wide: 84rem; /* 1344px — page frame */ --w-page: 72rem; /* 1152px — default section content */ --w-narrow: 56rem; /* 896px — centred intros, forms */ --w-prose: 46rem; /* 736px — legal / long-form column */ --header-h: 4.25rem; /* 68px — mobile */ --header-h-lg: 5rem; /* 80px — >= 900px */ --border-w: 1px; --border-w-thick: 2px; --focus-w: 3px; --focus-offset: 3px; /* ------------------------------------------------------------ z-index */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-scrim: 150; /* below the header, so the close button stays live */ --z-header: 200; --z-nav: 300; /* mobile nav panel */ --z-toast: 400; --z-skip: 500; /* skip link must clear everything */ } @media (min-width: 56.25em) { /* 900px */ :root { --header-h: var(--header-h-lg); } } /* -------------------------------------------------------------------------- Korean typography. Hangul has no inter-word ligature pressure but breaks badly mid-word at narrow widths, so keep-all is mandatory; and its taller x-height needs a looser leading than Latin at the same size. Applied per-element via :lang(ko) so a KO quotation inside an EN page and vice versa both get the right treatment without a page-level switch. -------------------------------------------------------------------------- */ :root:lang(ko), :lang(ko) { --lh-tight: 1.30; --lh-snug: 1.45; --lh-body: 1.85; --lh-loose: 2.0; --ls-display: -0.01em; --ls-tight: -0.004em; --measure: 42em; /* ch is unreliable for Hangul; em is stable */ --measure-short: 30em; } /* -------------------------------------------------------------------------- Reduced motion. Zeroing the duration tokens means any component that animates through them stops animating without needing its own override. site.css additionally hard-stops transitions/animations as a backstop. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } } /* -------------------------------------------------------------------------- Colour scheme. LIGHT ONLY, by directive: white is the brand colour, and a dark repaint would invert the one thing the identity is built on. A half-hearted dark mode on a site whose entire visual argument is "white plus one yolk accent" reads as a different brand, so it is not shipped. `color-scheme: light` stops the UA from auto-darkening form controls, scrollbars and the address bar on a device set to dark. -------------------------------------------------------------------------- */ :root { color-scheme: light; }