/* ============================================================ SoulSync Inc. — Design System · "Quiet Authority Editorial" Pearl canvas · Cormorant Garamond display · Soul-Gold rules · Sync-Teal structure · one Onyx thesis band. The brand guide, brought to life. Fonts loaded via in each page . ============================================================ */ :root { /* — Color story: Pearl-dominant (60), Teal (25), Gold (10), Onyx (5) — */ --pearl: #F8F4EC; --pearl-2: #FCFAF4; /* lifted cards */ --pearl-deep: #EFE7D7; /* alt sections */ --teal: #105A65; --teal-deep: #0A3D44; --teal-light: #1F7782; --gold: #C5A56B; --gold-deep: #97783F; --onyx: #0B100F; --ink: #18242A; /* primary text — warm teal-black, never pure black */ --ink-soft: #51606A; /* secondary */ --ink-faint: #8C968F; /* tertiary / fine print */ --line: rgba(16, 90, 101, .14); /* teal hairline */ --line-gold: rgba(197, 165, 107, .55); /* gold hairline */ --line-soft: rgba(16, 90, 101, .08); --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Outfit", system-ui, -apple-system, sans-serif; --wrap: 1180px; --gutter: clamp(20px, 5vw, 44px); --band-y: clamp(76px, 11vw, 148px); --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-weight: 400; font-size: clamp(16px, 1.05vw, 17.5px); line-height: 1.7; color: var(--ink); /* ambient tonal field — soft warm mesh so the creams have depth, not flat fill */ background-color: var(--pearl); background-image: radial-gradient(135% 80% at 12% -10%, rgba(255,253,247,.75), rgba(255,253,247,0) 50%), radial-gradient(115% 95% at 100% 0%, rgba(228,217,195,.5), rgba(228,217,195,0) 48%), radial-gradient(130% 100% at 50% 118%, rgba(223,210,187,.55), rgba(223,210,187,0) 55%); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* warm paper / plaster texture — fixed, behind all content (Higgsfield-generated, Pearl-toned) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("../assets/textures/paper.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .9; mix-blend-mode: multiply; } /* paper grain — visible high-frequency tooth on top */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .14; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(197, 165, 107, .32); color: var(--teal-deep); } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .band { padding-block: var(--band-y); position: relative; } .band--pearl-deep { background: radial-gradient(125% 120% at 85% -15%, #F4ECDB, var(--pearl-deep) 60%); } .band--tight { padding-block: clamp(54px, 8vw, 92px); } .center { text-align: center; } .measure { max-width: 62ch; } .measure-sm { max-width: 46ch; } /* ---------- typographic system ---------- */ .eyebrow { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--teal-light); display: inline-flex; align-items: center; gap: .7em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); display: inline-block; } .eyebrow--plain::before { display: none; } .numeral { font-family: var(--font-body); font-weight: 500; font-size: .72rem; letter-spacing: .22em; color: var(--gold-deep); } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -.01em; color: var(--teal-deep); } .display { font-size: clamp(2.7rem, 6.4vw, 5.2rem); font-weight: 500; } h1 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); } h2 { font-size: clamp(2rem, 4vw, 3.25rem); } h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); } .ital { font-style: italic; color: var(--gold-deep); } .ital-teal { font-style: italic; color: var(--teal-light); } .lede { font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-style: italic; font-weight: 400; line-height: 1.45; color: var(--ink-soft); } p { color: var(--ink-soft); } p + p { margin-top: 1em; } strong { color: var(--ink); font-weight: 600; } .rule { height: 1px; background: var(--line-gold); border: 0; width: 64px; } .rule--full { width: 100%; background: var(--line); } /* ---------- buttons ---------- */ .btn { --bg: var(--teal); --fg: var(--pearl); --bd: var(--teal); display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-body); font-weight: 500; font-size: .92rem; letter-spacing: .02em; padding: .92em 1.7em; border-radius: 2px; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); cursor: pointer; transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 1px 0 rgba(0,0,0,.02); } .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(16,90,101,.5); } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .btn--ghost { --bg: transparent; --fg: var(--teal); --bd: rgba(16,90,101,.4); } .btn--ghost:hover { --bg: var(--teal); --fg: var(--pearl); } .btn--gold { --bg: var(--gold); --fg: var(--onyx); --bd: var(--gold); } .btn--on-dark { --bg: var(--gold); --fg: var(--onyx); --bd: var(--gold); } .btn--on-dark.btn--ghost { --bg: transparent; --fg: var(--pearl); --bd: rgba(248,244,236,.35); } .btn--lg { padding: 1.05em 2.1em; font-size: 1rem; } .btn .arw { transition: transform .35s var(--ease); } .btn:hover .arw { transform: translateX(4px); } /* link with gold draw-on underline — the signature flourish */ .ulink { position: relative; color: var(--teal); font-weight: 500; } .ulink::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .ulink:hover::after { transform: scaleX(1); } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease); } .nav.scrolled { background: rgba(248,244,236,.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--line); padding-block: 12px; } .nav__logo { height: 46px; width: auto; mix-blend-mode: multiply; transition: height .4s var(--ease); } .nav.scrolled .nav__logo { height: 40px; } .nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); } .nav__link { font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 4px 0; transition: color .3s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav__link:hover, .nav__link.active { color: var(--teal-deep); } .nav__link.active::after, .nav__link:hover::after { transform: scaleX(1); } .nav__cta { display: inline-flex; } .nav__toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; } .nav__toggle span { width: 26px; height: 2px; background: var(--teal-deep); transition: transform .3s var(--ease), opacity .3s var(--ease); } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 99; background: var(--pearl); transform: translateY(-100%); transition: transform .5s var(--ease); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; } .drawer.open { transform: translateY(0); } .drawer a { font-family: var(--font-display); font-size: 2rem; color: var(--teal-deep); } .drawer a.ital { font-style: italic; } /* ---------- hero ---------- */ .hero { min-height: 100svh; display: flex; align-items: center; position: relative; padding-block: 140px 80px; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; } /* background montage stays a ghost — motion you feel more than watch */ .hero__media video { opacity: .55; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(248,244,236,.88) 0%, rgba(248,244,236,.93) 55%, var(--pearl) 100%); } /* the real SoulSync emblem as a brand watermark — replaces the old hollow lozenge */ .hero__emblem { position: absolute; z-index: 1; left: clamp(-200px, -9vw, -104px); top: 55%; transform: translateY(-50%); width: min(38vw, 430px); opacity: .15; pointer-events: none; } /* mobile: the diagonal collage + faint watermark hide; instead the hero leads with the SoulSync emblem, opaque, at the top of the content (Paolo's call — logo over a photo). */ .hero__logo-m { display: none; } @media (max-width: 860px) { .hero__emblem { display: none; } .hero__logo-m { display: block; width: clamp(84px, 22vw, 104px); height: auto; margin-bottom: clamp(18px, 4vw, 26px); } } .hero__inner { position: relative; z-index: 2; } .hero h1 { margin: .28em 0 .5em; max-width: 18ch; } .hero .lede { margin-bottom: 2.2em; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 8px; } .hero__scroll::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: drop 2.4s var(--ease) infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- MTP / purpose statement ---------- */ .statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.18; color: var(--teal-deep); max-width: 20ch; } /* ---------- thesis band (the one dark moment) ---------- */ .band--onyx { background: radial-gradient(120% 120% at 50% 0%, var(--teal-deep) 0%, var(--onyx) 70%); color: var(--pearl); text-align: center; } .band--onyx h2, .band--onyx .display { color: var(--pearl); } .band--onyx .eyebrow { color: var(--gold); } .band--onyx p { color: rgba(248,244,236,.7); } .band--onyx .quote { font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1.2; max-width: 18ch; margin-inline: auto; } .band--onyx .quote .ital { color: var(--gold); } /* ---------- section heads ---------- */ .shead { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 64px); } .shead .eyebrow { margin-bottom: 18px; } .shead h2 { margin-bottom: .4em; } /* ---------- editorial sticky grid ---------- */ .sticky-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 90px); align-items: start; } .sticky-grid__intro { position: sticky; top: 120px; } /* ---------- checklist (pain / outcomes) ---------- */ .clist { list-style: none; display: grid; gap: 2px; } .clist li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); } .clist li:last-child { border-bottom: 1px solid var(--line); } .clist .mark { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--gold-deep); transform: translateY(-1px); } .clist--out .mark { color: var(--teal); } .clist .t { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--ink); line-height: 1.3; } .clist p { font-size: .96rem; margin-top: 4px; } /* ---------- cards / grids ---------- */ .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: linear-gradient(158deg, #FFFEFB, var(--pearl-2) 72%); border: 1px solid var(--line); border-radius: 3px; padding: clamp(26px, 3vw, 40px); position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(10,61,68,.4); border-color: var(--line-gold); } .card .numeral { display: block; margin-bottom: 16px; } .card h3 { margin-bottom: .5em; } .card h3 .ital { font-size: .92em; } /* pillar / framework card */ .pillar { padding-top: 30px; border-top: 2px solid var(--gold); } .pillar .k { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; color: var(--teal); margin-bottom: .3em; } /* belief cards — one photo per operating belief (Inner-Space layout, in SoulSync light) */ .belief { display: flex; flex-direction: column; background: linear-gradient(158deg, #FFFEFB, var(--pearl-2) 72%); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .belief:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(10,61,68,.4); border-color: var(--line-gold); } .belief__img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--pearl-deep); } .belief__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: transform .8s var(--ease); } .belief:hover .belief__img img { transform: scale(1.04); } .belief__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(16,90,101,.18) 0%, rgba(16,90,101,0) 45%, rgba(11,16,15,.30) 100%); mix-blend-mode: multiply; } .belief__body { padding: clamp(22px, 2.6vw, 34px); } .belief__body .numeral { display: block; margin-bottom: 12px; } .belief__body .k { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1.9vw, 1.6rem); color: var(--teal); margin-bottom: .4em; line-height: 1.15; } .belief__body p:not(.k) { font-size: .96rem; } /* ---------- coaches ---------- */ .coaches { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 18px); } .coaches--lead { grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px); margin-bottom: clamp(12px, 1.8vw, 22px); max-width: 860px; } .coaches--lead .coach__cap .n { font-size: 1.2rem; } .coach { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4/5; background: var(--pearl-deep); } .coach img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.96); transition: transform .6s var(--ease); } .coach:hover img { transform: scale(1.05); } .coach__cap { position: absolute; inset: auto 0 0 0; padding: 22px 16px 14px; background: linear-gradient(transparent, rgba(11,16,15,.82)); color: var(--pearl); } .coach__cap .n { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; } .coach__cap .r { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 3px; } /* roster placeholder — coach on the team, portrait pending (gold monogram on teal) */ .coach__ph { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 12%, var(--teal-light) 0%, var(--teal-deep) 78%); color: var(--gold); font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: .02em; } /* founder feature */ .founder { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .founder__img { border-radius: 4px; overflow: hidden; aspect-ratio: 4/5; } .founder__img img { width: 100%; height: 100%; object-fit: cover; } /* ---------- KCS signature photo treatment ---------- Real photos get a cohesive teal→onyx duotone scrim + a faint gold hairline + gentle desaturation, so mixed snapshots read as one editorial set. The house style (I AM+ / Awakening / TCR) rendered corporate-light for SoulSync. */ .kcs-photo { position: relative; overflow: hidden; border-radius: 4px; background: var(--pearl-deep); } .kcs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.82) contrast(1.03); transition: filter .6s var(--ease), transform .8s var(--ease); } .kcs-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, rgba(16,90,101,.20) 0%, rgba(16,90,101,0) 44%, rgba(11,16,15,.34) 100%); mix-blend-mode: multiply; } .kcs-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(197,165,107,.30); border-radius: 4px; } .kcs-photo:hover img { filter: saturate(.96) contrast(1.03); transform: scale(1.03); } /* photo-backed band — brand scrim over a workshop photo (the KCS hero-overlay move). Set the image inline: style="--bg-photo:url('…')". */ .band--photo { position: relative; color: var(--pearl); background: var(--onyx); overflow: hidden; } .band--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(165deg, rgba(10,61,68,.82) 0%, rgba(11,16,15,.90) 100%), var(--bg-photo); background-size: cover; background-position: center; } .band--photo > .wrap { position: relative; z-index: 1; } .band--photo h2, .band--photo .display, .band--photo .statement { color: var(--pearl); } .band--photo .display .ital, .band--photo .statement .ital { color: var(--gold); } .band--photo .eyebrow { color: var(--gold); } .band--photo .measure, .band--photo p { color: rgba(248,244,236,.82); } /* ---------- OD marquee — full-bleed film strip of real engagements ---------- Two rows drifting in opposite directions; every tile gets the .kcs-photo treatment so mixed phone/pro shots read as one editorial set. The track holds the tile set TWICE (second copy aria-hidden) so translateX(-50%) loops seamlessly. Hover pauses; reduced-motion falls back to swipe. */ .od-marquee { display: grid; gap: clamp(10px, 1.4vw, 18px); overflow: hidden; } .od-marquee__row { display: flex; width: max-content; animation: od-drift 80s linear infinite; } .od-marquee__row--rev { animation-direction: reverse; animation-duration: 96s; } .od-marquee:hover .od-marquee__row { animation-play-state: paused; } /* spacing lives on the tile (not flex gap) so the track's width is exactly 2× one set and the -50% loop point is seamless */ .od-marquee .kcs-photo { flex: 0 0 auto; height: clamp(190px, 24vw, 300px); margin-right: clamp(10px, 1.4vw, 18px); } .od-marquee .kcs-photo img { height: 100%; width: auto; } @keyframes od-drift { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .od-marquee__row { animation: none; } .od-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---------- hero diagonal collage — CC-style rolling columns, tilted ---------- Three portrait columns drift vertically in alternating directions inside a tilted frame, melted into the pearl field by a radial mask. Same seamless-loop contract as the marquee: content duplicated ×2, spacing on tiles, -50% keyframe. */ .hero-collage { position: absolute; z-index: 1; top: 50%; right: -7%; width: min(48vw, 640px); height: 165%; transform: translateY(-50%) rotate(9deg); display: flex; gap: clamp(10px, 1.1vw, 16px); pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 72% 58% at 55% 50%, #000 48%, transparent 76%); mask-image: radial-gradient(ellipse 72% 58% at 55% 50%, #000 48%, transparent 76%); } .hero-collage__col { display: flex; flex-direction: column; flex: 1; animation: od-roll 64s linear infinite; } .hero-collage__col:nth-child(2) { animation-direction: reverse; animation-duration: 78s; } .hero-collage__col:nth-child(3) { animation-duration: 70s; } .hero-collage .kcs-photo { aspect-ratio: 4 / 5; width: 100%; flex: 0 0 auto; margin-bottom: clamp(10px, 1.1vw, 16px); } .hero-collage .kcs-photo img { width: 100%; height: 100%; object-fit: cover; } @keyframes od-roll { to { transform: translateY(-50%); } } @media (max-width: 860px) { .hero-collage { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-collage__col { animation: none; } } /* photo-band CTA with a live montage behind the scrim (poster via --bg-photo stays as fallback) */ .band--video .bv-media { position: absolute; inset: 0; z-index: 0; } .band--video .bv-media video { width: 100%; height: 100%; object-fit: cover; } .band--video .bv-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(10,61,68,.82) 0%, rgba(11,16,15,.90) 100%); } .band--video > .wrap { position: relative; z-index: 1; } /* ---------- gallery ---------- */ .gallery { columns: 3; column-gap: clamp(10px, 1.4vw, 18px); } .gallery figure { break-inside: avoid; margin-bottom: clamp(10px, 1.4vw, 18px); border-radius: 3px; overflow: hidden; background: var(--pearl-deep); } .gallery img { width: 100%; transition: transform .6s var(--ease); } .gallery figure:hover img { transform: scale(1.04); } /* placeholder media slot (until real photos/videos land) */ .slot { display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(135deg, var(--pearl-deep), var(--pearl-deep) 14px, #ebe2cf 14px, #ebe2cf 28px); color: var(--gold-deep); border: 1px solid var(--line-gold); border-radius: 3px; min-height: 220px; padding: 24px; } .slot span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; max-width: 26ch; } /* ---------- final CTA ---------- */ .cta-final { text-align: center; } .cta-final .display { margin-bottom: .5em; } /* ---------- footer ---------- */ .foot { background: var(--teal-deep); color: rgba(248,244,236,.72); padding-block: clamp(56px, 7vw, 88px) 36px; } .foot a { color: rgba(248,244,236,.72); } .foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(248,244,236,.14); } .foot__brand .statement { color: var(--pearl); font-size: 1.7rem; max-width: 16ch; } .foot__col h4 { font-family: var(--font-body); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 600; } .foot__col a { display: block; padding: 6px 0; font-size: .92rem; transition: color .3s var(--ease); } .foot__col a:hover { color: var(--pearl); } .foot__bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 26px; font-size: .78rem; color: rgba(248,244,236,.5); letter-spacing: .04em; } /* ---------- reveal-on-scroll (fail-safe: visible unless JS "arms" it) ---------- */ .reveal.armed { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.armed.is-visible { opacity: 1; transform: none; } .reveal.armed[data-d="1"] { transition-delay: .08s; } .reveal.armed[data-d="2"] { transition-delay: .16s; } .reveal.armed[data-d="3"] { transition-delay: .24s; } .reveal.armed[data-d="4"] { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal.armed { opacity: 1; transform: none; transition: none; } .hero__scroll::after { animation: none; } } /* ---------- responsive ---------- */ @media (max-width: 960px) { .sticky-grid { grid-template-columns: 1fr; gap: 32px; } .sticky-grid__intro { position: static; } .founder { grid-template-columns: 1fr; } .coaches { grid-template-columns: repeat(4, 1fr); } .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } } @media (max-width: 760px) { .nav__links { display: none; } .nav__toggle { display: flex; } .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .gallery { columns: 2; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .coaches { grid-template-columns: repeat(2, 1fr); } .coaches--lead { grid-template-columns: 1fr; max-width: none; } .gallery { columns: 1; } .foot__top { grid-template-columns: 1fr; } .hero { padding-block: 120px 64px; } } /* ---------- interior pages (no hero behind nav) ---------- */ .nav--solid { background: rgba(248,244,236,.9); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--line); } .page-hero { padding: clamp(120px, 16vh, 172px) 0 clamp(40px, 6vw, 72px); } .page-hero h1 { margin: .25em 0 .4em; max-width: 16ch; } .svc-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,4vw,56px); padding: clamp(26px,3vw,40px) 0; border-top: 1px solid var(--line); align-items: start; } .svc-row:last-child { border-bottom: 1px solid var(--line); } .svc-row .numeral { font-size: 1rem; padding-top: 6px; } .svc-row h3 { margin-bottom: .4em; } .svc-row .chg { display: block; margin-top: .8em; font-size: .9rem; color: var(--teal); } .svc-row .chg b { color: var(--teal); font-weight: 600; } @media (max-width: 640px){ .svc-row { grid-template-columns: 1fr; gap: 8px; } }