/* ========================================================================== Efficient Digital Marketing Agency Warm paper stock, navy-black ink taken from the logo (#13132B), one cobalt signal. No gradients, no glow, no soft shadows — depth comes from three flat surface tones (paper / alt / dark) plus hairline rules. The hero has two modes. The DEFAULT is the static one, so a visitor with no JavaScript or a blocked GSAP CDN gets a correct page for free. script.js adds .hero-anim to only once it is certain it can animate. ========================================================================== */ :root { /* light surfaces, lightest to deepest */ --paper: #F6F4EF; --paper-alt: #EDEAE2; --surface: #FFFFFF; --ink: #13132B; /* straight from the logo */ --body: #4E5064; --muted: #85879B; --hairline: #DEDACF; --rule: #C9C4B6; /* the stronger structural rule */ --signal: #2340E8; --signal-dk: #1A31B8; /* dark band */ --d-bg: #13132B; --d-surface: #1A1A3A; --d-text: #F6F4EF; --d-body: #A0A2BA; --d-muted: #7C7E99; --d-hairline: #2A2A48; --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Fraunces", Georgia, "Times New Roman", serif; --wrap: 1240px; --gutter: clamp(1.25rem, 4vw, 3rem); --section: clamp(4.5rem, 9vw, 8rem); --radius: 3px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --header: 76px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* No scroll-behavior: smooth here on purpose — the hero is pinned by ScrollTrigger, and a global smooth-scroll property is the one thing it asks you not to combine with pinning. site.js handles anchors instead. */ html { -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, not hidden: `hidden` would make body a scroll container and quietly break every position:sticky on the page */ overflow-x: clip; } a { color: inherit; text-decoration: none; } img, svg, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 1px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; font-weight: 500; } .skip-link:focus { left: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* -------------------------------------------------------------------------- Surface bands — the layering -------------------------------------------------------------------------- */ .band-alt { background: var(--paper-alt); } .band-dark { /* re-point the tokens so every component inside just works */ --ink: var(--d-text); --body: var(--d-body); --muted: var(--d-muted); --hairline: var(--d-hairline); --rule: var(--d-hairline); --surface: var(--d-surface); background: var(--d-bg); color: var(--d-text); } /* -------------------------------------------------------------------------- Type primitives -------------------------------------------------------------------------- */ .eyebrow, .label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .eyebrow { margin-bottom: 1.15rem; } .section-title { font-family: var(--display); font-weight: 400; font-variation-settings: "opsz" 96; font-size: clamp(1.85rem, 3.5vw, 2.75rem); line-height: 1.12; letter-spacing: -0.01em; max-width: 22ch; } .section-title em { font-style: italic; } .section-lede { margin-top: 1.2rem; max-width: 58ch; color: var(--body); font-size: 1.08rem; } /* figures align wherever they appear — this is what the monospace was for */ .stat-fig, .step-no, .service-no, .failure-no, .rv, .contact-email, .tag { font-variant-numeric: tabular-nums lining-nums; } /* Every entrance effect is scoped to .js (set by an inline script in ). Without it the page renders in its final state — nothing depends on an observer that will never run. */ .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .js .reveal.in { opacity: 1; transform: none; } /* a hairline that draws itself across a row as the row arrives */ .rule-draw { position: relative; } .rule-draw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); transform-origin: left center; transition: transform 0.8s var(--ease) 0.12s; } .js .rule-draw::after { transform: scaleX(0); } .js .rule-draw.in::after { transform: scaleX(1); } .rule-draw:last-child::after { display: none; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; padding-block: 1.05rem; border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease; } .site-header.scrolled { background: var(--paper); border-bottom-color: var(--hairline); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: block; } .brand-logo { height: 32px; width: auto; } .brand-logo-light { height: 30px; filter: brightness(0) invert(1); opacity: 0.94; } .nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.9vw, 1.75rem); } .nav > a { font-size: 0.93rem; color: var(--body); padding-block: 0.3rem; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .nav > a:hover { color: var(--ink); border-bottom-color: var(--signal); } .nav-cta { color: var(--ink) !important; border: 1px solid var(--ink) !important; border-radius: var(--radius); padding: 0.48rem 1.05rem !important; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .nav-cta:hover { background: var(--ink); color: var(--paper) !important; } .nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; border: none; background: none; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle .bars { position: relative; width: 22px; height: 13px; } .nav-toggle .bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease), top 0.3s var(--ease); } .nav-toggle .bars span:nth-child(1) { top: 2px; } .nav-toggle .bars span:nth-child(2) { top: 9px; } .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { top: 6px; transform: rotate(-45deg); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-weight: 500; font-size: 0.97rem; line-height: 1; padding: 0.92rem 1.6rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease); } .btn-primary { background: var(--signal); color: #FFFFFF; border-color: var(--signal); } .btn-primary:hover { background: var(--signal-dk); border-color: var(--signal-dk); transform: translateY(-2px); } /* transparent explicitly: `appearance: none` does NOT clear the UA stylesheet's background-color:buttonface on