/* ============================================================================ SwathIQ Brand System -- "Operator Instrument" Hail intelligence for roofing & restoration. By CCDocs. Single source of truth for all three funnel pages. Display: Fraunces (optical serif) | Body: Schibsted Grotesk | Data: Geist Mono Accent: electric warning amber, used with discipline. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Schibsted+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"); :root{ /* ---- surface elevations (never flat #000) ---- */ --bg: #07090d; /* page floor */ --surface-0: #0a0d12; /* base panels */ --surface-1: #0e131a; /* raised cards */ --surface-2: #131a23; /* hover / inputs */ --surface-3: #1a232f; /* active / popover */ /* ---- ink ---- */ --ink: #eef2f7; --ink-soft: #b7c2d0; --ink-dim: #7d8b9c; --ink-faint: #51606f; /* ---- borders ---- */ --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.13); --line-amber: rgba(255,176,0,.28); /* ---- the one accent: electric warning amber ---- */ --amber: #ffb000; --amber-bright: #ffc63d; --amber-deep: #c77f00; --amber-glow: rgba(255,176,0,.16); --amber-wash: rgba(255,176,0,.07); /* ---- secondary structural tint (NOT a second accent) ---- */ --ice: #6ea8d8; --ice-dim: rgba(110,168,216,.18); /* ---- semantic states ---- */ --ok: #44d39a; --warn: #ffb000; --danger: #ec5a6b; /* ---- type scale (fluid) ---- */ --t-display: clamp(2.9rem, 1.6rem + 5.6vw, 5.9rem); --t-h1: clamp(2.2rem, 1.4rem + 3.4vw, 4.0rem); --t-h2: clamp(1.7rem, 1.2rem + 2.0vw, 2.7rem); --t-h2-sec: clamp(1.55rem, 1.1rem + 1.3vw, 2.05rem); /* disciplined section / card-title tier */ --t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); --t-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); --t-body: 1.0625rem; --t-sm: 0.9375rem; --t-xs: 0.8125rem; --t-mono: 0.78rem; /* ---- spacing scale ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px; /* ---- radii ---- */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* ---- shadows ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.75); --shadow-amber: 0 0 0 1px var(--line-amber), 0 12px 40px -16px var(--amber-glow); /* ---- layout ---- */ --maxw: 1180px; --nav-h: 70px; --ease: cubic-bezier(.21,.6,.35,1); } /* ============================================================================ RESET ========================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)} body{ background:var(--bg); color:var(--ink); font-family:"Schibsted Grotesk",system-ui,sans-serif; font-size:var(--t-body); line-height:1.62; letter-spacing:-0.006em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; position:relative; min-height:100vh; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--amber);color:#1a1200} /* ============================================================================ ATMOSPHERE -- layered radial mesh + fine grain. Never flat. Two fixed pseudo-layers on ; pages stack content above (z-index:1). ========================================================================== */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 620px at 78% -8%, rgba(255,176,0,.10), transparent 60%), radial-gradient(760px 760px at 8% 4%, rgba(110,168,216,.07), transparent 58%), radial-gradient(1100px 900px at 50% 118%, rgba(255,176,0,.05), transparent 60%), linear-gradient(180deg, #080b10 0%, #07090d 42%, #060810 100%); } /* fine film grain via inline SVG fractal noise */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body > *{position:relative;z-index:1} /* faint radar-grid hairlines, optional opt-in on a section via .gridfield */ .gridfield{position:relative} .gridfield::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%); mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%); } .gridfield > *{position:relative;z-index:1} /* ============================================================================ TYPOGRAPHY ========================================================================== */ .display,h1,h2{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-weight:500; line-height:1.02; letter-spacing:-0.02em; } h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{ font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-h3);font-weight:600;line-height:1.18;letter-spacing:-0.015em; } .display{font-size:var(--t-display)} .display em{font-style:italic;font-weight:400;color:var(--amber)} .lead{font-size:var(--t-lead);color:var(--ink-soft);line-height:1.55;max-width:60ch} p{color:var(--ink-soft)} strong{color:var(--ink);font-weight:600} /* eyebrow / kicker -- mono, the instrument label */ .kicker{ font-family:"Geist Mono",ui-monospace,monospace; font-size:var(--t-mono);font-weight:500; letter-spacing:.22em;text-transform:uppercase; color:var(--amber); display:inline-flex;align-items:center;gap:var(--s-3); } .kicker::before{ content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--amber)); } .mono{font-family:"Geist Mono",ui-monospace,monospace;font-feature-settings:"tnum" 1} /* big data figure -- radar coords, lead counts, max hail size */ .stat{font-family:"Geist Mono",monospace;font-weight:600;font-feature-settings:"tnum" 1; font-size:clamp(1.6rem,1.2rem+1.4vw,2.1rem);line-height:1;color:var(--amber-bright); letter-spacing:-0.01em} .stat--ice{color:var(--ice)} .stat__unit{font-family:"Schibsted Grotesk",sans-serif;font-weight:500; font-size:.8rem;color:var(--ink-faint);margin-left:6px;letter-spacing:0} /* ============================================================================ WORDMARK -- text in the display face. "Swath" ink + "IQ" amber. ========================================================================== */ .wordmark{ font-family:"Fraunces",serif;font-optical-sizing:auto; font-weight:600;font-size:1.34rem;letter-spacing:-0.028em; color:var(--ink);line-height:1;display:inline-flex;align-items:baseline; } .wordmark .iq{color:var(--amber);font-style:italic;font-weight:500;margin-left:.5px} .wordmark .dot{width:5px;height:5px;border-radius:50%;background:var(--amber); margin-left:6px;align-self:center;box-shadow:0 0 10px var(--amber-glow)} /* ============================================================================ LAYOUT ========================================================================== */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} .section{padding-block:clamp(64px,9vw,128px)} .stack-sm > * + *{margin-top:var(--s-4)} .stack > * + *{margin-top:var(--s-6)} /* ============================================================================ NAV ========================================================================== */ .nav{ position:sticky;top:0;z-index:50;height:var(--nav-h); display:flex;align-items:center; background:rgba(8,11,16,.62); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line); } .nav__inner{width:100%;max-width:var(--maxw);margin-inline:auto; padding-inline:clamp(20px,5vw,40px); display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)} .nav__actions{display:flex;align-items:center;gap:var(--s-3)} /* ============================================================================ BUTTONS ========================================================================== */ .btn{ --pad-y:11px;--pad-x:20px; display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); padding:var(--pad-y) var(--pad-x); font-family:"Schibsted Grotesk",sans-serif; font-size:var(--t-sm);font-weight:600;letter-spacing:-0.01em; border:1px solid transparent;border-radius:var(--r-sm); cursor:pointer;white-space:nowrap; transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease); } .btn:active{transform:translateY(1px)} .btn--primary{ background:linear-gradient(180deg,var(--amber-bright),var(--amber)); color:#1a1200; box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 30px -12px var(--amber-glow); } .btn--primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 40px -12px rgba(255,176,0,.4); transform:translateY(-1px); } .btn--ghost{ background:rgba(255,255,255,.02);color:var(--ink-soft); border-color:var(--line-strong); } .btn--ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-amber)} .btn--lg{--pad-y:15px;--pad-x:28px;font-size:1rem;border-radius:var(--r-md)} .btn--block{width:100%} /* ============================================================================ FIELDS ========================================================================== */ .field{display:flex;flex-direction:column;gap:var(--s-2)} .field__label{ font-family:"Geist Mono",monospace;font-size:var(--t-xs);font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim); } .field__hint{font-size:var(--t-xs);color:var(--ink-faint)} .input,.select,textarea.input{ width:100%;padding:12px 14px; background:var(--surface-0); color:var(--ink); font-size:var(--t-sm); border:1px solid var(--line-strong);border-radius:var(--r-sm); transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .input::placeholder,textarea.input::placeholder{color:var(--ink-faint)} .input:hover,.select:hover{border-color:rgba(255,255,255,.2)} .input:focus,.select:focus,textarea.input:focus{ outline:none;border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-wash); background:var(--surface-1); } .select{ appearance:none;cursor:pointer;padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237d8b9c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center; } /* ============================================================================ CARD ========================================================================== */ .card{ background:linear-gradient(180deg, var(--surface-1), var(--surface-0)); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-6); position:relative; transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .card--hover:hover{ border-color:var(--line-amber); transform:translateY(-3px); box-shadow:var(--shadow-lg); } .card__top{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)} /* ============================================================================ BADGE ========================================================================== */ .badge{ display:inline-flex;align-items:center;gap:var(--s-2); padding:5px 11px;border-radius:var(--r-pill); font-family:"Geist Mono",monospace;font-size:var(--t-xs);font-weight:500; letter-spacing:.04em; background:var(--amber-wash);color:var(--amber-bright); border:1px solid var(--line-amber); } .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--amber); box-shadow:0 0 8px var(--amber);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} .badge--ice{background:var(--ice-dim);color:var(--ice);border-color:rgba(110,168,216,.3)} .badge--ice .dot{background:var(--ice);box-shadow:0 0 8px var(--ice)} /* ============================================================================ FOOTER ========================================================================== */ .footer{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-7);margin-top:var(--s-9)} .footer__inner{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:flex-start; justify-content:space-between} .footer__brand{max-width:320px} .footer__by{font-family:"Geist Mono",monospace;font-size:var(--t-xs); letter-spacing:.06em;color:var(--ink-dim);margin-top:var(--s-3)} .footer__nav{display:flex;flex-wrap:wrap;gap:var(--s-6)} .footer__nav a{font-size:var(--t-sm);color:var(--ink-dim); transition:color .18s var(--ease)} .footer__nav a:hover{color:var(--amber)} .footer__base{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line); font-family:"Geist Mono",monospace;font-size:var(--t-xs);color:var(--ink-faint); letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between} /* ============================================================================ FOCUS-VISIBLE -- consistent, accent-keyed ========================================================================== */ a:focus-visible,button:focus-visible,.btn:focus-visible, .input:focus-visible,.select:focus-visible{ outline:2px solid var(--amber);outline-offset:2px;border-radius:var(--r-xs); } /* ============================================================================ PAGE-LOAD REVEAL -- one orchestrated staggered entrance ========================================================================== */ @keyframes reveal{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } /* Content is visible by default (no-JS / screenshot / crawler safe). Only when is set do reveal elements start hidden + animate. */ .reveal{opacity:1} html.js .reveal{opacity:0;animation:reveal .8s var(--ease) forwards} .reveal-1{animation-delay:.05s} .reveal-2{animation-delay:.15s} .reveal-3{animation-delay:.25s} .reveal-4{animation-delay:.35s} .reveal-5{animation-delay:.45s} .reveal-6{animation-delay:.55s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .reveal{opacity:1;transform:none} } /* ============================================================================ RESPONSIVE ========================================================================== */ @media (max-width:640px){ .nav__actions .btn--ghost{display:none} /* keep primary CTA only on small nav */ .nav__inner{padding-inline:16px;gap:12px} .wordmark{font-size:1.18rem} .nav__actions .btn--primary{--pad-x:14px;--pad-y:9px;font-size:.84rem} .footer__inner{flex-direction:column;gap:var(--s-6)} .footer__base{flex-direction:column;gap:var(--s-2)} }