/* ============================================================ Inner West Anti-Gravity Treadmill — site.css Design system (tokens + components). Navy base + cyan accent. Blend: nexus (glass, mono labels, serif accent) + pony-house (reveals, dot grid). ============================================================ */ /* -- Fonts (self-hosted before ship; CDN link is in for now) -- */ /* ============================================================ TOKENS ============================================================ */ :root { /* Surfaces — deep navy scale */ --navy: #0a1430; /* page background */ --navy-2: #0f1c40; /* card / surface */ --navy-3: #16264f; /* raised surface / hover */ --navy-line: #1d2f5c; /* solid divider on navy */ /* Ink */ --ink: #eaf1ff; --ink-muted: rgba(234,241,255,0.64); --ink-faint: rgba(234,241,255,0.42); /* Accent — cyan → blue (from the SportsFit arrow mark) */ --cyan: #2dd6ec; --cyan-soft: #7fe6f4; --blue: #3f7dfb; --accent-grad: linear-gradient(100deg, var(--cyan), var(--blue)); /* Borders */ --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --glass: rgba(255,255,255,0.03); --glass-2: rgba(255,255,255,0.05); /* Status (clinical criteria / red flags) */ --green: #34d39a; --amber: #f5b544; --red: #f8746a; /* Type */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --tracking-eyebrow: 0.22em; /* Spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* Shadows */ --shadow-card: 0 24px 60px -30px rgba(0,0,0,0.7); --shadow-glow: 0 0 60px -12px rgba(45,214,236,0.45); --ease: cubic-bezier(0.16, 1, 0.3, 1); --maxw: 1200px; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--navy); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, picture, video { max-width: 100%; display: block; } strong { color: var(--ink); font-weight: 700; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-6); } .wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--sp-6); } .section { padding: var(--sp-24) 0; position: relative; } .section--tight { padding: var(--sp-16) 0; } /* Accent word (nexus formula) */ .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; } .grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Eyebrow label */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--cyan); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--cyan); opacity: 0.6; } .eyebrow--center::after { content: ""; width: 22px; height: 1px; background: var(--cyan); opacity: 0.6; } /* Section heading block */ .section-head { max-width: 720px; } .section-head.center { margin: 0 auto; text-align: center; } .section-head h2 { font-size: clamp(30px, 5vw, 48px); margin-top: var(--sp-4); } .section-head p { color: var(--ink-muted); margin-top: var(--sp-5); font-size: 18px; } /* Ambient atmosphere */ .aura { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 50% at 15% 0%, rgba(63,125,251,0.16), transparent 60%), radial-gradient(50% 45% at 90% 20%, rgba(45,214,236,0.12), transparent 60%); } .dotgrid { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); } .section > .wrap, .section > .wrap-narrow { position: relative; z-index: 1; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .btn-primary { background: var(--accent-grad); color: #041022; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 70px -8px rgba(45,214,236,0.6); } .btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--border-strong); backdrop-filter: blur(8px); } .btn-ghost:hover { background: var(--glass-2); border-color: var(--cyan); transform: translateY(-2px); } .btn-lg { padding: 17px 32px; font-size: 16px; } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ============================================================ HEADER / NAV ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10,20,48,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; } .nav-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); } .nav-links { display: flex; align-items: center; gap: var(--sp-8); list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink-muted); transition: color .2s; padding: 8px 0; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); } .nav-cta { display: inline-flex; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; } /* Dropdown */ .nav-dd { position: relative; } .nav-dd > button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--ink-muted); padding: 8px 0; } .nav-dd > button:hover, .nav-dd[aria-expanded="true"] > button { color: var(--ink); } .nav-dd .chev { width: 14px; height: 14px; transition: transform .25s; } .nav-dd[aria-expanded="true"] .chev { transform: rotate(180deg); } .nav-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 260px; background: var(--navy-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2); box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transition: .22s var(--ease); } .nav-dd:hover .nav-menu, .nav-dd[aria-expanded="true"] .nav-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-menu a { display: block; padding: 11px 14px; border-radius: var(--r-sm); font-size: 15px; color: var(--ink-muted); } .nav-menu a:hover { background: var(--glass-2); color: var(--ink); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: var(--sp-24) 0 var(--sp-20); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); align-items: center; } .hero h1 { font-size: clamp(44px, 7vw, 82px); line-height: 0.98; letter-spacing: -0.03em; } .hero .lead { font-size: 20px; color: var(--ink-muted); margin-top: var(--sp-6); max-width: 30ch; } .hero .lead .serif { color: var(--cyan-soft); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); } .hero-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--border); list-style: none; padding-left: 0; } .hero-badges li { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--ink-muted); } .hero-badges li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .hero-media { position: relative; } .hero-media .frame { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-card); background: var(--navy-2); aspect-ratio: 4/5; } .hero-media .frame picture { display: block; width: 100%; height: 100%; } .hero-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; } .hero-media .glowring { position: absolute; inset: -1px; border-radius: var(--r-xl); pointer-events: none; background: linear-gradient(140deg, rgba(45,214,236,0.5), transparent 45%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; } .hero-media .float-stat { position: absolute; bottom: 18px; left: 18px; right: 18px; background: rgba(10,20,48,0.7); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); display: flex; gap: var(--sp-6); } .float-stat .stat { flex: 1; } .float-stat .n { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); } .float-stat .n .grad-text { font-weight: 700; } .float-stat .l { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; } /* ============================================================ CARDS / GRIDS ============================================================ */ .card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--glass-2); } .card h3 { font-size: 20px; margin-bottom: var(--sp-3); } .card p { color: var(--ink-muted); font-size: 15.5px; } .card-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(45,214,236,0.12); border: 1px solid rgba(45,214,236,0.28); margin-bottom: var(--sp-5); } .card-ico svg { width: 24px; height: 24px; stroke: var(--cyan); fill: none; stroke-width: 1.8; } .grid { display: grid; gap: var(--sp-5); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--benefits { grid-template-columns: repeat(3, 1fr); } /* Condition card (link) */ .cond-card { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .cond-card:hover { transform: translateY(-3px); border-color: var(--cyan); background: var(--glass-2); } .cond-card .k { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .cond-card p { color: var(--ink-muted); font-size: 14.5px; flex: 1; } .cond-card .go { font-size: 14px; color: var(--cyan); font-family: var(--font-display); font-weight: 600; } /* Split feature (image + text) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; } .split.reverse .split-media { order: 2; } .split-media { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-strong); background: linear-gradient(160deg, #16264f, #0b1533); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; } .split-media picture { display: block; width: 100%; height: 100%; } .split-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Vignette so bright product shots read as framed photos on the dark theme */ .split-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 14px rgba(8,16,42,0.5); border-radius: inherit; background: linear-gradient(180deg, rgba(8,16,42,0.10), transparent 30%, rgba(8,16,42,0.18)); } .split-body h2 { font-size: clamp(26px, 4vw, 40px); } .split-body p { color: var(--ink-muted); margin-top: var(--sp-5); } .split-body .eyebrow { margin-bottom: var(--sp-4); } /* Compare table (BTL R-Force vs AlterG) */ .compare { width: 100%; border-collapse: collapse; margin-top: var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .compare th, .compare td { padding: var(--sp-4) var(--sp-5); text-align: left; font-size: 15px; border-bottom: 1px solid var(--border); } .compare thead th { background: var(--glass-2); font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); } .compare tbody td:first-child { color: var(--ink-muted); } .compare .yes { color: var(--cyan); font-weight: 600; } .compare tr:last-child td { border-bottom: 0; } /* Spec list */ .spec-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-3); } .spec-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--ink-muted); } .spec-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: rgba(45,214,236,0.12); border: 1px solid rgba(45,214,236,0.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd6ec' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; } /* ============================================================ VIDEO FACADE (YouTube click-to-load) ============================================================ */ /* auto-fit rather than a fixed 3, so adding a video doesn't strand one on its own row. These are 9/16 shorts, so they stay legible when narrow. */ .video-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-5); } /* Feature shot — one real photo of the machine in the clinic. The source is PORTRAIT (2:3); shown at its natural ratio it would tower over the section, so it is cropped to a landscape band. object-position is tuned to keep the practitioner's head AND the R-FORCE branding in frame — re-check it if the photo is ever swapped. */ .feature-shot { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--navy-2); } .feature-shot picture { display: block; } .feature-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; aspect-ratio: 16 / 9; display: block; } .feature-shot__cap { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-shadow: 0 2px 14px rgba(0,0,0,.85); } .video-facade { position: relative; aspect-ratio: 9/16; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); cursor: pointer; background: var(--navy-2); } .video-facade.wide { aspect-ratio: 16/9; } .video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: .3s; } .video-facade:hover img { opacity: 1; transform: scale(1.03); } .video-facade .play { position: absolute; inset: 0; display: grid; place-items: center; } .video-facade .play span { width: 62px; height: 62px; border-radius: 50%; background: rgba(10,20,48,0.6); backdrop-filter: blur(6px); border: 1px solid var(--border-strong); display: grid; place-items: center; transition: .25s var(--ease); } .video-facade:hover .play span { background: var(--accent-grad); border-color: transparent; transform: scale(1.08); } .video-facade .play svg { width: 22px; height: 22px; fill: var(--ink); margin-left: 3px; } .video-facade:hover .play svg { fill: #041022; } .video-facade .cap { position: absolute; left: 14px; bottom: 14px; right: 14px; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.8); } .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============================================================ TIMELINE (condition protocol phases) ============================================================ */ .timeline { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); } .phase { position: relative; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-16); } .phase::before { content: attr(data-n); position: absolute; left: var(--sp-6); top: var(--sp-6); font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--cyan); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(45,214,236,0.35); background: rgba(45,214,236,0.1); display: grid; place-items: center; } .phase .wk { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); } .phase h3 { font-size: 19px; margin: var(--sp-1) 0 var(--sp-3); } .phase ul { margin: 0; padding-left: var(--sp-5); color: var(--ink-muted); font-size: 15px; } .phase li { margin: 4px 0; } /* Checklist / criteria (status colours) */ .checklist { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); } .checklist.two { grid-template-columns: 1fr 1fr; } .check-item { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); border-left: 3px solid var(--green); } .check-item.flag { border-left-color: var(--red); } .check-item .t { font-family: var(--font-display); font-weight: 600; font-size: 16px; } .check-item p { color: var(--ink-muted); font-size: 14.5px; margin-top: 6px; } /* ============================================================ FAQ (native details) ============================================================ */ .faq { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); } .faq details { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-6); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); font-family: var(--font-display); font-weight: 600; font-size: 17px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 22px; color: var(--cyan); transition: transform .25s; font-family: var(--font-body); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .a { padding: 0 var(--sp-6) var(--sp-5); color: var(--ink-muted); font-size: 15.5px; } /* ============================================================ CTA BAND ============================================================ */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--sp-20) var(--sp-8); text-align: center; border: 1px solid var(--border-strong); background: radial-gradient(70% 120% at 50% 0%, rgba(63,125,251,0.22), transparent 60%), var(--navy-2); } .cta-band h2 { font-size: clamp(30px, 5vw, 50px); } .cta-band p { color: var(--ink-muted); max-width: 52ch; margin: var(--sp-5) auto 0; font-size: 18px; } .cta-band .hero-cta { justify-content: center; } .cta-band .fine { margin-top: var(--sp-6); font-size: 14px; color: var(--ink-faint); } /* ============================================================ BLOG ============================================================ */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-12); } .post-card { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .post-card:hover { transform: translateY(-3px); border-color: var(--border-strong); background: var(--glass-2); } .post-card .thumb { aspect-ratio: 16/10; overflow: hidden; position: relative; background: linear-gradient(160deg, #16264f, #0b1533); } .post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .post-card:hover .thumb img { transform: scale(1.04); } .post-card .thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px 10px rgba(8,16,42,0.45); } .pc-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; } .pc-date { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); } .post-card h3 { font-size: 18px; line-height: 1.22; } .post-card p { color: var(--ink-muted); font-size: 14.5px; flex: 1; } .post-card .go { color: var(--cyan); font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-top: var(--sp-2); } .pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-16); } .pagination a, .pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--border); font-family: var(--font-display); font-size: 15px; color: var(--ink-muted); } .pagination a:hover { border-color: var(--cyan); color: var(--ink); } .pagination .cur { background: var(--accent-grad); color: #041022; border-color: transparent; font-weight: 600; } .pagination .disabled { opacity: .35; } /* Article */ .article { max-width: 760px; margin: 0 auto; } .post-meta { display: flex; gap: var(--sp-4); color: var(--ink-faint); font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-top: var(--sp-4); } .article-figure { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-strong); aspect-ratio: 16/9; margin: var(--sp-8) 0 var(--sp-4); background: linear-gradient(160deg, #16264f, #0b1533); position: relative; } .article-figure img { width: 100%; height: 100%; object-fit: cover; } .article-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 14px rgba(8,16,42,0.5); } .prose { margin-top: var(--sp-8); } .prose > * + * { margin-top: var(--sp-5); } .prose h2 { font-size: clamp(24px, 3.5vw, 32px); margin-top: var(--sp-12); } .prose h3 { font-size: 20px; margin-top: var(--sp-8); } .prose p { color: var(--ink-muted); } .prose ul, .prose ol { color: var(--ink-muted); padding-left: 22px; display: grid; gap: var(--sp-2); } .prose li { padding-left: 4px; } .article-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); font-family: var(--font-display); font-size: 14px; } .article-back:hover { color: var(--cyan); } /* ============================================================ BREADCRUMB ============================================================ */ .crumbs { font-size: 13px; color: var(--ink-faint); font-family: var(--font-display); padding-top: var(--sp-8); } .crumbs a:hover { color: var(--cyan); } .crumbs span { margin: 0 8px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--border); background: #08102a; padding: var(--sp-20) 0 var(--sp-10); margin-top: var(--sp-16); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-12); } .footer-grid img { height: 28px; margin-bottom: var(--sp-5); filter: brightness(0) invert(1); opacity: 0.92; } .footer-grid p { color: var(--ink-muted); font-size: 15px; } .footer-col h4 { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: var(--sp-4); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .footer-col a, .footer-col li { color: var(--ink-muted); font-size: 15px; } .footer-col a:hover { color: var(--cyan); } .footer-bottom { margin-top: var(--sp-16); padding-top: var(--sp-6); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); } /* ============================================================ REVEAL ANIMATION ============================================================ */ /* Reveal only hides when JS is present (html.js). No-JS shows everything. */ .js .reveal { opacity: 0; transform: translateY(22px); filter: blur(4px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } .js .reveal.in { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } html { scroll-behavior: auto; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); } .hero-media { max-width: 420px; } .split, .split.reverse .split-media { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } .grid--3, .grid--benefits { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .checklist.two { grid-template-columns: 1fr; } .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav-links { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy-2); border-bottom: 1px solid var(--border); padding: var(--sp-4); transform: translateY(-120%); transition: transform .3s var(--ease); height: auto; } .nav-links.open { transform: translateY(0); } .nav-links > li { border-bottom: 1px solid var(--border); } .nav-links a, .nav-dd > button { padding: 14px 6px; width: 100%; } .nav-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; background: transparent; min-width: 0; padding: 0 0 var(--sp-3) var(--sp-4); display: none; } .nav-dd[aria-expanded="true"] .nav-menu { display: block; } .nav-toggle { display: block; } .nav-cta { display: none; } .section { padding: var(--sp-16) 0; } .hero { padding: var(--sp-16) 0; } .grid--3, .grid--benefits, .grid--2 { grid-template-columns: 1fr; } /* Two-up on a phone, not one: these are 9/16 shorts, so half a phone width is still perfectly watchable and five of them stacked full-width is a long scroll. */ .video-row { grid-template-columns: repeat(2, 1fr); } /* 16/9 becomes a letterbox sliver on a narrow screen — give it more height. */ .feature-shot img { aspect-ratio: 4 / 3; } .footer-grid { grid-template-columns: 1fr; gap: var(--sp-10); } .compare { font-size: 13px; } .phase { padding-left: var(--sp-12); } .post-grid { grid-template-columns: 1fr; } }