/* ========================================================================== Vet Fixer, LLC — site.css (v2) Structure follows the Cardioly demo-01 section vocabulary: utility bar, hero slider, overlapping enquiry card, collage with floating badges, service grid, founder + accordion, carousel, team, partner strip, call band, benefits with meters, resources grid, four-column footer. Palette, typography and motion curves stay on the Vet Fixer system. A real 3D layer sits on top: perspective containers, pointer tilt, scroll-driven rotateX entrances, a sticky card stack and a coverflow. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* --- Brand palette, sampled directly from the Vet Fixer logo ---------- Plum #4E1142 the VET wordmark and the central figure Green #29532D the FIXER wordmark and the leaves Gold #D78709 the heart, the rule, the accent Mauve #A9698C the lighter leaves Paper #FBF9F5 the logo background --------------------------------------------------------------------- */ --plum: #4E1142; --plum-deep: #380C30; --plum-mid: #67215A; --green: #29532D; --green-deep: #1C3A20; --green-soft: #C9DBCA; --gold: #D78709; --gold-deep: #A96806; --gold-soft: #F7E7CE; --mauve: #A9698C; --mauve-soft: #EBD7E2; /* Surface roles. The names are kept from v2 so every rule below still resolves; only the values moved onto the logo palette. */ --ink: var(--plum); --ink-deep: var(--plum-deep); --ink-mid: var(--plum-mid); --petrol: var(--green); --petrol-soft: var(--green-soft); --sand: #FBF9F5; --shell: #FFFFFF; --marigold: var(--gold); --marigold-deep: var(--gold-deep); --marigold-soft: var(--gold-soft); --clay: #B23A48; --ink-text: #2B1226; --muted: #6E5566; --hairline: #E8E1DB; --on-ink: #FBF9F5; --on-ink-muted: #D9C4D2; --on-ink-hair: #6E3A61; --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --step-hero: clamp(2.05rem, 0.85rem + 5.6vw, 6.4rem); --step-1: clamp(1.72rem, 1.05rem + 3.1vw, 3.9rem); --step-2: clamp(1.42rem, 1.1rem + 1.7vw, 2.5rem); --step-3: clamp(1.24rem, 1.08rem + 0.75vw, 1.62rem); --step-body: 1.0625rem; --step-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); --step-small: 0.9375rem; --step-label: 0.78rem; --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; --s-8: 10rem; --gutter: clamp(1.25rem, 4vw, 4.5rem); --max: 1440px; --measure: 68ch; --radius-s: 6px; --radius-m: 14px; --radius-l: 24px; --radius-xl: 34px; --arch: 220px 220px 12px 12px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 200ms; --dur: 460ms; --dur-slow: 950ms; --shadow-lift: 0 18px 44px -18px rgba(56, 12, 48, 0.30); --shadow-deep: 0 38px 80px -32px rgba(56, 12, 48, 0.44); --shadow-3d: 0 34px 60px -26px rgba(56, 12, 48, 0.40); --depth: 1200px; } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8rem; } body { margin: 0; background: var(--sand); color: var(--ink-text); font-family: var(--font-body); font-size: var(--step-body); line-height: 1.62; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.022em; margin: 0; text-wrap: balance; } p { margin: 0 0 var(--s-2); max-width: var(--measure); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--marigold); color: var(--ink-deep); } :focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: var(--gutter); top: -120px; z-index: 999; background: var(--marigold); color: var(--ink-deep); padding: 0.85rem 1.4rem; font-weight: 700; border-radius: 0 0 var(--radius-s) var(--radius-s); transition: top var(--dur-fast) var(--ease); } .skip:focus { top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .wrap--tight { max-width: 1080px; } .section { padding-block: clamp(4rem, 8vw, 9rem); position: relative; } .section--snug { padding-block: clamp(3rem, 5.5vw, 5.5rem); } .section--ink { background: var(--ink); color: var(--on-ink); } .section--deep { background: var(--ink-deep); color: var(--on-ink); } .section--shell { background: var(--shell); } .section--green { background: var(--green); color: var(--on-ink); } .section--green h1, .section--green h2, .section--green h3 { color: var(--on-ink); } .section--green p, .section--green .lead { color: #CFE0D0; } .section--green .kicker { color: var(--gold-soft); } .section--green .ticks > li::before { box-shadow: inset 0 0 0 3px var(--green); } .section--green .icon-box { background: var(--green-deep); border-color: rgba(255,255,255,0.14); } .section--green .icon-box p { color: #CFE0D0; } .section--green .numbered { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.14); } .section--green .numbered > li { background: var(--green); } .section--green .numbered > li::before { color: var(--gold-soft); } .section--green .accordion, .section--green .acc { border-color: rgba(255,255,255,0.18); } .section--green .acc__n { color: var(--gold-soft); } .section--green .step { border-top-color: rgba(255,255,255,0.2); } .section--green .step.is-visible { border-top-color: var(--gold); } .section--green .step b { color: var(--gold-soft); } .section--green .step p { color: #CFE0D0; } .section--ink h1, .section--ink h2, .section--ink h3, .section--deep h1, .section--deep h2, .section--deep h3 { color: var(--on-ink); } .section--ink p, .section--deep p { color: var(--on-ink-muted); } .split { display: grid; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; } @media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.22fr 0.78fr; } .split--wide-right { grid-template-columns: 0.8fr 1.2fr; } .split--top { align-items: start; } .split__media--first { order: -1; } } /* Soft decorative field. Flat colour, no gradient, sits behind content. */ .blot { position: absolute; border-radius: 50%; background: var(--marigold-soft); opacity: 0.5; pointer-events: none; z-index: 0; filter: none; } .section--ink .blot, .section--deep .blot { background: var(--ink-mid); opacity: 0.55; } .section > .wrap { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 4. Type components -------------------------------------------------------------------------- */ .kicker { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-body); font-size: var(--step-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--marigold-deep); margin: 0 0 var(--s-3); } .kicker::before { content: ""; width: 34px; height: 3px; background: var(--marigold); flex: none; } .section--ink .kicker, .section--deep .kicker, .hero .kicker { color: var(--marigold); } .h-hero { font-size: var(--step-hero); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; } .h1 { font-size: var(--step-1); } .h2 { font-size: var(--step-2); } .h3 { font-size: var(--step-3); letter-spacing: -0.014em; } .lead { font-size: var(--step-lead); line-height: 1.58; color: var(--muted); max-width: 56ch; } .section--ink .lead, .section--deep .lead, .hero .lead { color: var(--on-ink-muted); } .prose > * + * { margin-top: var(--s-3); } .paint { position: relative; display: inline-block; isolation: isolate; } .paint::after { content: ""; position: absolute; left: -0.08em; right: -0.08em; bottom: 0.06em; height: 0.34em; background: var(--marigold); z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease); } .is-visible .paint::after, .paint.is-visible::after { transform: scaleX(1); } /* Section heading block used across the site */ .head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); } .head--center { margin-inline: auto; text-align: center; } .head--center .kicker { justify-content: center; } .head--center .lead { margin-inline: auto; } .head--split { max-width: none; display: grid; gap: var(--s-3); align-items: end; } @media (min-width: 62rem) { .head--split { grid-template-columns: 1.1fr 0.9fr; } } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 54px; padding: 0.9rem 1.8rem; font-size: var(--step-small); font-weight: 700; letter-spacing: 0.03em; text-decoration: none; border: 2px solid transparent; border-radius: 999px; cursor: pointer; position: relative; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .btn:active { transform: translateY(-1px); } .btn--primary { background: var(--marigold); color: var(--ink-deep); } .btn--primary:hover { background: var(--marigold-deep); } .btn--ink { background: var(--ink); color: var(--on-ink); } .btn--ink:hover { background: var(--ink-deep); } .btn--ghost { background: transparent; color: var(--ink-text); border-color: var(--ink-text); } .btn--ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .section--ink .btn--ghost, .section--deep .btn--ghost, .hero .btn--ghost { color: var(--on-ink); border-color: var(--on-ink-hair); } .section--ink .btn--ghost:hover, .section--deep .btn--ghost:hover, .hero .btn--ghost:hover { background: var(--on-ink); color: var(--ink-deep); border-color: var(--on-ink); } .btn--wide { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); align-items: center; } .arrow-link { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: var(--step-small); letter-spacing: 0.02em; text-decoration: none; color: var(--ink-text); padding-block: 0.35rem; border-bottom: 2px solid var(--marigold); transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .arrow-link:hover { gap: 1rem; color: var(--marigold-deep); } .section--ink .arrow-link, .section--deep .arrow-link { color: var(--on-ink); } .section--ink .arrow-link:hover { color: var(--marigold); } /* Play affordance, borrowed from the template's "How it Works" link */ .play { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; font-weight: 700; font-size: var(--step-small); color: var(--on-ink); } .play span:first-child { width: 54px; height: 54px; border-radius: 50%; flex: none; border: 2px solid var(--marigold); color: var(--marigold); display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .play:hover span:first-child { background: var(--marigold); color: var(--ink-deep); transform: scale(1.08); } /* -------------------------------------------------------------------------- 6. Utility bar + header + navigation -------------------------------------------------------------------------- */ .progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--marigold); transform: scaleX(0); transform-origin: left; z-index: 200; will-change: transform; } .topbar { background: var(--ink-deep); color: var(--on-ink-muted); font-size: 0.85rem; padding-block: 0.6rem; } .topbar__inner { display: flex; flex-wrap: wrap; gap: 0.5rem var(--s-4); align-items: center; justify-content: space-between; } .topbar ul { display: flex; flex-wrap: wrap; gap: 0.5rem var(--s-3); align-items: center; } .topbar a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; } .topbar a:hover { color: var(--marigold); } .topbar svg { color: var(--marigold); flex: none; } .topbar__note { display: none; } @media (min-width: 52rem) { .topbar__note { display: inline-flex; align-items: center; gap: 0.45rem; } } .site-header { position: sticky; top: 0; z-index: 150; background: color-mix(in oklab, var(--sand) 90%, transparent); border-bottom: 1px solid transparent; padding-block: 1rem; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header.is-stuck { background: var(--sand); border-bottom-color: var(--hairline); padding-block: 0.6rem; box-shadow: 0 12px 34px -26px rgba(56, 12, 48, 0.55); } /* The header carries the full-colour logo, so it always sits on paper. Inverting it would put plum type on a plum bar. */ .site-header { background: var(--sand); border-bottom-color: var(--hairline); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: none; } .brand__mark { width: 42px; height: 42px; flex: none; transition: transform var(--dur) var(--ease); } .brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; line-height: 1; color: var(--ink-text); } .brand__name span { display: block; font-size: 0.6rem; letter-spacing: 0.18em; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; color: var(--marigold-deep); margin-top: 4px; } .nav { display: none; } @media (min-width: 66rem) { .nav { display: flex; align-items: center; gap: 0.2rem; } } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.65rem 0.9rem; font-size: 0.96rem; font-weight: 600; text-decoration: none; color: var(--ink-text); border-radius: var(--radius-s); background: none; border: 0; cursor: pointer; transition: color var(--dur-fast) var(--ease); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--marigold-deep); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.25rem; height: 2px; background: var(--marigold); } .site-header.on-dark .nav__link:hover, .site-header.on-dark .nav__link[aria-current="page"] { color: var(--marigold); } .nav__panel { position: absolute; top: calc(100% + 0.7rem); left: 0; min-width: 340px; background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-m); box-shadow: var(--shadow-deep); padding: 0.55rem; opacity: 0; visibility: hidden; transform: perspective(900px) rotateX(-10deg) translateY(-8px); transform-origin: top center; transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease), visibility var(--dur-fast); } .nav__item.is-open .nav__panel { opacity: 1; visibility: visible; transform: perspective(900px) rotateX(0) translateY(0); } .nav__panel a { display: block; padding: 0.75rem 0.9rem; border-radius: var(--radius-s); text-decoration: none; color: var(--ink-text); transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .nav__panel a:hover { background: color-mix(in oklab, var(--marigold) 22%, transparent); transform: translateX(4px); } .nav__panel strong { display: block; font-weight: 700; font-size: 0.98rem; } .nav__panel span { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 2px; } .header-cta { display: none; } @media (min-width: 66rem) { .header-cta { display: inline-flex; } } .nav__toggle { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.55rem 1rem; background: none; border: 2px solid currentColor; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--ink-text); cursor: pointer; } @media (min-width: 66rem) { .nav__toggle { display: none; } } .nav__toggle-bars { display: grid; gap: 4px; } .nav__toggle-bars i { display: block; width: 18px; height: 2px; background: currentColor; } .drawer { position: fixed; inset: 0; z-index: 190; background: var(--ink-deep); color: var(--on-ink); padding: 6rem var(--gutter) 3rem; overflow-y: auto; transform: translateY(-100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility var(--dur); } .drawer.is-open { transform: translateY(0); visibility: visible; } .drawer__close { position: absolute; top: 1.4rem; right: var(--gutter); min-height: 48px; min-width: 48px; background: none; border: 2px solid var(--on-ink-hair); border-radius: 999px; color: var(--on-ink); font-size: 1.4rem; cursor: pointer; } .drawer a { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; padding: 0.65rem 0; border-bottom: 1px solid var(--on-ink-hair); } .drawer a:hover { color: var(--marigold); } .drawer .btn { margin-top: var(--s-4); width: 100%; } /* -------------------------------------------------------------------------- 7. Hero slider (3D depth layers) -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--ink-deep); color: var(--on-ink); overflow: hidden; perspective: var(--depth); perspective-origin: 50% 40%; padding-block: clamp(3.5rem, 7vw, 7rem) clamp(7rem, 12vw, 11rem); } .hero__slides { position: relative; } .hero__slide { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; transform-style: preserve-3d; } @media (min-width: 66rem) { .hero__slide { grid-template-columns: 1.1fr 0.9fr; } } .hero__slide[hidden] { display: none; } .hero__slide.is-entering > * { animation: slideIn 900ms var(--ease) both; } .hero__slide.is-entering > *:nth-child(2) { animation-delay: 120ms; } @keyframes slideIn { from { opacity: 0; transform: translate3d(0, 26px, -80px); } to { opacity: 1; transform: none; } } .hero__num { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.24em; color: var(--marigold); margin-bottom: 0.9rem; } .hero h1 { color: var(--on-ink); max-width: 15ch; } .hero__body { margin-top: var(--s-3); max-width: 52ch; } .hero__media { position: relative; transform-style: preserve-3d; } .hero__stack { position: relative; transform-style: preserve-3d; } .arch { position: relative; border-radius: var(--arch); overflow: hidden; background: var(--petrol); box-shadow: var(--shadow-3d); } .arch img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.15s var(--ease), transform 1.6s var(--ease); } .arch.is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); } .arch--tall { aspect-ratio: 3 / 4.1; } .arch--portrait { aspect-ratio: 4 / 5; } .arch--wide { aspect-ratio: 16 / 11; border-radius: var(--radius-l); } .arch--soft { border-radius: var(--radius-xl); } /* Floating card that rides above the photo on the Z axis */ .float-card { position: absolute; background: var(--marigold); color: var(--ink-deep); padding: 1rem 1.25rem; border-radius: var(--radius-m); max-width: 16rem; box-shadow: var(--shadow-deep); } .float-card strong { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.18; letter-spacing: -0.02em; } .float-card span { font-size: 0.82rem; font-weight: 600; opacity: 0.78; } .float-card--shell { background: var(--shell); color: var(--ink-text); } .float-card--ink { background: var(--ink); color: var(--on-ink); } .float-card--bl { left: clamp(-1rem, -2vw, -2.5rem); bottom: clamp(1.5rem, 4vw, 3rem); } .float-card--tr { right: clamp(-1rem, -2vw, -2.25rem); top: clamp(1.5rem, 4vw, 3rem); } .float-card--br { right: clamp(-0.75rem, -2vw, -2rem); bottom: clamp(1rem, 3vw, 2rem); } .hero__dots { display: flex; gap: 0.6rem; margin-top: var(--s-4); } .hero__dots button { width: 46px; height: 6px; border-radius: 99px; border: 0; cursor: pointer; background: var(--on-ink-hair); padding: 0; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .hero__dots button[aria-selected="true"] { background: var(--marigold); transform: scaleY(1.6); } /* Marquee band */ .marquee { background: var(--marigold); color: var(--ink-deep); padding-block: 0.9rem; overflow: hidden; border-block: 1px solid var(--gold-deep); } .marquee__track { display: flex; gap: 3rem; width: max-content; animation: slide 36s linear infinite; } .marquee__track span { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; } .marquee__track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-deep); display: inline-block; } @keyframes slide { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 8. Overlapping enquiry card -------------------------------------------------------------------------- */ .overlap { margin-top: clamp(-6.5rem, -8vw, -4.5rem); position: relative; z-index: 5; } .overlap__inner { background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-l); box-shadow: var(--shadow-deep); padding: clamp(1.5rem, 3.5vw, 2.75rem); display: grid; gap: clamp(1.5rem, 3vw, 3rem); } @media (min-width: 68rem) { .overlap__inner { grid-template-columns: 0.85fr 1.15fr; align-items: center; } } .quick-form { display: grid; gap: var(--s-2); } @media (min-width: 46rem) { .quick-form { grid-template-columns: repeat(2, 1fr); } } .quick-form .field--full { grid-column: 1 / -1; } /* -------------------------------------------------------------------------- 9. Collage with floating badges and counters -------------------------------------------------------------------------- */ .collage { position: relative; display: grid; gap: var(--s-3); transform-style: preserve-3d; } @media (min-width: 46rem) { .collage { grid-template-columns: 1.05fr 0.95fr; align-items: end; } } .collage__b { margin-top: clamp(1.5rem, 5vw, 3.5rem); } .stat-card { background: var(--ink); color: var(--on-ink); border-radius: var(--radius-m); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-lift); } .stat-card--gold { background: var(--marigold); color: var(--ink-deep); } .stat-card b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .stat-card span { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; opacity: 0.85; } .ticks { display: grid; gap: 0.9rem; margin-top: var(--s-3); } .ticks > li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.85rem; align-items: start; font-size: var(--step-body); } .ticks > li::before { content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.35rem; border-radius: 50%; background: var(--marigold); box-shadow: inset 0 0 0 3px var(--sand); } .section--ink .ticks > li::before, .section--deep .ticks > li::before { box-shadow: inset 0 0 0 3px var(--ink); } .section--shell .ticks > li::before { box-shadow: inset 0 0 0 3px var(--shell); } /* -------------------------------------------------------------------------- 10. Service grid (3D pointer tilt) -------------------------------------------------------------------------- */ .grid-3d { perspective: var(--depth); } .cards { display: grid; gap: clamp(1.1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .cards--wide-first > :first-child { grid-column: auto; } @media (min-width: 70rem) { .cards--feature { grid-template-columns: repeat(6, 1fr); } .cards--feature > :nth-child(1) { grid-column: span 3; } .cards--feature > :nth-child(2) { grid-column: span 3; } .cards--feature > :nth-child(3) { grid-column: span 2; } .cards--feature > :nth-child(4) { grid-column: span 2; } .cards--feature > :nth-child(5) { grid-column: span 2; } } .card { position: relative; display: flex; flex-direction: column; background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-l); overflow: hidden; text-decoration: none; color: var(--ink-text); transform-style: preserve-3d; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); will-change: transform; } .card:hover { box-shadow: var(--shadow-3d); border-color: var(--marigold); } .card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 11; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .card:hover .card__media img { transform: scale(1.07); } .card__tag { position: absolute; left: 1rem; top: 1rem; background: var(--marigold); color: var(--ink-deep); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: 999px; transform: translateZ(45px); } .card__body { padding: clamp(1.15rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .card__body h3 { font-size: var(--step-3); } .card__body p { font-size: var(--step-small); color: var(--muted); } .card__n { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; color: var(--marigold-deep); } .card__go { margin-top: auto; padding-top: 0.65rem; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--step-small); color: var(--marigold-deep); transition: gap var(--dur-fast) var(--ease); } .card:hover .card__go { gap: 0.95rem; } .card--ink { background: var(--ink); border-color: var(--on-ink-hair); color: var(--on-ink); } .card--ink .card__body p { color: var(--on-ink-muted); } .card--ink .card__go, .card--ink .card__n { color: var(--marigold); } /* Icon tile, used sparingly on the benefits row only */ .icon-box { background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-m); padding: clamp(1.25rem, 2.2vw, 1.75rem); transform-style: preserve-3d; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .icon-box:hover { box-shadow: var(--shadow-3d); border-color: var(--marigold); } .icon-box__i { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--marigold); color: var(--ink-deep); margin-bottom: var(--s-2); transform: translateZ(40px); } .icon-box h3 { font-size: 1.14rem; margin-bottom: 0.4rem; } .icon-box p { font-size: var(--step-small); color: var(--muted); } .section--ink .icon-box { background: var(--ink-mid); border-color: var(--on-ink-hair); } .section--ink .icon-box p { color: var(--on-ink-muted); } /* -------------------------------------------------------------------------- 11. Founder block + accordion -------------------------------------------------------------------------- */ .founder { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--hairline); margin-top: var(--s-4); } .section--ink .founder { border-color: var(--on-ink-hair); } .founder img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; } .founder b { display: block; font-family: var(--font-display); font-size: 1.16rem; letter-spacing: -0.02em; } .founder span { font-size: var(--step-small); color: var(--muted); } .section--ink .founder span { color: var(--on-ink-muted); } .founder__sig { margin-left: auto; font-family: var(--font-display); font-size: 1.5rem; font-style: italic; font-weight: 500; color: var(--marigold-deep); transform: rotate(-4deg); } .section--ink .founder__sig { color: var(--marigold); } .accordion { border-top: 1px solid var(--hairline); } .section--ink .accordion, .section--deep .accordion { border-color: var(--on-ink-hair); } .acc { border-bottom: 1px solid var(--hairline); } .section--ink .acc, .section--deep .acc { border-color: var(--on-ink-hair); } .acc__btn { width: 100%; display: grid; grid-template-columns: 3.25rem 1fr 2rem; gap: var(--s-2); align-items: center; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.4rem 0; color: inherit; } .acc__n { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--marigold-deep); letter-spacing: -0.03em; } .section--ink .acc__n, .section--deep .acc__n { color: var(--marigold); } .acc__t { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; } .acc__i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; justify-self: end; opacity: 0.5; transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .acc__btn:hover .acc__i { opacity: 1; } .acc.is-open .acc__i { transform: rotate(45deg); opacity: 1; background: var(--marigold); border-color: var(--marigold); color: var(--ink-deep); } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); } .acc.is-open .acc__panel { grid-template-rows: 1fr; } .acc__panel > div { overflow: hidden; } .acc__panel .inner { padding: 0 0 1.5rem 3.25rem; } @media (max-width: 40rem) { .acc__panel .inner { padding-left: 0; } } /* -------------------------------------------------------------------------- 12. Sticky 3D card stack ("how it works") -------------------------------------------------------------------------- */ .stack { perspective: var(--depth); } .stack__item { position: sticky; top: clamp(6rem, 14vh, 9rem); margin-bottom: var(--s-3); } .stack__card { background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-l); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-lift); transform-origin: 50% 0%; will-change: transform; display: grid; gap: var(--s-2); } @media (min-width: 54rem) { .stack__card { grid-template-columns: 6.5rem 1fr; gap: var(--s-4); align-items: start; } } .section--ink .stack__card, .section--deep .stack__card { background: var(--ink-mid); border-color: var(--on-ink-hair); } .stack__n { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 0.85; letter-spacing: -0.05em; color: var(--marigold); } .stack__card h3 { font-size: var(--step-2); margin-bottom: 0.6rem; } /* -------------------------------------------------------------------------- 13. 3D coverflow carousel -------------------------------------------------------------------------- */ .flow { position: relative; perspective: 1600px; } .flow__track { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem var(--gutter) 2rem; margin-inline: calc(var(--gutter) * -1); transform-style: preserve-3d; scrollbar-width: thin; scrollbar-color: var(--marigold) transparent; cursor: grab; } .flow__track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .flow__track::-webkit-scrollbar { height: 6px; } .flow__track::-webkit-scrollbar-thumb { background: var(--marigold); border-radius: 99px; } .flow__item { flex: 0 0 min(82vw, 27rem); scroll-snap-align: center; background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-l); padding: clamp(1.35rem, 2.4vw, 2rem); transition: transform var(--dur) var(--ease-soft), opacity var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease); will-change: transform; } .section--ink .flow__item, .section--deep .flow__item { background: var(--ink-mid); border-color: var(--on-ink-hair); } .flow__item.is-focus { box-shadow: var(--shadow-3d); } .flow__q { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.75rem; } .flow__item p { font-size: var(--step-small); } .flow__by { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--s-3); } .flow__by img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .flow__by b { display: block; font-size: 0.95rem; } .flow__by span { font-size: 0.82rem; color: var(--muted); } .rail-controls { display: flex; gap: 0.6rem; margin-top: var(--s-2); } .rail-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--hairline); background: transparent; cursor: pointer; display: grid; place-items: center; color: inherit; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .rail-btn:hover { background: var(--marigold); border-color: var(--marigold); color: var(--ink-deep); transform: translateY(-2px); } .section--ink .rail-btn, .section--deep .rail-btn { border-color: var(--on-ink-hair); } /* -------------------------------------------------------------------------- 14. Team + partner strip + call band -------------------------------------------------------------------------- */ .person { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--ink); transform-style: preserve-3d; } .person img { aspect-ratio: 4 / 4.6; width: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .person:hover img { transform: scale(1.06); } .person__body { position: absolute; inset: auto 1rem 1rem; background: var(--shell); border-radius: var(--radius-m); padding: 1rem 1.15rem; transform: translateZ(50px); box-shadow: var(--shadow-lift); } .person__body span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marigold-deep); } .person__body b { display: block; font-family: var(--font-display); font-size: 1.14rem; letter-spacing: -0.02em; margin-top: 0.2rem; } .person--open { display: grid; place-items: center; text-align: center; padding: var(--s-5) var(--s-3); color: var(--on-ink); aspect-ratio: 4 / 4.6; } .partners { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .partners li { border: 1px solid var(--hairline); border-radius: 999px; padding: 0.7rem 1.35rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .partners li:hover { transform: translateY(-3px); border-color: var(--marigold); background: var(--marigold-soft); } .section--ink .partners li, .section--deep .partners li { border-color: var(--on-ink-hair); } .section--ink .partners li:hover, .section--deep .partners li:hover { background: var(--ink-mid); } .callband { display: grid; gap: var(--s-3); align-items: center; text-align: center; } @media (min-width: 62rem) { .callband { grid-template-columns: auto 1fr auto; text-align: left; } } .callband__num { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 700; letter-spacing: -0.04em; text-decoration: none; color: var(--on-ink); display: inline-block; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .callband__num:hover { color: var(--marigold); transform: translateY(-2px); } /* Meters */ .meters { display: grid; gap: var(--s-3); margin-top: var(--s-4); } .meter__top { display: flex; justify-content: space-between; font-size: var(--step-small); font-weight: 700; margin-bottom: 0.5rem; } .meter__bar { height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; } .section--ink .meter__bar, .section--deep .meter__bar { background: var(--on-ink-hair); } .meter__fill { height: 100%; border-radius: 99px; background: var(--marigold); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); } .is-visible .meter__fill { transform: scaleX(var(--v, 1)); } /* -------------------------------------------------------------------------- 15. Numbered list, notes, quotes -------------------------------------------------------------------------- */ .numbered { counter-reset: n; display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); } .section--ink .numbered, .section--deep .numbered { background: var(--on-ink-hair); border-color: var(--on-ink-hair); } .numbered > li { counter-increment: n; background: var(--sand); padding: var(--s-4) 0; display: grid; gap: var(--s-2); } .section--shell .numbered > li { background: var(--shell); } .section--ink .numbered > li { background: var(--ink); } .section--deep .numbered > li { background: var(--ink-deep); } @media (min-width: 52rem) { .numbered > li { grid-template-columns: 6rem 1fr; gap: var(--s-4); align-items: start; } } .numbered > li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--marigold-deep); letter-spacing: -0.02em; } .section--ink .numbered > li::before, .section--deep .numbered > li::before { color: var(--marigold); } .numbered h3 { font-size: var(--step-3); margin-bottom: 0.5rem; } .note { border: 1px solid var(--hairline); background: color-mix(in oklab, var(--marigold) 14%, var(--shell)); border-radius: var(--radius-m); padding: var(--s-3); max-width: 46rem; } .note strong { display: block; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 0.35rem; } .section--ink .note, .section--deep .note { background: var(--ink-mid); border-color: var(--on-ink-hair); } .quote { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2.2vw, 2.8rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.026em; max-width: 22ch; } .quote__by { font-family: var(--font-body); font-size: var(--step-small); font-weight: 600; color: var(--marigold); margin-top: var(--s-3); letter-spacing: 0.06em; text-transform: uppercase; } /* -------------------------------------------------------------------------- 16. Page hero (interior) -------------------------------------------------------------------------- */ .page-hero { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; perspective: var(--depth); padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem); } .page-hero__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; } @media (min-width: 62rem) { .page-hero__grid { grid-template-columns: 1.2fr 0.8fr; } } .page-hero h1 { color: var(--on-ink); max-width: 16ch; } .page-hero .lead { margin-top: var(--s-3); } .crumbs { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: var(--s-3); font-weight: 600; } .crumbs a { text-decoration: none; color: var(--marigold); } /* -------------------------------------------------------------------------- 17. Forms -------------------------------------------------------------------------- */ .form-shell { background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-l); padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow-lift); } .section--ink .form-shell, .section--deep .form-shell { background: var(--ink-mid); border-color: var(--on-ink-hair); color: var(--on-ink); } .field { display: grid; gap: 0.45rem; margin-bottom: var(--s-3); } .field > label { font-weight: 700; font-size: 0.92rem; } .field .hint { font-size: 0.85rem; color: var(--muted); } .section--ink .field .hint, .section--deep .field .hint { color: var(--on-ink-muted); } .req { color: var(--marigold-deep); } .section--ink .req, .section--deep .req { color: var(--marigold); } .field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 0.85rem 1rem; background: var(--sand); border: 1.5px solid var(--hairline); border-radius: var(--radius-s); color: var(--ink-text); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .section--ink .field input, .section--ink .field select, .section--ink .field textarea, .section--deep .field input, .section--deep .field select, .section--deep .field textarea { background: var(--ink-deep); border-color: var(--on-ink-hair); color: var(--on-ink); } .field textarea { min-height: 9.5rem; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--marigold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--marigold) 26%, transparent); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--clay); } .field .error { font-size: 0.85rem; font-weight: 600; color: var(--clay); } .section--ink .field .error, .section--deep .field .error { color: #E58A94; } .field-row { display: grid; gap: var(--s-2); } @media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } } .consent { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: 0.9rem; } .consent input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--marigold-deep); } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form-status { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius-s); font-weight: 600; display: none; } .form-status.is-ok { display: block; background: color-mix(in oklab, var(--marigold) 26%, var(--shell)); color: var(--ink-deep); } .form-status.is-error { display: block; background: color-mix(in oklab, var(--clay) 20%, var(--shell)); color: #7A2430; } /* -------------------------------------------------------------------------- 18. Contact list + footer + back to top -------------------------------------------------------------------------- */ .contact-list { display: grid; gap: var(--s-3); margin-top: var(--s-4); } .contact-list dt { font-size: var(--step-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--marigold); } .contact-list dd { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; } .contact-list a { text-decoration: none; border-bottom: 2px solid var(--marigold); } .site-footer { background: var(--ink-deep); color: var(--on-ink); padding-block: var(--s-6) var(--s-4); } .footer-grid { display: grid; gap: var(--s-5); } @media (min-width: 58rem) { .footer-grid { grid-template-columns: 1.35fr 0.85fr 1.15fr 1fr; } } .site-footer h2 { font-size: 1rem; letter-spacing: 0.13em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; color: var(--marigold); margin-bottom: var(--s-3); } .site-footer ul { display: grid; gap: 0.65rem; } .site-footer a { color: var(--on-ink-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .site-footer a:hover { color: var(--marigold); } .site-footer p { color: var(--on-ink-muted); font-size: var(--step-small); } .f-post { display: grid; grid-template-columns: 62px 1fr; gap: 0.85rem; align-items: start; } .f-post img { width: 62px; height: 62px; border-radius: var(--radius-s); object-fit: cover; } .f-post b { display: block; font-size: 0.94rem; font-weight: 600; line-height: 1.35; color: var(--on-ink); } .f-post span { font-size: 0.8rem; color: var(--on-ink-muted); } .hours { display: grid; gap: 0.5rem; } .hours li { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--step-small); color: var(--on-ink-muted); border-bottom: 1px dashed var(--on-ink-hair); padding-bottom: 0.5rem; } .hours li b { color: var(--on-ink); font-weight: 600; } .footer-bottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--on-ink-hair); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; font-size: 0.85rem; color: var(--on-ink-muted); } .socials { display: flex; gap: 0.5rem; margin-top: var(--s-3); } .socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--on-ink-hair); display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .socials a:hover { background: var(--marigold); color: var(--ink-deep); transform: translateY(-3px); } .to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 120; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background-color var(--dur-fast) var(--ease); } .to-top.is-on { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--marigold); color: var(--ink-deep); } .to-top svg { position: absolute; inset: 0; width: 56px; height: 56px; transform: rotate(-90deg); pointer-events: none; } .to-top circle { fill: none; stroke: var(--marigold); stroke-width: 3; stroke-dasharray: 163; stroke-dashoffset: 163; } /* -------------------------------------------------------------------------- 19. Reveal + 3D utilities -------------------------------------------------------------------------- */ .reveal { opacity: 1; transform: none; transition: none; } .reveal.is-visible { opacity: 1; transform: none; } .reveal-x { opacity: 1; transform: none; transition: none; } .reveal-x.is-visible { opacity: 1; transform: none; } /* Card rises out of the page on the Z axis as it enters the viewport */ .reveal-3d { opacity: 1; transform: none; transition: none; } .reveal-3d.is-visible { opacity: 1; transform: perspective(var(--depth)) rotateX(0) translate3d(0, 0, 0); } /* Panel that swings in around the Y axis */ .reveal-swing { opacity: 1; transform: none; transition: none; } .reveal-swing.is-visible { opacity: 1; transform: perspective(var(--depth)) rotateY(0) translate3d(0, 0, 0); } .parallax, [data-parallax], [data-depth] { will-change: transform; } .tilt-layer { transform: translateZ(35px); } /* -------------------------------------------------------------------------- 20. Reduced motion + print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-x, .reveal-3d, .reveal-swing { opacity: 1; transform: none; } .arch img { clip-path: none; transform: none; } .paint::after { transform: scaleX(1); } .marquee__track { animation: none; } .parallax, [data-parallax], [data-depth] { transform: none !important; } .stack__item { position: static; } .stack__card { transform: none !important; } .flow__item { transform: none !important; opacity: 1 !important; } .meter__fill { transition: none; transform: scaleX(var(--v, 1)); } } @media print { .site-header, .topbar, .drawer, .progress, .marquee, .rail-controls, .to-top { display: none; } body { background: #fff; color: #111; } .stack__item { position: static; } } /* -------------------------------------------------------------------------- 21. Image rail (used on the service pages) -------------------------------------------------------------------------- */ .rail { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 0.5rem 1.75rem; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; scrollbar-color: var(--marigold) transparent; cursor: grab; perspective: 1600px; } .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } .rail::-webkit-scrollbar { height: 6px; } .rail::-webkit-scrollbar-thumb { background: var(--marigold); border-radius: 99px; } .rail__item { flex: 0 0 min(78vw, 25rem); scroll-snap-align: start; border-radius: var(--radius-l); overflow: hidden; background: var(--shell); border: 1px solid var(--hairline); display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease); will-change: transform; } .rail__item.is-focus { box-shadow: var(--shadow-3d); } .section--ink .rail__item, .section--deep .rail__item { background: var(--ink-mid); border-color: var(--on-ink-hair); } .rail__item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .rail__body { padding: var(--s-3); } .rail__body h3 { font-size: 1.18rem; margin-bottom: 0.4rem; } .rail__body p { font-size: var(--step-small); color: var(--muted); } .section--ink .rail__body p, .section--deep .rail__body p { color: var(--on-ink-muted); } @media (prefers-reduced-motion: reduce) { .rail__item { transform: none !important; } } /* -------------------------------------------------------------------------- 22. Facts strip + interior hero tag (carried over, restyled) -------------------------------------------------------------------------- */ .hero__tag { font-family: var(--font-display); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.28rem); font-weight: 600; letter-spacing: 0.01em; color: var(--marigold); margin-bottom: var(--s-3); } .facts { display: grid; gap: 0; border-top: 1px solid var(--on-ink-hair); } @media (min-width: 48rem) { .facts { grid-template-columns: repeat(4, 1fr); } } .fact { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--on-ink-hair); } @media (min-width: 48rem) { .fact { border-bottom: 0; border-right: 1px solid var(--on-ink-hair); padding-inline: var(--s-3); } .fact:first-child { padding-left: 0; } .fact:last-child { border-right: 0; } } .fact dt { font-size: var(--step-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marigold); margin-bottom: 0.6rem; } .fact dd { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; } /* -------------------------------------------------------------------------- 23. Purpose selector, adaptive form, map, pause control -------------------------------------------------------------------------- */ .choice { border: 0; padding: 0; margin: 0 0 var(--s-3); } .choice legend { font-weight: 700; font-size: 0.92rem; padding: 0; margin-bottom: 0.65rem; } .choice__grid { display: grid; gap: 0.6rem; } @media (min-width: 30rem) { .choice__grid { grid-template-columns: repeat(3, 1fr); } } .choice__item { position: relative; display: block; cursor: pointer; } .choice__item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .choice__item > span { display: block; height: 100%; border: 1.5px solid var(--hairline); border-radius: var(--radius-m); padding: 0.85rem 0.95rem; background: var(--sand); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .section--ink .choice__item > span, .section--deep .choice__item > span { background: var(--ink-deep); border-color: var(--on-ink-hair); } .choice__item b { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.02em; } .choice__item i { display: block; font-style: normal; font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.4; } .section--ink .choice__item i, .section--deep .choice__item i { color: var(--on-ink-muted); } .choice__item:hover > span { transform: translateY(-2px); border-color: var(--marigold); } .choice__item input:checked + span { border-color: var(--marigold-deep); background: color-mix(in oklab, var(--marigold) 20%, var(--shell)); } .section--ink .choice__item input:checked + span, .section--deep .choice__item input:checked + span { background: var(--ink-mid); border-color: var(--marigold); } .choice__item input:focus-visible + span { outline: 3px solid var(--marigold); outline-offset: 3px; } /* Conditional groups. Hidden only once JS has taken over the form. */ .js-adaptive [data-when][hidden] { display: none; } .map-frame { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--hairline); background: var(--petrol-soft); aspect-ratio: 16 / 10; box-shadow: var(--shadow-lift); } .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* Motion pause control, WCAG 2.2.2 */ .motion-toggle { position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 120; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.5rem 1rem 0.5rem 0.75rem; border: 1px solid var(--on-ink-hair); border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .motion-toggle:hover { background: var(--marigold); color: var(--ink-deep); transform: translateY(-2px); } .motion-toggle svg { flex: none; } .motion-toggle .m-play { display: none; } .motion-toggle[aria-pressed="true"] .m-play { display: block; } .motion-toggle[aria-pressed="true"] .m-pause { display: none; } /* When motion is paused, everything that loops stops */ .motion-paused .marquee__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } } /* Invisible deep-link targets, offset so the sticky header does not cover the heading they point at. */ .anchor { display: block; height: 0; scroll-margin-top: 9rem; } /* ========================================================================== 24. v3 — cover hero, announcement bar, profiles, compact steps Written against two playbooks the client asked for: MrBeast production guide: the first screen is where you win or lose. Match the expectation the link set, front-load the payoff, put the "wow factor" early. Nothing decorative gets in front of the message. Dan Koe: one takeaway per page, one action. Do not warm up the room, flip the light on. Pages end rather than scrolling forever. ========================================================================== */ /* --- Site-wide announcement bar ----------------------------------------- */ .announce { position: relative; z-index: 160; background: var(--marigold); color: var(--ink-deep); border-bottom: 1px solid var(--gold-deep); } .announce__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-block: 0.7rem; padding-right: 2.75rem; } .announce__tag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: var(--ink-deep); color: var(--marigold); padding: 0.32rem 0.7rem; border-radius: 999px; flex: none; } .announce p { margin: 0; font-size: 0.94rem; font-weight: 600; max-width: none; color: var(--ink-deep); } .announce a.announce__cta { font-weight: 800; text-decoration: none; white-space: nowrap; border-bottom: 2px solid var(--ink-deep); padding-bottom: 1px; } .announce a.announce__cta:hover { border-bottom-color: transparent; } .announce__close { position: absolute; right: calc(var(--gutter) - 0.5rem); top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-deep); font-size: 1.2rem; line-height: 1; cursor: pointer; } .announce__close:hover { background: #E9A034; } .announce[hidden] { display: none; } /* --- Cover hero: the Facebook-style banner ------------------------------ */ .cover { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-deep); color: var(--on-ink); display: flex; align-items: flex-end; min-height: clamp(23rem, 46vh, 30rem); padding-block: clamp(4rem, 9vw, 7rem) clamp(2.25rem, 4vw, 3.25rem); } .cover--tall { min-height: clamp(31rem, 76vh, 46rem); } .cover__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } .cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgba(56, 12, 48, 0.95) 0%, rgba(56, 12, 48, 0.84) 38%, rgba(56, 12, 48, 0.58) 72%, rgba(56, 12, 48, 0.44) 100% ); } .cover__inner { position: relative; z-index: 1; width: 100%; } .cover h1, .cover h2 { color: var(--on-ink); max-width: 17ch; } .cover .lead { color: var(--on-ink-muted); max-width: 54ch; margin-top: var(--s-3); } .cover .crumbs { color: var(--on-ink-muted); } /* Profile bar that overlaps the bottom of the cover, mirroring a page header */ .cover-bar { background: var(--shell); border-bottom: 1px solid var(--hairline); position: relative; z-index: 6; } .cover-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-block: var(--s-2); } .cover-bar__item { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; color: var(--ink-text); text-decoration: none; } .cover-bar__item svg { color: var(--marigold-deep); flex: none; } .cover-bar__item[href]:hover { color: var(--marigold-deep); } .cover-bar .btn { margin-left: auto; } /* --- Compact step row: replaces the sticky stack, so the page ends ------ */ .steps { display: grid; gap: clamp(1rem, 2vw, 1.5rem); counter-reset: st; } @media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { counter-increment: st; position: relative; padding-top: var(--s-3); border-top: 3px solid var(--hairline); transition: border-color var(--dur) var(--ease); } .section--ink .step, .section--deep .step { border-top-color: var(--on-ink-hair); } .step.is-visible { border-top-color: var(--marigold); } .step b { display: block; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; color: var(--marigold-deep); margin-bottom: 0.5rem; } .section--ink .step b, .section--deep .step b { color: var(--marigold); } .step h3 { font-size: 1.16rem; margin-bottom: 0.4rem; } .step p { font-size: var(--step-small); color: var(--muted); } .section--ink .step p, .section--deep .step p { color: var(--on-ink-muted); } /* --- People: monogram profiles for real, named individuals -------------- */ .people { display: grid; gap: clamp(1.1rem, 2vw, 1.75rem); } @media (min-width: 40rem) { .people { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .people--4 { grid-template-columns: repeat(4, 1fr); } } .profile { background: var(--shell); border: 1px solid var(--hairline); border-radius: var(--radius-l); padding: clamp(1.35rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: var(--s-3); transform-style: preserve-3d; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Tight inside the identity cluster, generous before the biography. */ .profile__role { margin-bottom: 2px; } .profile__name + p, .profile > div > .prose { margin-top: var(--s-3); } .profile p + p { margin-top: 0.85rem; } .profile .hint { margin-top: var(--s-2); display: block; } .profile:hover { box-shadow: var(--shadow-3d); border-color: var(--marigold); } .section--ink .profile, .section--deep .profile { background: var(--ink-mid); border-color: var(--on-ink-hair); } .profile__photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 3px solid var(--marigold); transform: translateZ(38px); flex: none; } .profile__mono { width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; transform: translateZ(38px); background: var(--ink); color: var(--marigold); font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; border: 3px solid var(--marigold); } .section--ink .profile__mono, .section--deep .profile__mono { background: var(--ink-deep); } .profile__name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 700; letter-spacing: -0.025em; } .profile__role { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marigold-deep); } .section--ink .profile__role, .section--deep .profile__role { color: var(--marigold); } .profile p { font-size: var(--step-small); color: var(--muted); } .section--ink .profile p, .section--deep .profile p { color: var(--on-ink-muted); } .profile--lead { grid-column: 1 / -1; } @media (min-width: 52rem) { .profile--lead { flex-direction: row; align-items: flex-start; gap: var(--s-4); } .profile--lead .profile__mono, .profile--lead .profile__photo { width: 128px; height: 128px; font-size: 2.4rem; } .profile--lead > div { flex: 1; } } /* --- Closing block: the page has an end, and the end is one action ------ */ .closer { background: var(--ink-deep); color: var(--on-ink); padding-block: clamp(3.5rem, 7vw, 6rem); text-align: center; position: relative; overflow: hidden; } .closer h2 { color: var(--on-ink); max-width: 19ch; margin-inline: auto; } .closer .lead { margin: var(--s-3) auto 0; text-align: center; } .closer .btn-row { justify-content: center; } .closer__rule { width: 64px; height: 4px; background: var(--marigold); margin: 0 auto var(--s-4); border-radius: 99px; } /* --- Status pill, for "coming soon" and "now enrolling" ----------------- */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; margin-bottom: var(--s-2); } .pill--live { background: var(--marigold); color: var(--ink-deep); } .pill--soon { background: transparent; color: var(--marigold); border: 1.5px solid currentColor; } .pill--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill--live.pill--dot::before { background: var(--ink-deep); } /* ========================================================================== 25. Brand logo lockup and the loading screen ========================================================================== */ /* --- Logo in the header and footer -------------------------------------- */ .brand__logo { display: block; width: auto; height: clamp(46px, 5.4vw, 62px); transition: transform var(--dur) var(--ease); } .site-header.is-stuck .brand__logo { height: clamp(40px, 4.4vw, 50px); } .brand:hover .brand__logo { transform: scale(1.03); } .site-footer .brand__logo { height: 74px; } /* --- Loading screen ----------------------------------------------------- Covers the page while assets settle, then fades. Three safeguards mean it can never trap anyone: JS removes it on window load, a CSS animation hides it after 2.6s regardless, and