/* ============================================================================ RANCO concept demos — SHARED skeleton. Load order: ibix-base.css -> shared.css -> motion-kit.css -> [theme].css This file carries fonts, the fluid type scale, the spacing/ease tokens and every structural class the three concepts share. Each theme file supplies ONLY the colour tokens + section backgrounds + its one signature move — the skeleton (header, hero, stat band, services list, trust wall, QHSE, contact, footer) is written once here so the three concepts are the same building with different paint, not three different buildings. Token contract every [theme].css must define before this file's classes make sense: --ink --ink-2 --ink-3 dark surfaces --paper --paper-2 light surfaces --txt --txt-dim --txt-faint on-dark text --ink-txt --ink-dim on-paper text --navy --blue RANCO's own brand colours (logo — never edited) --blue-link on-paper small text/links (brand blue fails 4.5:1 on paper, see CLIENT-FACTS.md) --accent --accent-hi --accent-btn the concept's own signal colour, in a large/decorative shade, an on-dark small-text shade and a white-text-safe button shade --line --line-ink hairlines on dark / on paper Every ratio below was produced by design/snippets/contrast-check.py — see the @contrast annotations in each [theme].css, not typed from memory (D-16). ========================================================================= */ /* --- 1 · fonts (self-hosted, Latin only, these demos are English-only by owner instruction 2026-08-04: "remove arabic as there is no need for now". RANCO's own Arabic wordmark still ships inside the logo SVG — that is part of the mark, not page copy, and is untouched. Typeface pair, changed 2026-08-05 (owner: "change fonts for all 3, pick a good font you believe will be best"). IBM Plex Sans is OUT. Display: SCHIBSTED GROTESK. Body: INTER. Both self-hosted variable OFL files (~95KB combined — inside the DP12 budget). Why this pair: Schibsted Grotesk carries authority at 80px+ display sizes where IBM Plex Sans went flat and wide; Inter is the most legible face on the house list at the 14–17px sizes the service rows and register content live at. Body face changed Inter -> FIGTREE 2026-08-05, on request. Settled — do not "correct" it back; the reasoning, including what was traded away, is in clients/ranco/STATUS.md, which is where a note about anyone's decision belongs. Figtree is also markedly lighter: 20KB against Inter's 48KB. Each file is a variable font, so it gets ONE @font-face with a font-weight RANGE — never one rule per weight, which would make the browser download the same file twice or synthesise a fake bold. Ranges below match the file's own fvar axis, checked with fontTools: Schibsted Grotesk's Latin subset only carries 400–900 (no light weights in this subset); Inter carries the full 100–900. Fallback metrics generated with fontpie against these exact files — pasted verbatim, not estimated. */ @font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400 900; font-display:swap; src:url('../fonts/schibsted-grotesk-var-latin.woff2') format('woff2'); } @font-face{ font-family:'Schibsted Grotesk Fallback'; font-style:normal; font-weight:400; src:local('Arial'); ascent-override:92.54%; descent-override:24.43%; line-gap-override:0.00%; size-adjust:105.53%; } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:300 900; font-display:swap; src:url('../fonts/figtree-var-latin.woff2') format('woff2'); } @font-face{ font-family:'Figtree Fallback'; font-style:normal; font-weight:400; src:local('Arial'); ascent-override:95.06%; descent-override:25.02%; line-gap-override:0.00%; size-adjust:99.94%; } /* --- 2 · tokens shared by all three concepts ------------------------------- */ :root{ --body-latin:'Figtree','Figtree Fallback',Arial,sans-serif; --display-latin:'Schibsted Grotesk','Schibsted Grotesk Fallback',Arial,sans-serif; --mono:ui-monospace,'Cascadia Mono','SF Mono',Consolas,'Liberation Mono',monospace; --body: var(--body-latin); --display: var(--display-latin); --ease:cubic-bezier(.22,1,.36,1); --wrap:1280px; --gut:clamp(20px,4.5vw,64px); --tb-h:76px; /* .tb-in's own fixed height — shared so the mobile-menu panel can sit flush under the header without a second magic number */ /* spacing scale (design/snippets/layout-primitives.css, R 01 §2) */ --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem; --space-7:4rem; --space-8:6rem; --space-9:8rem; /* Section-level padding, from the TOP of the scale above (component- internal spacing stays on the --space-3..5 end, see .split-lead etc. below). Fixed 2026-08-05: every content section EXCEPT #stats and #site-footer shipped with NO padding-block at all — measured `#about`, `#services`, `#trust`, `#qhse`, `#careers`, `#contact` all at 0px top AND bottom, so section content butted straight against the boundary with the next section's differently-coloured band. That is the root cause of "too close together" — not a component-spacing problem, a missing-section-frame problem. Two tiers, not one repeated value: --pad-section for the utility/list sections (Services' own row dividers already carry internal rhythm, so the section doesn't need to lean on external air as hard); --pad-section-lg for the single-focus feature sections (About's pull-quote, QHSE's card trio) that read better with more room around them. */ --pad-section: clamp(4.5rem, 9vh, 6.5rem); /* --space-7 -> --space-8 */ --pad-section-lg: clamp(6rem, 11vh, 8rem); /* --space-8 -> --space-9 */ /* fluid type ladder (design/snippets/type-scale.css, verified @360/@1440) */ --step-0: clamp(1rem, calc(0.958rem + 0.185vw), 1.125rem); /* 16 / 18 body */ --step-1: clamp(1.188rem, calc(1.125rem + 0.278vw), 1.375rem); /* 19 / 22 lead */ --step-2: clamp(1.375rem, calc(1.25rem + 0.556vw), 1.75rem); /* 22 / 28 h3 */ --step-3: clamp(1.625rem, calc(1.438rem + 0.833vw), 2.188rem); /* 26 / 35 h2 */ --step-4: clamp(1.938rem, calc(1.667rem + 1.204vw), 2.75rem); /* 31 / 44 h1 inner */ --step-5: clamp(2.25rem, calc(1.854rem + 1.759vw), 3.438rem); /* 36 / 55 statement */ --lh-latin:1.5; --lh-display:1.05; --z-header:50; --z-overlay:60; } html{ font-size:100% } body{ line-height:var(--lh-latin) } body{ font-family:var(--body); font-size:var(--step-0); background:var(--paper); color:var(--ink-txt); font-optical-sizing:auto; text-rendering:optimizeLegibility; } h1,h2,h3{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:var(--lh-display) } ::selection{ background:var(--accent); color:#fff } :focus-visible{ outline:2px solid var(--accent-hi, var(--accent)); outline-offset:3px } /* Section colour context. Every content section carries ONE of these so every child component (chips, cards, rows, stats) resolves its muted/line/border tokens against the surface it is ACTUALLY painted on — never a single global "muted grey" guessed to work everywhere. Background colour itself is still set per section, per theme, in [theme].css. */ .on-dark{ color:var(--txt); --body-muted:var(--txt-dim); --card-line:var(--line); --card-bg:transparent; --row-line:var(--line); --chip-line:var(--line); --chip-txt:var(--txt); --stat-line:var(--line); --stat-label:var(--txt-dim); --logo-grid-line:var(--line) } .on-paper{ color:var(--ink-txt); --body-muted:var(--ink-dim); --card-line:var(--line-ink); --card-bg:transparent; --row-line:var(--line-ink); --chip-line:var(--line-ink); --chip-txt:var(--ink-txt); --stat-line:var(--line-ink); --stat-label:var(--ink-dim); --logo-grid-line:var(--line-ink) } .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) } .mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase } .kicker{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:14px; margin-bottom:22px; color:var(--accent-hi, var(--accent)); } .kicker::after{ content:""; height:1px; width:64px; background:currentColor; opacity:.55 } .on-paper .kicker{ color:var(--navy) } /* buttons — extends the base .btn (nowrap, min-height) */ .btn{ font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.01em; padding:15px 28px; border-radius:4px; min-height:48px } .btn-solid{ background:var(--accent-btn, var(--accent)); color:#fff } .btn-solid:hover{ filter:brightness(1.08); transform:translateY(-1px) } .btn-navy{ background:var(--navy); color:#fff } .btn-navy:hover{ filter:brightness(1.12); transform:translateY(-1px) } .btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff } .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) } .btn-outline-ink{ border-color:var(--card-line,var(--line-ink)); color:inherit } .btn-outline-ink:hover{ background:var(--ink-txt); color:var(--paper); border-color:var(--ink-txt) } /* --- 3 · header ------------------------------------------------------------- */ #top-bar{ position:sticky; top:0; z-index:var(--z-header); background:var(--header-bg,var(--paper)); border-bottom:1px solid var(--header-line,var(--line-ink)) } .tb-in{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); height:var(--tb-h); display:flex; align-items:center; justify-content:space-between; gap:20px } .brand{ display:flex; align-items:center; line-height:1 } .brand img{ height:36px; width:auto } /* Concept B: the logo sits in its own white lockup chip so it never touches the dark shell directly — the mark stays exactly as drawn either way. */ .brand-chip{ background:#fff; border-radius:6px; padding:9px 16px; box-shadow:0 1px 2px rgba(0,0,0,.08) } .tb-nav{ display:flex; gap:28px } .tb-nav a{ font-family:var(--display); font-weight:500; font-size:.9rem; color:var(--nav-txt,var(--ink-dim)); padding:8px 0; position:relative } .tb-nav a::after{ content:""; position:absolute; inset-inline-start:0; bottom:2px; height:1.5px; width:0; background:var(--accent); transition:width .3s var(--ease) } .tb-nav a:hover{ color:var(--nav-txt-hover,var(--ink-txt)) } .tb-nav a:hover::after{ width:100% } @media (max-width:860px){ .tb-nav{ display:none } } .tb-right{ display:flex; align-items:center; gap:10px } .tb-cta{ padding:11px 20px; min-height:42px; font-size:.86rem } @media (max-width:560px){ .tb-cta{ display:none } } /* --- 3b · smart header (hide on scroll down, reappear on scroll up) -------- Transform-only, JS-driven (js/header-scroll.js) — the .hide class is NEVER present without JS, so a no-JS visitor simply never sees it move: the header's default state IS visible, this only ever takes it away. Honours prefers-reduced-motion via ibix-base.css's global transition-duration collapse (still shows/hides, just without the slide). */ #top-bar{ transition:transform .32s var(--ease); will-change:transform } #top-bar.hide{ transform:translateY(-100%) } /* --- 3c · "What we offer" nav dropdown -------------------------------------- Real label (works with JS off — nothing is ever unreachable) plus a separate disclosure