/* ============================================================================ Lemon Studio — Design tokens Baked out of "Lemon Studio Design System" / tokens/*.css Nothing here is site-specific. Change a value and the whole site follows. ========================================================================== */ :root { /* --- Brand yellow ------------------------------------------------------ #FCE207 is sampled from the logo mark. Yellow is a MARK, never a fill: underlines, numerals, eyebrows, hairlines, prices, the CTA glow. */ --lemon-500: #FCE207; --lemon-400: #FFEC4D; --lemon-300: #FFF489; --lemon-200: #FFF9C2; --lemon-100: #FFFDE7; --lemon-600: #E2C900; --lemon-700: #B39D00; --lemon-800: #6B5E00; /* Hover is a LIGHTER YELLOW, not a pale cream. The old #FFF29B was another warm off-white; on a neutral-grey page it read as a fourth text colour rather than as the accent lifting. */ --accent-hover: var(--lemon-400); /* --- Ink · TRUE NEUTRAL ----------------------------------------------- No hue at all, on purpose. The scale used to be warm (#9B9B92, #C9C9C1 and friends) — cream greys with yellow already in them, which is exactly why the yellow highlights stopped registering as highlights. With the greys hue-free, #FCE207 is the only colour on the page and the photographs keep their own colour instead of fighting the interface. Pure white is not used anywhere; the scale tops out at #ECECEC. */ --ink-1000: #000000; --ink-900: #0B0B0B; --ink-800: #141414; --ink-700: #1E1E1E; --ink-600: #2A2A2A; --ink-500: #444444; --ink-400: #6C6C6C; --ink-300: #9A9A9A; --ink-200: #C6C6C6; --ink-100: #E4E4E4; --ink-050: #F2F2F2; --white: #FFFFFF; /* declared for completeness — never used as text */ /* --- The value ladder -------------------------------------------------- MONOCHROME: exactly TWO background values exist on this site, and nothing else may ever be used as a background — not a card, not a modal, not an image well. --surface-void #000000 --surface-base #0A0A09 Adjacent sections alternate between the two, so the seam between them is a ~4% step carried by the hairline rules and the spacing. (The design system's --surface-panel #191710 and --surface-lift #24221C are RETIRED. Do not reintroduce them.) */ --surface-void: #000000; --surface-base: #0A0A09; /* THE ONE EXCEPTION. The order confirmation panel goes fully black, so the order-details card inside it needs a grey to lift off. This is the only background on the site that is neither #000000 nor #0A0A09 — deliberate, and confined to that one card. */ --order-summary-bg: #2A2A2A; /* --- Semantic ---------------------------------------------------------- */ --surface-page: var(--surface-base); --surface-card: var(--surface-base); --surface-card-hover: var(--surface-base); /* PALETTE B · true neutral. Four steps, no hue, and the top of the scale stops short of white (#ECECEC ≈ 93%) so headings stop glaring. Every step clears 4.5:1 on both backgrounds. The faint step is #797979 rather than the #646464 shown in the palette comparison: at 3.4:1 that one sat under the accessibility floor, and it carries 12–13px micro-labels and legal lines, which is exactly where readability matters most. It is still clearly the quietest of the four. */ --text-strong: #ECECEC; --text-body: #C6C6C6; --text-muted: #8B8B8B; --text-faint: #797979; --text-accent: var(--lemon-500); --text-on-accent: var(--ink-1000); /* White at low alpha over a black ground IS a neutral grey, so these need no hue correction — they already belong to the palette. */ --border-hairline: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.22); --rule-accent: rgba(252,226,7,.18); --focus-ring: var(--lemon-400); --overlay-scrim: rgba(0,0,0,.72); /* --- Type -------------------------------------------------------------- TWO faces, and the whole idea is the distance between them: RUBIK 800 headings, logo line, prices, buttons — a solid block ASSISTANT 300 everything you read — light, wide, calm Hebrew has no uppercase, so weight and colour carry every bit of emphasis. Never letter-space Hebrew to emphasise it. If you change a face, keep the 800/300 gap or the page goes flat. */ --font-display: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fs-display-1: clamp(32px, 4.6vw, 66px); /* sized so the longest headline line clears the 900px hero block */ --fs-display-2: clamp(30px, 4.4vw, 66px); --fs-h2: clamp(26px, 3.2vw, 48px); --fs-h3: clamp(20px, 1.7vw, 24px); --fs-lead: clamp(18px, 1.4vw, 21px); --fs-body: 18px; --fs-sm: 16px; --fs-xs: 14px; --fs-micro: 13px; --lh-tight: 1.05; --lh-display: 1.12; /* the display face is heavy — it needs the air */ --lh-heading: 1.18; --lh-body: 1.8; /* Assistant 300 wants a little more leading */ --fw-display: 800; /* Rubik — headings and anything that must shout */ --fw-strong: 700; /* Rubik — buttons, prices, the smaller headings */ --fw-body: 400; /* Assistant — every paragraph on the site */ --fw-regular: 600; /* Assistant — one emphasised word inside a line */ --fw-medium: 600; /* Assistant — micro-labels that must hold at 12px */ --fw-light: 300; /* Assistant — available, used nowhere by default */ /* WHY BODY IS 400 AND NOT 300. Assistant 300 is lovely at 20px and barely legible at 12–13px in grey on black, which is where most of this site's small print lives — hints, captions, legal lines, micro-labels. One step up fixes it everywhere without touching the hierarchy: the display face is still Rubik 800, so the gap is 800 against 400 rather than 800 against 300, and that is still an enormous distance. If you ever want the airier look back on ONE large block, use --fw-light there rather than moving --fw-body down again. */ --tracking-label: .18em; /* Latin micro-labels only */ --tracking-he-label:.06em; /* Hebrew eyebrows — barely any */ --tracking-tight: -.01em; --tracking-display: -.02em; --tracking-heading: -.015em; /* --- Space & rhythm ---------------------------------------------------- --gap is the single tunable vertical rhythm. generous 120px / airy 170px / silence 240px. The page should feel emptier than is comfortable. */ --gap: clamp(88px, 12vw, 170px); --gap-sm: clamp(56px, 8vw, 110px); --container: 1280px; --container-narrow: 760px; --gutter: clamp(24px, 4vw, 64px); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* --- Radii ------------------------------------------------------------- 6 / 10 / 16 / 24 / 32 / pill. Cards 24, media 24–32, inputs 10. */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-media: clamp(28px, 4vw, 56px); --radius-pill: 999px; --btn-radius: 10px; /* the page ships at 10px */ /* --- Elevation --------------------------------------------------------- No drop shadows on black — they read as mud. Depth is a hairline plus a lemon glow. Shadows exist only on light surfaces. */ --glow-lemon: 0 0 0 1px rgba(252,226,7,.35), 0 8px 24px rgba(252,226,7,.18); --glow-cta: 0 0 20px rgba(252,226,7,.30); --glow-cta-hover: 0 0 32px rgba(252,226,7,.55); --shadow-on-light: 0 10px 30px rgba(11,11,10,.10); /* --- CTA (black button wearing a lemon glow — not a yellow fill) ------- */ --cta-bg: var(--surface-base); --cta-fg: var(--lemon-500); --cta-bd: rgba(252,226,7,.55); /* --- Motion — fades only. No parallax, no pinning, no carousels. ------- */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-reveal: cubic-bezier(.2,.7,.2,1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 350ms; --dur-reveal: 1100ms; --press-scale: .97; /* --- Surfaces / atmosphere -------------------------------------------- */ --blur-panel: blur(14px); --grain-opacity: 0; /* fractal grain overlay — OFF by default */ /* The warm "raking studio light" radial gradients are RETIRED: they were backgrounds in colours other than the two allowed blacks. Photography now sits on flat --surface-void. If the page ever reads too flat, turn --grain-opacity up to .10 rather than reintroducing a gradient. */ --header-h: 84px; } /* No light scope. The site is monochrome: the only two background values are #000000 and #0A0A09, both defined above. */