/* ============================================================================= Ojus Consulting — shared styles THEME MODEL The page ground is light. Dark is punctuation, not the canvas: the home hero, the closing CTA band, and the footer. Everything in between is warm off-white with white cards, so 41 pages of content stay readable and feel like air rather than a lightbox. PALETTE — electric blue on cool neutrals. One accent, used sparingly: rules, links, the CTA, one card per band. Neutrals carry a blue bias so they read as chosen rather than default grey. TYPE — Schibsted Grotesk (a grotesk with slightly humanist proportions, deliberately not Inter) for everything structural; IBM Plex Mono for eyebrows, labels and data, which is where the technical register lives; Newsreader italic for the two editorial moments (pull quote, footer statement). Faces are embedded in fonts.css as data URIs. ========================================================================== */ :root{ /* ground + ink */ --bg:#FBFCFE; /* page ground, cool off-white */ --tint:#F1F4FA; /* alternating section band */ --surface:#FFFFFF; /* card surface */ --ink:#0B1020; /* body + headings, blue-black */ --ink-2:#4A5468; /* secondary text */ /* tertiary / captions. Darkened from #6B7689, which cleared 4.5:1 on white but not on the tint band (4.16) — and the card wash takes it lower still. This value clears 4.5:1 on white, on tint, and at the deepest point of the wash, so captions stay legible wherever a card puts them. */ --muted:#5A6376; --line:#E3E8F2; /* hairlines on light */ /* dark bands */ --dark:#070B18; --dark-2:#101832; --dark-line:#232C47; --dark-ink:#F3F6FC; --dark-muted:#A7B1C6; /* brand */ --accent:#0442F0; /* the blue — fills, rules, CTA */ --accent-2:#7C9BFF; /* lifted blue — hover/links on dark */ --accent-dk:#0433BE; /* deepened — small text on light (AA) */ --wash:4,66,240; --wash-2:124,155,255; /* legacy aliases kept so generated markup needs no changes */ --paper:#FFFFFF; --paper-ink:#0B1020; --panel:#FFFFFF; --maroon:#0A1F6B; --shadow:0 1px 2px rgba(16,26,64,.05), 0 10px 30px rgba(16,26,64,.06); --shadow-lift:0 2px 6px rgba(16,26,64,.07), 0 22px 48px rgba(16,26,64,.11); /* MOTION — one easing curve and three durations across the whole site, so nothing feels like it belongs to a different page. The curve is a gentle decelerate: fast to start, settles without bounce. */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:140ms; /* colour + small state changes */ --t-mid:260ms; /* hovers, panels */ --t-slow:520ms; /* reveals */ --max:1340px; --pad:clamp(20px,4vw,56px); --hdr:82px; --sans:"Schibsted Grotesk","Helvetica Neue",Arial,system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --serif:"Newsreader",Georgia,"Times New Roman",serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* the fixed header would otherwise cover an anchored heading on jump links */ :target{scroll-margin-top:calc(var(--hdr) + 24px)} /* long pages: let the browser skip layout+paint for sections still offscreen. contain-intrinsic-size keeps the scrollbar honest while they're skipped. */ main>section{content-visibility:auto;contain-intrinsic-size:auto 600px} main>section.hero{content-visibility:visible} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.65;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)} /* ---------------- type ---------------- Labels are mono and small; headings are grotesk with negative tracking that tightens as the size grows. That contrast — technical label against a tight display line — is doing most of the work here. */ .eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; font-weight:500;color:var(--accent-dk)} .h2{font-size:clamp(1.8rem,3.2vw,2.85rem);line-height:1.06;font-weight:700; letter-spacing:-.035em;margin:0;color:var(--ink);text-wrap:balance} .lead{color:var(--ink-2);font-size:clamp(1.02rem,1.15vw,1.14rem);max-width:60ch;margin:0} .rule{width:36px;height:2px;background:var(--accent);margin-bottom:1.4rem} .chip{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--accent-dk);font-size:.9rem} .chip i{display:grid;place-items:center;width:22px;height:22px;background:var(--accent);color:#fff; font-style:normal;font-size:.75rem;transition:transform var(--t-fast) var(--ease)} .chip:hover i{transform:translateX(4px)} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:99} .skip:focus{left:0} :focus-visible{outline:2px solid var(--accent-dk);outline-offset:3px} /* ---------------- header ---------------- */ header{position:fixed;inset:0 0 auto;z-index:60;background:rgba(251,252,254,.88); backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:border-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)} header.solid,header.pinned{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(16,26,64,.05)} .bar{display:flex;align-items:center;gap:2rem;height:var(--hdr);max-width:var(--max);margin:0 auto; padding-inline:var(--pad)} /* Official supplied lockup. The source carries generous transparent padding; this frame removes only that padding while keeping its pixels untouched. */ .logo{display:flex;align-items:center;flex:none} .logo-art{position:relative;display:block;width:132px;aspect-ratio:273/113;overflow:hidden;flex:none} .logo-art img{position:absolute;max-width:none;width:183.15%;height:auto;left:-54.21%;top:-169.91%; transition:opacity var(--t-fast) var(--ease)} .logo:hover .logo-art img{opacity:.82} /* scoped to the header bar so the drawer's