/* ========================================================= Hebi Sushi — design tokens Change a value here and it updates across every page. The brief: premium, dark, nocturnal. Two rules drive most of what follows. 1. Nothing is pure. Pure #000 and pure #fff are the fastest way to make a dark page look cheap — they are the colours of a terminal, not a dining room. Every ground here is a warm near-black and every light is a warm off-white, so the page reads as unlit rather than as absent. 2. Gold is a material, not a fill. It appears as hairlines, small-caps labels and a single primary action. Large gold areas turn a luxury cue into a discount-banner cue. ========================================================= */ :root{ /* ---- ground ------------------------------------------------------ Four steps of elevation. Anything raised off the page picks the next one up; nothing uses a drop shadow to do that job. */ --ink: #0B0A09; /* page ground */ --ink-1: #100E0D; /* raised: cards, stuck header */ --ink-2: #17150F; /* raised further: inputs, hover */ --ink-3: #201D16; /* highest: menus, chips, tiles */ /* ---- light ------------------------------------------------------- Off-white rather than #ffffff, but *neutral* — the earlier cream tint read as yellow once gold stopped being used as a fill, and a warm grey secondary looked like faded newsprint next to it. Only the golds carry hue now. */ --white: #F3F3F2; /* primary text */ --muted: #9C9C9B; /* secondary text */ --faint: #6A6A69; /* meta, disabled, dotted leaders */ /* ---- gold -------------------------------------------------------- Taken from the logo gradient (#EBD55C → #755923) so the mark and the interface are lit by the same source. */ --gold-lift: #F5E7A2; --gold: #EBD55C; --gold-deep: #96783E; --gold-dark: #755923; /* ---- controls ---------------------------------------------------- The page ground is warm; form surfaces are deliberately NOT. A brown tint on an input reads as a stain rather than as a material, so inputs, steppers, chips and tiles sit on a neutral grey instead. */ --surface: #1D1D1F; --surface-hover: #262628; --surface-line: rgba(255,255,255,.10); --hairline: rgba(255,255,255,.09); --hairline-2: rgba(255,255,255,.17); --header-bg: rgba(11,10,9,.72); /* ---- status ------------------------------------------------------ Warm-leaning so they sit inside the palette rather than on top of it; a lime green and a pillarbox red both read as system chrome. */ --ok: #8FBE6E; --ok-soft: rgba(143,190,110,.18); --danger: #D9614F; /* ---- gradients ---- */ --grad-gold: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 55%, var(--gold-lift) 100%); --grad-gold-icon: linear-gradient(140deg, var(--gold-lift) 0%, var(--gold-deep) 100%); --grad-logo: linear-gradient(315.48deg, var(--gold) 11.98%, var(--gold-dark) 86.11%); --grad-rule: linear-gradient(90deg, var(--gold-deep), transparent); /* Hero scrim. Weighted to the left so display type stays legible while the right-hand side of the photograph survives — the old scrim crushed the food to black, which defeats the photograph. */ --scrim-hero: linear-gradient(100deg, rgba(11,10,9,.94) 0%, rgba(11,10,9,.78) 38%, rgba(11,10,9,.42) 68%, rgba(11,10,9,.60) 100%); --scrim-hero-foot:linear-gradient(180deg, transparent 55%, var(--ink) 100%); --scrim-card: linear-gradient(180deg, transparent 45%, rgba(6,5,4,.55) 100%); /* ---- type -------------------------------------------------------- Display: Cormorant Garamond — a high-contrast Garamond revival. The short x-height and fine hairlines are what make the dark palette read as expensive rather than merely dark. Body: Onest — a modern grotesque whose Cyrillic is drawn as a first-class script rather than widened Latin. Armenian is the binding constraint. Google Fonts carries no display serif with Armenian coverage, so Armenian glyphs fall through per-glyph to Noto Serif/Sans Armenian. Because the UI switches language wholesale a page is never mixed — see README "Why Armenian is the hard part". */ --font-display: 'Cormorant Garamond', 'Noto Serif Armenian', 'Times New Roman', serif; --font-body: 'Onest', 'Noto Sans Armenian', 'Helvetica Neue', Arial, sans-serif; /* ONE KNOB FOR THE WHOLE TYPE SYSTEM. Every size below is multiplied by this, so the page can be tuned up or down in one place instead of across forty values. 1 = the compact base scale; 1.25 is the current setting. Nudge it and reload — nothing else needs to change. */ --type-scale: 1.25; /* Fluid from 360px to 1440px, so there is no step where the page looks like it was designed for a different screen. */ --fs-hero: calc(clamp(2rem, 1.25rem + 3.1vw, 3.6rem) * var(--type-scale)); --fs-h1: calc(clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem) * var(--type-scale)); --fs-h2: calc(clamp(1.45rem, 1.2rem + 1.1vw, 2rem) * var(--type-scale)); --fs-h3: calc(clamp(1rem, .96rem + .2vw, 1.14rem) * var(--type-scale)); --fs-lead: calc(clamp(.875rem, .85rem + .12vw, .95rem) * var(--type-scale)); --fs-base: calc(.9375rem * var(--type-scale)); --fs-sm: calc(.8125rem * var(--type-scale)); --fs-xs: calc(.6875rem * var(--type-scale)); --fs-label: calc(.625rem * var(--type-scale)); --lh-hero: 1.05; --lh-h2: 1.08; --lh-h3: 1.22; --lh-base: 1.5; --lh-sm: 1.5; --lh-xs: 1.35; --lh-prose: 1.7; /* Set tight. Closing the letterfit is most of what separates a display line that looks contemporary from one that looks like a book page. */ --tracking-tight: -0.035em; --tracking-body: -0.011em; --tracking-label: 0.085em; /* Reversed out of near-black, 400 goes wispy — 500 holds the hairlines open. */ --fw-display: 500; /* ---- space (4px scale) ---- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; /* Section rhythm. Generous vertical space is most of what separates an editorial page from a dense one. */ --s-section: clamp(4rem, 2rem + 7vw, 9rem); /* ---- radii ------------------------------------------------------- Two families, on purpose. Surfaces stay near-sharp (2–4px) because that is what reads as print rather than as a dashboard template. Controls — anything you type in, press or step — are generously rounded, which is the one place a soft corner reads as "touch this" instead of as decoration. */ --r-sm:2px; --r-md:3px; --r-lg:4px; --r-pill:300px; --r-field:14px; /* inputs, textareas, selects, search */ --r-control:12px; /* steppers, segmented buttons, boxes */ /* ---- layout ---- */ --container: 1280px; --gutter: clamp(1.25rem, 1rem + 3.2vw, 5rem); --header-h: 84px; --hero-h: min(86vh, 760px); --card-media-h: clamp(180px, 15.5vw, 225px); } @media (max-width:760px){ :root{ --header-h:68px; --hero-h:min(70vh, 540px); --card-media-h:200px; } }