/* ============================================================ JUST ONE BETTER — site.css (ONE stylesheet, playbook rule 20) Sections: TOKENS · BASE · REVEALS · FOLD + SEPARATORS · COMPONENTS · PAGE (home sections) · BIG PICTURE (component) · FOOTER Replica of the Cornerstone draft homepage; every value measured from the live page 2026-09-10 and mapped to a token. ============================================================ */ /* =========================== TOKENS =========================== */ :root { /* core palette (measured from the live site) */ --white: #ffffff; --ink: #373737; /* darkest text on light (FAQ headers, typewriter) */ --brand: #00a1ff; /* JOB blue */ --brand-2: #00fe8e; /* JOB green */ --brand-tint: color-mix(in srgb, var(--brand) 60%, var(--white)); --accent: #224c73; /* navy body text on light surfaces */ /* role tokens — values genuinely differ per role on this brand */ --band-dark: #1e374f; /* testimonial / FAQ bands, step copy, right-hand buttons */ --text-soft: #999999; /* Lato grey (checklists, defaults) */ --footer-bg: #1d1d1d; /* footer bars + root overscroll */ --photo-bg: #0073e6; /* testimonial photo tile */ --rail: #e8e8e8; /* steps rail + ring */ --halo-a: #61116c; --halo-b: #934909; --foot-green: #34cc99; --bg: var(--white); --on-dark: var(--white); --dark-bg: var(--footer-bg); /* gradients — the brand pair in every direction the site uses */ --grad-brand: linear-gradient(to left top, var(--brand-2), var(--brand)); /* headline, bands, icons, circles */ --grad-brand-h: linear-gradient(to right, var(--brand), var(--brand-2)); /* bars and gradient text: halo button, dividers, accordion bars */ --grad-halo: linear-gradient(to right, var(--halo-a), var(--halo-b)); --hero-scrim: linear-gradient(to left, rgba(8, 101, 61, .81), rgba(34, 76, 115, .9)); --band-scrim: rgba(30, 55, 79, .9); --light-scrim: rgba(255, 255, 255, .95); /* fonts — 3 families (Montserrat head / Lato body / Poppins accent = Big Picture) */ --font-head: 'Montserrat', system-ui, sans-serif; --font-body: 'Lato', system-ui, sans-serif; --font-accent: 'Poppins', 'Segoe UI', sans-serif; /* fluid type scale — desktop targets are the live px; mobile floors keep every ratio ≤ 2.5× */ --fs-display: max(3.3rem, min(clamp(3.3rem, 3.325rem + 2.55vw, 5.625rem), 11svh)); /* 53 → 66@500 → 90@1440 (live curve), height-capped */ --fs-h1: clamp(1.6875rem, 1.2rem + 1.4vw, 2.25rem); /* 27 → 36 section titles */ --fs-h2: clamp(1.6rem, 1.15rem + 1.3vw, 2.12rem); /* 26 → 33.9 about / FAQs / contact */ --fs-h3: clamp(1.5rem, 1.1rem + 1.15vw, 1.875rem); /* 24 → 30 band titles, quote card */ --fs-h4: clamp(1.4rem, 1.05rem + 1.05vw, 1.766rem); /* 22 → 28.3 fit-mirror titles */ --fs-lead: clamp(1.25rem, .95rem + .95vw, 1.594rem); /* 20 → 25.5 hero sub, step titles */ --fs-sub: clamp(1.2rem, .9rem + .9vw, 1.5rem); /* 19 → 24 band sub, about sub */ --fs-body: clamp(1rem, .93rem + .42vw, 1.3125rem); /* 17@500 → 21 paragraphs, FAQ */ --fs-ui: clamp(.95rem, .86rem + .45vw, 1.26rem); /* 15.5@500 → 20.1 buttons, checklists, dates */ --fs-sm: clamp(1rem, .95rem + .2vw, 1.125rem); /* 16 → 18 testimonials, eyebrows, footer */ --fs-xs: 1rem; /* 16 footer tagline, FAQ indicator */ --fs-2xs: clamp(.8rem, .78rem + .1vw, .883rem); /* 12.8 → 14.1 halo bar */ --fs-stat: clamp(2rem, 1.6rem + 1.3vw, 2.65rem); /* 32 → 42.4 step numbers */ --fs-typed: calc((12px + 2vmin) * 1.2); /* the site's own typewriter formula */ --lh-display: .8; --lh-tight: 1.2; --lh-heading: 1.4; --lh-body: 1.4; --lh-list: 1.7; --lh-quote: 1.5; --lh-faq: 1.6; --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-head: 700; --fw-light: 300; --track-display: -.025em; --track-caps: .05em; --track-sub: .025em; /* widths */ --content-max: 1200px; --w-700: 700px; --w-750: 750px; --w-780: 780px; --measure: 65ch; --gutter: clamp(1rem, 4vw, 2rem); /* spacing */ --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 5rem; --section-y: clamp(3.5rem, 8vw, 8rem); /* shape */ --r-sm: 9px; --r: 15px; --r-lg: 25px; --r-btn: 20px; --r-pill: 999px; --shadow-fold: 0 -24px 48px -26px rgba(8, 12, 38, .4); /* motion */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-ui: cubic-bezier(.4, 0, .2, 1); --dur: 600ms; --dur-ui: 300ms; --reveal-distance: 24px; --transition: all var(--dur-ui) var(--ease-ui); /* fold + wave dials (ported verbatim from the site's Global CSS) */ --fold-mid: .6; --wave-h: clamp(70px, 9.4vw, 180px); --wave-minw-top: 600px; --wave-minw-bottom: 400px; --wave-gap: 20px; --sep-h-geo: clamp(48px, 6.5vw, 110px); /* chevron / slant: ~3.7° at 1440, holds a shallow angle on phones */ --bp-tablet: 480px; --bp-laptop: 768px; --bp-desktop: 980px; } /* =========================== BASE ============================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; background: var(--dark-bg); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100svh; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); color: var(--text-soft); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } ul[class], ol[class] { list-style: none; padding: 0; } a, button, summary { transition: var(--transition); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--fw-head); line-height: var(--lh-heading); text-wrap: balance; } p { text-wrap: pretty; } strong, b { font-weight: var(--fw-head); } .container { width: 100%; max-width: calc(var(--content-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* inner width = --content-max, like the Cornerstone 1200 rows */ .container.is-700 { max-width: calc(var(--w-700) + var(--gutter) * 2); } .container.is-750 { max-width: calc(var(--w-750) + var(--gutter) * 2); } .container.is-780 { max-width: calc(var(--w-780) + var(--gutter) * 2); } [id] { scroll-margin-top: 1rem; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } .skip { position: absolute; left: 8px; top: -60px; z-index: 999; background: var(--ink); color: var(--white); padding: .6rem 1rem; border-radius: var(--r-sm); } .skip:focus { top: 8px; } .highlight-blue { color: var(--brand); } .grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* =========================== REVEALS ========================== */ html.js [data-reveal] { opacity: 0; } html.js [data-reveal].is-revealed { animation: reveal var(--dur) var(--ease) var(--reveal-delay, 0ms) both; } @keyframes reveal { from { opacity: 0; transform: var(--reveal-from, none); } to { opacity: 1; transform: none; } } [data-reveal="fade-up"] { --reveal-from: translateY(var(--reveal-distance)); } [data-reveal="fade-down"] { --reveal-from: translateY(calc(-1 * var(--reveal-distance))); } [data-reveal="fade-right"] { --reveal-from: translateX(calc(-1 * var(--reveal-distance))); } [data-reveal="fade-in"] { --reveal-from: none; } /* ======================= FOLD-IN + SEPARATORS ================= */ /* Port of the JOB Cornerstone Global CSS. Flat z ladder: every section at one level so DOM order paints; a later section always covers an earlier one. */ main > section { isolation: isolate; z-index: 1; position: relative; } .fold-prev { position: sticky !important; } .fold-section { box-shadow: var(--shadow-fold); } .fold-section.no-shadow { box-shadow: none; } /* mid-fold: the section above freezes when its bottom edge reaches --fold-mid of the screen and the next section, glued to it, keeps rising over it. No tail: any reserved space under the frozen section shows as blank scrolling (Tobie, 2026-10-02). */ /* Top separator. The section's background moves to a ::before that also covers a strip of --sep-h above the box; that one layer is masked to the seam shape (--sep-img), so a band gradient runs unbroken through the strip and the section itself stays unmasked (children may straddle the seam, as the S2 quote card does). --sep-bg = the section's background. The previous section reserves the strip with .sep-clear; the :has() pairings give it --clear-h, so every shape brings its own height. Shapes: .sep-wave (the live site's wave) · .sep-curve (Cornerstone "curve in", the live S1→S2 seam) · .sep-chevron (rounded-apex chevron) · .sep-slant (single diagonal). No fold shadow on a shaped seam. */ .sep-top { position: relative; background: none !important; box-shadow: none; } .sep-top::before { content: ""; position: absolute; inset: calc(var(--sep-h) * -1) 0 0; z-index: -1; background: var(--sep-bg); -webkit-mask: var(--sep-img) top center / max(var(--sep-minw), 100%) var(--sep-h) no-repeat, linear-gradient(#000, #000) left bottom / 100% calc(100% - var(--sep-h) + 1px) no-repeat; mask: var(--sep-img) top center / max(var(--sep-minw), 100%) var(--sep-h) no-repeat, linear-gradient(#000, #000) left bottom / 100% calc(100% - var(--sep-h) + 1px) no-repeat; } .sep-clear { padding-bottom: calc(var(--clear-h, var(--wave-h)) + var(--wave-gap)) !important; } .sep-wave { --sep-h: var(--wave-h); --sep-minw: var(--wave-minw-top); --sep-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20300'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,300V83.19C128.75,83.19,194.8,231.98,482.93,231.98C900.95,231.98,943.47,84.11,1229.56,84.11C1441.79,84.11,1489.02,168.22,1677.96,168.22C1786.32,168.22,1840.92,90.28,1920,90.28V300H0z'/%3E%3C/svg%3E"); } .sep-curve { --sep-h: 50px; --sep-minw: 100%; --sep-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2050'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,0v50h50C22.4,50,0,0,0,0z'/%3E%3Cpath%20fill='black'%20d='M50,50h50V0C100,0,77.6,50,50,50z'/%3E%3C/svg%3E"); } section:has(+ .sep-curve) { --clear-h: 50px; } .sep-chevron { --sep-h: var(--sep-h-geo); --sep-minw: 100%; --sep-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20120'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,0L880,108Q960,120,1040,108L1920,0V120H0z'/%3E%3C/svg%3E"); } section:has(+ .sep-chevron) { --clear-h: var(--sep-h-geo); } .sep-slant { --sep-h: var(--sep-h-geo); --sep-minw: 100%; --sep-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20120'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,120L1920,0V120z'/%3E%3C/svg%3E"); } section:has(+ .sep-slant) { --clear-h: var(--sep-h-geo); } /* Curved chevron (Tobie, 2026-09-14): band edge 45px up at the left, apex 0 at center, 30px up at the right, arms as gentle curves; a brand-blue wedge on the left half between the band edge and a second curve from 15px below the apex level (left edge) to the apex. Strip = 60px: y0 = +45, y45 = apex, y60 = -15. Wedge colour is --brand (#00a1ff) hardcoded in the data URI. */ .sep-cchevron { --sep-h: 60px; --sep-minw: 100%; --sep-img: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%2060'%20preserveAspectRatio='none'%3E%3Cpath%20fill='black'%20d='M0,0Q560,30,960,45Q1360,38,1920,15V60H0z'/%3E%3C/svg%3E"); } .sep-cchevron::before { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%2060'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%2300a1ff'%20d='M0,0Q560,30,960,45Q560,52,0,60z'/%3E%3C/svg%3E") top center / max(var(--sep-minw), 100%) var(--sep-h) no-repeat, var(--sep-bg); } section:has(+ .sep-cchevron) { --clear-h: 60px; } /* =========================== COMPONENTS ======================= */ /* ---- Button pair (Cornerstone "particle" buttons): left = navy, right = band-dark; a brand sliver sits at the inner edge at rest and sweeps across on hover. ---- */ .btn-pair { display: flex; align-items: stretch; width: 100%; } /* mobile: the pair spans edge to edge (live) */ .btn-pair .btn { flex: 1 1 0; } @media (min-width: 768px) { .btn-pair { display: inline-flex; width: auto; } .btn-pair .btn { flex: 0 0 auto; } .btn.is-alone { min-width: 280px; } } /* a single button never shrinks to its label once it stops spanning the row (Tobie, 2026-10-08) */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; padding: .8em .85em; font-family: var(--font-head); font-size: var(--fs-ui); font-weight: var(--fw-body); line-height: 1.2; text-transform: uppercase; color: var(--brand-2); background: var(--accent); isolation: isolate; } .btn.is-dark { background: var(--band-dark); } .btn.is-left { border-radius: var(--r-btn) 0 0 var(--r-btn); } .btn.is-right { border-radius: 0 var(--r-btn) var(--r-btn) 0; } .btn.is-solo { border-radius: 0 var(--r-btn) var(--r-btn) 0; } .btn-label { position: relative; z-index: 1; transition: var(--transition); } .btn-fill { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 0; transform: scaleX(.02); transition: transform .45s var(--ease-ui); } .btn.is-left .btn-fill { right: 0; transform-origin: right center; } .btn.is-right .btn-fill, .btn.is-solo .btn-fill { left: 0; transform-origin: left center; } .btn-fill.is-green { background: var(--brand-2); } .btn-fill.is-blue { background: var(--brand); } @media (hover: hover) { .btn:hover .btn-fill { transform: scaleX(1); } .btn:hover .btn-label { color: var(--accent); } .btn.is-dark:hover .btn-label { color: var(--white); } } /* ---- Gradient band (separator-topped CTA sections) ---- */ .band { --sep-bg: var(--grad-brand); background: var(--grad-brand); color: var(--white); text-align: center; } .band .container { padding-top: calc(60px + var(--wave-gap)); padding-bottom: var(--space-2xl); } /* live: row 30 + title margin 30 / row 80, plus the seam gap */ .band-title { font-family: var(--font-head); font-weight: var(--fw-body); font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--white); } .band-eyebrow { margin-top: 31px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); line-height: var(--lh-heading); } .band-dates { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-ui); letter-spacing: var(--track-caps); color: var(--accent); line-height: var(--lh-body); } .band-meta { margin-top: 9px; font-family: var(--font-head); font-size: var(--fs-ui); letter-spacing: var(--track-caps); color: var(--white); } .band-sub { margin-top: 24px; font-family: var(--font-head); font-size: var(--fs-sub); letter-spacing: var(--track-sub); line-height: var(--lh-tight); color: var(--accent); } .band .btn-pair { margin-top: 40px; } .band-meta + .btn-pair { margin-top: 30px; } .band-sub + .btn-pair { margin-top: 69px; } /* ---- Dark testimonial band ---- */ .testi { position: relative; padding-block: var(--space-2xl); background: var(--band-dark) url('https://justonebetter.com/wp-content/uploads/2025/09/JOB-bg.png') right center / cover no-repeat; color: var(--white); } .testi::before { content: ""; position: absolute; inset: 0; background: var(--band-scrim); } .testi .container { position: relative; } .testi-card { display: flex; align-items: center; gap: 20px; max-width: var(--w-750); margin-inline: auto; } .testi-photo { flex: none; width: 120px; height: 120px; background: var(--photo-bg); border-radius: var(--r) 0 var(--r) var(--r); overflow: hidden; } .testi-photo img { width: 100%; height: 100%; object-fit: cover; } .testi-body { max-width: 450px; } .testi-quote { font-size: var(--fs-sm); line-height: var(--lh-quote); color: var(--white); } .testi-quote em { font-style: italic; } .testi-name { margin-top: 20px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--brand); } .testi-role { margin-top: 4px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--brand-2); } /* ---- Checklist (fit mirror) ---- */ .checklist { display: grid; gap: 2px; } .checklist li { display: flex; align-items: flex-start; gap: 16px; font-size: var(--fs-ui); line-height: var(--lh-list); color: var(--accent); } .check { flex: none; width: 20px; height: 20px; margin-top: calc((var(--fs-ui) * var(--lh-list) - 20px) / 2); border-radius: 50%; background: var(--grad-brand); position: relative; } .check::after { content: ""; position: absolute; inset: 0; background: var(--white); -webkit-mask: center / 12px 12px no-repeat; mask: center / 12px 12px no-repeat; } .check.is-yes::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E"); } .check.is-no::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } /* ---- Icon divider (gradient rules with the infinity mark in the gap) ---- */ .icon-divider { --gap: 12px; --thickness: 2px; display: flex; align-items: center; gap: var(--gap); width: 100%; } .icon-divider::before, .icon-divider::after { content: ""; height: var(--thickness); flex: 1 1 auto; display: block; background: var(--grad-brand-h); } .icon-divider img { width: 50px; height: 50px; flex: none; } /* ---- Light watermark band (infinity mark behind, 95% white scrim) ---- */ .watermark { position: relative; background: var(--white) url('https://justonebetter.com/wp-content/uploads/2025/09/Color-infinity-no-background.png') center / contain no-repeat; } .watermark::before { content: ""; position: absolute; inset: 0; background: var(--light-scrim); } .watermark > .container { position: relative; } /* =========================== PAGE: HOME ======================= */ /* ---- S1 Hero ---- */ .hero { display: grid; grid-template-rows: auto auto auto; grid-template-columns: minmax(0, 1fr); /* content-driven, like the live hero (864px at 1440, 730 at 500) */ color: var(--white); background: var(--band-dark); overflow: hidden; text-align: center; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-video { width: 100%; height: 100%; object-fit: cover; } .hero-scrim { position: absolute; inset: 0; background: var(--hero-scrim); } .halo { position: relative; z-index: 2; min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; background: var(--grad-halo); } .halo-text { font-family: var(--font-head); font-size: var(--fs-2xs); line-height: var(--lh-heading); color: var(--white); } .halo-btn { display: inline-block; margin-left: .3em; padding: .45em 1.1em; border-radius: var(--r-pill); background: var(--grad-brand-h); color: var(--white); vertical-align: middle; } .halo-btn:hover { filter: brightness(1.08); } .hero > .container { position: relative; z-index: 1; padding-top: 50px; } .hero-block { width: 500px; max-width: 100%; margin-inline: auto; } .logo-anim { position: relative; width: 200px; max-width: 70%; margin-inline: auto; } @media (min-width: 768px) { .logo-anim { width: 250px; } } .logo-ring { width: 100%; height: auto; } .logo-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .logo-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54%; height: auto; pointer-events: none; } .hero-title { margin-top: 24px; font-family: var(--font-head); font-weight: var(--fw-body); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero-title strong { font-weight: var(--fw-head); } .hero-title .medium-text { font-size: .7em; } .hero-title .smaller-text { font-size: .5em; display: inline-block; vertical-align: middle; } .hero-sub { margin-top: 38px; font-family: var(--font-head); font-size: var(--fs-lead); line-height: 1.6; color: var(--white); } .cue-wrap { position: relative; z-index: 1; display: flex; justify-content: center; padding: 50px 0 70px; } .cue { width: 27px; height: 27px; display: grid; place-items: center; color: color-mix(in srgb, var(--brand-2) 60%, transparent); animation: move 1s ease-in-out infinite; } .cue svg { width: 17px; height: 17px; } @keyframes move { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } /* ---- S2 Problem ---- */ .problem { --sep-bg: var(--white); background: var(--white); display: flow-root; } /* flow-root: the card's negative margin must not collapse through the section */ .problem .quote-card { margin-top: -70px; } /* live: row margin -100 + 30 inset = card top 70px above the section, 20px above the curve */ .quote-card { padding: 30px; border-radius: 30px; background: linear-gradient(rgba(0, 0, 0, .176), rgba(0, 0, 0, .176)), var(--grad-brand); text-align: center; } /* live: brand gradient under an 18% black wash */ .quote-card-title { font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--brand-2); } .quote-card-sub { margin-top: 4px; font-family: var(--font-head); font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--white); } .problem-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 50px; } .portrait-col { border-radius: 18px; overflow: hidden; height: 200px; order: 2; } /* mobile: 200px banner after the copy (live) */ .xfade { position: relative; width: 100%; height: 100%; } .xfade-base, .xfade-top { position: absolute; inset: 0; background: var(--img) center / cover no-repeat; } .xfade-top { opacity: 0; animation: jobxfade 8s ease-in-out infinite; } @keyframes jobxfade { 0%, 36% { opacity: 0; } 50%, 86% { opacity: 1; } 100% { opacity: 0; } } .problem-copy { display: grid; gap: 1.3em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--accent); text-align: center; } /* mobile: centered (live); 1.3em = 27px at desktop */ @media (min-width: 768px) { .problem-grid { grid-template-columns: 254px 1fr; gap: 50px; } .portrait-col { height: auto; order: 0; } .problem-copy { text-align: left; } } /* ---- Branded backgrounds are FIXED, as on the live site (background-attachment: fixed there). Here the section is a window (clip-path) onto a layer fixed to the screen, never background-attachment (playbook section 8). Each section names its image in --fixed-bg. The clip also trims the fold shadow above these sections. ---- */ .fit, .about, .contact { clip-path: inset(0); background: none; } .fit::before, .about::before, .contact::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--white) var(--fixed-bg) center / cover no-repeat; } /* ---- S5/S6 Fit mirror ---- */ .fit { --fixed-bg: url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-27.jpg'); padding-block: var(--space-2xl); } /* branded background 27 from 07 Operations / Branded Backgrounds; was plain white (Steve, 2026-09-16) */ .fit.is-not { padding-top: 0; } .fit .icon-divider { transform: translateY(-25px); margin-bottom: 33px; } /* the mark straddles the section boundary (transform: a negative margin would collapse through the section) */ .fit-title { font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--brand); text-align: center; margin-bottom: 20px; } /* ---- S9 Intro + S11 Plan (watermark bands) ---- */ .intro, .plan { padding-block: 90px 50px; } .intro { padding-bottom: 80px; } .intro-title, .plan-title { font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--brand); text-align: center; } .intro-sub, .plan-sub { margin-top: 0; font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--accent); text-align: center; } .plan-sub em { font-style: italic; } /* mobile: vertical timeline (circle left on a vertical rail, copy right — live layout) */ .steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; text-align: center; } .steps::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 12px; background: var(--rail); z-index: 0; } .step { position: relative; z-index: 1; display: grid; grid-template-columns: 62px 1fr; column-gap: 20px; align-items: start; } .step > :not(.step-num) { grid-column: 2; } /* a step with more than one paragraph: the extra ones were auto-placed into the 62px number column on phones */ .step-num { grid-row: 1 / span 9; display: grid; place-items: center; width: 62px; height: 62px; margin-inline: auto; border-radius: 50%; background: var(--grad-brand); border: 6px solid var(--rail); box-shadow: 0 0 0 2px var(--white); font-family: var(--font-body); font-weight: var(--fw-head); font-size: var(--fs-stat); line-height: 1; color: var(--white); } .step-title { margin-top: 0; font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--brand); text-align: left; } .step p { margin-top: 6px; font-family: var(--font-head); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--band-dark); } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; padding-inline: 15px; } .steps::before { left: 50%; top: 25px; bottom: auto; width: 100vw; height: 12px; transform: translateX(-50%); } .step { display: block; } .step-title { margin-top: 27px; text-align: center; } } /* ---- S10 Big Picture section shell ---- */ .bigpic-section { background: url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-14.jpg') center / cover no-repeat; } /* ---- S13 About ---- */ .about { --fixed-bg: url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-14.jpg'); } .about-grid { display: grid; grid-template-columns: 1fr; max-width: 1320px; margin-inline: auto; } .about-photo { align-self: end; } .about-photo img { width: 100%; height: auto; } .about-copy { padding: 60px var(--gutter); } .about-copy > * + * { margin-top: 20px; } .about-title { font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--brand); } .about-sub { margin-top: 8px !important; font-family: var(--font-head); font-size: var(--fs-sub); line-height: var(--lh-heading); color: var(--band-dark); } .about-sub + p { margin-top: 40px; } .about-copy p:not(.about-sub) { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--accent); } @media (min-width: 768px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* laptop: two halves */ .about-copy { padding: 60px var(--gutter); } } @media (min-width: 980px) { .about-grid { grid-template-columns: 600px minmax(0, 1fr); } /* desktop: the live 600 / 720 split */ .about-copy { padding: 60px 90px; max-width: 720px; } } /* ---- S14 FAQ ---- */ .faq { position: relative; padding-top: 40px; background: var(--band-dark) url('https://justonebetter.com/wp-content/uploads/2025/09/JOB-bg.png') right center / cover no-repeat; } .faq::before { content: ""; position: absolute; inset: 0; background: var(--band-scrim); } .faq .container { position: relative; } .faq-title { font-size: var(--fs-h2); line-height: var(--lh-heading); text-align: center; margin-bottom: 29px; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .acc { display: grid; gap: 26px; } .acc-item { background: var(--white); border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); } .acc-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--grad-brand-h); font-family: var(--font-head); font-size: var(--fs-body); line-height: var(--lh-tight); color: var(--ink); } .acc-item summary::-webkit-details-marker { display: none; } .acc-ind { flex: none; font-size: var(--fs-xs); color: var(--brand-2); transition: transform var(--dur-ui) var(--ease-ui); } .acc-item[open] .acc-ind { transform: rotate(90deg); } .acc-body { padding: 20px; font-size: var(--fs-body); line-height: var(--lh-faq); color: #000; } .acc-body > * + * { margin-top: .6em; } .acc-body ul { list-style: disc; padding-left: 1.5rem; display: grid; gap: .5rem; } .acc-body a { color: var(--brand); text-decoration: underline; } /* ---- S16 Contact + typewriter ---- */ .contact { --fixed-bg: url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-21.jpg'); } .contact .container { padding-top: 50px; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } .contact-photo { aspect-ratio: 513 / 243; background: url('https://justonebetter.com/wp-content/uploads/Generated-image-1-2.png') center / cover no-repeat; } .contact-eyebrow { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h4); line-height: var(--lh-tight); background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .contact-title { margin-top: 14px; font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--brand); } .contact-copy .btn { margin-top: 57px; } .typed-line { margin: 127px 0 0; padding: 1em 0; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-typed); line-height: var(--lh-heading); text-align: center; color: var(--ink); background: url('https://justonebetter.com/wp-content/uploads/2025/09/Color-infinity-no-background.png') center / auto 100% no-repeat; } .typed { color: var(--accent); } .typed-cursor { color: var(--brand); animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } @media (min-width: 768px) { .contact-grid { grid-template-columns: minmax(0, 513fr) minmax(0, 638fr); gap: 49px; } } /* =========================== THIRD PASS ADDITIONS (Steve's side, 2026-09-16) ========================= Everything the Third Pass copy needed that the Second Pass build had no element for. Kept in one block so Tobie can fold it in or restyle it; each rule says which section it serves. See CHANGES-steve.md. */ /* S1 hero: eyebrow above the headline, sentence-case headline, quiet free link under the subhead */ .hero-eyebrow { margin-top: 30px; max-width: 560px; margin-inline: auto; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); } /* max-width keeps the eyebrow on two lines inside the wide block (Steve, 2026-09-16) */ .hero-title.is-sentence { margin-top: 14px; padding-bottom: .16em; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); line-height: 1.08; letter-spacing: -.02em; text-transform: none; font-weight: var(--fw-head); } /* padding-bottom: the gradient is painted through the text (background-clip), so descenders below the box came out clipped (Steve, 2026-09-16) */ .hero-block.is-wide { width: 920px; } /* the sentence headline breaks as two lines from tablet up (Steve, 2026-09-16: four lines pushed the free link below the fold); the 500px block was sized for the stacked KNOWING / DOING words */ .hero-title.is-sentence + .hero-sub { margin-top: 12px; } .hero:has(.hero-quiet) .cue-wrap { padding: 14px 0 106px; } /* cue sits close under the free link and 106px clear of the hero's bottom edge, so the next section's card does not cover it on the first scroll; same total height as before (Steve, 2026-09-16) */ .hero-quiet { margin-top: 26px; font-family: var(--font-head); font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); } .hero-quiet a { padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .35); } .hero-quiet a:hover { color: var(--brand-2); border-color: var(--brand-2); } /* S2 problem: framing line above the quote; the two stand-alone beats in the copy */ .quote-card-lead { margin-bottom: 10px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white); opacity: .9; } .problem-copy .beat { font-family: var(--font-head); font-weight: var(--fw-head); color: var(--brand); } /* Single primary button (Third Pass: one button at every ask, no Learn More) */ .btn-pair.is-single { justify-content: center; } .btn.is-alone { border-radius: 0 var(--r-btn) var(--r-btn) 0; } /* straight left edge, curved right corners, the site's single-button shape (Steve, 2026-09-16) */ .btn .btn-fill { transform: scaleX(.03); } /* rest sliver 3% of the button on every button (the live site's is 2%); the hover sweep to 100% is unchanged (Steve, 2026-09-16) */ .btn.is-alone .btn-fill { left: 0; transform-origin: left center; } .btn .btn-label { font-weight: var(--fw-head); } /* every button label bold, primary and dark (Steve, 2026-09-16); the live site and the replica had them at 400 */ /* S5 fit mirror: eyebrow, three self-identification columns, permission and not-for lines */ .fit-title.grad-text { padding-bottom: .06em; color: transparent; background-image: var(--grad-brand-h); } /* background-image, not the shorthand: the shorthand resets background-clip and paints the whole box */ /* gradient headline, blue on the left to green on the right (Steve, 2026-09-16: the diagonal read oddly on the light background); padding keeps the descender inside the painted box */ /* S2 problem: the circle-and-pill callout from the live /btag/ page, rebuilt from its measurements at 1440px (circle 300px --band-dark with 30px padding, pill #e4e4e4 tucked 100px under the circle, padding 20px 20px 20px 120px, radius 0 300px 300px 0, Lato body in --accent). Stacked on phones. Steve, 2026-09-16. */ .callout-pill { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } .callout-circle { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 240px; height: 240px; padding: 24px; border-radius: 50%; background: var(--band-dark); text-align: center; } .callout-title { padding-bottom: .1em; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h1); line-height: var(--lh-tight); text-wrap: balance; background: var(--grad-brand-h); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .callout-box { margin-top: -60px; padding: 84px 28px 30px; border-radius: 22px; background: #e4e4e4; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--accent); text-align: center; } /* all four corners rounded, 27px (Steve, 2026-09-16: the top corners show outside the circle on phones) */ @media (min-width: 768px) { .callout-pill { flex-direction: row; justify-content: center; } .callout-circle { flex: none; width: 300px; height: 300px; padding: 30px; } .callout-box { flex: 0 1 700px; margin: 0 0 0 -100px; padding: 44px 44px 44px 120px; border-radius: 22px; text-align: left; } /* 700px cap (was the full remaining width) and deeper padding, so the box wraps narrower and taller; straight right edge with 22px corners, not the BTAG semicircle (Steve, 2026-09-16) */ } /* S3 first CTA band: shallower chevron and tighter padding (Steve, 2026-09-16). The chevron strip is 40% of the geometric seam height, which takes the arm angle from about 7.3 degrees to about 2.9 at 1440px. */ .sep-chevron { --sep-h: calc(var(--sep-h-geo) * .4); } section:has(+ .sep-chevron) { --clear-h: calc(var(--sep-h-geo) * .4); } #promise .container { padding-top: 48px; padding-bottom: 52px; } #promise .btn-pair { margin-top: 28px; } /* S4 and S10 testimonial bands: tighter vertical padding (Steve, 2026-09-16: too much vertical real estate on desktop) */ .testi { padding-block: 52px; } .fit-eyebrow { margin-bottom: 12px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--accent); } .fit-cols { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } .fit-col { display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 26px; border-radius: var(--r-lg); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--white)); box-shadow: 0 14px 34px -22px rgba(8, 12, 38, .35); text-align: center; transition: transform var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui); } .fit-col:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 20px 40px -22px rgba(0, 161, 255, .45); } .fit-lead { padding-bottom: .08em; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-lead); line-height: var(--lh-tight); text-wrap: balance; background-image: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* tile leads in the diagonal gradient (blue top-left to green bottom-right, same as the hero headline), section headline plain blue (Steve, 2026-09-16) */ .fit-body { font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--accent); } .fit-go { margin-top: auto; padding-top: 6px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand); } /* The two lines under the tiles read as different kinds of sentence (Steve, 2026-09-16): the permission line is the guide's voice, italic and a size up, in navy; then the brand divider marks the turn; the not-for line is fine print, small and grey, with its first three words carrying the weight. */ .fit-permission { margin-top: 40px; font-family: var(--font-body); font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-heading); text-align: center; text-wrap: balance; color: var(--accent); } /* the closing line under the fit columns when it is the next-step line: as wide as the two cards, in the heading face (Mastery) */ .fit-permission.is-wide { max-width: 960px; font-family: var(--font-head); font-style: normal; font-weight: var(--fw-semi); } .fit .icon-divider.is-narrow { max-width: 360px; margin: 34px auto 0; --thickness: 1px; transform: none; } /* transform: none cancels the old straddle offset on .fit .icon-divider */ .fit .icon-divider.is-narrow img { width: 34px; height: 34px; } .fit-notfor { margin-top: 26px; font-size: var(--fs-sm); line-height: var(--lh-body); text-align: center; text-wrap: balance; color: var(--text-soft); } .fit-notfor strong { font-weight: var(--fw-head); color: var(--accent); } .fit-notfor em { font-style: italic; } @media (min-width: 768px) { .fit-cols { grid-template-columns: repeat(3, 1fr); gap: 30px; } .fit-permission { max-width: 680px; margin-inline: auto; } .fit-notfor { max-width: 640px; margin-inline: auto; } } /* S6 Big Picture intro: a title card cut from the mountain's own sky (Steve, 2026-09-16: the white band felt bolted onto the picture). Same image, blurred and darkened under the text; the sharp image then slides over it in the fold. */ .intro.watermark { background: #2a1d18 url('https://justonebetter.com/wp-content/uploads/mountain-v5.jpg') center 14% / cover no-repeat; padding-block: 72px 64px; } .intro.watermark::before { background: rgba(8, 12, 20, .6); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); } .intro-title { color: var(--white); } .intro-sub { color: rgba(255, 255, 255, .86); } /* S8 simple plan: the infinity watermark shows through more (white scrim .95 to .87; Steve, 2026-09-16: almost invisible), and the closing line as a quote bar */ .plan.watermark::before { background: rgba(255, 255, 255, .87); } .plan-close { margin-top: 50px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h3); line-height: var(--lh-heading); text-align: center; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* S9 CTA block: subheadline tight under the title, risk-reversal line under the price */ .band-sub.is-tight { margin-top: 12px; } .band-note { margin-top: 14px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--white); opacity: .92; } .band-note + .btn-pair { margin-top: 30px; } /* S11 about: DJ's quote as the epigraph, the mission line, the hidden Learn-more placeholder */ .about-epigraph { margin: 0; padding: 0; } .about-epigraph p { font-family: var(--font-head); font-style: italic; font-size: var(--fs-sub) !important; line-height: var(--lh-heading); color: var(--band-dark) !important; } .about-epigraph footer { margin-top: 8px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-sm); color: var(--brand); } .about-epigraph + .about-title { margin-top: 32px; } .about-copy .about-mission { font-family: var(--font-head); font-weight: var(--fw-semi); color: var(--band-dark) !important; } .about-more a { color: var(--brand); } /* S12 FAQ: the quiet link that ends every answer */ .acc-link { margin-top: .9em !important; font-family: var(--font-head); font-size: var(--fs-sm); } .acc-body .acc-link a { text-decoration: none; } .acc-body .acc-link a:hover { text-decoration: underline; } /* S13 final CTA: more contrast in the band (Steve, 2026-09-16: flat, one colour and one size). Branded background 25 (green at top-left sweeping to blue, infinity mark bottom-right) replaces the plain gradient; that also gives the curved chevron's brand-blue wedge a green ground to sit on, where before it was blue on blue and invisible. Headline a size up with the strong words in navy; the quotable line italic in white; the second line smaller in navy. */ #reserve { --sep-bg: url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-25.jpg') center / cover no-repeat; } #reserve .band-title { font-size: var(--fs-h2); } #reserve .band-title strong { color: var(--band-dark); } #reserve .band-quote { max-width: 640px; margin: 26px auto 0; font-family: var(--font-head); font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--white); text-wrap: balance; } #reserve .band-sub { max-width: 600px; margin: 16px auto 0; font-family: var(--font-body); font-size: var(--fs-body); letter-spacing: 0; line-height: var(--lh-body); color: var(--band-dark); } #reserve .band-sub + .btn-pair { margin-top: 38px; } /* S15 contact: the Athletics off-ramp and the direct email, the two quietest lines on the page; 20px under the typewriter line before the footer (Steve, 2026-09-16) */ .contact .container { padding-bottom: 20px; } .contact-quiet { margin-top: 16px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--accent); } .contact-copy .btn + .contact-quiet { margin-top: 40px; } .contact-quiet a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 50%, transparent); } .contact-quiet a:hover { color: var(--brand); } /* =========================== PAGE: BTAG (2026-09-25) =========================== Built from the First Pass Copy and Build Brief (13 tabs) and Steve's Program Pages Rules v1.1. Reuses the homepage components (hero, halo, band, steps rail, testimonial band, about grid, FAQ accordion, Big Picture); the rules below are only what the workshop page needed on top. */ /* Header: logo only on the warm pages (rule H1), folded into the halo bar: mark at the left, the line centred (Tobie, 2026-10-01). */ .halo.has-logo { position: relative; padding-inline: 62px; } .halo-logo { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: block; } .halo-logo img { width: 36px; height: auto; } @media (min-width: 768px) { .halo-logo { left: var(--gutter); } } /* Halo bar styled not to read as an ad (rule B5): page typeface, no motion, one line on phones. */ .halo.is-quiet { background: var(--band-dark); } .halo.is-quiet .halo-btn { background: none; padding: 0; margin-left: .6em; color: var(--brand-2); border-bottom: 1px solid color-mix(in srgb, var(--brand-2) 50%, transparent); border-radius: 0; } .halo.is-quiet .halo-btn:hover { filter: none; color: var(--white); border-color: var(--white); } @media (max-width: 479.98px) { .halo-long { display: none; } } /* Hero: no logo block; support, facts and risk lines stack under the subhead, one button, quiet anchor. */ .hero-full .hero-block { padding-bottom: 56px; } .hero-full .hero-eyebrow { margin-top: 12px; } @media (min-width: 768px) { .hero-full .hero-eyebrow { margin-top: 36px; } } .hero-full .hero-sub { margin-top: 18px; } .hero-support { margin-top: 18px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--brand-2); } .hero-facts { margin-top: 8px; font-family: var(--font-head); font-size: var(--fs-sm); letter-spacing: var(--track-sub); line-height: var(--lh-heading); color: rgba(255, 255, 255, .9); } .hero-full .btn-pair { margin-top: 24px; } .hero-note { max-width: 560px; margin: 18px auto 0; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: rgba(255, 255, 255, .88); } .hero-full .hero-quiet { margin-top: 18px; } /* Hero (BTAG): nearly full height, the headline block centred in the free row, the scroll cue in its own row (playbook rule 15: zone grid, never vh padding). The offer box overlaps its bottom edge. Tobie, 2026-10-01. */ .hero-full { min-height: 100svh; grid-template-rows: 1fr auto 1fr; } /* full screen; the halo row and the cue row are equal (1fr each), so the text sits dead centre on the screen and the halo bar no longer pushes it down (Tobie, 2026-10-02) */ .hero-full .halo { align-self: start; } .hero-full > .container { padding-block: 20px; } .hero-full .hero-block { padding-bottom: 0; } .hero-full .hero-title.is-sentence { margin-top: 20px; } /* 20px of air under the eyebrow (Tobie, 2026-10-08) */ .hero-full .cue-wrap { align-self: end; padding: 0 0 26px; } /* just above the curve's valley, which touches the bottom of the screen */ /* Offer box: the homepage quote card's construction (brand gradient under a dark wash, straddling the seam). */ .problem-btag .container:has(> .offer-box) { padding-block: 0; } .problem .quote-card.offer-box { max-width: 940px; margin: -120px auto 0; padding: 34px 30px 30px; } .offer-title { font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--white); } .offer-facts { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-ui); letter-spacing: var(--track-sub); line-height: var(--lh-heading); color: rgba(255, 255, 255, .92); } .offer-box .btn-pair { margin-top: 24px; } .offer-box .quote-card-lead { color: var(--brand-2); opacity: 1; } .offer-note { max-width: 560px; margin: 18px auto 0; font-family: var(--font-head); font-style: italic; font-size: var(--fs-sm); line-height: var(--lh-body); color: rgba(255, 255, 255, .9); } .offer-quiet { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-sm); } .offer-quiet a { font-weight: var(--fw-body); font-style: italic; color: var(--brand-tint); border-bottom: 1px solid color-mix(in srgb, var(--brand-tint) 50%, transparent); } .offer-quiet a:hover { color: var(--white); border-color: var(--white); } /* navy, like the same link in the dates band (Steve, 2026-10-07): about 4.9:1 where it sits; the light blue was about 1.3:1 */ .offer-quiet a { color: var(--band-dark); border-color: color-mix(in srgb, var(--band-dark) 50%, transparent); } /* the guarantee block in the offer box (Steve, 2026-10-05): named, bold and at reading size, set off by a thin rule, because the guarantee is part of the offer and not fine print */ .offer-guarantee { max-width: 620px; margin: 26px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .35); } .offer-guarantee-name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-lead); line-height: var(--lh-tight); color: var(--white); } .offer-shield { flex: none; width: 1.3em; height: 1.3em; color: var(--white); } .offer-guarantee-line { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--white); } .offer-guarantee .offer-quiet { margin-top: 12px; } .offer-guarantee.is-ink { border-top-color: color-mix(in srgb, var(--band-dark) 30%, transparent); } /* the dates band (dark text on the gradient) */ .offer-guarantee.is-ink .offer-guarantee-name, .offer-guarantee.is-ink .offer-shield, .offer-guarantee.is-ink .offer-guarantee-line { color: var(--band-dark); } .offer-guarantee .band-ramp { margin-top: 12px; } /* the offer box's guarantee is the dates band's guarantee, same ink, same bold link (Tobie, 2026-10-08) */ .offer-guarantee.is-ink .band-ramp { color: var(--band-dark); } .offer-guarantee.is-ink .band-ramp a { font-weight: var(--fw-head); border-color: color-mix(in srgb, var(--band-dark) 50%, transparent); } .offer-guarantee.is-ink .band-ramp a:hover { color: var(--white); border-color: var(--white); } .problem-btag > .container.is-700 { padding-top: 60px; } /* The mark button (Tobie, 2026-10-01 / 10-02): the button is the logo with its middle stretched. Both end masks are cut from the real logo file, untouched, each exactly button height and each running a little past the logo's centre line: the left one is the left loop and arrow, the right one the right loop and tail. Two additions per end, and nothing else: the wedge between the stroke and the button's corner is filled (bottom-left, top-right), and the opposite corner of the button is carved along the logo's own diagonal stroke (top-left, bottom-right), so the stroke flows in at one end and out at the other. The arrow and the tail keep their own gaps. ONE layer paints the whole shape (three mask layers; the middle one overlaps each end by 3px so no hairline shows at any width), so the hover colour sweeps across loops and button together. images/btn-mark-left.png 365 x 240 (logo x 12 to 376), btn-mark-right.png 361 x 240 (logo x 136 to 496), rows y 137 to 376. */ .btn-mark { --mark-base: var(--accent); --mark-sweep: linear-gradient(var(--brand-2), var(--brand-2)); position: relative; isolation: isolate; display: inline-flex; padding-inline: 2.85em 2.81em; font-size: var(--fs-ui); } .btn-mark::before, .btn-mark::after { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-mask: url('/site/images/btn-mark-left.png') left center / 4.26em 100% no-repeat, url('/site/images/btn-mark-right.png') right center / 4.21em 100% no-repeat, linear-gradient(#000, #000) calc(4.26em - 3px) 0 / calc(100% - 8.47em + 6px) 100% no-repeat; mask: url('/site/images/btn-mark-left.png') left center / 4.26em 100% no-repeat, url('/site/images/btn-mark-right.png') right center / 4.21em 100% no-repeat, linear-gradient(#000, #000) calc(4.26em - 3px) 0 / calc(100% - 8.47em + 6px) 100% no-repeat; } .btn-mark::before { background: var(--mark-base); } /* the hover colour: a second copy of the shape, revealed left to right. The clip eases in and out over .6s so the colour arrives as a sweep; the label changes colour over the same time. */ .btn-mark::after { background: var(--mark-sweep); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease-ui); } .btn-mark .btn-label { transition: color .5s var(--ease-ui); } /* green variant for dark grounds (BTAG together band): green at rest, the brand gradient sweeps in; navy label throughout */ .btn-mark.is-green { --mark-base: var(--brand-2); --mark-sweep: var(--grad-brand-h); } .btn-mark.is-green .btn-label { color: var(--accent); } .btn-mark .btn { background: none; overflow: visible; border-radius: 0; padding-inline: 1.5em; } /* the label stays clear of the carved corners */ .btn-mark .btn::after { content: ""; position: absolute; inset: 0 -2.81em 0 -2.85em; } /* the loops are part of the link's hit area */ .btn-mark .btn-fill { display: none; } /* the wrapper's layer does the sweep */ .btn-mark:has(.btn:focus-visible)::after { clip-path: inset(0); } .btn-mark .btn:focus-visible .btn-label { color: var(--accent); } @media (hover: hover) { .btn-mark:has(.btn:hover)::after { clip-path: inset(0); } } .btn-pair.is-single .btn-mark .btn { flex: 0 0 auto; } /* Lightbox (native dialog). With script off it stays a plain block at the foot of the page. */ .lightbox { width: min(760px, calc(100vw - 2 * var(--gutter))); max-height: 86svh; margin: auto; padding: 0; /* margin: auto restores the centring the base reset removes */ border: 0; border-radius: var(--r-lg); background: var(--white); color: var(--accent); overflow: hidden; } .lightbox::backdrop { background: rgba(8, 12, 20, .68); } .lightbox .lightbox-scroll { max-height: 86svh; overflow-y: auto; overscroll-behavior: contain; margin-top: 0; padding: 36px 28px; border-radius: 0; } @media (min-width: 768px) { .lightbox .lightbox-scroll { padding: 44px; } } .lightbox .terms-head:first-child { padding-right: 40px; } /* clears the close button */ .lightbox-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--band-dark) 10%, var(--white)); color: var(--band-dark); } .lightbox-close:hover { background: var(--band-dark); color: var(--white); } .lightbox .btn-pair { margin-top: 26px; } html.has-dialog { overflow: hidden; } html:not(.js) .lightbox { display: block; position: static; margin: 40px auto; max-height: none; } html:not(.js) .lightbox-close { display: none; } /* Problem: one sentence per line, for focused reading (Tobie's design choice, 2026-10-01). */ .problem-copy.is-lines { gap: 1.25em; } /* Together band: the closing line over the hero footage, heavy navy scrim so the line carries (first static pass). */ .together { position: relative; overflow: hidden; background: var(--band-dark); color: var(--white); text-align: center; } .together-bg { position: absolute; inset: 0; z-index: 0; } .together-bg .hero-video, .together-bg img { width: 100%; height: 100%; object-fit: cover; } .together-scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(30, 55, 79, .88), rgba(30, 55, 79, .7)); } .together .container { position: relative; z-index: 1; padding-block: clamp(90px, 14vw, 170px); } .together .btn-pair { margin-top: 36px; } .together-line { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h1); line-height: var(--lh-heading); text-wrap: balance; background: var(--grad-brand-h); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* a sentence break in the band line that only applies from desktop, where the line fits on two lines; below that the line wraps naturally */ .together-line .sub-brk { display: none; } @media (min-width: 980px) { .together-line .sub-brk { display: inline; } } /* the band without a photograph: plain navy (Mastery, which has no photo or video) */ .together.is-plain { background: var(--accent); } /* Two glows in conversation (.blob-bg as the band's first child): a large green one on the left and a blue one on the right, fixed to the screen behind the band. They share one 16s loop: when one leans in toward the middle and grows, the other backs away and shrinks, then they trade. The softness is baked into a radial gradient, no live blur filter (playbook section 8). Reduced motion leaves them still. */ .blob-bg { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; } .blob-field { position: fixed; inset: 0; } .blob { position: absolute; top: 50%; width: 62vmax; aspect-ratio: 1; margin-top: -31vmax; border-radius: 50%; background: radial-gradient(closest-side, var(--blob-c) 0%, color-mix(in srgb, var(--blob-c) 50%, transparent) 42%, transparent 100%); animation: 16s ease-in-out infinite; } .blob.is-blue { --blob-c: var(--brand); right: -18vmax; opacity: .55; animation-name: blobright; } .blob.is-green { --blob-c: var(--brand-2); left: -18vmax; opacity: .4; animation-name: blobleft; } @keyframes blobleft { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(13vmax, -3vmax) scale(1.14); } /* the left one leans in */ 50% { transform: translate(3vmax, 1vmax) scale(1); } 75% { transform: translate(-8vmax, 3vmax) scale(.9); } /* the left one gives way */ } @keyframes blobright { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(8vmax, 3vmax) scale(.9); } /* the right one gives way */ 50% { transform: translate(-3vmax, -1vmax) scale(1); } 75% { transform: translate(-13vmax, -3vmax) scale(1.14); } /* the right one leans in */ } /* Section title shared by the plain sections on this page (Problem, What You Leave With). */ .sec-title { font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--brand); text-align: center; } .sec-title.is-white { color: var(--white); } .sec-title.is-grad { padding-bottom: .08em; background: var(--grad-brand-h); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* S2 Problem: a stack of short lines, the quiet thought in italics, the beat in brand blue, a quote bar to close. */ .problem-btag .container { padding-top: 70px; } .problem-copy.is-stack { max-width: 600px; margin: 34px auto 0; gap: 1.1em; text-align: center; } .problem-copy.is-stack .thought em { font-family: var(--font-head); font-style: italic; color: var(--band-dark); } .problem-copy.is-stack .beat { font-size: var(--fs-lead); } .quote-bar { margin: 48px auto 0; padding: 22px 28px; max-width: 600px; border-left: 4px solid var(--brand-2); background: color-mix(in srgb, var(--brand) 6%, var(--white)); font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-sub); line-height: var(--lh-heading); color: var(--band-dark); text-align: center; text-wrap: balance; } .problem-btag .container { padding-bottom: 70px; } .problem-btag .container:has(> .callout-pill) { padding-top: 0; } /* without this the two containers' padding stacked to about 190px (2026-10-05) */ .problem-btag .callout-pill { margin-top: 10px; } .page-home .problem .callout-box, .problem-btag .callout-box { background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)), linear-gradient(to left top, color-mix(in srgb, var(--brand-2) 80%, transparent), color-mix(in srgb, var(--brand) 80%, transparent)); color: var(--white); box-shadow: 0 16px 36px -24px rgba(8, 12, 38, .45); } /* the offer box's gradient, softened (80% strength, a lighter wash) so it sits behind the navy circle without competing with the offer box above (Steve, 2026-10-06). The homepage pill keeps its grey. */ /* a light branded background (28) instead of plain white (Steve, 2026-10-05). It goes in --sep-bg, so the one layer that draws the S1 to S2 curve carries the image up into the two curved corners: no white wedges either side of the seam. */ .problem-btag, .page-home .problem { --sep-bg: var(--white) url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-28.jpg') center top / cover no-repeat; } /* the homepage's problem section too (Steve, 2026-10-06) */ /* Fixed watermark (.wm-fixed as the first child of a .watermark section): the infinity mark stays put while the section scrolls over it. A clipped window onto a fixed layer, never background-attachment. */ .wm-fixed { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; } .wm-fixed::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(255, 255, 255, .87), rgba(255, 255, 255, .87)), var(--white) url('https://justonebetter.com/wp-content/uploads/2025/09/Color-infinity-no-background.png') center / contain no-repeat; } .watermark:has(> .wm-fixed) { background: var(--white); } .watermark:has(> .wm-fixed)::before { content: none; } /* S3 Fit mirror, two columns: same weight both sides so the not-for column reads as respect (tab 04). */ .fit-two-wrap .fit-title { color: var(--brand); } .fit-two { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 30px; } .fit-two-col { padding: 30px 28px; border-radius: var(--r-lg); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--white)); box-shadow: 0 14px 34px -22px rgba(8, 12, 38, .35); } .fit-two-head { font-size: var(--fs-lead); line-height: var(--lh-tight); color: var(--brand); } .fit-two-list { display: grid; gap: 14px; margin-top: 18px; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--accent); } .fit-two-list li { padding-left: 1.1em; position: relative; } .fit-two-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-brand); } /* the for-you box on the lighter navy (BTAG S5, Tobie 2026-10-02); the not-for box stays white */ .fit-two-col.is-for { background: var(--accent); border-color: var(--accent); } .fit-two-col.is-for .fit-two-head { color: var(--brand-2); } .fit-two-col.is-for .fit-two-list { color: var(--white); } @media (min-width: 768px) { .fit-two { grid-template-columns: 1fr 1fr; gap: 30px; max-width: 960px; margin-inline: auto; } } /* ---- BTAG S5, the split fit mirror (Steve, 2026-10-05). No cards: two open columns on the branded background, split by the homepage's infinity divider turned vertical, horizontal again when the columns stack. The lines draw outward from the mark once the divider is revealed. Scoped to .fit-split; the card version elsewhere is unchanged. ---- */ .fit.fit-split { padding-block: 7rem; } /* room above and below the two columns (Tobie, 2026-10-08) */ .page-btag .faq { padding-top: 64px; } /* (Tobie, 2026-10-08) */ .fit-split .fit-title { font-size: var(--fs-h1); padding-bottom: .08em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* full section-title size, the diagonal gradient */ .fit-split-grid { display: grid; grid-template-columns: 1fr; gap: 26px; max-width: 1000px; margin: 36px auto 0; } .fit-split-col .fit-two-head { color: var(--brand); } .fit-split-col.is-for .fit-two-list { color: var(--band-dark); } .fit-two-list.is-marked li { display: flex; align-items: flex-start; gap: 14px; padding-left: 0; } .fit-two-list.is-marked li::before { content: none; } .fit-two-list.is-marked .check { margin-top: calc((var(--fs-ui) * var(--lh-body) - 20px) / 2); } .fit-split .fit-two-list a { color: var(--brand); font-weight: var(--fw-semi); border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .fit-split .fit-two-list a:hover { border-color: var(--brand); } .check.is-x { background: var(--accent); } /* navy circle, white X: the column for readers this is not for yet (Steve, 2026-10-05) */ .check.is-x::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .split-divider { display: flex; align-items: center; gap: 12px; } .split-divider::before, .split-divider::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--grad-brand-h); transition: transform 2s var(--ease) .3s; } /* 2s: half the speed of the first build, which finished before the reader did (Steve, 2026-10-05) */ .split-divider::before { transform-origin: right center; } .split-divider::after { transform-origin: left center; } html.js .split-divider:not(.is-revealed)::before, html.js .split-divider:not(.is-revealed)::after { transform: scaleX(0); } .split-divider img { flex: none; width: 50px; height: 50px; } @media (min-width: 768px) { .fit-split-grid { grid-template-columns: 1fr auto 1fr; gap: 0 44px; align-items: stretch; } .split-divider { flex-direction: column; } .split-divider::before, .split-divider::after { width: 2px; height: auto; background: linear-gradient(var(--brand), var(--brand-2)); } .split-divider::before { transform-origin: center bottom; } .split-divider::after { transform-origin: center top; } html.js .split-divider:not(.is-revealed)::before, html.js .split-divider:not(.is-revealed)::after { transform: scaleY(0); } } @media (prefers-reduced-motion: reduce) { .split-divider::before, .split-divider::after { transition: none; transform: none !important; } } /* S4 How it works: the steps rail, step 2 given the most room, the run-of-show timeline as its visual (tab 05). */ .how { padding-bottom: 80px; } .how .plan-sub { margin-top: 10px; } .steps.is-how .step p + p { margin-top: 12px; } .steps.is-how .step p { text-align: left; } @media (min-width: 768px) { .steps.is-how .step p { text-align: center; } } .timeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; text-align: left; } .timeline li { padding: 12px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand) 8%, var(--white)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--white)); font-family: var(--font-head); font-size: var(--fs-2xs); line-height: var(--lh-heading); color: var(--accent); } .timeline li strong { display: block; font-size: var(--fs-lead); line-height: 1.1; color: var(--brand); } .timeline li.is-mark { background: var(--band-dark); border-color: var(--band-dark); color: rgba(255, 255, 255, .85); } .timeline li.is-mark strong { font-size: var(--fs-lead); white-space: nowrap; color: var(--brand-2); } @media (min-width: 980px) { .steps.is-how { grid-template-columns: repeat(3, 1fr); } .timeline { grid-template-columns: repeat(4, 1fr); } } /* three equal columns (Steve, 2026-10-05): step 2 was 1.6fr while its copy was long; shortened, it matches the other two */ .how .step-num { box-shadow: none; } /* the white outline is not wanted here (Tobie, 2026-10-01) */ .opt-flag { width: fit-content; margin: 0 auto 14px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--band-dark); font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); } /* Option B: the steps down a thin brand line that grows with the scroll; each step appears when the line reaches its number (site.js, [data-grow]). No grey rail. With script off or reduced motion everything is simply shown. */ .how-b { background: var(--white); } .rows { position: relative; display: grid; gap: 40px; margin-top: 44px; } .rows::before { content: ""; position: absolute; left: 25px; top: 27px; height: var(--line-h, 0px); width: 4px; border-radius: 4px; background: var(--grad-brand); transform-origin: center top; transform: scaleY(var(--grow, 1)); } .row { position: relative; display: grid; grid-template-columns: 54px 1fr; column-gap: 24px; align-items: start; } .rows .step-num { width: 54px; height: 54px; border: 0; font-size: var(--fs-h3); transition: transform var(--dur) var(--ease), opacity var(--dur-ui) var(--ease-ui); } .rows .row-body { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } html.js .rows[data-grow] .row:not(.is-on) .step-num { opacity: 0; transform: scale(.4); } html.js .rows[data-grow] .row:not(.is-on) .row-body { opacity: 0; transform: translateY(var(--reveal-distance)); } .row .step-title { margin-top: 8px; text-align: left; } .row-body p { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--band-dark); } .row.is-main .row-body { padding: 14px 26px 26px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--brand) 6%, var(--white)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--white)); } .how-b .plan-close { margin-top: 44px; } /* Option C: step 2 as the centrepiece. A tall dark card between two compact light ones; from desktop the two side cards share one height (the taller of the two) and sit centred against the middle card. */ .how-c { --fold-tail: color-mix(in srgb, var(--brand) 5%, var(--white)); background: var(--fold-tail); } .trio { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .trio-card { padding: 30px 26px; border-radius: var(--r-lg); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--white)); box-shadow: 0 14px 34px -22px rgba(8, 12, 38, .35); } .trio-num { display: block; text-align: center; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-stat); line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .trio-card .step-title { margin-top: 10px; text-align: center; } .trio-card p { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--band-dark); } .trio-card.is-main { padding: 38px 34px; background: var(--band-dark); border-color: var(--band-dark); } .trio-card.is-main .step-title { color: var(--brand-2); } .trio-card.is-main p { font-size: var(--fs-body); color: rgba(255, 255, 255, .9); } @media (min-width: 980px) { .trio { grid-template-columns: 1fr 1.7fr 1fr; grid-template-rows: 1fr auto 1fr; gap: 0 24px; } .trio-card { grid-row: 2; } .trio-card:first-child { grid-column: 1; } .trio-card:last-child { grid-column: 3; } .trio-card.is-main { grid-column: 2; grid-row: 1 / 4; } } /* S5 What you leave with: dark band, the result as its own lines, then the compact static mountain (tab 06). */ .leave { --fold-tail: var(--band-dark); position: relative; padding-block: 80px 70px; background: var(--band-dark) url('https://justonebetter.com/wp-content/uploads/2025/09/JOB-bg.png') right center / cover no-repeat; color: var(--white); } .leave::before { content: ""; position: absolute; inset: 0; background: var(--band-scrim); } .leave .container { position: relative; } .leave-lines { display: grid; gap: 14px; margin-top: 30px; font-family: var(--font-head); font-size: var(--fs-sub); line-height: var(--lh-heading); text-align: center; text-wrap: balance; color: var(--white); } .leave-lines .is-after { margin-top: 10px; font-style: italic; color: var(--brand-2); } .leave-map-head { margin-top: 64px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--brand-2); } .bigpic.is-static { --bigpic-h: 300px; margin-top: 18px; border-radius: var(--r); } @media (min-width: 768px) { .bigpic.is-static { --bigpic-h: 420px; } } .bigpic.static .trail .wp { pointer-events: none; cursor: default; } .bigpic.static .trail .wp.dim { opacity: .35; } .bigpic.static .trail .seg { opacity: .55; } .leave-map { display: grid; gap: 10px; margin: 22px auto 0; max-width: 640px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-heading); color: rgba(255, 255, 255, .72); } .leave-map strong { color: var(--white); } .leave-map .is-lit { color: var(--white); } .leave-map .is-lit strong { color: var(--brand-2); } /* Plain band: the lighter navy, no image (BTAG proof, so it does not repeat the band above it) */ .testi.is-plain { background: var(--accent); } .testi.is-plain::before { content: none; } /* S6 Proof: the section title over the band, the anchor card, two quiet cards under it (tab 07). */ .proof-title { margin-bottom: 36px; font-size: var(--fs-h2); line-height: var(--lh-heading); text-align: center; background: var(--grad-brand-h); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .testi-card.is-anchor + .testi-card.is-anchor { margin-top: 20px; } .testi-photo.is-initials { display: grid; place-items: center; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h3); color: var(--white); } /* stand-in until the real photograph is supplied */ .testi-card.is-anchor .testi-body { max-width: none; } .testi-card.is-anchor { padding: 28px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .testi-quiet { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: var(--w-750); margin: 20px auto 0; } .testi-mini { margin: 0; padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); } .testi-mini.has-photo { display: grid; grid-template-columns: 76px 1fr; column-gap: 20px; align-items: start; } .testi-mini.has-photo .testi-photo { grid-row: 1 / span 2; } .testi-photo.is-small { width: 76px; height: 76px; } .testi-mini footer { display: grid; gap: 4px; margin-top: 16px; } .testi-mini .testi-name { margin-top: 0; } .testi-quote.is-large { font-family: var(--font-head); font-size: var(--fs-h4); line-height: var(--lh-tight); } @media (min-width: 768px) { .testi-quiet { grid-template-columns: 1.4fr 1fr; } } .proof-line { max-width: var(--w-750); margin: 26px auto 0; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); text-align: center; color: rgba(255, 255, 255, .78); } @media (min-width: 768px) { .testi-quiet { grid-template-columns: 1fr; } } /* S7 Dates and investment: the band carries the dates and the button; the white card carries the conditions (tab 08). */ .dates .container { padding-bottom: 60px; } .date-list { display: grid; gap: 8px; margin-top: 26px; font-family: var(--font-head); font-size: var(--fs-lead); letter-spacing: var(--track-sub); line-height: var(--lh-heading); color: var(--white); } .date-list .is-full { color: rgba(255, 255, 255, .55); text-decoration: line-through; } .date-list .is-full::after { content: " Full"; text-decoration: none; font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); } .dates .band-meta { margin-top: 14px; } .terms-card { margin-top: 44px; padding: 30px 28px; border-radius: var(--r-lg); background: var(--white); text-align: left; font-size: var(--fs-sm); line-height: var(--lh-quote); color: var(--accent); } .terms-card > * + * { margin-top: 14px; } .terms-card.is-notes { margin-top: 30px; font-size: var(--fs-ui); line-height: var(--lh-body); } /* the long lines of a band, set in a white box so they read (EMPOWERED investment) */ .terms-card.is-notes + .btn-pair { margin-top: 34px; } .terms-card.is-notes.is-dark { background: var(--accent); color: var(--white); box-shadow: 0 30px 60px -30px rgba(8, 12, 38, .55); } /* the same box in navy with white text (Mastery) */ .terms-head { font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--brand); } .terms-head.is-sub { margin-top: 26px; font-size: var(--fs-lead); } ol.terms-list { counter-reset: term; display: grid; gap: 12px; } /* ol.x out-cascades the base ol[class] reset */ ol.terms-list li { counter-increment: term; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; } ol.terms-list li::before { content: counter(term); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-brand); font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-sm); line-height: 1; color: var(--white); } .terms-card strong { color: var(--band-dark); } .terms-link { font-family: var(--font-head); } .terms-link a { color: var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .terms-link a:hover { border-color: var(--brand); } @media (min-width: 768px) { .terms-card { padding: 40px 44px; } } /* S8 About: the pull quote under the two paragraphs (tab 09). */ .about-pull { margin: 28px 0 0; padding-left: 20px; border-left: 4px solid var(--brand-2); } .about-pull p { font-family: var(--font-head); font-style: italic; font-size: var(--fs-sub) !important; line-height: var(--lh-heading); color: var(--band-dark) !important; } .about-pull footer { margin-top: 8px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-sm); color: var(--brand); } /* S10 Final CTA: the question route and the two off-ramps, quiet text well below the button (tab 11). */ .final .container { padding-bottom: 64px; } .band-ask { margin-top: 44px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--white); } .band-ask a { color: var(--band-dark); font-weight: var(--fw-head); border-bottom: 1px solid color-mix(in srgb, var(--band-dark) 50%, transparent); } .band-ask a:hover { color: var(--white); border-color: var(--white); } .band-ramp { margin-top: 12px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: rgba(255, 255, 255, .85); } .band-ramp + .band-ramp { margin-top: 6px; } .band-ramp a { border-bottom: 1px solid rgba(255, 255, 255, .35); } .band-ramp a:hover { color: var(--band-dark); border-color: var(--band-dark); } /* BTAG final CTA, redesigned 2026-10-01: a white ticket on the band (the ask on the left, the sessions on the right, a dashed tear between), then the three quiet routes as a row. */ .final-btag .container { padding-bottom: 70px; } .ticket { display: grid; grid-template-columns: 1fr; max-width: 940px; margin-inline: auto; border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(8, 12, 38, .55); text-align: left; } /* each half carries its own background and corners: one clipped white card showed a white hairline round the dark half's corner */ .ticket-main { display: flex; flex-direction: column; justify-content: center; padding: 36px 30px 34px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--white); } .ticket-title { font-size: var(--fs-h1); line-height: var(--lh-tight); padding-bottom: .08em; background: var(--grad-brand-h); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ticket-sub { margin-top: 8px; font-family: var(--font-head); font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--band-dark); } .ticket-fine { margin-top: 16px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--accent); } .ticket .btn-pair { margin-top: 28px; justify-content: flex-start; width: auto; } .ticket-side { padding: 30px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--accent); color: var(--white); } .ticket-label { font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); } .ticket-dates { display: grid; gap: 12px; margin-top: 14px; } .ticket-dates li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-family: var(--font-head); line-height: var(--lh-heading); } .ticket-dates strong { font-size: var(--fs-ui); color: var(--white); } .ticket-dates span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); } .ticket-meta { margin-top: 14px; font-family: var(--font-head); font-size: var(--fs-sm); color: var(--brand-2); } .final-links { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 940px; margin: 34px auto 0; text-align: center; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); } .final-links li { display: grid; gap: 4px; align-content: start; } .final-links span { color: rgba(255, 255, 255, .85); } .final-links a { justify-self: center; font-weight: var(--fw-head); color: var(--band-dark); border-bottom: 1px solid color-mix(in srgb, var(--band-dark) 45%, transparent); } .final-links a:hover { color: var(--white); border-color: var(--white); } @media (min-width: 768px) { .ticket { grid-template-columns: 1.25fr 1fr; } .ticket-main { padding: 46px 44px; border-radius: var(--r-lg) 0 0 var(--r-lg); } .ticket-side { padding: 40px 36px; border-radius: 0 var(--r-lg) var(--r-lg) 0; border-top: 0; } /* the dashed perforation removed (Steve, 2026-10-06): with no stub notches it read as a rendering line, not a ticket */ .final-links { grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (min-width: 768px) { .final-links.is-two { grid-template-columns: repeat(2, 1fr); max-width: 700px; } } } /* Band with dark text (Tobie, 2026-10-02): the gradient keeps its own colours and the text goes dark, where white on the green half was hard to read. */ .band.is-ink .band-title { font-weight: var(--fw-head); color: var(--band-dark); } .band.is-ink .date-list { font-weight: var(--fw-semi); color: var(--band-dark); } .band.is-ink .band-meta, .band.is-ink .band-note { color: var(--band-dark); opacity: 1; } /* the dates band: title, sessions and facts in white, the guarantee block stays in ink (Tobie, 2026-10-08; sits after the ink rules above, equal specificity) */ .page-btag .band.dates { --sep-bg: linear-gradient(rgba(0, 0, 0, .176), rgba(0, 0, 0, .176)), var(--grad-brand); } /* the offer box's wash (the quote card's 18% black over the gradient), so S2 and S8 share one background (Tobie, 2026-10-08) */ .dates.is-ink .band-title, .dates.is-ink .date-list, .dates.is-ink .band-meta { color: var(--white); } .band.is-ink .band-ramp, .band.is-ink .final-links span { color: var(--band-dark); } .band.is-ink .band-ramp a { font-weight: var(--fw-head); border-color: color-mix(in srgb, var(--band-dark) 50%, transparent); } .band.is-ink .band-ramp a:hover { color: var(--white); border-color: var(--white); } /* a band heading set as a label, so it reads as the header above bold lines of the same colour (EMPOWERED investment) */ .band.is-ink .band-title.is-label { font-size: var(--fs-sub); letter-spacing: .12em; text-transform: uppercase; color: var(--white); } /* a link that looks like the sentence it sits in: no colour, no underline until hover (the subtle route to BTAG in the fit section) */ .link-plain { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-ui) var(--ease-ui); } .link-plain:hover, .link-plain:focus-visible { text-decoration-color: currentColor; } /* Final CTA: the ticket sits on the curved seam between the FAQ and the band (the hero's curve), the way the offer box sits on the hero curve; the band under it carries the three quiet routes. The FAQ reserves the room above the seam. */ #reserve.final-btag { --sep-bg: var(--grad-brand); } /* the same band gradient as the dates block; the homepage's #reserve swaps in a branded image, which made a third gradient on this page */ section:has(+ .final-btag) { --clear-h: 240px; } /* the 50px curve + 190px for the ticket's upper part */ .final-btag { display: flow-root; } /* the ticket's negative margin must not collapse through the section */ .final-btag .container { padding-top: 0; } .final-btag .ticket { margin-top: calc(-1 * (var(--sep-h) + 150px)); } /* About (BTAG): photo left, copy with the pull quote right. On phones and tablets the photo comes second. From desktop the two columns are equal and the copy is set tighter, which closes most of the gap that sat above the photo. */ .about-flip .about-photo { order: 2; } @media (min-width: 768px) { .about-flip .about-photo { order: 0; } } @media (min-width: 980px) { .about-flip .about-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } .about-flip .about-copy { max-width: none; padding: 36px 56px; } .about-flip .about-copy > * + * { margin-top: 16px; } .about-flip .about-pull { margin-top: 20px; } .about-flip .about-pull p { font-size: var(--fs-body) !important; } } /* Scroll light (section.has-mark with a .scroll-mark first child): the logo fixed to the screen behind the section (a clipped fixed layer, not background-attachment), white and faint, in the place the old background image had it; a short stretch of it shows in colour, faded and soft at both ends, and travels the infinity path two and a half times while the section scrolls past, back again when the scroll reverses (site.js, .scroll-mark). */ .has-mark { background-image: none; overflow: clip; } /* on any dark band: .faq (BTAG S13) and .leave (BTAG S9) */ .scroll-mark { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; } /* a true fixed background: the section is a window (clip-path) onto a layer fixed to the screen, so the logo never scrolls in and then sticks */ .scroll-mark svg { position: fixed; inset: 0; width: 100%; height: 100%; } /* viewBox = the old background image's own 1200 x 675 frame, right-centre cover, so the logo sits exactly where it did */ /* in a hero the logo belongs to the hero itself (it scrolls away with it), and data-auto moves the light on its own (site.js) */ .scroll-mark.is-local svg { position: absolute; } .scroll-mark.is-bright .scroll-mark-lit { opacity: .6; } /* the hero's light: stronger, with a bright core dash in its mask */ .scroll-mark-base { filter: brightness(0) invert(1); opacity: .07; } .scroll-mark-lit { opacity: .32; } /* Footer legal bar: a page's own terms link above the copyright line. */ .foot-links { margin-bottom: 12px; font-size: var(--fs-sm); text-align: center; color: var(--white); } .foot-links a { color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .3); } .foot-links a:hover { color: var(--brand-2); border-color: var(--brand-2); } /* =========================== PAGES: PROGRAMS · MOUNTAIN WITHIN · EMPOWERED · ATHLETES (2026-09-25) =========== Built from the First Pass docs and the change brief; everything reuses the BTAG page's rules above. */ /* Site navigation, kept on the top-of-funnel pages (rules H2, H3): logo, links, hamburger below 980. */ .sitenav { background: var(--white); border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, var(--white)); } .sitenav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 8px; flex-wrap: wrap; } .sitenav-logo img { width: 44px; height: auto; } .sitenav-toggle { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; border-radius: var(--r-sm); } .sitenav-toggle span { display: block; width: 22px; height: 2px; background: var(--band-dark); transition: var(--transition); } .sitenav-links { display: none; flex-basis: 100%; flex-direction: column; gap: 2px; padding-bottom: 10px; } .sitenav-links.is-open { display: flex; } .sitenav-links a { padding: 10px 4px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--band-dark); border-bottom: 2px solid transparent; } .sitenav-links a:hover, .sitenav-links a[aria-current="page"] { color: var(--brand); } @media (min-width: 980px) { .sitenav-toggle { display: none; } .sitenav-links { display: flex; flex-basis: auto; flex-direction: row; gap: 26px; padding: 0; } .sitenav-links a { padding: 6px 0; } .sitenav-links a[aria-current="page"] { border-color: var(--brand-2); } } /* Hero variants: a light orientation hero (Programs) and a photo hero with the scrim (Mountain Within, EMPOWERED). */ .hero-light { background: var(--white) url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-14.jpg') center / cover no-repeat; color: var(--band-dark); } .hero-light .hero-eyebrow { color: var(--brand); } .hero-light .hero-title { background-image: var(--grad-brand); } .hero-light .hero-sub { color: var(--band-dark); } .hero-light .hero-block { padding-bottom: 90px; } .hero-copy { display: grid; gap: 1em; margin: 22px auto 0; max-width: 620px; font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255, 255, 255, .9); } .hero-light .hero-copy { color: var(--accent); } .hero-copy .hero-thought { font-family: var(--font-head); font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--brand-2); } .hero-img .hero-photo { width: 100%; height: 100%; object-fit: cover; } .hero-mountain .hero-photo { object-position: center 30%; } .hero-img .hero-block { padding-bottom: 64px; } .hero-img .hero-eyebrow { margin-top: 12px; } @media (min-width: 768px) { .hero-img .hero-eyebrow { margin-top: 36px; } } .hero-img .btn-pair { margin-top: 26px; } .hero-img .hero-facts { margin-top: 16px; } .hero-bullets { display: grid; gap: 8px; margin: 22px auto 0; max-width: 520px; font-family: var(--font-head); font-size: var(--fs-ui); line-height: var(--lh-heading); color: var(--white); text-align: center; } .hero-bullets strong { color: var(--brand-2); } .hero-ath .hero-sub { font-size: var(--fs-body); line-height: var(--lh-body); } /* Programs: the four question-led cards, the path with links, the question list. */ .fit-intro { max-width: 600px; margin: 0 auto; font-size: var(--fs-body); line-height: var(--lh-body); text-align: center; color: var(--accent); } .prog-cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 34px; } .prog-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 24px; border-radius: var(--r-lg); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--white)); box-shadow: 0 14px 34px -22px rgba(8, 12, 38, .35); transition: transform var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui); } .prog-card:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 20px 40px -22px rgba(0, 161, 255, .45); } .prog-lead { font-family: var(--font-head); font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--band-dark); text-wrap: balance; } .prog-name { font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-ui); line-height: var(--lh-heading); color: var(--brand); } .prog-desc { display: block; font-weight: var(--fw-body); font-size: var(--fs-sm); color: var(--accent); } .prog-card .fit-go { margin-top: auto; padding-top: 4px; } @media (min-width: 768px) { .prog-cards { grid-template-columns: 1fr 1fr; gap: 30px; max-width: 960px; margin-inline: auto; } } .steps.is-path .step p { font-family: var(--font-body); } .step-note { margin-top: 10px !important; font-style: italic; color: var(--accent) !important; font-size: var(--fs-sm) !important; } .step-link { margin-top: 12px !important; font-family: var(--font-head) !important; font-weight: var(--fw-semi); font-size: var(--fs-sm) !important; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand) !important; } .plan-close.is-quiet { font-weight: var(--fw-body); font-size: var(--fs-sub); color: var(--accent); background: none; -webkit-text-fill-color: initial; } .leave-map-head.is-top { margin-top: 0; margin-bottom: 14px; } .leave-lines.is-prose { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; } .quiet-link { margin-top: 30px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--accent); } .quiet-link.is-center { text-align: center; } .quiet-link a { color: var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .quiet-link a:hover { border-color: var(--brand); } .leave .quiet-link { color: rgba(255, 255, 255, .8); } .leave .quiet-link a { color: var(--brand-2); border-color: color-mix(in srgb, var(--brand-2) 40%, transparent); } .begin { padding-block: 80px 90px; background: var(--white); } .question-list { display: grid; gap: 14px; margin-top: 34px; } .question-list a { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: var(--r); background: color-mix(in srgb, var(--brand) 6%, var(--white)); border-left: 4px solid var(--brand-2); font-family: var(--font-head); font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--band-dark); transition: var(--transition); } .question-list a:hover { background: color-mix(in srgb, var(--brand) 12%, var(--white)); } .q-to { font-weight: var(--fw-semi); font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand); } .begin-close { margin-top: 30px; font-size: var(--fs-body); line-height: var(--lh-body); text-align: center; color: var(--accent); } /* Mountain Within: the feel list, the reveal callout, the point list, the RSVP form. */ .feel-lead { font-family: var(--font-head); font-weight: var(--fw-semi); color: var(--band-dark); } .feel-list { display: grid; gap: 6px; font-family: var(--font-head); font-size: var(--fs-body); line-height: var(--lh-heading); color: var(--band-dark); text-align: center; } .reveal-callout { margin-top: 40px; font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-h3); line-height: var(--lh-tight); text-align: center; color: var(--brand-2); } .plan-sub.is-small { font-size: var(--fs-lead); color: var(--accent); } .point-list { list-style: none; counter-reset: pt; display: grid; gap: 14px; margin: 30px auto 0; max-width: 600px; } .point-list li { counter-increment: pt; position: relative; padding-left: 52px; font-family: var(--font-head); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--band-dark); min-height: 36px; display: flex; align-items: center; } .point-list li::before { content: counter(pt); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-brand); color: var(--white); font-weight: var(--fw-head); font-size: var(--fs-sm); } .why { padding-block: 80px; background: var(--white); } .rsvp-form { max-width: 480px; margin: 34px auto 0; text-align: left; } .rsvp-row { display: grid; gap: 6px; margin-bottom: 14px; } .rsvp-row label { font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--white); } .rsvp-row input { width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm); background: rgba(255, 255, 255, .95); color: var(--band-dark); font-size: var(--fs-body); } .rsvp-form .btn-pair { margin-top: 20px; } .rsvp-form .btn { width: 100%; } .rsvp .band-ramp { margin-top: 40px; } .rsvp-privacy { margin-top: 14px; font-family: var(--font-head); font-size: var(--fs-2xs); line-height: var(--lh-body); text-align: center; color: rgba(255, 255, 255, .85); } /* EMPOWERED: single fit column, the theme cards, the build lead, the price eyebrow. */ .fit-two-col.is-single { max-width: 600px; margin: 34px auto 0; } .fit-two-close { margin-top: 18px; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--band-dark); } .feel-list.is-center { text-align: center; } .theme-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; } .theme-cards li { padding: 20px 22px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-ui); line-height: var(--lh-heading); color: var(--white); text-align: center; } @media (min-width: 768px) { .theme-cards { grid-template-columns: 1fr 1fr; gap: 20px; } } .build { padding-block: 80px; background: var(--white); } .build-lead { margin-top: 24px; font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-lead); text-align: center; color: var(--band-dark); } .band-eyebrow.is-white { color: var(--white); opacity: .9; } .dates .band-eyebrow + .date-list { margin-top: 12px; } .fit .quiet-link { margin-top: 34px; } /* Athletes: the quote-bar subline, the four steps, the pillars, the three columns, the boundary line. */ .quote-bar-sub { display: block; margin-top: 6px; font-weight: var(--fw-body); font-size: var(--fs-body); color: var(--accent); } .four-steps { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } .four-steps li { padding: 26px 24px; border-radius: var(--r-lg); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--white)); box-shadow: 0 14px 34px -22px rgba(8, 12, 38, .35); text-align: center; } .four-steps h3 { font-size: var(--fs-lead); line-height: var(--lh-tight); color: var(--brand); } .four-steps p { margin-top: 10px; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--accent); } @media (min-width: 768px) { .four-steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .four-steps { grid-template-columns: repeat(4, 1fr); } } .pillars { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .pillars li { position: relative; padding: 28px 24px 24px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); text-align: center; } .pillar-num { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--grad-brand); font-family: var(--font-body); font-weight: var(--fw-head); font-size: var(--fs-lead); color: var(--white); } .pillars h3 { font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--brand-2); } .pillars p { margin-top: 10px; font-size: var(--fs-ui); line-height: var(--lh-body); color: rgba(255, 255, 255, .85); } @media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .pillars-close { max-width: 640px; margin: 34px auto 0; font-family: var(--font-head); font-size: var(--fs-body); line-height: var(--lh-body); text-align: center; color: rgba(255, 255, 255, .88); } .get-cols { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 34px; } .get-label { font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-2); margin-bottom: 8px; } @media (min-width: 768px) { .get-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .boundary { max-width: 640px; margin: 30px auto 0; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-body); text-align: center; color: var(--accent); } .fit .btn-pair { margin-top: 30px; } /* =========================== SECOND-GENERATION PAGES (merged 2026-10-01 from the page-set builds) =========================== */ /* =========================== PENDING: PROGRAMS + THE MOUNTAIN WITHIN (2026-10-01) =========================== To merge into site.css after the "PAGES: PROGRAMS · MOUNTAIN WITHIN · EMPOWERED · ATHLETES" block (it must sit after the BTAG and hero-variant rules it builds on). Tokens only; every font-size is an existing --fs-* token; breakpoints 768 and 980 only. Everything else on the three pages reuses existing classes. */ /* ---- PROGRAMS · S2 The Four Pathways: one ordered list in journey order (never a grid of four). Each entry is the .fit-two-col card; .path lays the question beside the name/body from laptop up. ---- */ .paths { --sep-bg: var(--white); background: var(--white); } .paths .container { padding-block: var(--space-xl) var(--space-lg); } .path-list { display: grid; gap: var(--space-md); } .path { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } .path .fit-body { margin-top: var(--space-xs); } /* the Mastery line (entry 3): quiet text link, never a button */ .path .step-note a { color: var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .path .step-note a:hover { border-color: var(--brand); } .path .step-link a:hover { color: var(--accent); } @media (min-width: 768px) { .path { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-lg); } } /* ---- MOUNTAIN WITHIN · S1 Hero with the registration form on the first screen. Phone: copy then form, tight top padding and the subhead at body size so the form starts on the first screen. Desktop: copy left, form right. ---- */ .hero.hero-reg > .container { padding-block: var(--space-md) calc(var(--space-xl) + var(--space-lg)); } .hero-reg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .hero.hero-reg .hero-eyebrow { margin-top: 0; } .hero.hero-reg .hero-sub { margin-top: var(--space-xs); font-size: var(--fs-body); line-height: var(--lh-body); } .hero-form { width: 100%; max-width: 520px; margin-inline: auto; padding: var(--space-md); border-radius: var(--r-lg); background: color-mix(in srgb, var(--white) 8%, transparent); border: 1px solid color-mix(in srgb, var(--white) 20%, transparent); } .reg-title { font-size: var(--fs-lead); line-height: var(--lh-tight); text-align: center; color: var(--white); } .reg-title + .rsvp-form { margin-top: var(--space-sm); } /* the submit button spans the form at every width (the base .btn-pair shrinks to its label from 768) */ .rsvp-form .btn-pair { display: flex; width: 100%; } .rsvp-form .btn-pair .btn { flex: 1 1 auto; } @media (min-width: 768px) { .hero.hero-reg > .container { padding-top: var(--space-xl); } } @media (min-width: 980px) { .hero-reg-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-xl); align-items: center; } .hero-reg-copy { text-align: left; } .hero.hero-reg .hero-eyebrow { margin-inline: 0; } } /* ---- MOUNTAIN WITHIN · S3 Logistics and Proof: the quiet quote (no photo) centred under the two cards ---- */ .fit .about-pull { max-width: var(--w-700); margin: var(--space-xl) auto 0; } /* the quote with its photograph (the doc resolved 2026-10-01 that Beatriz's photo exists): the testimonial photo tile beside the pull quote */ .pull-photo { display: flex; align-items: center; gap: var(--space-md); max-width: var(--w-700); margin: var(--space-xl) auto 0; } .fit .pull-photo .about-pull { margin: 0; } /* ---- MOUNTAIN WITHIN · S5 Close: the form heading between the closing headline and the form ---- */ .band .reg-title { margin-top: var(--space-lg); } /* ---- MOUNTAIN WITHIN CONFIRMED · S1: the calendar button under the session line ---- */ .hero-confirm .btn-pair { margin-top: var(--space-lg); } /* =========================== PENDING: EMPOWERED (2026-10-01) =========================== To fold into site.css under the PAGES block. Tokens only, breakpoints 768 only, no new font sizes. Serves empowered.html (landing) and empowered-terms.html (terms). Everything else on both pages reuses rules that already exist in site.css. */ /* S1 hero: room under the subhead for the hero curve, same value the BTAG hero uses. */ .hero-full.hero-img .hero-block { padding-bottom: 0; } /* the full-height hero centres its block; no curve allowance needed */ /* S5 What it is and the year (#the-year): sub-headings, the playbook definition block, the two halves, the mountain. */ .year { padding-bottom: 80px; } .year-head { margin-top: 56px; font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--band-dark); text-align: center; } .plan-title + .year-head { margin-top: 34px; } /* the definition, set apart quietly: a ruled block in body type, not a sales paragraph */ .year-def { display: grid; gap: 1em; max-width: 600px; margin: 22px auto 0; padding: 24px 26px; border-left: 4px solid var(--brand-2); border-radius: 0 var(--r) var(--r) 0; background: color-mix(in srgb, var(--brand) 6%, var(--white)); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--accent); text-align: left; } /* option B of the year section: the definition's first sentence as the statement, the time as one large line, roadmap spacing */ .year-def-lead { font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-lead); line-height: var(--lh-heading); color: var(--band-dark); } .plan-close.is-stat { margin-top: 18px; font-size: var(--fs-h1); } .plan-close.is-stat + .problem-copy.is-stack { margin-top: 14px; } .year .fit-two-col.is-for.year-half p { color: var(--white); } .year .fit-two-col.is-for.year-half strong { color: var(--brand-2); } .year .rows { margin-top: 30px; } /* "What is a playbook?" as a dark band: the photograph beside the definition (EMPOWERED option B, part 1) */ .playbook { --fold-tail: var(--band-dark); padding-block: var(--space-2xl); background: var(--band-dark); color: var(--white); } .playbook-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; margin-top: var(--space-lg); } /* title centred above; photo and copy centred against each other */ .playbook-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); } .playbook-copy > * + * { margin-top: var(--space-sm); } .playbook-copy .year-def-lead { color: var(--white); } .playbook-copy p:not(.year-def-lead) { font-size: var(--fs-body); line-height: var(--lh-body); color: color-mix(in srgb, var(--white) 85%, transparent); } @media (min-width: 768px) { .playbook-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-xl); } } .year .plan-close { margin-top: 34px; } .year .plan-close.is-stat { margin-top: 18px; } /* the two halves: the existing fit-two cards, holding one paragraph each with a bold label */ .year-half p { font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--accent); } .year-half strong { font-family: var(--font-head); color: var(--brand); } .year .bigpic.is-static { margin-top: 44px; } /* TERMS PAGE (#terms): heading, date, left-aligned prose at site body size, section headings, numbered list. */ .terms-date { margin-top: 10px; font-family: var(--font-head); font-size: var(--fs-sm); line-height: var(--lh-heading); text-align: center; color: var(--band-dark); } .terms-prose { display: grid; gap: 1em; margin-top: 34px; font-size: var(--fs-body); line-height: var(--lh-quote); color: var(--accent); text-align: left; } .terms-prose h2 { margin-top: 1.2em; font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--brand); text-wrap: balance; } .terms-prose strong { color: var(--band-dark); } .terms-prose a { color: var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .terms-prose a:hover { border-color: var(--brand); } /* BTAG terms page (Steve, 2026-10-05): a light branded background, fixed like the other branded sections (the section is a window onto a layer fixed to the screen), and a quiet way back to the landing page's decision block for a reader who came from the pop-up while still deciding. Scoped to this page; the EMPOWERED and Mastery terms pages are unchanged. */ .page-btag-terms .terms-page { clip-path: inset(0); background: none; --fixed-bg: url('https://justonebetter.com/wp-content/uploads/2025/09/job-brandedbg-20.jpg'); } .page-btag-terms .terms-page::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--white) var(--fixed-bg) center / cover no-repeat; } .terms-back { margin-top: 1.5em; font-family: var(--font-head); font-weight: var(--fw-semi); } /* =========================== PAGES: MASTERY (2026-10-01) =========================== Pending rules for mastery.html, mastery-apply.html, mastery-received.html, mastery-terms.html. Built from the Mastery First Pass doc (tabs 00 to 12). To be folded into site.css after the EMPOWERED block; everything else on these pages reuses existing classes. Tokens only, no new font-size values, no new breakpoints. */ /* ---- Landing S1 hero (tab 01): calm and still, no video and no photo. The same dark texture and scrim the testimonial, FAQ and "leave" bands use, so the first screen is the offer. ---- */ .hero-mastery { background: var(--band-dark) url('https://justonebetter.com/wp-content/uploads/2025/09/JOB-bg.png') right center / cover no-repeat; } .hero-mastery.has-mark { background-image: none; } /* the SVG logo with the moving light replaces the raster one */ .hero-mastery::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--band-scrim); } /* The seat line: smaller again than the facts line, a plain dated sentence. */ .hero-seat { margin-top: var(--space-2xs); font-family: var(--font-head); font-size: var(--fs-2xs); line-height: var(--lh-heading); color: color-mix(in srgb, var(--white) 80%, transparent); } /* ---- Landing S7 why us (tab 07): the proof line, smaller than the paragraph above it. p.about-proof matches the specificity of .about-copy p:not(.about-sub), so it must load after it. ---- */ .about-copy p.about-proof { font-size: var(--fs-sm); color: var(--band-dark); } /* Landing S7: the client quote card on the light About surface (the card is built for the dark band) */ .about-copy .testi-card.is-anchor { margin-top: var(--space-lg); background: var(--band-dark); border-color: var(--band-dark); } .about-copy .testi-card p.testi-quote { color: var(--white); } .about-copy .testi-card p.testi-name { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--brand); } .about-copy .testi-card p.testi-role { margin-top: var(--space-3xs); font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--brand-2); } /* ---- Application page (tab 10): one column on white, visible labels, the "why" line directly under each question in smaller type and a lighter weight than the question, text areas sized for a paragraph. No asterisks, no progress bar. ---- */ .apply-form { max-width: 600px; margin: var(--space-xl) auto 0; text-align: left; } .apply-head { font-size: var(--fs-lead); line-height: var(--lh-tight); color: var(--brand); } .apply-row { display: grid; gap: var(--space-2xs); margin-top: var(--space-md); } .apply-row label { font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-ui); line-height: var(--lh-heading); color: var(--band-dark); } .apply-row.is-question { margin-top: var(--space-xl); } .apply-row.is-question label { font-weight: var(--fw-head); font-size: var(--fs-lead); line-height: var(--lh-tight); } .apply-why { font-size: var(--fs-sm); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--accent); } .apply-row input, .apply-row textarea { width: 100%; padding: var(--space-xs) var(--space-sm); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--white)); border-radius: var(--r-sm); background: var(--white); color: var(--band-dark); font-size: var(--fs-body); line-height: var(--lh-body); transition: var(--transition); } .apply-row textarea { min-height: 9rem; resize: vertical; } .apply-row input:hover, .apply-row textarea:hover, .apply-row input:focus, .apply-row textarea:focus { border-color: var(--brand); } /* The reference-conversation checkbox: box left, the full line as its label. */ .apply-check { display: flex; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-xl); font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--band-dark); } .apply-check input { flex: none; width: 1.25em; height: 1.25em; margin-top: .1em; accent-color: var(--brand); } .apply-form .btn-pair { margin-top: var(--space-lg); } .apply-form .btn { width: 100%; } @media (min-width: 768px) { .apply-form .btn { width: auto; } } /* The privacy line, directly under the submit button. */ .apply-privacy { margin-top: var(--space-sm); font-size: var(--fs-sm); line-height: var(--lh-body); text-align: center; color: var(--accent); } /* ---- Received page (tab 11): the three small blocks under the promise. ---- */ .note-block { max-width: 600px; margin: var(--space-lg) auto 0; text-align: center; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--accent); } .note-head { margin-bottom: var(--space-3xs); font-weight: var(--fw-semi); font-size: var(--fs-ui); line-height: var(--lh-heading); color: var(--band-dark); } /* ---- Terms page (tab 12): no new rules. mastery-terms.html uses the same shell and classes as empowered-terms.html (.terms-page, .terms-date, .terms-prose), which live in _pending-css/empowered.css. Merge that block once and both terms pages are styled. ---- */ /* =========================== PENDING: ATHLETES (landing + received) · FREE COMMUNITY (2026-10-01) =========== To fold into site.css under the PAGES block. Tokens only, no new font-size values, no new breakpoints. Everything else on these three pages reuses rules already in site.css. */ /* Shared: a centred sub-heading inside a plain text section (Athletes "What this is not", the received page's three blocks, Free Community's item headings). Same size as the band titles (--fs-h3), brand blue. */ .sub-title { margin-top: var(--space-xl); font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--brand); text-align: center; } .sub-title:first-child { margin-top: 0; } .sub-title + .problem-copy.is-stack { margin-top: var(--space-md); } /* Free Community tab 03: "The Mountain Within" heading is the section's one text link */ .sub-title a { border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } .sub-title a:hover { color: var(--accent); border-color: var(--accent); } /* Shared: the quiet off-ramp sits well below the line under the button (Athletes tab 08, Free Community tab 04) */ .band-note + .band-ramp { margin-top: var(--space-xl); } /* ---- ATHLETES, manual pass 2026-10-02 ---- */ /* an icon in a brand-gradient circle (three parts, safeguarding) */ .icon-dot { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--grad-brand); color: var(--white); } .icon-dot svg, .rows .step-num svg { width: 26px; height: 26px; } /* the original site button, bright variant for dark photo bands: green at rest, blue sweeps in, white label on hover */ .btn.is-bright { background: var(--brand-2); color: var(--accent); } @media (hover: hover) { .btn.is-bright:hover .btn-label { color: var(--white); } } /* S2: the copy beside a photograph from desktop; photo under the copy below that */ .pq-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: 34px; } .pq-grid .problem-copy.is-stack { margin: 0 auto; } .pq-photo { max-width: 420px; margin-inline: auto; } .pq-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); } /* Cross-fading photo set (.fade-set): up to four stacked images, each shown for 5s of a 20s cycle with a 1s fade. The first image is the base and never animates, so reduced motion (and a no-animation browser) simply shows it. */ .fade-set { position: relative; } .fade-set img + img { position: absolute; inset: 0; height: 100%; opacity: 0; animation: fadeset 20s ease-in-out infinite backwards; } .fade-set img:nth-child(2) { animation-delay: 5s; } .fade-set img:nth-child(3) { animation-delay: 10s; } .fade-set img:nth-child(4) { animation-delay: 15s; } @keyframes fadeset { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } @media (min-width: 980px) { .pq-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-xl); align-items: center; max-width: 1040px; margin-inline: auto; } .pq-grid .problem-copy.is-stack { max-width: none; margin: 0; text-align: left; } .pq-photo { max-width: none; margin: 0; } } /* S4: the three parts on the lighter navy, icon over each */ .parts { padding-block: var(--space-2xl); background: var(--accent); } .parts .pillars .icon-dot { margin: 0 auto var(--space-xs); } /* S6: the safeguarding facts as a list, an icon beside each */ .safe-list { display: grid; gap: var(--space-md); margin-top: 34px; text-align: left; } .safe-list li { display: grid; grid-template-columns: 54px 1fr; column-gap: var(--space-md); align-items: center; } .safe-list p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--accent); } .leave .safe-list p, .fit-two-col.is-for .safe-list p { color: var(--white); } .leave .fit-two-col:not(.is-for) .safe-list p { color: var(--accent); } /* a white card inside a dark band keeps dark text */ .fit-two-col .safe-list { margin-top: 20px; } .fit-two-col .safe-list strong { color: var(--brand); } .leave .fit-two { max-width: 1100px; margin-top: var(--space-xl); } .parts .plan-close.is-stat { margin-top: 10px; } .parts .leave-lines { margin-top: 18px; } /* the same list on a dark band */ .year .year-def { margin-top: var(--space-xl); } .why .year-def { margin-top: var(--space-xl); } /* S8: the form band with dark text */ .band.is-ink .band-sub, .band.is-ink .band-eyebrow, .band.is-ink .rsvp-row label, .band.is-ink .rsvp-privacy, .band.is-ink .reg-title { color: var(--band-dark); } .band.is-ink .rsvp-row input { border-color: color-mix(in srgb, var(--band-dark) 30%, transparent); background: var(--white); } /* S10: the form on a navy card, so the band has three voices: dark text on the gradient, white and green on the navy */ .form-card { max-width: 560px; margin: var(--space-lg) auto 0; padding: var(--space-lg) var(--space-md); border-radius: var(--r-lg); background: var(--accent); box-shadow: 0 30px 60px -30px rgba(8, 12, 38, .55); } .band.is-ink .form-card .band-eyebrow { margin-top: 0; color: var(--brand-2); } .band.is-ink .form-card .band-note, .band.is-ink .form-card .rsvp-row label { color: var(--white); } .band.is-ink .form-card .rsvp-privacy { color: color-mix(in srgb, var(--white) 80%, transparent); } .form-card .rsvp-form { margin-top: var(--space-md); } .form-card + .band-note { margin-top: var(--space-lg); } @media (min-width: 768px) { .form-card { padding: var(--space-xl) var(--space-xl) var(--space-lg); } } /* Athletes tab 05, The Conversation: the two conversation cards run the same width as the three parts above them */ .how .fit-two { max-width: none; } /* Athletes tab 06, For the Athlete: the section label, clearly readable on the dark band */ .athlete-label { margin-bottom: var(--space-sm); font-family: var(--font-head); font-weight: var(--fw-semi); font-size: var(--fs-sm); letter-spacing: var(--track-caps); line-height: var(--lh-heading); text-transform: uppercase; text-align: center; color: var(--brand-2); } /* Athletes tab 07: the [CONFIRM BEFORE PUBLISHING] placeholders. Deliberately conspicuous; delete this rule and the class once Steve has confirmed the facts and the brackets are replaced. */ .needs-confirm { padding: var(--space-xs) var(--space-sm); border: 2px dashed var(--halo-b); border-radius: var(--r-sm); font-weight: var(--fw-head); color: var(--halo-b); } span.needs-confirm { padding: 0 var(--space-3xs); border: 0; border-radius: 0; background: color-mix(in srgb, var(--halo-b) 16%, var(--white)); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* inline placeholder inside a sentence: a highlight, since a dashed box breaks across lines */ /* =========================== COMING SOON (2026-10-07) =========================== One holding page for every program address still in review (coming-soon.html). Built from the homepage hero, the BTAG offer box and the fit-two cards; these rules only space them for a short page. All scoped to .page-coming-soon. */ .page-coming-soon .hero-block { padding-bottom: 150px; } /* room for the offer box, which overlaps the hero's bottom edge by 120px */ .page-coming-soon .hero-title.is-sentence { margin-top: 10px; } .page-coming-soon .hero .btn-pair { margin-top: 30px; } .page-coming-soon .hero-note { margin-top: 14px; } .page-coming-soon .cs-more .fit-two-col { display: flex; flex-direction: column; } .page-coming-soon .cs-more .fit-body { margin-top: 10px; } .page-coming-soon .cs-more .step-link { margin-top: auto !important; padding-top: 14px; } /* the two links line up at the foot of their cards */ /* =========================== MAIL HELP (2026-10-16) =========================== The card a mailto click opens at the foot of the screen (site.js "Mail help"): the same email in Gmail or Outlook on the web, or the address to copy, for visitors with no email app set up. Every page, built by script, no markup in the pages. */ .mail-help { position: fixed; z-index: 950; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); padding: 20px 48px 22px 22px; border-radius: var(--r); background: var(--white); color: var(--ink); box-shadow: 0 18px 48px -12px rgba(8, 12, 38, .45), 0 0 0 1px rgba(8, 12, 38, .06); font-family: var(--font-head); text-align: left; animation: mail-help-in .25s ease-out; } @keyframes mail-help-in { from { opacity: 0; transform: translate(-50%, 12px); } } .mail-help-head { margin: 0; font-weight: var(--fw-head); font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--band-dark); } .mail-help-line { margin: 6px 0 0; font-size: var(--fs-xs); line-height: var(--lh-body); } .mail-help-addr { font-weight: var(--fw-semi); color: var(--band-dark); overflow-wrap: anywhere; user-select: all; } .mail-help-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .mail-help-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px; border: 2px solid var(--band-dark); border-radius: var(--r-pill); background: var(--white); font-family: var(--font-head); font-weight: var(--fw-head); font-size: var(--fs-xs); line-height: 1; color: var(--band-dark); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; } .mail-help-btn:hover, .mail-help-btn:focus-visible { background: var(--band-dark); color: var(--white); } .mail-help-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--band-dark) 10%, var(--white)); font-size: 20px; line-height: 1; color: var(--band-dark); cursor: pointer; } .mail-help-x:hover, .mail-help-x:focus-visible { background: var(--band-dark); color: var(--white); } @media (prefers-reduced-motion: reduce) { .mail-help { animation: none; } } /* =========================== FOOTER =========================== */ .footer { background: var(--footer-bg); color: var(--white); font-family: var(--font-head); } .foot-bar.is-tagline { padding-top: 64px; } .foot-tagline { font-weight: var(--fw-semi); font-style: italic; font-size: var(--fs-xs); line-height: var(--lh-heading); text-align: center; background: linear-gradient(to right, var(--brand-2), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .foot-bar.is-contact { padding-block: 32px; } .foot-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-lg) var(--space-lg); } .foot-logo { display: block; } .foot-logo .logo-anim { width: 190px; max-width: none; } /* the homepage hero's particle logo, in every footer */ .foot-lines { display: grid; gap: var(--space-lg); font-size: var(--fs-sm); line-height: var(--lh-list); } .foot-label { display: block; font-weight: var(--fw-medium); color: var(--foot-green); } .foot-lines a { font-weight: var(--fw-light); color: var(--white); } .foot-lines a:hover { color: var(--brand-2); } .foot-bar.is-legal { padding: 30px 0 24px; } .foot-copy { font-size: var(--fs-2xs); text-align: center; color: var(--brand); } .foot-copy a { border-bottom: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); } /* the developer credit is plain text, no logo (Tobie, 2026-10-02) */ .foot-copy a:hover { color: var(--brand-2); border-color: var(--brand-2); } /* =========================== BIG PICTURE (component) ========== Same rules as big-picture/cornerstone-global.css; --bigpic-h unset = full screen. */ .bigpic { position: relative; width: 100%; height: var(--bigpic-h, 100svh); overflow: hidden; background: #060a12; font-family: var(--font-accent); } .bigpic, .bigpic * { box-sizing: border-box; } .bigpic .bg-wrap { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.4, 0, .2, 1); } .bigpic.engaged .bg-wrap { transform: translateX(-6%) scale(1.08); } .bigpic.mobile.engaged .bg-wrap { transform: none; } .bigpic .bigpic-img { position: absolute; max-width: none !important; height: auto; user-select: none; -webkit-user-drag: none; } .bigpic svg.trail { position: absolute; max-width: none; pointer-events: none; font-family: var(--font-accent); } /* max-width: none so the trail keeps the same box as the image; the global img/svg max-width: 100% clamped it to the viewport (Steve's side, 2026-09-16) */ .bigpic .trail .wp { pointer-events: auto; cursor: pointer; transition: opacity .35s ease; opacity: .92; } .bigpic .trail .wp-ring { transition: stroke-width .35s ease; } .bigpic .trail .wp.lit { opacity: 1; } .bigpic .trail .wp.lit .wp-ring { stroke-width: .3; } .bigpic.engaged .trail .wp.dim { opacity: .35; } .bigpic .trail .seg { opacity: .85; transition: opacity .35s ease; } .bigpic.engaged .trail .seg { opacity: .3; } .bigpic .bp-backdrop { position: absolute; inset: 0; background: rgba(4, 10, 16, .55); opacity: 0; pointer-events: none; transition: opacity .4s ease; } .bigpic.mobile.engaged .bp-backdrop { opacity: 1; pointer-events: auto; } .bigpic .bp-panel { position: absolute; top: 0; right: 0; bottom: 0; left: auto; margin: 0; width: 65vw; max-width: none; display: flex; flex-direction: column; justify-content: center; padding: 0 44px; background: linear-gradient(270deg, rgba(6, 10, 18, .95) 50%, rgba(6, 10, 18, 0) 100%); border: 0; border-radius: 0; transform: translateX(110%); transition: transform .9s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } .bigpic.engaged .bp-panel .bp-content, .bigpic.engaged .bp-panel .bp-close { pointer-events: auto; } .bigpic.engaged .bp-panel { transform: translateX(0); } .bigpic.mobile .bp-panel { top: 50%; left: 50%; right: auto; bottom: auto; width: min(420px, 88vw); max-height: 80vh; overflow-y: auto; padding: 40px 28px 32px; border-radius: 16px; background: rgba(7, 16, 26, .96); transform: translate(-50%, -50%) scale(.94); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; } .bigpic.mobile.engaged .bp-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } .bigpic .bp-content { margin-left: 50%; transition: opacity .25s ease; } .bigpic.mobile .bp-content { margin-left: 0; } .bigpic .bp-content.swapping { opacity: 0; } .bigpic .bp-feeling { color: var(--hue, var(--brand-2)); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; } .bigpic .bp-panel h3 { color: var(--white); font-size: var(--fs-h2); margin: .4em 0 .5em; padding: 0; font-weight: var(--fw-semi); font-family: inherit; line-height: 1.25; text-transform: none; letter-spacing: normal; } .bigpic .bp-panel p { color: rgba(255, 255, 255, .82); font-size: var(--fs-xs); line-height: 1.65; margin: 0 0 1.6em; padding: 0; } .bigpic .bp-cta { display: inline-block; align-self: flex-start; padding: 14px 30px; border: 0; border-radius: 8px; text-decoration: none; font-weight: var(--fw-semi); font-size: var(--fs-xs); font-family: inherit; color: #071018; background: var(--grad-brand-h); transition: transform .2s ease; } .bigpic .bp-cta:hover { transform: translateY(-2px); color: #071018; } .bigpic .bp-close { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border: 0; border-radius: 50%; margin: 0; padding: 0; line-height: 1; appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, .12); color: var(--white); font-size: var(--fs-sm); cursor: pointer; } .bigpic .bp-close:hover { background: rgba(255, 255, 255, .25); } .bigpic.mobile .bp-close { top: 12px; right: 12px; } .bigpic.no-anim, .bigpic.no-anim * { transition: none !important; } @media (max-width: 1000px) { .bigpic .bp-panel { width: 90vw; } .bigpic.engaged .bg-wrap { transform: translateX(-3%) scale(1.03); } } /* =========================== REDUCED MOTION =================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js [data-reveal] { opacity: 1 !important; animation: none !important; } .cue, .xfade-top, .typed-cursor, .fade-set img + img, .blob { animation: none; } .xfade-top { opacity: 0; } .bigpic .bg-wrap, .bigpic .bp-panel, .bigpic .bp-content, .bigpic .trail .wp, .bigpic .trail .seg, .bigpic .bp-backdrop, .btn-fill, .btn-mark::after, .rows::before, .rows .row-body, .rows .step-num { transition: none; } } /* ---- BTAG tone swap (Steve, 2026-10-06): How It Works on navy with the moving highlight on the logo, the testimonials on a light branded background, so the page alternates dark and light from the hero down. ---- */ .how.is-dark { position: relative; padding-top: 110px; padding-bottom: 100px; background: var(--band-dark); } /* more air than the light version (Tobie, 2026-10-08) */ .how.is-dark .container { position: relative; z-index: 1; } .how.is-dark .plan-title { padding-bottom: .08em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .how.is-dark .plan-sub { color: rgba(255, 255, 255, .88); } .how.is-dark .step p { color: rgba(255, 255, 255, .9); } .how.is-dark .steps::before { background: rgba(255, 255, 255, .12); } .how.is-dark .step-num { border-color: color-mix(in srgb, var(--white) 14%, var(--band-dark)); } .testi.is-light { background: radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--brand-2) 26%, transparent), transparent 55%), radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 55%), var(--white); color: var(--accent); } /* brand glows in two corners, no logo: P2S5 and P2S6 already carry the infinity (Steve, 2026-10-06) */ .proof-grid { display: grid; gap: 24px; max-width: 1100px; margin-inline: auto; } @media (min-width: 900px) { .proof-grid { grid-template-columns: 1fr 1fr; } .proof-grid .testi-card { align-items: flex-start; height: 100%; } } /* side by side from laptop up, stacked below (Steve, 2026-10-06) */ .proof-grid .testi-card.is-anchor + .testi-card.is-anchor { margin-top: 0; } .testi.is-light::before { content: none; } .testi.is-light { padding-block: 90px; } /* (Tobie, 2026-10-08) */ .testi.is-light .testi-card.is-anchor { background: var(--white); border-color: color-mix(in srgb, var(--brand) 22%, var(--white)); box-shadow: 0 14px 34px -22px rgba(8, 12, 38, .35); } .testi.is-light .testi-quote { color: var(--accent); } .testi.is-light .testi-role { color: var(--band-dark); } /* BTAG final fixes (Steve, 2026-10-07) */ /* a session time stays in one piece, so on a phone it drops under its date whole ("12 to 2 / p.m. ET" before) */ .date-time { white-space: nowrap; } /* a bulleted list in a terms card or pop-up ("What we promise for our part"): wrapped lines hang clear of the dot */ ul.terms-bullets { display: grid; gap: 10px; } ul.terms-bullets li { position: relative; padding-left: 22px; } ul.terms-bullets li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand); } /* testimonial cards on phones: the quote across the top of the card, then the photo beside the name and title (Steve's layout). Side by side, the quote had a column about 170px wide. Anchor cards only: BTAG, EMPOWERED, Mastery. */ @media (max-width: 599px) { .testi-card.is-anchor { display: grid; grid-template-columns: 76px 1fr; gap: 0 16px; padding: 24px 22px; } .testi-card.is-anchor .testi-body { display: contents; } .testi-card.is-anchor .testi-quote { grid-column: 1 / -1; grid-row: 1; margin-bottom: 18px; } .testi-card.is-anchor .testi-photo { grid-column: 1; grid-row: 2 / span 2; align-self: center; width: 76px; height: 76px; } .testi-card.is-anchor .testi-name { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; } .testi-card.is-anchor .testi-role { grid-column: 2; grid-row: 3; align-self: start; } .testi-card.is-anchor .testi-name:last-child { grid-row: 2 / span 2; align-self: center; } /* a card with no title line */ } /* Footer social row (Steve, 2026-10-03): nine accounts under the contact lines, on every page. Hover fills the circle green. */ .foot-bar.is-social { padding-bottom: 32px; } .foot-social { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .foot-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--white) 28%, transparent); color: var(--white); transition: background-color var(--dur-ui) var(--ease-ui), border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui); } .foot-social svg { width: 18px; height: 18px; fill: currentColor; } .foot-social a:hover, .foot-social a:focus-visible { background-color: var(--brand-2); border-color: var(--brand-2); color: var(--footer-bg); }