/* BRUTE marketing site — design tokens ported directly from the app's own src/index.css, not approximated. Keep these two files in sync by hand if the app's palette ever changes. */ :root { --bg-base: #0D1117; --bg-card: #1A1E24; --bg-raised: #262A30; --accent: #5FE8D0; --accent2: #74A8FF; --gradient: linear-gradient(135deg, var(--accent), var(--accent2)); --text-1: #F2F5F8; --text-2: #8B96A5; --text-3: #4E5867; --success: #3ECF6E; --border: rgba(255, 255, 255, 0.10); --border-em: rgba(255, 255, 255, 0.16); --on-accent: #05141F; } * { box-sizing: border-box; } /* ---- Cursor spotlight ---- A soft glow that tracks the cursor across a card's surface — position set via --sx/--sy (assets/interactions.js), painted on a ::before so the card's own background/border/content are untouched. The parent needs its own overflow:hidden to clip the glow to its rounded corners; that does NOT clip a sibling box-shadow (box-shadow paints as part of the border, outside the overflow-clipped content box), so cards that rely on an outward glow (.plan-card.featured) keep it. */ .spotlight { position: relative; overflow: hidden; } .spotlight::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(95,232,208,0.16), transparent 70%); opacity: 0; transition: opacity .4s ease; } .spotlight:hover::before { opacity: 1; } .spotlight > * { position: relative; z-index: 1; } /* ---- Scroll progress bar ---- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--gradient); transform: scaleX(0); transform-origin: left center; z-index: 100; will-change: transform; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-base); color: var(--text-1); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---- Ambient glow — same recipe as the app (src/index.css), with real working @keyframes since we're not fighting a CMS's CSS sanitizer here. ---- */ .ambient-glow { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Each blob is a positioning wrapper (static offset via *transform*, not negative top/right/bottom/left — a negative inset still counts toward the page's scrollable width even when a fixed ancestor clips it visually, which was silently forcing horizontal overflow/nav clipping on mobile) plus an inner element that owns the animation's own transform. Two transforms can't compose on one element via a CSS animation, hence the split. */ .glow-1-pos, .glow-2-pos, .glow-3-pos, .glow-4-pos { position: absolute; } .glow-1, .glow-2, .glow-3, .glow-4 { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; } .glow-1-pos { top: 0; right: 0; width: 340px; height: 340px; transform: translate(70px, -90px); } .glow-1 { background: radial-gradient(circle, rgba(95,232,208,0.18), transparent 70%); animation: glowPulse 7s ease-in-out infinite; } .glow-2-pos { top: 300px; left: 0; width: 280px; height: 280px; transform: translateX(-110px); } .glow-2 { background: radial-gradient(circle, rgba(116,168,255,0.15), transparent 70%); animation: glowPulse 7s ease-in-out infinite; animation-delay: 1.5s; } .glow-3-pos { bottom: 0; right: 60px; width: 300px; height: 300px; transform: translateY(80px); } .glow-3 { background: radial-gradient(circle, rgba(95,232,208,0.13), transparent 70%); animation: glowFloat1 24s ease-in-out infinite; } .glow-4-pos { top: 42%; right: 0; width: 260px; height: 260px; transform: translateX(110px); } .glow-4 { background: radial-gradient(circle, rgba(116,168,255,0.11), transparent 70%); animation: glowFloat2 28s ease-in-out infinite; animation-delay: 3s; } @keyframes glowPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } @keyframes glowFloat1 { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(40px, -60px) scale(1.08); } 50% { transform: translate(-25px, -110px) scale(0.95); } 75% { transform: translate(-60px, -40px) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @keyframes glowFloat2 { 0% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-55px, 45px) scale(1.1); } 60% { transform: translate(25px, 95px) scale(0.92); } 100% { transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .glow-1, .glow-2, .glow-3, .glow-4 { animation: none; } } main { position: relative; z-index: 1; } /* ---- Nav ---- */ .nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: rgba(13,17,23,0.55); border-bottom: 1px solid transparent; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } /* .scrolled is toggled by assets/scroll-fx.js once the page scrolls past the hero — reads as "arrived" rather than identical from pixel 0. */ .nav.scrolled { background: rgba(13,17,23,0.82); border-bottom-color: var(--border); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); } .nav-inner { max-width: 1180px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo img { height: 18px; width: auto; } .nav-links { display: none; align-items: center; gap: 32px; } .nav-links a { text-decoration: none; color: var(--text-2); font-size: 14px; font-weight: 500; transition: color .15s ease; } .nav-links a:hover { color: var(--text-1); } @media (min-width: 720px) { .nav-links { display: flex; } } .nav-cta { padding: 10px 18px; font-size: 13px; } @media (min-width: 720px) { .nav-cta { padding: 13px 26px; font-size: 14.5px; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 25px; font-weight: 700; font-size: 14.5px; text-decoration: none; border: none; cursor: pointer; font-family: inherit; /* --mx/--my are set on primary buttons by assets/interactions.js (cursor "pull" within the button's own bounds) and default to 0 everywhere else, so :hover/:active can layer their own lift/press on top of whatever magnetic offset is currently applied, instead of one transform declaration silently replacing the other. */ --mx: 0px; --my: 0px; transform: translate(var(--mx), var(--my)); transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease; } .btn:hover { transform: translate(var(--mx), calc(var(--my) - 2px)) scale(1.015); } .btn:active { transform: translate(var(--mx), var(--my)) scale(0.98); transition-duration: .1s; } .btn-primary { background: var(--gradient); color: var(--on-accent); box-shadow: 0 8px 24px -8px rgba(95,232,208,0.4); transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .35s ease; } .btn-primary:hover { box-shadow: 0 12px 34px -8px rgba(95,232,208,0.65), 0 0 0 4px rgba(95,232,208,0.12); } .btn-secondary { background: transparent; color: var(--text-1); border: 1px solid var(--border-em); } .btn-lg { padding: 16px 34px; font-size: 16px; } /* ---- Typography ---- */ .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .lede { color: var(--text-2); font-size: 18px; line-height: 1.65; max-width: 72ch; } /* ---- Hero ---- padding-top/bottom only, deliberately not the `padding: Xpx 0 Ypx` shorthand — .hero shares its element with .wrap (`class="wrap hero"`), and a shorthand here has equal specificity to .wrap's own `padding: 0 24px` but wins on source order, silently zeroing the horizontal padding entirely. On desktop that's invisible (.wrap's max-width + auto margins still center content with room either side), but on mobile — where content fills the full viewport width — text was landing flush against the screen edge. Same bug, same fix, hit .pricing-hero/.blog-hero/.article-shell below too. */ .hero { padding-top: 96px; padding-bottom: 80px; display: grid; gap: 56px; align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); padding-top: 128px; padding-bottom: 100px; } } .hero-copy h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; margin-bottom: 22px; } .hero-copy h1 .accent-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-cta-row { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; } .hero-note { color: var(--text-3); font-size: 13px; margin-top: 14px; } /* Load-in sequence: each direct child of .hero-copy fades/rises in on page load (not scroll-triggered — the hero is visible at scroll:0, so this runs immediately via CSS animation, not the IntersectionObserver-driven .reveal system the rest of the page uses). Staggered by animation-delay so it reads as one considered entrance, not everything popping at once. .hero-visual keeps its existing .reveal class for the fade itself, just with an added delay here so the phone settles in just after the copy. */ @keyframes heroIn { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .hero-copy > * { opacity: 0; animation: heroIn .9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-copy > .eyebrow { animation-delay: .05s; } .hero-copy > h1 { animation-delay: .16s; } .hero-copy > .lede { animation-delay: .38s; } .hero-copy > .hero-cta-row { animation-delay: .56s; } .hero-copy > .hero-scroll-cue { animation-delay: .64s; } .hero-copy > .hero-note { animation-delay: .7s; } .hero-visual.reveal { transition-delay: .4s; } /* One CTA per section (per copy-amendments doc): the hero's secondary button was replaced with this smaller, unboxed "scroll to learn more" affordance so there's exactly one real call-to-action in the hero. */ .hero-scroll-cue { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: color .2s ease; } .hero-scroll-cue:hover { color: var(--text-1); } .hero-scroll-cue svg { animation: heroScrollCueBounce 1.8s ease-in-out infinite; } @keyframes heroScrollCueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .hero-visual { position: relative; display: flex; justify-content: center; } .phone-frame { width: 100%; max-width: 320px; border-radius: 32px; overflow: hidden; border: 1px solid var(--border-em); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); background: var(--bg-card); } .phone-frame img { width: 100%; } /* ---- Hero instrument panel ---- Three prior approaches — a scroll-pan slideshow, a real screen recording, a tile-fly-in composited from cropped app screenshots — were all photographic: they tried to fake "video" out of static images and kept failing on frame rate, codec pixelation, crop seams, or aspect-ratio zoom, because a screenshot reads as a screenshot the moment it's asked to move like footage. This replaces all of that with a live, real vector diagram — no screenshots, no video, no export/capture pipeline of any kind — so what renders in the browser is the only artifact and stays crisp at any size. It's a small technical schematic, not app chrome: a single GOAL value (assets/hero-instrument.js cycles between a few real example goals) fans out over four lines to four instrument readouts — Programme, Macros, Meals, Adjustment — which redraw in sync every time the goal changes. That single beat is the actual product pitch ("one goal, four systems, together") made literal, rather than a tour of screens. */ /* "Glass console" treatment (per hero follow-up, 2026-09-02): a real frosted- glass surface — backdrop-filter blurs and tints whatever's actually behind the panel (the page's own mint ambient-glow blob sits right behind it, see .glow-1 in this file), rather than a flat opaque card. Inset highlight/ shadow pairs on the panel and each module fake a physical bevel — a light catching the top edge, a shadow pooling at the bottom — instead of a single flat border, which is what actually reads as "real hardware" rather than a drawn rectangle. */ .ip-stage { position: relative; width: 100%; max-width: 320px; aspect-ratio: 2 / 3; margin: 0 auto; } .instrument-panel { position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 0 40px rgba(95,232,208,0.05); background: rgba(26,30,36,0.55); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); padding: 22px 20px 20px; display: flex; flex-direction: column; } /* A slow diagonal specular sweep — glass catching a passing light, not a data effect. One soft pass every ~7s, distinct from (and much subtler than) the pulse/sync motion that reacts to actual state changes. */ .instrument-panel::before { content: ''; position: absolute; inset: -50% -20%; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.08) 48%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 52%, transparent 60%); transform: translateX(-100%); animation: ipSpecularSweep 7s ease-in-out infinite; } @keyframes ipSpecularSweep { 0%, 40% { transform: translateX(-120%); } 70%, 100% { transform: translateX(60%); } } .ip-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 90%); mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 90%); } /* ---- Currents ---- Four jagged, lightning-style bolts travel in from the real edges of the screen — left, right, top, bottom — each landing on the panel edge nearest one of the four satellite modules (left->Programme, right-> Adjustment, top->Macros, bottom->Meals). A direct child of body (see index.html) with real fixed positioning spanning the viewport — it has to live outside .hero entirely, because any ancestor with a transform (the .reveal entrance animation included) traps position:fixed descendants inside itself instead of the true viewport. Sits above the page's own content (z-index, below only nav and the scroll progress bar) so a bolt crossing the hero copy is genuinely visible, not hidden behind it. Geometry (viewBox + every path's start/end point) is computed at fire time from real measured element positions — assets/hero-instrument.js — not guessed percentages. */ .ip-currents { position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; z-index: 6; } /* Opacity/offset-distance are set directly per-frame from JS (fireCurrents in hero-instrument.js), not via a CSS keyframe restarted by toggling a class — a class-remove-reflow-add restart trick depends on the browser correctly recognizing "this is a new animation instance" within one synchronous window, and that turned out not to be reliable enough across real browsers for something firing repeatedly forever. Driving the numbers straight from a fresh requestAnimationFrame loop every single fire removes that dependency entirely — there's no animation state to fail to restart. */ .ip-current { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 8px rgba(95,232,208,.9)) drop-shadow(0 0 20px rgba(95,232,208,.55)); } .ip-current-fork { fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px rgba(116,168,255,.7)); } .ip-current-glow { fill: #fff; opacity: 0; offset-distance: 0%; filter: drop-shadow(0 0 10px rgba(95,232,208,1)) drop-shadow(0 0 22px rgba(95,232,208,.7)); } .ip-header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; } .ip-header-tag { font-size: 10px; letter-spacing: 0.08em; color: var(--text-3); } .ip-live { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.08em; color: var(--accent); } .ip-live-label { transition: color .15s ease; } .ip-live.is-syncing .ip-live-label { color: var(--accent2); } /* A quick bright sweep across the whole panel timed to the goal-value swap — dramatizes "the system just recalculated" as a single readable beat instead of the value silently changing underneath it. */ .ip-scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; pointer-events: none; } .ip-scanline.is-active { animation: ipScanSweep .5s ease-out; } @keyframes ipScanSweep { 0% { top: 0; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { top: 100%; opacity: 0; } } .ip-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(95,232,208,0.6); animation: ipLivePulse 2s ease-out infinite; } @keyframes ipLivePulse { 0% { box-shadow: 0 0 0 0 rgba(95,232,208,0.5); } 70% { box-shadow: 0 0 0 6px rgba(95,232,208,0); } 100% { box-shadow: 0 0 0 0 rgba(95,232,208,0); } } /* GOAL is the trigger, not decoration — sized and bordered to read as "the input that causes everything below," even though the big gauge still carries the panel visually. Its value decodes character-by- character on change (assets/hero-instrument.js) rather than fading, which is what actually fires the currents below. */ .ip-goal { position: relative; z-index: 1; align-self: center; display: inline-flex; align-items: baseline; gap: 9px; margin-top: 16px; padding: 8px 18px; background: rgba(0,0,0,0.22); border: 1px solid rgba(95,232,208,0.3); border-radius: 20px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 16px rgba(95,232,208,0.12); transition: border-color .2s ease, box-shadow .2s ease; } .ip-goal.is-swapping { border-color: rgba(95,232,208,0.7); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 22px rgba(95,232,208,0.35); } .ip-goal-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; color: var(--accent); } .ip-goal-value { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 14.5px; letter-spacing: 0.02em; color: var(--text-1); } /* ---- Hero gauge — the panel's dominant element ---- A large open-bottom arc gauge (270° sweep, gauge/speedometer geometry, not a full pie ring — deliberately reads as an instrument, not a % chart) showing the Strength Score, with the four systems below feeding into it as smaller satellites. This exists because polishing the old flat four-box grid (glass, glow, motion) had a hard ceiling — nothing in it was big enough to actually command attention. Scale and hierarchy are what read as "impressive," not surface texture. */ .ip-hero { position: relative; z-index: 1; width: min(184px, 58%); aspect-ratio: 1 / 1; margin: 18px auto 26px; } .ip-hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ip-hero-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 14; stroke-linecap: round; } .ip-hero-value { fill: none; stroke: url(#ipRingGrad); stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(95,232,208,.45)); transition: stroke-dasharray .9s cubic-bezier(0.34, 1, 0.64, 1), filter .3s ease; } .ip-hero-tip { fill: #fff; offset-distance: 0%; filter: drop-shadow(0 0 7px rgba(95,232,208,.95)); transition: offset-distance .9s cubic-bezier(0.34, 1, 0.64, 1); } .ip-hero-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); } .ip-hero-value-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: clamp(30px, 9.5vw, 38px); font-variant-numeric: tabular-nums; color: var(--text-1); text-shadow: 0 0 26px rgba(95,232,208,0.45); line-height: 1; } .ip-hero-value-unit { font-size: 0.42em; font-weight: 600; color: var(--text-2); } .ip-hero-value-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-top: 6px; /* Hard cap regardless of label length — the gauge's inner safe area (inside the 14px-wide arc stroke) is fixed-size, so a longer label ("CURRENT BODY FAT" overflowed into the ring) needs to wrap rather than push past it, not just fit today's specific label text. */ max-width: 92px; line-height: 1.25; } .ip-hero.is-hit .ip-hero-value { filter: drop-shadow(0 0 22px rgba(95,232,208,.9)); } .ip-hero.is-hit .ip-hero-center { transform: scale(1.07); } /* Bodyweight + body fat — the raw inputs the current->target calculation above is actually built from, not a streak counter with no relationship to "you just set a goal." Consistent across every goal type, including when the goal itself is a body-fat target (a minor, honest redundancy — BRUTE would read both from the same underlying stat either way). */ .ip-baseline-badge { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); white-space: nowrap; background: rgba(13,17,23,0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 5px 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; color: var(--accent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ip-baseline-unit, .ip-baseline-sep { color: var(--text-2); font-weight: 500; } .ip-modules { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ip-module { display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 10px 4px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -6px 10px -6px rgba(0,0,0,0.35); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); } .ip-module svg { width: 100%; height: 26px; } .ip-module-label { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); text-align: center; line-height: 1.2; } /* "Harder-hitting updates" (per copy-amendments follow-up, 2026-09-02): each module flashes and pops the instant its pulse burst arrives, so a data update reads as a distinct event rather than a shape quietly reflowing. Fast transition-in (.15s) so the hit reads as a snap, not a fade; the slower spring transform (.4s, overshoot easing) is what settles back and gives it a physical "landing" feel. assets/hero-instrument.js times this to the pulse travel duration and removes the class after ~550ms. */ .ip-module.is-hit { border-color: var(--accent); background: rgba(95,232,208,0.12); box-shadow: 0 0 0 1.5px var(--accent), 0 0 28px rgba(95,232,208,.6); transform: scale(1.08); } .ip-bar { fill: var(--accent2); transform-box: fill-box; transform-origin: bottom; } .ip-bar-adj { fill: var(--accent); } .ip-ring-track { fill: none; stroke: var(--border-em); stroke-width: 5; } .ip-ring-group { transform: rotate(-90deg); transform-origin: 16px 16px; } .ip-ring { fill: none; stroke-width: 5; } .ip-ring-p { stroke: var(--accent2); } .ip-ring-c { stroke: var(--accent); } .ip-ring-f { stroke: #E8B85F; } .ip-tile { fill: var(--text-3); fill-opacity: 0.35; } .ip-tile-on { fill: var(--accent); fill-opacity: 1; } /* "Collapse and rebuild": module content is set to its new value first (JS, instantly, no passive transition), then this keyframe plays over it — bars/ring/tiles briefly collapse toward nothing and spring back, so an update reads as "recalculated from scratch," not "slid to a new number." Timed by JS to land with each module's own current arrival. */ .ip-module svg.is-rebuilding .ip-bar { animation: ipBarRebuild .5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes ipBarRebuild { 0% { transform: scaleY(1); } 30% { transform: scaleY(0.1); } 100% { transform: scaleY(1); } } .ip-module svg.is-rebuilding .ip-ring-group { animation: ipRingRebuild .5s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 16px 16px; } @keyframes ipRingRebuild { 0% { transform: rotate(-90deg) scale(1); opacity: 1; } 30% { transform: rotate(-90deg) scale(0.4); opacity: .4; } 100% { transform: rotate(-90deg) scale(1); opacity: 1; } } .ip-module svg.is-rebuilding .ip-tile { animation: ipTileRebuild .5s ease; } @keyframes ipTileRebuild { 0% { opacity: 1; } 30% { opacity: .15; } 100% { opacity: 1; } } /* ---- Stat strip ---- */ .stat-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 40px 0; } @media (min-width: 720px) { .stat-strip { grid-template-columns: repeat(4,1fr); } } .stat-cell { background: var(--bg-card); padding: 24px 20px; } .stat-cell .num { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; white-space: nowrap; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-cell .lbl { color: var(--text-2); font-size: 13px; margin-top: 6px; } /* ---- Sections ---- */ .section { padding: 88px 0; } .section-head { max-width: 640px; margin: 0 auto 56px; } .section-head.left { margin: 0 0 56px; } .section-head.wide { max-width: 820px; } .section-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 16px; } /* ---- Audience cards ---- */ /* ---- Cycling headline ("BRUTE is for ___") ---- .cycle-box clips to exactly one line's height; .cycle-list is a flex column of words (the first word duplicated at the end) translated up by 100% per step via assets/cycle-text.js. On reaching the duplicate — which is visually identical to word 1 — the script snaps back to 0 with transitions off for one frame, an invisible reset rather than a visible jump backwards. Sizing/color intentionally mirrors .hero-copy h1 .accent-text so this reads as a continuation of the hero's voice, not a different component. */ .cycle-h2 { font-size: clamp(28px, 3.6vw, 40px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; } .cycle-box { display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.15em; line-height: 1.15em; } .cycle-list { display: flex; flex-direction: column; transition: transform .65s cubic-bezier(0.65, 0, 0.35, 1); } .cycle-list span { display: block; height: 1.15em; line-height: 1.15em; white-space: nowrap; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .audience-intro { color: var(--text-2); font-size: 16px; max-width: 62ch; margin: 0 0 40px; } .audience-grid { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); } @media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1040px) { .audience-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } .audience-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 26px 24px; transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .3s ease; } .audience-card:hover { transform: translateY(-4px); border-color: var(--border-em); } .audience-card h3 { font-size: 17px; margin-bottom: 10px; } .audience-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0; } /* Cards share one .reveal trigger (they cross the viewport threshold at effectively the same scroll position), so the cascade comes from a per-card transition-delay, not from staggering when the class lands. */ .audience-grid .audience-card:nth-child(1), .audience-grid .audience-card:nth-child(5) { transition-delay: 0s, 0s; } .audience-grid .audience-card:nth-child(2), .audience-grid .audience-card:nth-child(6) { transition-delay: .08s, .08s; } .audience-grid .audience-card:nth-child(3), .audience-grid .audience-card:nth-child(7) { transition-delay: .16s, .16s; } .audience-grid .audience-card:nth-child(4), .audience-grid .audience-card:nth-child(8) { transition-delay: .24s, .24s; } /* ---- How it works ---- */ .steps-grid { display: grid; gap: 32px; grid-template-columns: minmax(0,1fr); counter-reset: step; position: relative; } @media (min-width: 760px) { .steps-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; } } /* Connecting line: one bar spanning circle-center to circle-center across the row. Only meaningful once step-card's own circle is centered rather than left-pinned (see below), since a centered node in each 1/3-width column sits at a predictable 1/6, 3/6, 5/6 split regardless of gap — pixel-connecting a left-pinned circle across a responsive grid isn't. */ .steps-line { display: none; } @media (min-width: 760px) { .steps-line { display: block; position: absolute; top: 18px; left: 16.667%; right: 16.667%; height: 1px; background: var(--border-em); transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .steps-line.is-visible { transform: scaleX(1); } } .step-card { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; } .step-card::before { counter-increment: step; content: counter(step); width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--gradient); color: var(--on-accent); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; /* Sits on the connecting line without a visible seam through it. */ box-shadow: 0 0 0 6px var(--bg-base); } .step-card h3 { font-size: 18px; margin-bottom: 8px; } .step-card p { color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin: 0; max-width: 34ch; } /* ---- Comparison table (simple 4-column variant — kept for reuse) ---- */ .compare-scroll { overflow-x: auto; border-radius: 18px; border: 1px solid var(--border); } .compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--bg-card); } .compare-table th, .compare-table td { padding: 16px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); } .compare-table th { color: var(--text-2); font-weight: 600; font-size: 13px; } .compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; } .compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: none; } .compare-table th:first-child, .compare-table td:first-child { color: var(--text-1); font-weight: 500; } .compare-table .col-brute { background: rgba(95,232,208,0.06); } .compare-table th.col-brute { color: var(--accent); font-weight: 700; } .compare-yes { color: var(--accent); font-weight: 700; } .compare-no { color: var(--text-3); } .compare-note { color: var(--text-3); font-size: 12.5px; margin: 14px 2px 0; } /* ---- Competitor comparison (rich variant) ---- Sectioned feature-by-feature table against named competitors. One consistent look throughout — teal marks "yes" and highlights BRUTE's own column; everything else is neutral gray. No other hue competes with it (an earlier version mixed in blue and amber, which read as busier than the actual content). */ :root { --cmp-hairline: rgba(255,255,255,0.07); --cmp-divider: rgba(255,255,255,0.14); --cmp-brute-wash: linear-gradient(180deg, rgba(95,232,208,0.10), rgba(116,168,255,0.04)); --cmp-brute-line: rgba(95,232,208,0.4); } /* No vertical column borders — a full grid of ruled cells is what reads as "spreadsheet." Horizontal hairlines only, so the eye scans rows; the BRUTE column is set apart with a soft gradient wash and a single line on each side instead of a boxed-in cell. */ .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px 16px 0 0; border: 1px solid var(--cmp-divider); border-bottom: none; box-shadow: 0 30px 60px -32px rgba(0,0,0,0.5); } .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1020px; background: var(--bg-card); } .cmp-table th, .cmp-table td { border: none; vertical-align: middle; } .cmp-th { padding: 14px 12px; text-align: center; border-bottom: 1px solid var(--cmp-divider); background: var(--bg-raised); } .cmp-th.first { text-align: left; padding-left: 16px; } .cmp-th.is-brute { background: var(--cmp-brute-wash); border-bottom: 1px solid var(--cmp-brute-line); box-shadow: inset 1px 0 0 var(--cmp-brute-line), inset -1px 0 0 var(--cmp-brute-line); position: relative; } .cmp-best-tag { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-accent); background: var(--gradient); padding: 2px 8px; border-radius: 20px; margin-bottom: 6px; } .cmp-app-name { font-size: 13px; font-weight: 600; color: var(--text-1); display: block; line-height: 1.3; } .cmp-app-name.is-brute { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15.5px; color: var(--accent); letter-spacing: 0.02em; } /* One neutral pill for every competitor's category — no color-coding by type, so this doesn't compete with teal's one job of marking "yes" and BRUTE's column. */ .cmp-type { font-size: 9px; font-weight: 600; display: inline-block; padding: 2px 7px; border-radius: 20px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; background: var(--bg-card); color: var(--text-2); border: 1px solid var(--cmp-divider); } /* Per-row cascade on top of .cmp-scroll's own .reveal fade: hidden until the ancestor's IntersectionObserver-driven .is-visible lands, then each row fades in on its own delay (set inline by assets/interactions.js). */ .cmp-row { opacity: 0; transition: opacity .5s ease; } .cmp-scroll.is-visible .cmp-row { opacity: 1; } .cmp-table tr.cmp-row td { padding: 11px 12px; border-bottom: 1px solid var(--cmp-hairline); transition: background-color .15s ease; } .cmp-table tr.cmp-row:last-of-type td { border-bottom: none; } .cmp-table tr.cmp-row:hover td { background-color: rgba(255,255,255,0.02); } .cmp-table tr.cmp-row:hover td.is-brute { background-color: rgba(95,232,208,0.09); } .cmp-feat { padding-left: 16px !important; font-size: 13px; font-weight: 600; color: var(--text-1); } .cmp-mark { text-align: center; } .cmp-mark.is-brute { background: var(--cmp-brute-wash); box-shadow: inset 1px 0 0 var(--cmp-brute-line), inset -1px 0 0 var(--cmp-brute-line); } /* Marks read as small designed badges, not typed-in glyphs. Partial (~) stays in the same neutral gray family as "no" — a dimmer weight is enough to read as "some support" without needing its own color. */ .cmp-y { width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; line-height: 1; font-weight: 700; color: var(--accent); background: rgba(95,232,208,0.16); } .cmp-n, .cmp-p { display: block; font-size: 13px; line-height: 22px; color: var(--text-2); } .cmp-n { opacity: 0.6; } .cmp-p { opacity: 0.9; font-weight: 600; } /* Free trial / Monthly cost rows — same plain row style as every feature row above, just bold values instead of a check/dash, so the table reads as one system instead of switching to a separate "badge" component partway down. */ .cmp-val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; color: var(--text-1); } .cmp-val.is-brute { color: var(--accent); font-size: 14px; } /* Sits directly under .cmp-scroll as one continuous card: .cmp-scroll owns the top-rounded corners and side borders with no bottom border of its own, so this element's top border is the single seam between them — never two borders stacked, never a radius mismatch at the join. */ .cmp-winner { background: var(--bg-raised); border: 1px solid var(--cmp-divider); border-radius: 0 0 16px 16px; padding: 16px 18px; } .cmp-winner-text { font-size: 15px; font-weight: 700; color: var(--accent); line-height: 1.4; } .cmp-footnote { color: var(--text-3); font-size: 9.5px; line-height: 1.6; margin: 12px 2px 0; max-width: 90ch; } /* ---- Trust / testimonials ---- */ .trust-grid { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); } @media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } .trust-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; } .trust-grid .trust-card:nth-child(1) { transition-delay: 0s, 0s; } .trust-grid .trust-card:nth-child(2) { transition-delay: .08s, .08s; } .trust-grid .trust-card:nth-child(3) { transition-delay: .16s, .16s; } .trust-quote { font-size: 15px; line-height: 1.65; margin: 0 0 18px; } .trust-quote::before { content: '\201C'; color: var(--accent); font-weight: 700; margin-right: 2px; } .trust-author { display: flex; align-items: center; gap: 10px; } .trust-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient); display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-weight: 700; font-size: 12.5px; flex-shrink: 0; } .trust-author span { color: var(--text-2); font-size: 13px; } /* ---- Pricing teaser (homepage) ---- */ .price-teaser-grid { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); } @media (min-width: 640px) { .price-teaser-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } .price-teaser-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 28px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .price-teaser-name { font-size: 15px; font-weight: 600; } .price-teaser-sub { color: var(--text-3); font-size: 12.5px; display: block; margin-top: 4px; } .price-teaser-amount { font-size: 26px; font-weight: 700; } .price-teaser-amount .period { color: var(--text-2); font-size: 13px; font-weight: 500; } .price-teaser-cta { text-align: center; margin-top: 32px; } .feature-copy h3 { font-size: 26px; margin-bottom: 14px; } .feature-copy p { color: var(--text-2); font-size: 15.5px; line-height: 1.7; margin: 0 0 20px; } .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .feature-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; } .feature-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient); margin-top: 8px; flex-shrink: 0; } /* ---- Sticky scroll-driven feature showcase ---- Two columns: the phone stays pinned (position: sticky) while each .sf-block scrolls past in the text column. JS (assets/sticky-features.js) toggles .is-active on whichever block is crossing the vertical center of the viewport, and mirrors that onto the matching image via data-feature so the pinned phone crossfades to match. Falls back to a plain stacked layout with all images statically visible if JS doesn't run — see the