/* ============================================================ HIGH ST TIRE & AUTO REPAIR — SITE DESIGN SYSTEM v2.0 · branded LOCKED: red / blue / white / black. Original logo. Original hero video. This is an evolution of the existing identity, not a replacement of it. The premium comes from spacing, type scale, depth and restraint — NOT from swapping the palette to charcoal. ============================================================ */ /* fonts are loaded from the page — an @import here would serialise HTML -> CSS -> fonts instead of fetching CSS and fonts in parallel */ :root{ /* ---- BLUE: the existing brand navy, extended into a real ramp. --navy-800 is the site's current theme-color, kept exactly. ---- */ --navy-950:#05080F; --navy-900:#070D20; --navy-800:#0B1533; /* EXISTING BRAND NAVY — do not change */ --navy-700:#132247; --navy-600:#1C3060; --navy-500:#2A4380; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); /* ---- RED: the accent. Used sparingly — one thing per view. ---- */ --red:#ED1308; /* established High St red */ --red-hi:#FF3A22; --red-deep:#A80C04; --blue:#004FF9; /* established High St blue — micro-accent only */ --blue-dim:#2E6BFF; /* ---- WHITE / BLACK ---- */ --white:#FFFFFF; --bone:#EEF2FA; /* body text on navy — never pure white */ --slate:#94A3C4; /* secondary text */ --slate-dim:#63719A; --black:#04060C; /* ---- TYPE: one variable family across its width axis ---- */ --font:"Archivo",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --wd-display:118; --wd-body:100; --wd-label:64; /* ---- SPACE ---- */ --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:36px; --s6:58px; --s7:94px; --gut:clamp(20px,4.5vw,72px); --max:1580px; --measure:60ch; /* ---- MOTION: heavy, precise, mechanical. Nothing bounces. ---- */ --ease:cubic-bezier(.16,.84,.24,1); --ease-out:cubic-bezier(.22,1,.36,1); --t-out:220ms; /* outgoing copy — Constants v1.2 */ --t-head:440ms; /* incoming head */ --t-body:360ms; /* incoming body */ --t-stag:80ms; /* head→body */ --t-fast:180ms; --t-base:320ms; --radius:2px; /* near-square. Automotive, not SaaS. */ --hdr:66px; /* compact, after scroll */ --hdr-tall:clamp(88px,9.4vw,128px); /* banner, at rest */ --logo:46px; --logo-w:144px; /* 2.5:1 x 1.25 stretch */ --logo-tall:clamp(62px,6.6vw,96px); --logo-tall-w:clamp(194px,20.6vw,300px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--navy-900); color:var(--bone); font-family:var(--font); font-variation-settings:'wdth' var(--wd-body); font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video,canvas,svg{display:block;max-width:100%} a{color:inherit} :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--red-hi);outline-offset:3px;border-radius:var(--radius); } ::selection{background:var(--red);color:var(--white)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{ position:absolute;left:var(--gut);top:-120px;z-index:200; background:var(--red);color:var(--white);padding:14px 22px; font-variation-settings:'wdth' var(--wd-label);font-weight:700;font-size:12px; letter-spacing:.16em;text-transform:uppercase;text-decoration:none; transition:top var(--t-base) var(--ease); } .skip:focus{top:14px} /* ============================================================ TYPE ROLES ============================================================ */ .eyebrow{ font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:clamp(11px,.76vw,13.5px);letter-spacing:.24em; text-transform:uppercase;color:var(--slate);margin:0; display:flex;align-items:center;gap:12px; } .eyebrow::before{ content:"";width:clamp(22px,2vw,40px);height:2px;background:var(--red);flex:none; } .display{ font-variation-settings:'wdth' var(--wd-display); font-weight:800;text-transform:uppercase;letter-spacing:-.02em; line-height:.92;margin:0;color:var(--white); font-size:clamp(38px,6.4vw,116px); } .h2{ font-variation-settings:'wdth' var(--wd-display); font-weight:800;text-transform:uppercase;letter-spacing:-.015em; line-height:.96;margin:0;color:var(--white); font-size:clamp(28px,4.1vw,74px); } .h3{ font-variation-settings:'wdth' 104; font-weight:700;letter-spacing:-.004em;line-height:1.2;margin:0; color:var(--white);font-size:clamp(18px,1.85vw,28px); } .body{color:var(--slate);font-size:clamp(16px,1.02vw,19.5px);line-height:1.66;max-width:var(--measure);margin:0} .body strong{color:var(--bone);font-weight:600} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em} .key{ font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate); } /* ============================================================ LAYOUT ============================================================ */ .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(64px,10vh,140px);position:relative} .section--tight{padding-block:clamp(44px,7vh,68px)} .section--alt{background:var(--navy-800)} .section--deep{background:var(--navy-950)} .hr{border:0;border-top:1px solid var(--line);margin:0} .grid{display:grid;gap:clamp(18px,2.4vw,30px)} .grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .head{display:grid;gap:16px;margin-bottom:clamp(30px,4.4vh,52px)} .head .body{margin-top:2px} /* ============================================================ BUTTONS — square-ish, weighted, no glow ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:clamp(50px,3.3vw,62px);padding:clamp(14px,1vw,20px) clamp(28px,2.2vw,40px); background:var(--red);color:var(--white); border:1px solid var(--red);border-radius:var(--radius); text-decoration:none;cursor:pointer; font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:clamp(12.5px,.88vw,15px);letter-spacing:.16em;text-transform:uppercase; transition:transform var(--t-base) var(--ease),background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .btn:hover{transform:translateY(-2px);background:var(--red-hi);border-color:var(--red-hi)} .btn:active{transform:translateY(0)} .btn--ghost{background:transparent;color:var(--white);border-color:var(--line-2)} .btn--ghost:hover{background:var(--navy-700);border-color:var(--slate);transform:translateY(-2px)} .btn--light{background:var(--white);color:var(--navy-800);border-color:var(--white)} .btn--light:hover{background:var(--bone);border-color:var(--bone)} .btn--sm{min-height:42px;padding:11px 20px;font-size:11.5px;letter-spacing:.13em} .btn-row{display:flex;flex-wrap:wrap;gap:10px} /* ============================================================ HEADER ============================================================ */ /* HEADER — banner at rest, compact once you start reading. The logo carries the top of the page at full banner scale, then steps down so it never eats the viewport while scrolling. --hdr stays at the COMPACT height because everything that offsets against a sticky header (anchors, the mobile plate) only ever meets it in its compact state. */ .hdr{ position:sticky;top:0;z-index:100; height:var(--hdr-tall); display:flex;align-items:center;gap:clamp(16px,2.4vw,34px); padding-inline:var(--gut); background:rgba(6,11,26,.94); border-bottom:1px solid var(--line); transition:height 420ms var(--ease),background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .hdr.is-solid{ height:var(--hdr); background:rgba(4,7,14,.98); border-bottom-color:var(--line-2); } .hdr__logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none} /* Explicit box, not transform:scaleX — a transform reserves no layout width and the logo would render past its box into the nav. Ratio held at source 2.5:1 plus the established 1.25 horizontal stretch. */ .hdr__logo img{ height:var(--logo-tall);width:var(--logo-tall-w); object-fit:fill; transition:height 420ms var(--ease),width 420ms var(--ease); } .hdr.is-solid .hdr__logo img{height:var(--logo);width:var(--logo-w)} .hdr__logo .fallback{ font-variation-settings:'wdth' var(--wd-display); font-weight:800;font-size:19px;letter-spacing:-.01em;text-transform:uppercase;color:var(--white); line-height:1; } .hdr__logo .fallback b{color:var(--red)} .nav{display:flex;align-items:center;gap:4px;margin-left:auto} .nav a{ padding:10px 14px;text-decoration:none;border-radius:var(--radius); font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:clamp(11.5px,.8vw,13.5px);letter-spacing:.15em;text-transform:uppercase; color:var(--slate);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); position:relative; } .nav a:hover{color:var(--white);background:rgba(255,255,255,.05)} .nav a[aria-current="page"]{color:var(--white)} .nav a[aria-current="page"]::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--red); } .hdr__act{display:flex;gap:8px;flex:none} .burger{ display:none;width:44px;height:44px;margin-left:auto; background:transparent;border:1px solid var(--line-2);border-radius:var(--radius); color:var(--white);cursor:pointer;padding:0; } .burger span{display:block;width:18px;height:2px;background:currentColor;margin:3px auto;transition:transform var(--t-base) var(--ease),opacity var(--t-fast)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* 921-1150px: banner + five nav items + two buttons is a tight fit. Step the logo down and tighten the nav rather than let them collide. */ @media (min-width:921px) and (max-width:1150px){ :root{ --logo-tall:clamp(54px,5.4vw,64px); --logo-tall-w:clamp(169px,16.9vw,200px); --hdr-tall:clamp(80px,8.4vw,94px); } .hdr{gap:14px} .nav a{padding:10px 9px;font-size:10.5px;letter-spacing:.10em} .nav a[aria-current="page"]::after{left:9px;right:9px} .hdr .btn--sm{padding:10px 14px;letter-spacing:.10em} } @media (max-width:900px){ :root{ --hdr:60px; --hdr-tall:clamp(74px,17vw,88px); --logo:42px; --logo-w:131px; --logo-tall:clamp(52px,12vw,64px); --logo-tall-w:clamp(163px,37.5vw,200px); } } @media (max-width:920px){ .nav{ /* anchored to the header itself so it tracks the banner/compact change */ position:absolute;top:100%;left:0;right:0;inset:auto; flex-direction:column;align-items:stretch;gap:0;margin:0; background:var(--navy-950);border-bottom:1px solid var(--line-2); padding:8px var(--gut) 18px; transform:translateY(-8px);opacity:0;pointer-events:none; transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease); } .nav.is-open{transform:none;opacity:1;pointer-events:auto} .nav a{padding:15px 0;font-size:13px;border-bottom:1px solid var(--line)} .nav a[aria-current="page"]::after{left:0;right:auto;width:20px;bottom:8px} .hdr__act{display:none} .burger{display:block} } /* ============================================================ HERO — original approved video ============================================================ */ .hero{position:relative;min-height:min(92svh,1040px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-950)} .hero__media{position:absolute;inset:0} .hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover} .hero__veil{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,rgba(5,8,15,.62) 0%,rgba(5,8,15,.10) 34%,rgba(5,8,15,.86) 100%), linear-gradient(90deg,rgba(11,21,51,.80) 0%,rgba(11,21,51,.18) 62%,rgba(5,8,15,.34) 100%); } .hero__in{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(44px,7vh,80px);max-width:var(--max);margin-inline:auto} .hero .display{max-width:15ch} .hero .display em{font-style:normal;color:var(--red-hi)} .hero__sub{margin-top:20px;max-width:46ch;color:var(--bone);font-size:clamp(15.5px,1.28vw,22px)} .hero .btn-row{margin-top:30px} .hero__strip{ display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px; padding-top:20px;position:relative;border-top:1px solid var(--line); } .hero__strip::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--blue)} .hero__strip span{font-family:var(--mono);font-size:clamp(11.5px,.82vw,14px);letter-spacing:.06em;color:var(--slate)} .hero__strip b{color:var(--white);font-weight:500} /* ============================================================ CARDS / SERVICES ============================================================ */ .card{ position:relative;background:var(--navy-800); border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.4vw,44px); transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease),background var(--t-base) var(--ease); overflow:hidden; } .card::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--red);transform:scaleY(0);transform-origin:top; transition:transform var(--t-base) var(--ease); } .card:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--navy-700)} .card:hover::before{transform:scaleY(1)} .card .h3{margin-bottom:10px} .card .body{font-size:clamp(15px,.98vw,18px)} .card__n{font-family:var(--mono);font-size:11px;color:var(--blue-dim);letter-spacing:.14em;display:block;margin-bottom:14px} /* PRICING The qualifier used to sit tiny beside a large number, so a quick scan read "$75" rather than "from $75". It is now stacked above the figure at a readable size — you cannot take in the number without taking in the condition. That is a counter-conversation problem before it is a design one. The first row is the lead and is weighted accordingly. */ .price{ display:flex;align-items:flex-end;justify-content:space-between;gap:20px; padding:20px 0;border-top:1px solid var(--line); } .price:first-of-type{border-top:0} .price__n{ font-variation-settings:'wdth' 104;font-weight:700; font-size:clamp(16px,1.1vw,21px);color:var(--white);line-height:1.3; } .price__v{display:grid;justify-items:end;gap:3px;white-space:nowrap} .price__v i{ font-style:normal;font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--slate); } .price__v b{ font-family:var(--mono);font-weight:500;font-size:clamp(24px,1.9vw,34px); color:var(--white);line-height:1;font-variant-numeric:tabular-nums; } .price--lead{ position:relative;padding:26px 0 24px 22px;border-top:0; border-bottom:1px solid var(--line-2);margin-bottom:4px; } .price--lead::before{ content:"";position:absolute;left:0;top:26px;bottom:24px;width:3px;background:var(--red); } .price--lead .price__n{font-size:clamp(19px,1.42vw,27px)} .price--lead .price__v b{font-size:clamp(38px,3.3vw,58px);letter-spacing:-.02em} .price--lead .price__v i{color:var(--red-hi)} .price-note{ margin-top:20px;padding-top:16px;border-top:1px solid var(--line); font-size:13px;color:var(--slate-dim); } @media (max-width:520px){ .price{align-items:flex-start;flex-direction:column;gap:8px} .price__v{justify-items:start} .price--lead{padding-left:18px} .price--lead .price__v b{font-size:34px} } /* hero scan line: same discipline, smaller */ .hero__strip i{ font-style:normal;font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate-dim);margin:0 5px 0 3px; } .shot{ position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line); background:var(--navy-800) repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 9px,transparent 9px 18px); } .shot img{background:transparent} .preview__media{background:var(--navy-800) repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 9px,transparent 9px 18px)} .shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 900ms var(--ease)} .shot:hover img{transform:scale(1.04)} .shot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:14px 16px; background:linear-gradient(180deg,transparent,rgba(4,6,12,.88)); font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--white); } /* ============================================================ REVEAL — one entrance for the whole site ============================================================ */ .rise{opacity:0;transform:translateY(20px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)} .rise.in{opacity:1;transform:none} .rise.d1{transition-delay:80ms}.rise.d2{transition-delay:160ms}.rise.d3{transition-delay:240ms} @media (prefers-reduced-motion:reduce){ .rise{opacity:1 !important;transform:none !important} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* ============================================================ CINEMATIC SCENE — shared by Alignment and Fleet ============================================================ */ .scene{position:relative;background:var(--navy-950);border-block:1px solid var(--line)} .scene__stage{position:relative} .plate{position:relative;overflow:hidden;background:var(--black)} .plate video,.plate img{ width:100%;height:56svh;min-height:290px; object-fit:cover;object-position:50% 50%; } /* two stacked layers so a chapter change is a crossfade, never a black flash */ .plate{display:grid} .plate > video,.plate > img{grid-area:1/1;opacity:0;transition:opacity 420ms var(--ease)} .plate > video.on,.plate > img.on{opacity:1} /* The slow push-in used to be a transform written on every scroll frame. It is a CSS animation now: runs on the compositor, costs the scroll thread nothing, and starts when a clip becomes active. */ @keyframes hst-push{from{transform:scale(1)}to{transform:scale(1.05)}} .plate > video.on{animation:hst-push 14s linear forwards} @media (prefers-reduced-motion:reduce){.plate > video.on{animation:none}} .plate__veil{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg,rgba(5,8,15,var(--veilL,.62)) 0%,rgba(5,8,15,.18) 58%,rgba(5,8,15,.36) 100%), linear-gradient(180deg,rgba(5,8,15,.34) 0%,rgba(5,8,15,0) 32%,rgba(5,8,15,.50) 100%); transition:background 260ms linear; } .scene__copy{padding:clamp(34px,6vh,58px) var(--gut) 0;max-width:var(--max);margin-inline:auto} .chapters{display:grid;gap:42px;margin-top:34px} .chap__n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--blue-dim)} .chap h3{ font-variation-settings:'wdth' var(--wd-display); font-weight:800;text-transform:uppercase;letter-spacing:-.016em;line-height:.94; font-size:clamp(28px,4.5vw,70px);margin:10px 0 0;color:var(--white); } .chap h3 .msk{display:block;overflow:hidden} .chap p{margin:clamp(13px,1.1vw,20px) 0 0;max-width:44ch;color:var(--slate);font-size:clamp(15.5px,1.02vw,19px)} .scene__cta{padding:clamp(30px,5vh,48px) var(--gut) clamp(52px,8vh,80px);max-width:var(--max);margin-inline:auto} .ticks{display:none;gap:6px} .ticks i{flex:1;height:2px;background:var(--line-2);transition:background 400ms var(--ease)} .ticks i.on{background:var(--red)} .liftline{display:none} /* --- the scene plays itself. No pin, no scroll coupling. --------- */ .scene.live .scene__stage{ position:relative;height:min(88svh,940px);min-height:520px;overflow:hidden; } .scene.live .plate{position:absolute;inset:0} .scene.live .plate video,.scene.live .plate img{height:100%;min-height:0} .scene.live .scene__copy{ position:absolute;top:50%;transform:translateY(-50%); left:max(var(--gut), calc((100vw - var(--max)) / 2)); z-index:5;padding:0;width:min(680px,44vw);max-width:none; } .scene.live .chapters{ display:block;position:relative;margin-top:26px; min-height:clamp(190px,25vh,250px); } .scene.live .chap{ position:absolute;inset:auto 0 auto 0; opacity:0;visibility:hidden;pointer-events:none; transition:opacity 260ms var(--ease); } .scene.live .chap.on{opacity:1;visibility:visible;pointer-events:auto} .scene.live .chap.on h3 .msk > span{animation:hst-rise 460ms var(--ease-out) both} @keyframes hst-rise{from{transform:translateY(104%)}to{transform:none}} .scene.live .scene__cta{ position:absolute;bottom:clamp(38px,6.5vh,72px);z-index:6; left:max(var(--gut), calc((100vw - var(--max)) / 2)); padding:0;width:min(680px,44vw);max-width:none; } .scene.live .scene__cta .body{display:none} .scene.live .ticks{ display:flex;position:absolute;top:calc(50% + clamp(120px,16vh,190px)); left:max(var(--gut), calc((100vw - var(--max)) / 2)); width:min(680px,44vw);z-index:5; } .scene.live .liftline{ display:block;position:absolute;right:8vw;top:17vh;bottom:17vh;width:1px; background:var(--slate);opacity:.22;z-index:4;transition:opacity 400ms var(--ease); } .scene.live .liftline::before,.scene.live .liftline::after{ content:"";position:absolute;left:-4px;width:9px;height:1px;background:var(--slate); } .scene.live .liftline::before{top:0}.scene.live .liftline::after{bottom:0} /* tap-to-start, only shown if the browser refuses muted autoplay */ .scene__tap{ position:absolute;inset:0;z-index:7;display:none; align-items:center;justify-content:center; background:rgba(4,7,14,.45);border:0;cursor:pointer; } .scene.needs-tap .scene__tap{display:flex} .scene__tap span{ display:inline-flex;align-items:center;gap:10px;padding:14px 24px; background:var(--red);color:var(--white); font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase; } /* --- mobile: same behaviour, stacked layout ---------------------- */ @media (max-width:900px){ .scene.live .scene__stage{height:auto;min-height:0;overflow:visible} .scene.live .plate{position:relative;inset:auto;height:46svh} .scene.live .plate video,.scene.live .plate img{height:46svh} .scene.live .scene__copy,.scene.live .scene__cta{ position:relative;left:auto;top:auto;bottom:auto;transform:none; width:auto;padding-inline:var(--gut); } .scene.live .scene__copy{padding-top:clamp(28px,5vh,46px)} .scene.live .chapters{margin-top:20px;min-height:210px} .scene.live .chap h3{font-size:clamp(29px,8.4vw,44px)} .scene.live .chap p{max-width:none;font-size:14.5px} .scene.live .scene__cta{padding-block:clamp(24px,4vh,36px) clamp(46px,8vh,72px)} .scene.live .scene__cta .body{display:block} .scene.live .liftline{display:none} .scene.live .ticks{ position:relative;left:auto;top:auto;width:auto; margin:0 var(--gut) 0; } .scene.live .plate__veil{background:linear-gradient(180deg,rgba(5,8,15,.30) 0%,rgba(5,8,15,.08) 46%,rgba(5,8,15,.72) 100%)} .btn-row .btn{flex:1 1 100%} } /* ============================================================ PREVIEW BANDS (home) — short, non-pinned ============================================================ */ .preview{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--navy-800);min-height:min(56svh,480px);display:flex;align-items:flex-end} .preview__media{position:absolute;inset:0} .preview__media video,.preview__media img{width:100%;height:100%;object-fit:cover} .preview__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,15,.42) 0%,rgba(5,8,15,.20) 40%,rgba(5,8,15,.92) 100%)} .preview__in{position:relative;z-index:2;padding:clamp(24px,3.4vw,40px);width:100%} .preview__in .h2{font-size:clamp(26px,3.2vw,42px)} .preview__in .body{margin-top:12px;max-width:40ch;font-size:15px} .preview__in .btn-row{margin-top:22px} /* ============================================================ CONTACT / FOOTER ============================================================ */ .contact-grid{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .dl{margin:0;display:grid;gap:16px} .dl div{display:grid;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--line)} .dl dt{font-variation-settings:'wdth' var(--wd-label);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)} .dl dd{margin:0;font-size:clamp(16.5px,1.15vw,21px);color:var(--white)} .dl dd a{text-decoration:none;border-bottom:1px solid var(--line-2);transition:border-color var(--t-fast)} .dl dd a:hover{border-color:var(--red)} .ftr{background:var(--navy-950);border-top:1px solid var(--line);padding-block:clamp(44px,6vh,72px)} .ftr__top{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-bottom:32px;border-bottom:1px solid var(--line)} .ftr__logo img{height:56px;width:175px;object-fit:fill} .ftr h4{font-variation-settings:'wdth' var(--wd-label);font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin:0 0 14px} .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .ftr a{color:var(--bone);text-decoration:none;font-size:clamp(14.5px,.95vw,17px);transition:color var(--t-fast)} .ftr a:hover{color:var(--red-hi)} .ftr__btm{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;padding-top:24px;font-size:13px;color:var(--slate-dim)} /* ============================================================ MOBILE STICKY CALL BAR — conversion never depends on a scene ============================================================ */ .callbar{display:none} @media (max-width:900px){ .callbar{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120; gap:1px;background:var(--line-2); padding-bottom:env(safe-area-inset-bottom); } .callbar a{ flex:1;min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--navy-950);color:var(--white);text-decoration:none; font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase; } .callbar a.primary{background:var(--red)} body{padding-bottom:54px} } /* ============================================================ CARD RHYTHM (Exchange 2, P2) The six-equal-boxes grid was the most template-like part of the system. Same content, different weighting: one lead card carries the section, the rest drop their boxes and become a hairline-ruled list. Hierarchy instead of repetition. ============================================================ */ .grid--rhythm{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .grid--rhythm > .card:first-child{ grid-column:1 / -1; background:var(--navy-800); border:1px solid var(--line-2); padding:clamp(28px,3.4vw,44px); display:grid;gap:6px; } .grid--rhythm > .card:first-child .h3{font-size:clamp(23px,2.6vw,32px)} .grid--rhythm > .card:first-child .body{font-size:16.5px;max-width:52ch} .grid--rhythm > .card:first-child .card__n{color:var(--blue)} .grid--rhythm > .card:first-child::before{width:3px} /* supporting cards: no box, just a rule and space */ .grid--rhythm > .card:not(:first-child){ background:transparent;border:0;border-top:1px solid var(--line); border-radius:0;padding:26px 0 8px; } .grid--rhythm > .card:not(:first-child)::before{left:-1px;width:2px;top:-1px} .grid--rhythm > .card:not(:first-child):hover{ background:transparent;transform:none;padding-left:16px; } .grid--rhythm > .card:not(:first-child):hover::before{transform:scaleY(1)} .grid--rhythm > .card{transition:padding-left var(--t-base) var(--ease),background var(--t-base) var(--ease),transform var(--t-base) var(--ease)} /* on wide screens let the supporting row breathe in three columns with a shared top rule rather than six separate outlines */ @media (min-width:901px){ .grid--rhythm{column-gap:clamp(26px,3vw,48px);row-gap:0} .grid--rhythm > .card:first-child{margin-bottom:clamp(18px,2.4vw,34px)} } @media (max-width:900px){ .grid--rhythm > .card:not(:first-child):hover{padding-left:0} } /* ============================================================ LANGUAGE ============================================================ */ .lang{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:42px;padding:0 12px; border:1px solid var(--line-2);border-radius:var(--radius); color:var(--bone);text-decoration:none; font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:11.5px;letter-spacing:.14em; transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease); } .lang:hover{background:var(--navy-700);border-color:var(--blue);color:var(--white)} .langbar{display:none} @media (max-width:900px){ /* the header actions are hidden on phones, so the switch needs its own home — above the sticky call bar, where it cannot be missed */ .langbar{ display:block;margin:0;padding:16px var(--gut) 22px; background:var(--navy-950);border-top:1px solid var(--line);text-align:center; } .langbar a{ color:var(--slate);text-decoration:none; font-variation-settings:'wdth' var(--wd-label); font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase; border-bottom:1px solid var(--blue);padding-bottom:4px; } }