/* ========================================================= Josh Thar Coaching Palette: near-black canvas, graphite surfaces, cream type, electric blue contrast. Motif: lightning. Strikes in the hero and the closing CTA, bolt glyphs standing in for bullets and ticks. ========================================================= */ :root{ /* --- canvas --- */ /* Taken a step darker on request. Every scrim and fade further down is written against these exact values, so if --bg moves again, the rgba(4,5,6,…) literals have to move with it or each one shows up as a faintly lighter band where it meets the page. */ --bg: #040506; /* page */ --bg-alt: #08090c; /* alternating sections */ --surface: #0d0f13; /* cards */ --surface-2: #13161c; /* raised cards / inputs */ --line: rgba(242,237,227,.10); --line-2: rgba(242,237,227,.18); /* --- type --- */ --text: #f2ede3; /* creamy white, headings + body */ --muted: #a3a8b2; /* body copy, gray */ --muted-2: #737985; /* meta, labels */ /* Electric blue, tuned against near-black. Text and fills need opposite stops: the fill goes deep so cream sits on it, the text goes bright so it clears 4.5:1 against #040506. */ --accent: #4fa8e0; /* headings, rules, icons (7.6:1 on bg) */ --accent-hi: #7fc8f5; /* hover, small labels, bolts (10.7:1 on bg) */ --accent-btn: #14538f; /* button fill (6.8:1 w/ cream) */ --accent-btn-hi: #1a6ab5; /* button hover (4.8:1 w/ cream) */ --accent-deep: #0b3560; --accent-dim: rgba(79,168,224,.10); --accent-line: rgba(79,168,224,.32); /* Shine stops. The band travelling through the accent gradients: mid is a lifted sky, peak is near-cream. Nothing goes darker than --accent, so the contrast floor on small accent text still holds. */ --accent-mid: #9ad9fb; --accent-peak: #eaf7ff; /* --- fonts --- */ --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --nav-h: 79px; --wrap: 1180px; --r: 12px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; background:var(--bg); } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.7; font-weight:350; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:0; color:var(--text); font-variation-settings:"wdth" 112; } p{ margin:0 0 1.15em; } p:last-child{ margin-bottom:0; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--accent-btn); color:var(--text); } .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; } .accent{ color:var(--accent); } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent-btn); color:var(--text); padding:12px 20px; font-weight:600; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } /* =============== SHARED BITS =============== */ .eyebrow{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; display:flex; align-items:center; gap:12px; } .eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent-line); flex:none; } .eyebrow--center{ justify-content:center; } .eyebrow--center::after{ content:""; width:28px; height:1px; background:var(--accent-line); flex:none; } .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em; padding:15px 28px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); text-align:center; line-height:1.2; } .btn:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; } .btn--primary{ background:var(--accent-btn); color:var(--text); } .btn--primary:hover{ background:var(--accent-btn-hi); transform:translateY(-1px); } .btn--ghost{ background:transparent; color:var(--text); border-color:var(--line-2); } .btn--ghost:hover{ border-color:var(--accent); color:var(--accent-hi); } .btn--lg{ padding:18px 34px; font-size:16px; } .btn--block{ width:100%; justify-content:center; } .btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; } .section{ padding:clamp(72px,10vw,128px) 0; } .section--alt{ background:var(--bg-alt); } .section__head{ max-width:760px; margin:0 0 56px; } .section__head--center{ margin-left:auto; margin-right:auto; text-align:center; } .section__title{ font-size:clamp(32px,4.6vw,52px); text-transform:uppercase; } .section__lede{ color:var(--muted); font-size:clamp(17px,1.7vw,19px); margin-top:20px; max-width:62ch; } .section__head--center .section__lede{ margin-left:auto; margin-right:auto; } /* Split head: title left, lede right, sitting on a hairline. Used where a centred stack would make the section read like every other one on the page. The title carries a
in the markup, so it breaks where it's meant to rather than wherever the column happens to end. */ .section__head--split{ max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:clamp(24px,5vw,64px); padding-bottom:34px; margin-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line); } .section__head--split .section__lede{ margin-top:0; } @media (max-width:800px){ .section__head--split{ grid-template-columns:1fr; align-items:start; gap:18px; } /* The forced break is tuned for the wide column and strands a word here. */ .section__head--split .section__title br, .band__card .section__title br{ display:none; } } /* ========================================================= MOTION Everything here is gated on html.js, which an inline script in sets before first paint. Without that class nothing is ever hidden, so a blocked or broken script leaves a plain, fully visible page rather than a blank one. The old reveal rules hid content unconditionally. ========================================================= */ /* --- reveal on scroll --- */ .js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .9s cubic-bezier(.2,.75,.25,1); } /* Directional variants, so sections don't all arrive the same way. The side variants start 64px outside their box, which on a phone is outside the screen: unrevealed panels below the fold made the page 47px wider than the viewport. main clips that. It uses overflow-x:clip rather than hidden because clip does not create a scroll container, so it cannot break position:sticky or turn main into its own scroller. */ main{ overflow-x:clip; } .js .reveal--left { transform:translateX(-64px); } .js .reveal--right{ transform:translateX(64px); } .js .reveal--scale{ transform:translateY(22px) scale(.92); } .js .reveal.is-in{ opacity:1; transform:none; } /* --- hero entrance --- Waits for html.is-ready, which main.js sets as the intro overlay starts to fade (or straight away when the intro is skipped). Lines rise in order on --k. The failsafe animation shows everything at 5.5s no matter what, in case main.js never runs; it targets the same end state, so on a normal load it changes nothing. */ .js .hero__copy .eyebrow, .js .hero__l, .js .hero__sub, .js .hero__actions, .js .hero__social{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform 1.1s cubic-bezier(.16,.84,.3,1); transition-delay:calc(var(--k,0) * 110ms); animation:failsafe 0s linear 5.5s forwards; } .js .hero__portrait{ opacity:0; transition:opacity 1.6s var(--ease) .15s; animation:failsafe 0s linear 5.5s forwards; } .is-ready .hero__copy .eyebrow, .is-ready .hero__l, .is-ready .hero__sub, .is-ready .hero__actions, .is-ready .hero__social, .is-ready .hero__portrait{ opacity:1; transform:none; } @keyframes failsafe{ to{ opacity:1; transform:none; } } /* Lightning lights the photo. storm.js writes --flash (0 to 1) onto the portrait for the length of each hero strike, so he is lit by the same flash as the sky behind him. The scale gives the parallax in main.js room to move without exposing an edge. */ .hero__portrait img, .hero__video{ transform:scale(1.06); filter:brightness(calc(1 + var(--flash, 0) * .6)) contrast(calc(1 + var(--flash, 0) * .14)); will-change:transform; } /* --- headings rise word by word --- main.js wraps each word of a section title in .w > span. The outer span clips, the inner one rises into it. Padding and the matching negative margin give descenders room inside the clip. */ .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; color:inherit; } .w > span{ display:inline-block; color:inherit; transform:translateY(108%); transition:transform .9s cubic-bezier(.2,.75,.25,1); transition-delay:calc(var(--i, 0) * 55ms); } .split-in .w > span{ transform:none; } .page-hero__title .w{ display:inline-block; } /* The rule in front of an eyebrow draws itself in with its heading. */ .js .section__head .eyebrow::before{ transform:scaleX(0); transform-origin:100% 50%; transition:transform .9s var(--ease) .15s; } .js .section__head .eyebrow::after{ transform:scaleX(0); transform-origin:0 50%; transition:transform .9s var(--ease) .15s; } .js .section__head.is-in .eyebrow::before, .js .section__head.is-in .eyebrow::after{ transform:scaleX(1); } /* --- result photos wipe down into place --- */ .js .rail__media{ clip-path:inset(0 0 100% 0 round var(--r)); transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) .12s; } .js .rail__row.is-in .rail__media{ clip-path:inset(0 0 0 0 round var(--r)); } /* --- pillar numerals ignite once as they arrive --- One flash, not a stutter. A numeral is well under the large-area flash threshold, but there is no reason to spend that headroom on a number. */ .js .stack__row.is-in .stack__num{ animation:ignite 1.5s var(--ease) .2s both; } @keyframes ignite{ 0% { color:rgba(79,168,224,.12); text-shadow:none; } 20% { color:rgba(244,250,255,.95); text-shadow:0 0 18px rgba(176,222,255,.85), 0 0 60px rgba(79,168,224,.55); } 100% { color:rgba(79,168,224,.16); text-shadow:0 0 34px rgba(79,168,224,.14); } } /* --- scroll charge --- A hairline across the top that fills as you read, with a spark riding the front. main.js drives both with transforms only. */ .charge{ position:fixed; inset:0 0 auto 0; height:2px; z-index:120; pointer-events:none; } .charge i{ position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg, rgba(79,168,224,0), var(--accent) 35%, var(--accent-hi) 80%, #fff); } .charge b{ position:absolute; top:-3px; left:-4px; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px 2px rgba(176,222,255,.9), 0 0 28px 6px rgba(79,168,224,.55); opacity:0; transition:opacity .3s var(--ease); } .charge.is-on b{ opacity:1; } .charge.is-full b{ opacity:0; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } html.js .reveal, html.js .hero__copy .eyebrow, html.js .hero__l, html.js .hero__sub, html.js .hero__actions, html.js .hero__social, html.js .hero__portrait{ opacity:1; transform:none; transition:none; animation:none; } html.js .rail__media{ clip-path:none; transition:none; } html.js .stack__row .stack__num{ animation:none; } html.js .section__head .eyebrow::before, html.js .section__head .eyebrow::after{ transform:none; transition:none; } .hero__portrait img{ transform:none; } } /* ========================================================= LIGHTNING .storm the weather layer behind the hero, the closing CTA and the sub-page headers. Drifting cloud cover, with a canvas on top. .storm__canvas procedural strikes, drawn by assets/js/storm.js. Every strike is generated fresh; the header of that file has the model, the performance rules and the flash limits. .bolt-ico a small filled glyph stood in for bullets and ticks. The old build drew fixed SVG paths here and cycled them with CSS keyframes. All of that is gone. If you are looking for --bolt-cycle or @keyframes strike, they no longer exist. ========================================================= */ .storm{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .storm__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* --- drifting cloud cover --- Three layers of soft gradient blobs, each twice the container width and translated by exactly half of itself, which loops seamlessly. Different speeds per layer means the composite never visibly repeats even though each layer does. Transform only, so it composites rather than repainting. The blobs are cheap gradients, not images, so there's nothing to download. */ .storm__clouds{ position:absolute; inset:-8% 0 auto 0; height:78%; overflow:hidden; pointer-events:none; } .storm__cloud{ position:absolute; top:0; left:0; width:200%; height:100%; background-repeat:repeat-x; background-size:50% 100%; will-change:transform; animation:drift linear infinite; } @keyframes drift{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } /* Back layer: big, slow, barely there. Sets the ceiling. */ .storm__cloud--1{ animation-duration:96s; opacity:.72; background-image: radial-gradient(ellipse 26% 62% at 18% 30%, rgba(41,50,66,.62), transparent 72%), radial-gradient(ellipse 30% 54% at 46% 18%, rgba(34,42,56,.58), transparent 74%), radial-gradient(ellipse 22% 66% at 74% 34%, rgba(44,54,70,.55), transparent 70%); } /* Middle layer: carries the faint blue, so the cloud base looks lit from behind rather than just gray. */ .storm__cloud--2{ animation-duration:64s; opacity:.6; background-image: radial-gradient(ellipse 20% 50% at 30% 40%, rgba(52,74,102,.42), transparent 72%), radial-gradient(ellipse 26% 44% at 62% 26%, rgba(38,48,64,.5), transparent 74%), radial-gradient(ellipse 16% 40% at 88% 44%, rgba(46,62,84,.38), transparent 70%); } /* Front layer: smaller, faster, gives the parallax. */ .storm__cloud--3{ animation-duration:41s; opacity:.42; background-image: radial-gradient(ellipse 14% 34% at 12% 22%, rgba(30,38,50,.6), transparent 72%), radial-gradient(ellipse 18% 30% at 52% 40%, rgba(36,46,62,.5), transparent 74%), radial-gradient(ellipse 12% 36% at 80% 20%, rgba(28,36,48,.55), transparent 70%); } /* Melt the bottom edge into the section so the cover has no hemline. */ .storm__clouds::after{ content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(180deg, transparent, var(--bg)); pointer-events:none; } /* Bolt glyph, used as a bullet and inside pills. */ .bolt-ico{ width:14px; height:14px; flex:none; fill:var(--accent); } /* Reduced motion keeps the cloud cover as a still image and drops the strikes. storm.js also refuses to start, so nothing is drawn at all. */ @media (prefers-reduced-motion:reduce){ .storm__canvas{ display:none; } .storm__cloud{ animation:none; } } /* =============== INTRO =============== */ /* Self-terminating: the CSS animation hides the overlay on its own at 3.4s, so a blocked or broken script can never strand a visitor here. */ .intro{ position:fixed; inset:0; z-index:999; display:grid; place-items:center; padding:24px; overflow:hidden; background: radial-gradient(70% 55% at 50% 44%, rgba(79,168,224,.07), transparent 62%), var(--bg); animation:introAuto 3.9s linear forwards; } .intro.gone{ display:none; } @keyframes introAuto{ 0%,86%{ opacity:1; } 100%{ opacity:0; visibility:hidden; pointer-events:none; } } .intro__inner{ text-align:center; position:relative; z-index:2; } .intro__name{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.025em; line-height:1; font-size:clamp(36px,8.6vw,104px); white-space:nowrap; font-variation-settings:"wdth" 108; } .intro__l{ display:inline-block; opacity:0; will-change:transform,opacity; transform:translateX(var(--dx)); animation:slideAcross .85s cubic-bezier(.16,.84,.34,1) var(--d) forwards; } .intro__sp{ display:inline-block; width:.3em; } .intro__l--b{ color:var(--accent); } @keyframes slideAcross{ to{ opacity:1; transform:translateX(0); } } /* Four strikes once both halves of the name have landed, drawn by storm.js with the white palette. The canvas sits under the name. */ .intro__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } /* Returning visitors and reduced-motion users never see the overlay at all. The class is set by an inline script in , before first paint, so there is no flash of the intro on a repeat visit. */ .intro-skip .intro{ display:none; } .intro__rule{ display:block; height:3px; margin:22px auto 0; border-radius:2px; background:var(--accent); transform:scaleX(0); animation:drawRule .65s cubic-bezier(.16,.84,.34,1) 1.1s forwards; } @keyframes drawRule{ to{ transform:scaleX(1); } } .intro__role{ margin:18px 0 0; font-family:var(--sans); font-size:clamp(10px,1.3vw,13px); font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); opacity:0; animation:riseIn .7s var(--ease) 1.5s forwards; } @keyframes riseIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .intro{ display:none; } } /* =============== NAV =============== */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; background:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(4,5,6,.88); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); } .nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--nav-h); } .brand{ font-family:var(--display); font-weight:700; font-size:17.5px; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:"wdth" 100; display:flex; align-items:baseline; gap:8px; } .brand em{ font-style:normal; color:var(--accent); } .nav__links{ display:flex; align-items:center; gap:28px; } .nav__links a{ font-size:14px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .2s var(--ease); } .nav__links a:hover{ color:var(--text); } .nav .btn{ padding:12px 22px; font-size:14px; letter-spacing:.06em; } .nav__toggle{ display:none; background:none; border:0; color:var(--text); padding:8px; cursor:pointer; } @media (max-width:1040px){ .nav__links{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:rgba(4,5,6,.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:12px 28px 26px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); } .nav__links.is-open{ opacity:1; transform:none; pointer-events:auto; } .nav__links a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; } .nav__links .btn{ margin-top:18px; justify-content:center; } .nav__toggle{ display:block; } } /* =============== HERO =============== */ /* Asymmetric split: oversized type left, one tall portrait right that bleeds past the top of the section. Deliberately not a banner with a row of tiles under it. Stacking, low to high: 0 .hero__wash background gradient 1 .storm clouds, flash, bolts 2 .hero__portrait 3 .hero__copy always on top of a strike The grid parent has no z-index of its own. Given one it would trap the portrait and the copy in a single layer and the storm could no longer sit underneath both. */ .hero{ position:relative; padding:calc(var(--nav-h) + clamp(14px,2.4vw,32px)) 0 0; overflow:hidden; isolation:isolate; background: radial-gradient(120% 86% at 74% 8%, rgba(79,168,224,.12), transparent 60%), linear-gradient(180deg, #0a0c10 0%, #040506 78%); } .hero .storm{ z-index:1; } .hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); align-items:end; gap:clamp(24px,4vw,56px); padding-bottom:clamp(44px,6vw,80px); } .hero__copy{ position:relative; z-index:3; padding-bottom:clamp(8px,2vw,28px); } /* A pool of darkness under the type. The gradient alone can't be trusted, a bolt lands wherever it likes and the eyebrow is the first casualty. */ .hero__copy::before{ content:""; position:absolute; z-index:-1; left:-40px; right:-80px; top:-56px; bottom:-40px; background:radial-gradient(70% 68% at 30% 50%, rgba(4,5,6,.92) 0%, rgba(4,5,6,.72) 44%, rgba(4,5,6,.3) 70%, transparent 86%); pointer-events:none; } /* Three lines, three weights of emphasis. The middle line is the one the whole page hangs on, so it gets the width axis pushed and the accent. */ /* Capped at 68, not 78. The accent line is the longest of the three and at 78 it wrapped, which split "the effort." across two lines and threw the whole three-line structure out. */ /* Sized to the CURRENT copy. The longest line is "dream physique." at about 11em, and the copy column tops out at 590px, so 52px is the most that keeps every line on one line. Below 900px the column is the full wrap, so the size follows the viewport directly (100vw minus the 56px of wrap padding, over 11.2em). If the words change, re-measure: the size follows the longest line, not a design preference. The breaks are "You don't need / gear to get your / dream physique." Breaking after "gear" instead made the first line 12.3em and dropped the phone size to 25px. */ .hero__title{ font-size:clamp(30px,4.35vw,52px); text-transform:uppercase; letter-spacing:-.03em; line-height:.94; font-variation-settings:"wdth" 108; } .hero__title em{ display:block; font-style:normal; color:var(--accent); font-variation-settings:"wdth" 118; } /* The payoff line. Kept cream rather than muted: it's the actual hook, and greying it out buried the one line the page is built on. */ /* Each line is its own element now so it can rise on its own beat. Was `.hero__title span`, which also caught line one once that became a span and shrank the opening words to the payoff size. */ .hero__l{ display:block; } .hero__title .hero__l--3{ display:block; color:var(--text); font-size:.66em; letter-spacing:-.015em; margin-top:.26em; font-variation-settings:"wdth" 96; } .hero__sub{ color:var(--muted); font-size:clamp(16px,1.75vw,19px); max-width:46ch; margin:28px 0 0; line-height:1.65; padding-left:20px; border-left:2px solid var(--accent-line); } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } /* Portrait bleeds up behind the nav and off the top edge. */ .hero__portrait{ position:relative; z-index:2; /* Bleeds up behind the nav so the section does not read as a boxed banner, but only by the nav's own height. The original went 180px higher and took the top of his head with it. */ margin:calc(-1 * var(--nav-h) - 10px) 0 0; aspect-ratio:3/4; border-radius:0 0 var(--r) var(--r); overflow:hidden; background:linear-gradient(160deg,#11141a,#08090c); display:flex; align-items:center; justify-content:center; } .hero__portrait img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 26%; } .hero__portrait .slot{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--muted-2); } /* Feathered on two edges: down into the ticker, and left into the type so there's no hard vertical seam between the columns. */ .hero__portrait::after{ content:""; position:absolute; inset:0; z-index:2; background: linear-gradient(180deg, rgba(4,5,6,.55) 0%, transparent 22%, transparent 62%, rgba(4,5,6,.9) 94%, var(--bg) 100%), linear-gradient(90deg, var(--bg), rgba(4,5,6,.45) 18%, transparent 46%); pointer-events:none; } @media (max-width:720px){ .hero__title{ font-size:min(52px, calc((100vw - 56px) / 11.2)); } .hero__grid{ grid-template-columns:1fr; align-items:start; } /* Portrait first on phones, but sized so it never eats the fold. */ .hero__portrait{ order:-1; margin-top:0; aspect-ratio:16/11; border-radius:var(--r); margin-inline:0; } /* 6%, not 22%. Under 900px the slot flips to 16:11 landscape and object-fit crops vertically. The hero photo has the cap only ~90px from its top edge, so anything past about 8% shaves his head off. */ .hero__portrait img{ object-position:center 6%; } .hero__portrait::after{ background:linear-gradient(180deg, transparent 40%, rgba(4,5,6,.75) 86%, var(--bg) 100%); } /* Vertical fade, not the desktop radial: the radial still had ~30% opacity at its top edge and cut a visible line across the video. */ .hero__copy::before{ left:-28px; right:-28px; top:-150px; bottom:0; background:linear-gradient(180deg, transparent 0%, rgba(4,5,6,.55) 120px, rgba(4,5,6,.8) 220px, rgba(4,5,6,.8) 100%); } .hero__actions .btn{ flex:1 1 100%; justify-content:center; } } @media (max-width:560px){ .hero__title{ font-size:min(52px, calc((100vw - 56px) / 11.2)); } .hero .eyebrow::before{ display:none; } .hero__sub{ padding-left:16px; } } /* =============== TICKER =============== */ /* Closes the hero. Two identical groups, track translated by exactly half itself, so the loop has no seam. Transform only, stays on the compositor. */ .ticker{ position:relative; z-index:3; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(8,10,13,.72); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker__track{ display:flex; width:max-content; animation:tick 34s linear infinite; } .ticker__group{ display:flex; align-items:center; } .ticker__group span{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:15px 0; white-space:nowrap; } /* Bolt separator, drawn as a mask so it inherits the accent colour. */ .ticker__group i{ width:34px; height:13px; margin:0 26px; flex:none; background:var(--accent); -webkit-mask:no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 2 5 13.4h5.4L9.3 22 19 10.3h-5.8z'/%3E%3C/svg%3E"); mask:no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 2 5 13.4h5.4L9.3 22 19 10.3h-5.8z'/%3E%3C/svg%3E"); } @keyframes tick{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } @media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } } /* =============== FOLLOW =============== */ .follow{ padding:clamp(30px,4vw,44px) 0; background: radial-gradient(58% 130% at 50% 50%, rgba(79,168,224,.10), transparent 70%), var(--bg); } .follow__inner{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 32px; } .follow__label{ margin:0; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); } .follow__links{ display:flex; flex-wrap:wrap; gap:14px; } .follow__btn{ display:inline-flex; align-items:center; gap:12px; padding:13px 24px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--text); font-size:15px; font-weight:600; letter-spacing:.01em; transition:border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease); } .follow__btn:hover{ border-color:var(--accent); background:linear-gradient(180deg, rgba(79,168,224,.14), var(--surface)); transform:translateY(-2px); } .follow__btn:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; } .follow__btn svg:first-child{ width:19px; height:19px; flex:none; color:var(--accent); } .follow__net{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); padding-left:12px; border-left:1px solid var(--line); } /* Phones: three tiles in one row, so the strip under the header stays short instead of stacking three full-width buttons. */ @media (max-width:640px){ .follow__inner{ gap:12px; } .follow__label{ width:100%; text-align:center; } .follow__links{ width:100%; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; } .follow__btn{ flex-direction:column; justify-content:center; gap:7px; padding:13px 4px; border-radius:14px; font-size:12.5px; } .follow__net{ display:none; } } /* =============== LEDGER (who this is / isn't for) =============== */ /* Two numbered columns split by a hairline. No card chrome at all, so it reads as one document rather than two competing boxes. */ .ledger{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:clamp(32px,5vw,72px); position:relative; } /* The divider is a pseudo-element on the second column, not a border on the first, so it vanishes on its own when the grid wraps to one column. */ @media (min-width:760px){ .ledger__side--no{ padding-left:clamp(32px,5vw,72px); } .ledger__side--no::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(180deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent); } } .ledger__side h3{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:0 0 30px; color:var(--muted-2); } .ledger__side--yes h3{ color:var(--accent); } .ledger__side--yes h3 .bolt-ico{ width:15px; height:15px; } .ledger__list{ list-style:none; margin:0; padding:0; counter-reset:led; } .ledger__list li{ counter-increment:led; position:relative; padding:0 0 22px 46px; margin-bottom:22px; border-bottom:1px solid var(--line); color:var(--muted); font-size:16.5px; line-height:1.6; } .ledger__list li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; } .ledger__list li::before{ content:counter(led,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--accent); } /* The no column keeps the numbers but drops them to gray, so the two sides are legible as a pair without needing a second colour. */ .ledger__side--no .ledger__list li::before{ color:var(--muted-2); } .ledger__side--no .ledger__list li{ color:var(--muted-2); } /* =============== STACK (pillars) =============== */ /* Staggered rows with an oversized outlined numeral, rather than three equal boxes in a row. */ .stack{ display:grid; gap:clamp(8px,2vw,20px); } .stack__row{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(20px,4vw,44px); padding:clamp(28px,4vw,44px) 0; border-top:1px solid var(--line); } .stack__row:last-child{ border-bottom:1px solid var(--line); } /* Every other row steps in from the left, which is what keeps this from reading as another plain list of rows. */ .stack__row--offset{ margin-left:clamp(0px,8vw,140px); } /* Outline numeral. -webkit-text-stroke has no standard fallback that behaves identically, so a solid low-opacity colour backs it up. */ .stack__num{ font-family:var(--display); font-size:clamp(64px,11vw,140px); font-weight:800; line-height:.8; letter-spacing:-.04em; color:rgba(79,168,224,.12); -webkit-text-stroke:1.5px var(--accent-line); font-variation-settings:"wdth" 118; user-select:none; } .stack__body h3{ font-size:clamp(24px,3vw,34px); text-transform:uppercase; margin-bottom:14px; } .stack__body p{ color:var(--muted); font-size:16.5px; margin:0; max-width:58ch; } @media (max-width:760px){ .stack__row{ grid-template-columns:1fr; gap:12px; align-items:start; } .stack__row--offset{ margin-left:0; } .stack__num{ font-size:56px; } } /* =============== STORMS IN THE BODY =============== */ /* #coaching, #how and #about each carry a storm. The section becomes a stacking context so its storm sits under its own content and not under the next section's. Clouds come down hard here: these sit behind running text, the hero and CTA are where the sky gets to show. */ .section--storm{ position:relative; isolation:isolate; overflow:hidden; } .section--storm > .wrap{ position:relative; z-index:2; } .section--storm .storm__clouds, .band .storm__clouds{ opacity:.5; } .section--alt .storm__clouds::after{ background:linear-gradient(180deg, transparent, var(--bg-alt)); } /* =============== LATEST VIDEO =============== */ .yt{ position:relative; max-width:980px; margin:0 auto; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; border:1px solid var(--accent-line); background: radial-gradient(60% 60% at 50% 40%, rgba(79,168,224,.10), transparent 70%), var(--surface); box-shadow:0 40px 90px -50px rgba(79,168,224,.55), 0 0 0 1px rgba(0,0,0,.4); } .yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } /* =============== BUTTON ARCS =============== */ /* storm.js draws short arcs off a primary button while it is hovered or focused. Fixed, full-viewport, never takes a click. */ .arc-layer{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:130; } /* =============== CREED (why I coach) =============== */ /* Three columns, each topped by a hairline that charges with light as the column arrives. Gated on html.js so without scripts the line is simply there, lit. */ .creed{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3.2vw,48px); } .creed__item{ position:relative; padding-top:30px; } .creed__item::before, .creed__item::after{ content:""; position:absolute; top:0; left:0; right:0; } .creed__item::before{ height:1px; background:var(--line-2); } .creed__item::after{ height:2px; top:-.5px; background:linear-gradient(90deg, var(--accent), var(--accent-hi) 70%, #fff); box-shadow:0 0 12px rgba(127,200,245,.55); transform-origin:0 50%; } .js .creed__item::after{ transform:scaleX(0); transition:transform 1.2s cubic-bezier(.7,0,.2,1) .3s; } .js .creed__item.is-in::after{ transform:scaleX(1); } .creed__n{ display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } .creed__item h3{ font-size:clamp(20px,2.1vw,25px); text-transform:uppercase; line-height:1.12; margin-bottom:14px; } .creed__item p{ color:var(--muted); font-size:16px; margin:0; } @media (max-width:860px){ .creed{ grid-template-columns:1fr; gap:40px; } } @media (prefers-reduced-motion:reduce){ .js .creed__item::after{ transition:none; } } /* Two clips side by side, sized so they read as phone frames rather than stretching to fill a three-slot row. */ .reels.reels--two{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:640px; } /* =============== HEADER VIDEO =============== */ /* The clip is graded in the encode (see README): cropped to head-to-hips, background darkened and black lifted to the page's #040506. It is shown at its own shape (484x1000), never cropped by the box and never scaled up, so his whole physique is on screen. Edges are feathered with a narrow mask so it sits in the page without a frame. Desktop and tablets, landscape phones included: on the side, in the right-hand column, sized by the screen height. Portrait phones (720px and under): full width across the top as the header. */ /* Headline and video both hang from the top of the header (was bottom aligned, which left the wording sitting low on big screens). */ .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,42%); align-items:start; } .hero__video{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transform:none; /* No lightning-flash filter on the video: a filter that changes every frame forces the browser to re-render the clip, and Safari can stall playback over it. The photo in #about still flashes. */ filter:none; will-change:auto; } .hero__portrait:has(.hero__video){ justify-self:center; align-self:center; /* Sized by screen height so it fits the first screen, with a floor so a phone held sideways (390px tall) still gets a real panel. */ width:min(100%, max(250px, calc((100svh - var(--nav-h) - 120px) * .484))); aspect-ratio:484/1000; margin:0; background:none; border-radius:0; overflow:visible; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 76%, transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 76%, transparent 100%); mask-composite:intersect; } .hero__portrait:has(.hero__video)::after{ display:none; } /* A pool of the page's darkest black behind the clip, so the hero's blue-grey wash doesn't make the clip's own black read as a rectangle. */ .hero__grid:has(.hero__video)::before{ content:""; position:absolute; z-index:0; top:-40%; bottom:-30%; right:-8%; width:60%; background:radial-gradient(closest-side, rgba(4,5,6,.97) 0%, rgba(4,5,6,.92) 62%, transparent 100%); pointer-events:none; } @media (max-width:720px){ .hero__grid:has(.hero__video)::before{ display:none; } } @media (max-width:720px){ /* Edge to edge across the top, starting behind the nav, with the headline pulled up over his hips (the Andrew Perez band treatment). The negative top margin cancels the hero's top padding; the side margins cancel the wrap's gutter. Only top and bottom are feathered, the sides are the screen edge. */ .hero__grid{ grid-template-columns:1fr; } .hero__portrait, .hero__portrait:has(.hero__video){ position:relative; z-index:2; order:-1; width:auto; justify-self:stretch; align-self:start; aspect-ratio:auto; /* Full clip height at this width, capped so the headline still starts on the first screen. The cap trims a little off the bottom (hips), never the sides. */ height:min(72svh, calc(100vw * 2.066)); margin:calc(-1 * (var(--nav-h) + clamp(14px,2.4vw,32px))) -28px 0; border-radius:0; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.4) 0%, #000 12%, #000 74%, transparent 100%); mask-image:linear-gradient(180deg, rgba(0,0,0,.4) 0%, #000 12%, #000 74%, transparent 100%); } .hero__portrait .slot{ display:none; } .hero__copy{ margin-top:-96px; } } /* =============== HEADER SOCIALS =============== */ /* Right under the headline and buttons, inside the header. Same pills as the old follow strip, a size down, icon and handle only. Phones pick up the three-tile row from the FOLLOW rules. */ .hero__social{ margin-top:22px; gap:8px; } @media (min-width:860px){ .hero__social{ flex-wrap:nowrap; } } .hero__social .follow__btn{ padding:9px 14px; gap:8px; font-size:13.5px; background:rgba(13,15,19,.72); white-space:nowrap; } .hero__social .follow__btn svg:first-child{ width:16px; height:16px; } .hero__social .follow__net{ display:none; } /* Play button, shown only when the browser refuses autoplay (iPhone Low Power Mode) or under reduced motion. main.js adds .is-blocked. */ .clip-play{ position:absolute; z-index:6; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; border:1.5px solid var(--accent-hi); background:rgba(4,5,6,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 0 30px rgba(79,168,224,.45); display:none; align-items:center; justify-content:center; cursor:pointer; } .clip-play svg{ width:24px; height:24px; fill:#fff; margin-left:3px; } .is-blocked > .clip-play{ display:flex; } @media (max-width:720px){ /* On phones the hero copy covers the middle; keep the button clear of it. */ .hero__portrait > .clip-play{ top:calc(var(--nav-h) + 70px); } } /* =============== NAV ORDER =============== */ .nav__inner .brand{ order:0; } .nav__links{ order:1; margin-left:auto; } .nav__toggle{ order:3; } /* =============== APPLY POPUP =============== */ html.modal-open{ overflow:hidden; } .apply-modal{ padding:0; margin:0; border:0; width:100%; height:100%; max-width:none; max-height:none; background:transparent; color:var(--text); } .apply-modal:not([open]){ display:none; } .apply-modal[open]{ display:flex; align-items:center; justify-content:center; } .apply-modal::backdrop{ background:rgba(4,5,6,.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .apply-modal__panel{ width:min(760px, calc(100% - 32px)); height:min(880px, calc(100% - 48px)); display:flex; flex-direction:column; background: radial-gradient(80% 50% at 50% -10%, rgba(79,168,224,.12), transparent 60%), var(--bg); border:1px solid var(--accent-line); border-radius:16px; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.65), 0 0 60px -20px rgba(79,168,224,.35); animation:modalIn .45s var(--ease); } .apply-modal .apply__bar{ position:relative; } .apply-modal .apply__bar-inner{ height:64px; padding:0 14px 0 24px; } .apply-modal__close{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease); } .apply-modal__close:hover{ color:var(--text); border-color:var(--accent); } .apply-modal__close:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px; } .apply-modal__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:clamp(28px,5vh,52px) clamp(20px,5vw,56px); } @keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:none; } } @media (max-width:640px){ .apply-modal__panel{ width:100%; height:100%; border-radius:0; border:0; } } @media (prefers-reduced-motion:reduce){ .apply-modal__panel{ animation:none; } } /* =============== TRANSFORMATION =============== */ /* Then and Now as a big pair with a bolt between them, the other stages in a row underneath. Everything in colour. */ .tf{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(14px,2.6vw,36px); max-width:980px; margin:0 auto; } .tf__card{ position:relative; margin:0; aspect-ratio:3/4; border-radius:14px; overflow:hidden; border:1px solid var(--line-2); background:var(--surface); } .tf__card img{ width:100%; height:100%; object-fit:cover; } .tf__card::after{ content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(180deg, transparent, rgba(4,5,6,.78)); pointer-events:none; } .tf__card figcaption{ position:absolute; z-index:1; left:18px; bottom:14px; font-family:var(--display); font-weight:800; font-size:clamp(18px,2.4vw,30px); letter-spacing:.04em; text-transform:uppercase; color:var(--text); font-variation-settings:"wdth" 112; } .tf__card--now{ border-color:var(--accent-line); box-shadow:0 40px 90px -50px rgba(79,168,224,.85), 0 0 0 1px rgba(79,168,224,.25); } .tf__card--now figcaption{ color:var(--accent-hi); text-shadow:0 0 22px rgba(79,168,224,.6); } .js .tf__card--now.is-in img{ animation:nowFlash 1.4s var(--ease) .8s both; } @keyframes nowFlash{ 0% { filter:brightness(1); } 18% { filter:brightness(1.7) contrast(1.08); } 100% { filter:brightness(1); } } .tf__mid{ display:flex; flex-direction:column; align-items:center; gap:12px; } .tf__bolt{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--accent-line); background:var(--accent-dim); box-shadow:0 0 34px rgba(79,168,224,.45); } .tf__bolt svg{ width:26px; height:26px; fill:#fff; filter:drop-shadow(0 0 8px rgba(127,200,245,.9)); } .tf__tag{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); white-space:nowrap; } .tf__way{ max-width:980px; margin:clamp(40px,6vw,64px) auto 0; } .tf__label{ margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); } .tf__row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.6vw,18px); } .tf__step{ margin:0; aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface); } .tf__step img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .tf__step:hover img{ transform:scale(1.04); } @media (max-width:640px){ .tf{ grid-template-columns:1fr 1fr; gap:12px; } /* The bolt sits on the seam between the two photos. */ .tf__mid{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; } .tf__bolt{ width:48px; height:48px; background:rgba(4,5,6,.82); } .tf__tag{ display:none; } } @media (prefers-reduced-motion:reduce){ .js .tf__card--now.is-in img{ animation:none; } } /* =============== SECTION FOOTER LINK =============== */ .section__more{ margin-top:44px; display:flex; justify-content:center; } .section__more--left{ justify-content:flex-start; margin-top:30px; } @media (max-width:560px){ .section__more .btn{ width:100%; justify-content:center; } } /* =============== RAIL (results, editorial rows) =============== */ /* Alternating image/text rows instead of a three-up card grid. */ .rail{ display:grid; gap:clamp(28px,4vw,56px); } .rail__row{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(24px,4vw,52px); } .rail__row--flip .rail__media{ order:2; } .rail__media{ aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background: repeating-linear-gradient(45deg, rgba(242,237,227,.02) 0 12px, transparent 12px 24px), linear-gradient(160deg, #11141a, #08090c); display:flex; align-items:center; justify-content:center; } .rail__media img{ width:100%; height:100%; object-fit:cover; } /* No order set. The flip modifier pushes the media to order:2, and body stays at the default 0, which puts it first without a second rule. */ .rail__body{ min-width:0; } .rail__stat{ display:flex; flex-wrap:wrap; gap:8px 24px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--accent-line); } .rail__quote{ margin:0; color:var(--text); font-family:var(--display); font-size:clamp(18px,2.1vw,23px); font-weight:500; line-height:1.45; letter-spacing:-.01em; } .rail__who{ margin-top:22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600; } @media (max-width:820px){ .rail__row{ grid-template-columns:1fr; } .rail__row--flip .rail__media{ order:0; } } /* =============== PROOF / TESTIMONIALS =============== */ .proof__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; } .proof__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s var(--ease), transform .3s var(--ease); } .proof__card:hover{ border-color:var(--accent-line); transform:translateY(-3px); } .proof__media{ aspect-ratio:4/3; background: repeating-linear-gradient(45deg, rgba(242,237,227,.02) 0 12px, transparent 12px 24px), linear-gradient(160deg, #11141a, #08090c); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); position:relative; } .proof__media img{ width:100%; height:100%; object-fit:cover; } .proof__ph{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); font-weight:600; text-align:center; padding:0 20px; } .proof__body{ padding:28px 26px 30px; display:flex; flex-direction:column; gap:18px; flex:1; } .proof__stat{ display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .proof__quote{ color:var(--muted); font-size:16px; line-height:1.6; margin:0; flex:1; } .proof__who{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600; padding-top:16px; border-top:1px solid var(--line); } /* =============== BAND (about) =============== */ /* Full-bleed portrait with the copy sitting on it in a card, rather than a small portrait beside a column of text. */ .band{ position:relative; padding:clamp(80px,11vw,150px) 0; overflow:hidden; isolation:isolate; background:var(--bg); } /* The removes itself on error, so this layer carries a gradient of its own. Without it the whole band collapses to flat --bg until the photo lands and the section reads as a mistake. */ .band__media{ position:absolute; inset:0; z-index:0; background: radial-gradient(90% 120% at 82% 30%, rgba(79,168,224,.14), transparent 62%), linear-gradient(120deg, #0d1015 0%, #161b23 52%, #06080b 100%); } .band__media img{ position:absolute; top:0; right:0; width:min(48%, 680px); height:100%; object-fit:cover; object-position:center 22%; /* Fades in from the left so the card side stays solid, and out at top and bottom so the panel has no hard edge against the next section. */ -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%); mask-composite:intersect; /* Lit by the band's own storm, same as the hero portrait. */ filter:brightness(calc(.92 + var(--flash, 0) * .55)) contrast(calc(1.03 + var(--flash, 0) * .1)); } /* Two layers: the linear keeps the left half dark enough for the card, the vertical melts the band into the sections above and below so it doesn't read as a boxed-in photo. */ .band__scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(4,5,6,.96) 0%, rgba(4,5,6,.86) 40%, rgba(4,5,6,.12) 70%, rgba(4,5,6,.06) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 74%, var(--bg) 100%); pointer-events:none; } .band .wrap{ position:relative; z-index:2; } .band__card{ max-width:620px; } .band__card p{ color:var(--muted); font-size:17px; } .band__card .section__title{ margin-bottom:24px; } .about__facts{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; } .about__facts li{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--accent); background:var(--accent-dim); border:1px solid var(--accent-line); border-radius:999px; padding:7px 15px; } @media (max-width:760px){ .band__media img{ width:100%; opacity:.34; -webkit-mask-image:none; mask-image:none; } .band__scrim{ background:linear-gradient(180deg, var(--bg) 0%, rgba(4,5,6,.86) 26%, rgba(4,5,6,.92) 76%, var(--bg) 100%); } } /* =============== ABOUT (full story) =============== */ /* Replaced the short band plus a separate /about page. The whole story is here in Josh's words, with his photo pinned beside it while it scrolls. overflow:clip, not the storm section's hidden: hidden makes the section a scroll container and sticky stops working inside it. */ .about.section--storm{ overflow:hidden; overflow:clip; } .about__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(36px,6vw,88px); align-items:start; } .about__story{ order:1; min-width:0; } .about__photo{ order:2; position:sticky; top:calc(var(--nav-h) + 28px); margin:0; aspect-ratio:3/4; overflow:hidden; /* Feathered on every edge, same as the header video, so it reads as part of the page rather than a framed photo. */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%); mask-composite:intersect; } .about__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; /* Lit by the section's storm, same as the header video. */ filter:brightness(calc(.92 + var(--flash, 0) * .55)) contrast(calc(1.03 + var(--flash, 0) * .1)); } .about__intro{ padding-bottom:clamp(36px,5vw,52px); margin-bottom:clamp(36px,5vw,52px); border-bottom:1px solid var(--line); } .about__intro .section__title{ margin-bottom:24px; } .about__lead{ color:var(--text); font-size:clamp(17px,1.6vw,19.5px); line-height:1.7; opacity:.9; } .about .story{ max-width:none; } @media (max-width:860px){ .about__grid{ grid-template-columns:1fr; } .about__photo{ order:0; position:relative; top:auto; width:100%; max-width:440px; aspect-ratio:4/5; margin-inline:auto; } } /* --- follow strip under the header --- */ .follow--top{ position:relative; z-index:3; border-bottom:1px solid var(--line); } /* =============== SPINE (how it works) =============== */ /* Vertical timeline hung off a lightning spine. The steps sit to the right of a jagged line rather than in a stack of bordered rows. */ .spine{ list-style:none; margin:0; padding:0; position:relative; max-width:820px; margin-inline:auto; } /* The spine itself. A repeating zigzag drawn as a background image, so it scales to whatever height the steps end up being. */ .spine::before{ content:""; position:absolute; left:19px; top:14px; bottom:14px; width:14px; background: repeating-linear-gradient( to bottom, transparent 0 6px, var(--accent-line) 6px 7px, transparent 7px 13px ); -webkit-mask-image:linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); pointer-events:none; } .spine__step{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:clamp(18px,3vw,32px); padding:0 0 clamp(34px,5vw,52px); } .spine__step:last-child{ padding-bottom:0; } .spine__mark{ position:relative; z-index:1; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1.5px solid var(--accent-line); box-shadow:0 0 0 6px var(--bg), 0 0 22px rgba(79,168,224,.22); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .spine__mark .bolt-ico{ width:19px; height:19px; } .spine__step:hover .spine__mark{ border-color:var(--accent); box-shadow:0 0 0 6px var(--bg), 0 0 30px rgba(127,200,245,.42); } .spine__n{ display:block; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .spine__body{ padding-top:4px; } .spine__body h3{ font-size:clamp(21px,2.5vw,28px); text-transform:uppercase; margin-bottom:12px; } .spine__body p{ color:var(--muted); font-size:16.5px; margin:0; max-width:60ch; } /* The section--alt background differs, so the ring that punches the spine out from behind each marker has to match it there. */ .section--alt .spine__mark{ box-shadow:0 0 0 6px var(--bg-alt), 0 0 22px rgba(79,168,224,.22); } .section--alt .spine__mark, .section--alt .spine::before{ background-color:var(--bg-alt); } .section--alt .spine__step:hover .spine__mark{ box-shadow:0 0 0 6px var(--bg-alt), 0 0 30px rgba(127,200,245,.42); } @media (max-width:560px){ .spine__step{ grid-template-columns:40px minmax(0,1fr); gap:16px; } .spine__mark{ width:40px; height:40px; } .spine__mark .bolt-ico{ width:15px; height:15px; } .spine::before{ left:14px; width:12px; } } /* --- the spine charges as you scroll --- main.js writes --p (0 to 1) onto .spine as the timeline passes the reading line, and adds .is-lit to each step the charge has reached. Centred on the markers: 26px on desktop (52px markers), 20px on phones. */ .spine{ --ring:var(--bg); } .section--alt .spine{ --ring:var(--bg-alt); } .spine::after{ content:""; position:absolute; left:25px; top:14px; bottom:14px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--accent), var(--accent-hi) 70%, #fff); box-shadow:0 0 10px rgba(127,200,245,.7), 0 0 26px rgba(79,168,224,.35); transform-origin:50% 0; transform:scaleY(var(--p, 0)); pointer-events:none; } .spine__step.is-lit .spine__mark{ border-color:var(--accent-hi); box-shadow:0 0 0 6px var(--ring), 0 0 32px rgba(176,222,255,.55); animation:markIgnite .7s var(--ease); } .spine__step.is-lit .spine__mark .bolt-ico{ fill:#fff; } @keyframes markIgnite{ 0% { transform:scale(1); } 35% { transform:scale(1.16); } 100%{ transform:scale(1); } } @media (max-width:560px){ .spine::after{ left:19px; } } @media (prefers-reduced-motion:reduce){ .spine__step.is-lit .spine__mark{ animation:none; } } /* =============== FINAL CTA =============== */ .cta{ position:relative; padding:clamp(96px,13vw,168px) 0; background: radial-gradient(90% 120% at 50% 0%, rgba(79,168,224,.11), transparent 62%), var(--bg-alt); border-top:1px solid var(--line); text-align:center; overflow:hidden; isolation:isolate; } /* The CTA sits on --bg-alt, so its cloud hemline has to fade to that instead of --bg or it ends on a visible band. */ .cta .storm__clouds::after{ background:linear-gradient(180deg, transparent, var(--bg-alt)); } .cta .wrap{ position:relative; z-index:3; } .cta__title{ font-size:clamp(34px,5.6vw,64px); text-transform:uppercase; max-width:16ch; margin:0 auto; } .cta__sub{ color:var(--muted); font-size:clamp(17px,1.9vw,19px); max-width:54ch; margin:24px auto 0; } .cta__actions{ margin-top:38px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; } .cta__note{ margin-top:22px; font-size:13px; color:var(--muted-2); } /* =============== FOOTER =============== */ .footer{ border-top:1px solid var(--line); padding:52px 0 44px; background:var(--bg); } .footer__inner{ display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between; } .footer__links{ display:flex; flex-wrap:wrap; gap:14px 28px; } .footer__links a{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); transition:color .2s var(--ease); } .footer__links a:hover{ color:var(--accent-hi); } .footer__fine{ font-size:12px; color:var(--muted-2); letter-spacing:.04em; } /* ========================================================= SUB PAGES (testimonials.html, about.html) Share the landing page's shell. Only the header band and a couple of content blocks are their own. ========================================================= */ .page-hero{ position:relative; padding:calc(var(--nav-h) + clamp(56px,9vw,104px)) 0 clamp(52px,8vw,88px); text-align:center; overflow:hidden; isolation:isolate; background: radial-gradient(80% 70% at 50% 6%, rgba(79,168,224,.12), transparent 62%), var(--bg); border-bottom:1px solid var(--line); } .page-hero .storm{ z-index:1; } .page-hero .wrap{ position:relative; z-index:2; } .page-hero__title{ font-size:clamp(38px,7vw,80px); text-transform:uppercase; line-height:.98; margin:6px 0 0; } .page-hero__title > span:not(.w){ display:block; color:var(--accent); } .page-hero__lede{ margin:26px auto 0; max-width:62ch; color:var(--muted); font-size:clamp(16px,1.8vw,19px); } .page-hero__actions{ margin-top:36px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; } @media (max-width:560px){ .page-hero__actions .btn{ flex:1 1 100%; justify-content:center; } } /* --- quote-only testimonial --- Not every client has a usable before/after. A quote card with no image slot is better than a card with an empty one. */ .quote-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:34px 32px; display:flex; flex-direction:column; gap:20px; transition:border-color .3s var(--ease), transform .3s var(--ease); } .quote-card:hover{ border-color:var(--accent-line); transform:translateY(-3px); } .quote-card__mark{ width:22px; height:22px; fill:var(--accent); opacity:.85; } .quote-card__quote{ margin:0; flex:1; color:var(--text); font-family:var(--display); font-size:clamp(17px,1.9vw,20px); font-weight:500; line-height:1.45; letter-spacing:-.01em; } .quote-card__who{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600; padding-top:18px; border-top:1px solid var(--line); } /* Masonry-ish mixed grid for the full results page. */ .proof__grid--full{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } /* --- video slot --- */ .vids{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; } .vid{ aspect-ratio:9/16; border-radius:var(--r); border:1px solid var(--line); background: repeating-linear-gradient(45deg, rgba(242,237,227,.02) 0 12px, transparent 12px 24px), linear-gradient(160deg, #11141a, #08090c); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; position:relative; overflow:hidden; } .vid video, .vid img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vid__play{ width:54px; height:54px; border-radius:50%; border:1.5px solid var(--accent); background:var(--accent-dim); display:flex; align-items:center; justify-content:center; box-shadow:0 0 26px rgba(79,168,224,.3); } .vid__play svg{ width:20px; height:20px; fill:var(--accent); margin-left:3px; } .vid__label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); font-weight:600; text-align:center; padding:0 18px; } /* --- long-form story (about page) --- */ .story{ max-width:820px; } .story__block{ padding-bottom:clamp(36px,5vw,52px); margin-bottom:clamp(36px,5vw,52px); border-bottom:1px solid var(--line); } .story__block:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; } .story__step{ margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); } .story__h2{ font-size:clamp(24px,3.4vw,36px); text-transform:uppercase; margin-bottom:20px; } .story p{ color:var(--muted); font-size:17px; line-height:1.75; } .story b{ color:var(--text); font-weight:600; } .story em{ color:var(--muted-2); } .story__quote{ margin:32px 0; padding:22px 0 22px 26px; border-left:2px solid var(--accent); font-family:var(--display); font-size:clamp(19px,2.3vw,24px); font-weight:600; line-height:1.35; color:var(--text); letter-spacing:-.01em; } .story__list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:15px; } .story__list li{ position:relative; padding-left:30px; color:var(--muted); font-size:16.5px; line-height:1.65; } .story__list li::before{ content:""; position:absolute; left:0; top:2px; width:17px; height:17px; background:no-repeat center/12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 2 5 13.4h5.4L9.3 22 19 10.3h-5.8z' fill='%234fa8e0'/%3E%3C/svg%3E"); } /* Portrait band on the about page. */ .story__portrait{ margin:0 0 clamp(36px,5vw,52px); border-radius:var(--r); border:1px solid var(--line); overflow:hidden; aspect-ratio:16/10; background:linear-gradient(160deg, #11141a, #08090c); display:flex; align-items:center; justify-content:center; position:relative; } .story__portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; } .story__portrait::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 58%, rgba(4,5,6,.6)); pointer-events:none; } /* ========================================================= APPLICATION WIZARD (apply.html) ========================================================= */ .apply-page{ min-height:100vh; display:flex; flex-direction:column; background: radial-gradient(80% 60% at 50% -10%, rgba(79,168,224,.11), transparent 60%), var(--bg); } .apply__bar{ position:sticky; top:0; z-index:20; background:rgba(4,5,6,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .apply__bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px; } .apply__count{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600; } .apply__progress{ height:2px; background:var(--line); position:relative; overflow:hidden; } .apply__progress i{ position:absolute; inset:0 auto 0 0; background:var(--accent); width:0%; box-shadow:0 0 12px rgba(79,168,224,.8); transition:width .45s var(--ease); } .apply__main{ flex:1; display:flex; align-items:center; padding:clamp(40px,8vh,88px) 0; } .apply__shell{ width:100%; max-width:720px; margin:0 auto; padding:0 28px; } .q{ display:none; } .q.is-active{ display:block; animation:qin .45s var(--ease); } @keyframes qin{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .q.is-active{ animation:none; } } .q__index{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:block; } .q__title{ font-size:clamp(26px,3.8vw,40px); line-height:1.15; margin-bottom:14px; } .q__help{ color:var(--muted); font-size:16px; margin:0 0 30px; max-width:56ch; } .field{ width:100%; background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; padding:16px 18px; transition:border-color .2s var(--ease), background .2s var(--ease); -webkit-appearance:none; appearance:none; } .field::placeholder{ color:var(--muted-2); } .field:focus{ outline:none; border-color:var(--accent); background:var(--surface); } textarea.field{ min-height:150px; resize:vertical; } /* Contact screen, several labelled fields on one step. */ .group{ display:grid; gap:18px; } .group__row{ display:block; } .group__label{ display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:9px; } .group__row:focus-within .group__label{ color:var(--accent); } .choices{ display:grid; gap:12px; } .choice{ display:flex; align-items:flex-start; gap:16px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:18px 20px; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .choice:hover{ border-color:var(--line-2); background:var(--surface); transform:translateY(-1px); } .choice input{ position:absolute; opacity:0; pointer-events:none; } .choice__dot{ flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%; border:1.5px solid var(--line-2); position:relative; transition:border-color .2s var(--ease); } .choice__dot::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .2s var(--ease); } .choice__text b{ display:block; font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; } .choice__text small{ color:var(--muted); font-size:14px; line-height:1.5; display:block; } /* Multi-select reads as a square with a bolt, so nobody mistakes it for a pick-one and stops at the first option. */ .choice--check .choice__dot{ border-radius:6px; } .choice--check .choice__dot::after{ inset:0; border-radius:0; background:no-repeat center/11px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 2 5 13.4h5.4L9.3 22 19 10.3h-5.8z' fill='%234fa8e0'/%3E%3C/svg%3E"); } .choice:has(input:checked){ border-color:var(--accent); background:linear-gradient(180deg, rgba(79,168,224,.10), var(--surface)); } .choice:has(input:checked) .choice__dot{ border-color:var(--accent); } .choice:has(input:checked) .choice__dot::after{ transform:scale(1); } .choice:focus-within{ outline:2px solid var(--accent-hi); outline-offset:3px; } .q__error{ margin-top:14px; font-size:14px; color:var(--accent-hi); display:none; } .q__error.is-on{ display:block; } .q__nav{ display:flex; align-items:center; gap:14px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line); } .q__nav .spacer{ flex:1; } .q__hint{ font-size:12px; color:var(--muted-2); letter-spacing:.04em; } /* Phones: the primary button goes full width on its own row rather than fighting the back link for space and wrapping its own label. */ @media (max-width:560px){ .q__hint{ display:none; } .q__nav{ flex-wrap:wrap; gap:12px; } .q__nav .spacer{ display:none; } .q__nav .btn{ flex:1 1 100%; order:-1; justify-content:center; } .q__nav .back-link{ flex:0 0 auto; } } .back-link{ background:none; border:0; cursor:pointer; color:var(--muted-2); font-family:var(--sans); font-size:14px; padding:8px 4px; transition:color .2s var(--ease); } .back-link:hover{ color:var(--text); } /* --- confirmation --- */ .done{ display:none; text-align:center; } .done.is-active{ display:block; animation:qin .5s var(--ease); } .done__mark{ width:64px; height:64px; margin:0 auto 28px; border-radius:50%; border:1.5px solid var(--accent); background:var(--accent-dim); display:flex; align-items:center; justify-content:center; box-shadow:0 0 28px rgba(79,168,224,.35); } .done__title{ font-size:clamp(30px,4.4vw,46px); text-transform:uppercase; margin-bottom:18px; } .done__body{ color:var(--muted); font-size:17px; max-width:52ch; margin:0 auto; } .done__actions{ margin-top:34px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; } .done__panel{ margin-top:44px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; } .done__panel h3{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--sans); color:var(--muted-2); font-weight:600; margin-bottom:18px; } .done__panel ol{ margin:0; padding-left:20px; color:var(--muted); font-size:15px; display:grid; gap:10px; } /* --- setter handoff preview (demo only, ?demo=1) --- */ .handoff{ display:none; margin-top:44px; text-align:left; background:var(--surface); border:1px dashed var(--accent-line); border-radius:var(--r); padding:26px; } .handoff.is-on{ display:block; } .handoff__tag{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:16px; } .handoff__score{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:7px 16px; margin-bottom:20px; } .handoff__score[data-tier="hot"]{ background:var(--accent-btn); color:var(--text); } .handoff__score[data-tier="qualified"]{ background:var(--accent-dim); color:var(--accent-hi); border:1px solid var(--accent-line); } .handoff__score[data-tier="nurture"]{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line-2); } .handoff__score[data-tier="declined"]{ background:var(--surface-2); color:var(--muted-2); border:1px solid var(--line); } .handoff pre{ margin:0; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.65; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:18px; max-height:340px; overflow:auto; } /* ========================================================= SHINE A roaming metallic gradient on accent text, a highlight sweeping across pills, a breathing rim glow, and a bloom under the primary buttons. The sweeps animate transform only, so they stay on the compositor. The roam animates background-position, which does repaint, so it is kept to small accent text rather than large areas. Everything stops for reduced-motion visitors at the bottom of the block. ========================================================= */ @keyframes accentRoam{ 0% { background-position: 0% 50%; } 25% { background-position: 65% 8%; } 50% { background-position: 100% 55%; } 75% { background-position: 35% 95%; } 100% { background-position: 0% 50%; } } @keyframes pillSweep{ 0% { transform:translateX(-170%); } 100% { transform:translateX(330%); } } @keyframes accentPulse{ 0%,100% { box-shadow:0 0 14px rgba(79,168,224,.14), inset 0 0 10px rgba(79,168,224,.06); } 50% { box-shadow:0 0 26px rgba(127,200,245,.34), inset 0 0 14px rgba(79,168,224,.15); } } @keyframes ctaGlow{ 0%,100% { box-shadow:0 0 0 0 rgba(127,200,245,0); } 50% { box-shadow:0 0 34px 2px rgba(127,200,245,.42); } } @supports (-webkit-background-clip:text) or (background-clip:text){ .eyebrow, .follow__label{ background-image:linear-gradient(115deg, var(--accent) 0%, var(--accent) 34%, var(--accent-mid) 44%, var(--accent-peak) 50%, var(--accent-mid) 56%, var(--accent) 66%, var(--accent) 100%); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 9px rgba(79,168,224,.4)); animation:accentRoam 4.6s ease-in-out infinite; } /* THAR in the intro gets a slower, heavier version. */ .intro__l--b{ background-image:linear-gradient(115deg, var(--accent) 0%, var(--accent) 32%, var(--accent-mid) 43%, var(--accent-peak) 50%, var(--accent-mid) 57%, var(--accent) 68%, var(--accent) 100%); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(79,168,224,.5)); /* Both animations, not just the roam. These letters already carry the slide-in from .intro__l, and a bare animation here would replace it, so THAR would never travel in. */ animation: slideAcross .85s cubic-bezier(.16,.84,.34,1) var(--d) forwards, accentRoam 3.4s ease-in-out infinite; } .brand em{ background-image:linear-gradient(115deg, var(--accent) 0%, var(--accent) 36%, var(--accent-mid) 46%, var(--accent-peak) 50%, var(--accent-mid) 54%, var(--accent) 64%, var(--accent) 100%); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:accentRoam 5.2s ease-in-out infinite; } } /* Pills: rim glow plus a highlight sweeping across, staggered so they do not pulse in lockstep. */ .follow__btn, .step__tag, .about__facts li{ position:relative; overflow:hidden; animation:accentPulse 3.6s ease-in-out infinite; } .follow__btn::after, .step__tag::after, .about__facts li::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:44%; background:linear-gradient(115deg, transparent, rgba(242,237,227,.18), transparent); transform:translateX(-170%); pointer-events:none; animation:pillSweep 4.2s linear infinite; } .follow__btn:nth-child(2), .follow__btn:nth-child(2)::after{ animation-delay:.85s; } .follow__btn:nth-child(3), .follow__btn:nth-child(3)::after{ animation-delay:1.5s; } .step__tag{ animation-delay:.5s; } .about__facts li:nth-child(even), .about__facts li:nth-child(even)::after{ animation-delay:1.1s; } .follow__btn:hover{ animation-play-state:paused; box-shadow:0 0 28px rgba(127,200,245,.4), inset 0 0 14px rgba(79,168,224,.16); } /* The money buttons. A bloom underneath pulls the eye without touching the fill, so the cream-on-blue contrast is untouched. */ .btn--primary{ animation:ctaGlow 3.2s ease-in-out infinite; } .btn--primary:hover{ animation-play-state:paused; box-shadow:0 0 32px 2px rgba(127,200,245,.48); } .intro__rule{ box-shadow:0 0 18px rgba(79,168,224,.6); } .follow__btn{ box-shadow:0 10px 26px -18px rgba(79,168,224,.9); } @media (prefers-reduced-motion:reduce){ .eyebrow, .follow__label, .intro__l--b, .brand em, .follow__btn, .step__tag, .about__facts li, .btn--primary{ animation:none; background-position:0 0; } .follow__btn::after, .step__tag::after, .about__facts li::after{ display:none; } } /* =============== REELS (latest from Josh) =============== */ /* Three vertical slots for his own clips. Behaves like the feed people already know: muted autoplay on scroll into view, loop, tap for sound. Files are NOT bundled. Each slot degrades to its own filename until an mp4 is dropped in, same pattern as the photo slots, so the section is safe to ship empty. */ .reels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; max-width:920px; margin-inline:auto; } .reel{ position:relative; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background: repeating-linear-gradient(45deg, rgba(242,237,227,.02) 0 12px, transparent 12px 24px), linear-gradient(160deg, #11141a, #08090c); transition:border-color .3s var(--ease), transform .3s var(--ease); } .reel:hover{ border-color:var(--accent-line); transform:translateY(-3px); } .reel__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#06080b; } /* Poster sits underneath the video permanently. With an mp4 present the video covers it; without one, JS adds .is-empty, the video and the sound control go away, and the poster plus a link out to the source clip take over. That is a real state, not a placeholder, so the section looks finished either way. */ .reel__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .reel.is-empty .reel__vid, .reel.is-empty .reel__toggle{ display:none; } .reel__link{ position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; background:linear-gradient(180deg, rgba(4,5,6,.15), rgba(4,5,6,.55)); transition:background .25s var(--ease); } .reel.is-empty .reel__link{ display:flex; } .reel__link:hover{ background:linear-gradient(180deg, rgba(4,5,6,.05), rgba(4,5,6,.4)); } .reel__link:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:-4px; } .reel__play{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(4,5,6,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1.5px solid var(--accent); box-shadow:0 0 26px rgba(79,168,224,.35); transition:transform .25s var(--ease); } .reel__link:hover .reel__play{ transform:scale(1.07); } .reel__play svg{ width:20px; height:20px; fill:var(--text); margin-left:3px; } .reel__linklabel{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--text); text-shadow:0 1px 10px rgba(4,5,6,.9); } /* Whole-tile hit target. Invisible until you look for it, which is right for something that is already playing. */ .reel__toggle{ position:absolute; inset:0; z-index:2; border:0; padding:0; margin:0; background:transparent; cursor:pointer; display:flex; align-items:flex-end; justify-content:flex-end; } .reel__toggle:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:-4px; } .reel__sound{ margin:0 14px 14px; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(4,5,6,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid var(--line-2); transition:border-color .2s var(--ease), background .2s var(--ease); } .reel__toggle:hover .reel__sound{ border-color:var(--accent); background:rgba(4,5,6,.8); } .reel__sound svg{ width:17px; height:17px; fill:var(--text); } /* Two icons stacked, one shown at a time. */ .reel__sound .on{ display:none; } .reel.is-unmuted .reel__sound .on{ display:block; } .reel.is-unmuted .reel__sound .off{ display:none; } .reel.is-unmuted .reel__sound{ border-color:var(--accent); } /* A soft floor so white captions burned into the clip stay readable and the tile does not end on a hard bright edge. */ .reel::after{ content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(180deg, transparent, rgba(4,5,6,.55)); pointer-events:none; z-index:1; } @media (prefers-reduced-motion:reduce){ /* Held as a poster frame. main.js also skips autoplay entirely. */ .reel__vid{ animation:none; } } /* =============== SITE CREDIT =============== */ /* Isaiah's mark, same pill as every client site. */ .site-credit{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:30px;background:#1d1d22;border:1px solid rgba(255,255,255,.12);transition:transform .2s} .site-credit:hover{transform:translateY(-1px)} .site-credit .ig{width:30px;height:30px;flex:none;display:block} .site-credit .cr-txt{display:flex;flex-direction:column;line-height:1.15} .site-credit .cr-label{font-size:7.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:#b0b0ba} .site-credit .cr-name{font:500 14px/1 Inter,system-ui,sans-serif;color:#fff} /* =============== BOOK A CALL =============== */ /* Josh's Calendly, inline, in the closing section and on the application confirmation. The frame is the site's card, the calendar sits inside. */ .book{ max-width:1000px; margin:clamp(64px,9vw,110px) auto 0; padding-top:clamp(48px,7vw,80px); border-top:1px solid var(--line); text-align:center; } .book__title{ font-size:clamp(26px,3.4vw,38px); text-transform:uppercase; margin:10px 0 12px; } .book__sub{ color:var(--muted); max-width:48ch; margin:0 auto 28px; } .book__frame{ position:relative; height:700px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); background:var(--surface); box-shadow:0 0 0 1px rgba(79,168,224,.06), 0 30px 80px -30px rgba(79,168,224,.25); } .book__frame iframe{ display:block; width:100%; height:100%; border:0; } .book__fallback{ display:inline-block; margin-top:16px; font-size:13px; color:var(--muted-2); text-decoration:underline; text-underline-offset:3px; } .book__fallback:hover{ color:var(--accent-hi); } @media (max-width:640px){ .book__frame{ height:780px; margin-inline:-12px; } } /* On the application confirmation, under the buttons. */ .done__cal{ margin-top:28px; } .done__cal[hidden]{ display:none; } .done__cal-label{ margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); } .done__cal .book__frame{ height:660px; }