/* ============================================================================ 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. Ajyal pairs Schibsted with Figtree for body — this build uses Inter instead, on purpose: Ajyal and RANCO are both Eastern Province rig-movers, and the two sites should share a register, not an identity. 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:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter-latin-var.woff2') format('woff2'); } @font-face{ font-family:'Inter Fallback'; font-style:normal; font-weight:400; src:local('Arial'); ascent-override:89.79%; descent-override:22.36%; line-gap-override:0.00%; size-adjust:107.89%; } /* --- 2 · tokens shared by all three concepts ------------------------------- */ :root{ --body-latin:'Inter','Inter 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); /* 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; /* 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:76px; 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