/* ============================================================================ Design tokens. Nothing in the theme may use a raw colour, duration or spacing value — every component reads from here. ========================================================================= */ :root{ /* --- brand & ink ------------------------------------------------------ The accent ramp is the supplied palette. Every one of those five colours is a FILL, not a text colour: #FF8A3C is 2.35:1 on white but 7.84:1 against near-black, so accented surfaces carry dark ink rather than white. Coloured text on a white ground uses --accent-text, a darker orange off the same hue that clears 4.5:1. Getting this backwards is how an orange rebrand ends up unreadable. */ --amber-500:#FBCA28; /* primary fill: price CTA 11.90:1 on ink */ --amber-400:#FFB43C; /* hover fill 10.38:1 on ink */ --amber-600:#E8A800; /* active fill */ --amber-800:#96680A; /* text on white 4.91:1 */ --amber-900:#7D5600; /* hover for text 6.56:1 */ --orange-500:#FF8A3C; /* kept: still the warm end of the logo ramp */ --orange-050:#FFF3E8; --lime-400:#CEEE5E; /* the call icon, on near-black 14.03:1 */ /* Two tints given as 8-digit hex, exactly as specified. Over white they land on #FFF6E7 and #E9FBEF, both ~17:1 against ink. */ --tint-saved:#FFB43C1F; --tint-wa:#24D3661A; --yellow-500:#F6E70D; /* supplied — highlight fill */ --yellow-300:#FFE56F; /* supplied — soft highlight fill */ --green-500:#1DCB7A; /* supplied — success fill 8.65:1 on ink */ --ink:#141416; --grey-900:#1C1C1F; --grey-700:#3F3F45; --grey-600:#5C5C63; --grey-500:#6E6E75; --grey-400:#8A8A91; --grey-300:#C9C9CE; --grey-200:#EDEDEE; --grey-100:#F6F6F7; --white:#FFFFFF; /* --- semantic. red is the brand, NOT the error colour ----------------- */ --success-600:#0E8F52; --success-050:#E6F9F0; /* text-safe green, 4.14:1 */ --success-fill:var(--green-500); /* the supplied green, as a fill */ --warning-500:#F5A623; --warning-700:#7A4F00; --warning-050:#FDF3E0; /* --- roles ------------------------------------------------------------ */ --ground:var(--white); --panel:var(--grey-100); --sunk:var(--grey-200); --text:var(--ink); --text-2:var(--grey-700); --text-3:var(--grey-500); --rule:var(--grey-300); --rule-fn:var(--grey-400); /* functional borders: inputs, checkboxes */ --accent:var(--amber-500); --accent-hover:var(--amber-400); --accent-active:var(--amber-600); --accent-soft:var(--orange-050); /* Ink to place ON an accent fill, and accent to place on a white ground. They are different colours for a contrast reason, not a stylistic one. */ --on-accent:var(--ink); /* #FBCA28 is 1.55:1 on white — unusable as text. Accented text uses a dark amber off the same hue instead. */ --accent-text:var(--amber-800); --accent-text-hover:var(--amber-900); /* The shortlist button's fill. Tried green off the cool end of the logo ramp to keep it distinct from the amber that every converting action wears; amber was chosen instead, so the card's primary now matches the header call button and the banner. One token — swap it here, nothing else moves. */ --save-fill:var(--accent); --save-fill-hover:var(--accent-hover); --focus:var(--ink); /* Dark sections re-declare --focus below; the :focus-visible rule never changes. */ /* --- type ------------------------------------------------------------- */ /* FiraGO carries every word a reader actually reads — body, specs, labels, UI. Noto Sans Georgian stays in the stack for Armenian, which FiraGO lacks. */ --font-ka:"FiraGO","Noto Sans Georgian","Noto Sans",system-ui,sans-serif; --font-lat:var(--font-ka); /* One family for everything. The condensed caps-only display face is gone; the token stays so components need no edit, but it now resolves to FiraGO. */ /* Headings. One family name, three OFL faces routed by unicode-range — see fonts.css. FiraGO is the fallback for anything the display cut does not carry, so a stray glyph degrades to the body face rather than to Times. */ --font-display:"DG Display",var(--font-ka); /* Was JetBrains Mono. Specs and counts are FiraGO now, per brief; the technical read comes from tabular figures and letter-spacing, not a third family. */ --font-mono:var(--font-ka); /* The price, and only the price. TBC Contractica CAPS is a Georgian face with flat-sided figures that hold at 15px, which is what this one number needs and what FiraGO's text figures were not giving it. It carries Latin and Georgian; everything else falls through to FiraGO by unicode-range. */ --font-price:"TBC Contractica CAPS",var(--font-ka); --fs-display:40px; --lh-display:48px; --fs-h1:32px; --lh-h1:40px; --fs-h2:24px; --lh-h2:32px; --fs-h3:19px; --lh-h3:26px; --fs-card:17px; --lh-card:24px; --fs-body:16px; --lh-body:26px; --fs-sm:15px; --lh-sm:24px; --fs-label:14px; --lh-label:20px; --fs-meta:13px; --lh-meta:18px; --fs-micro:12px; --lh-micro:17px; --fs-price:24px; --lh-price:30px; /* --- space (4px base) -------------------------------------------------- */ --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; --touch:48px; /* --header-h is owned by chrome.css, which derives it from the two tier heights and re-declares it on :root.is-scrolled. Nothing sets it in JS. */ --sidebar:340px; /* filter labels are Georgian noun phrases; 300 wrapped most of them */ /* Machines are rectilinear and so is the brand, so the radii stay small — but 3px read as an accident rather than a decision. Slight, deliberate, and still a long way short of consumer-soft. */ --radius:10px; --radius-lg:14px; --radius-sm:6px; /* chips, badges and anything under ~28px tall */ --rail:2px; /* the red rule that marks an active or branded edge */ /* --- motion ------------------------------------------------------------ */ --dur-instant:100ms; --dur-base:200ms; --dur-exit:160ms; --dur-panel:300ms; --dur-backdrop:400ms; --ease-enter:cubic-bezier(0,0,.38,.9); --ease-exit:cubic-bezier(.2,0,1,.9); --ease-standard:cubic-bezier(.2,0,.38,.9); /* Cards carry no border any more, so the resting state needs something to hold the shape. Quiet enough to vanish against the grey archive ground, just enough to define a white card if one ever lands on a white page. */ --shadow-card:0 1px 2px rgba(20,20,22,.05),0 4px 12px -6px rgba(20,20,22,.10); --shadow-1:0 1px 2px rgba(20,20,22,.06); --shadow-2:0 2px 4px rgba(20,20,22,.08),0 8px 20px -12px rgba(20,20,22,.18); --shadow-panel:0 -4px 24px rgba(20,20,22,.18); /* Card hover. Wide, heavily blurred and low-alpha, with a large negative spread so the shape stays soft instead of drawing a second border: on a white ground a tight shadow reads as a hard edge, not as lift. */ --shadow-lift:0 2px 6px rgba(20,20,22,.04), 0 12px 24px -8px rgba(20,20,22,.08), 0 32px 64px -24px rgba(20,20,22,.18); } /* Georgian body text never gets letter-spacing; the width axis handles fit. */ html[lang^="ka"] body{ font-family:var(--font-ka); letter-spacing:normal; } /* Bebas has no ə. See fonts.css. */ html[lang^="az"]{ --font-display:"DG Display Az",var(--font-ka); } /* Neither has TBC Contractica, and Azerbaijani is the one language whose price slot needs it: "Sifarişlə" would have set Sifariş in one face and lə in another, mid-word. The figures lose the face here; a broken word is worse. */ html[lang^="az"]{ --font-price:var(--font-ka); } /* Headings are FiraGO now. The 400 weight existed only because the old display face shipped Regular alone — with a family that has a real bold, headings take it, or they read lighter than the body copy around them. */ /* A condensed display face needs less leading and a touch of tracking that a text face does not: set solid, the counters close up. */ h1,h2,.dg-display{ font-family:var(--font-display); font-weight:700; text-transform:none; letter-spacing:.005em; } @media (max-width:767px){ :root{ --fs-display:30px; --lh-display:38px; --fs-h1:24px; --lh-h1:32px; --fs-h2:20px; --lh-h2:28px; --fs-price:20px; --lh-price:26px; --ground:var(--grey-100); /* mobile ground is the panel grey; cards stay white */ } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; } }