/* ========================================================================== Champions Swim School design system Palette : deep marine + aqua + warm coral on sand Type : Fraunces (display) / Plus Jakarta Sans (text) ========================================================================== */ @layer reset, base, layout, components, utilities; /* -------------------------------------------------------------------------- TOKENS -------------------------------------------------------------------------- */ :root { color-scheme: light; accent-color: #16788A; /* Tier 1: raw palette */ --marine-900: #06232B; --marine-800: #0A3340; --marine-700: #0E4655; --marine-600: #135C6B; --teal-500: #16788A; --aqua-400: #3FBFB8; --aqua-300: #6FD8CE; --aqua-200: #A9E7E0; --aqua-100: #D8F3EF; --coral-500: #FF7A4D; --coral-600: #F0603A; --coral-200: #FFCDB8; --coral-100: #FFE7DC; --sand-50: #FDF9F4; --sand-100: #F8F1E8; --sand-200: #EFE4D6; --sand-300: #E2D3C0; --cream: #FFFDFA; /* Tier 2: semantic */ --bg: var(--sand-50); --bg-alt: var(--sand-100); --surface: var(--cream); --ink: var(--marine-900); --ink-2: #38545E; --ink-3: #5C7178; --brand: var(--marine-800); --accent: var(--coral-500); --line: color-mix(in oklab, var(--marine-900) 13%, transparent); --line-2: color-mix(in oklab, var(--marine-900) 24%, transparent); --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* fluid type scale */ --t--1: clamp(.8rem, .78rem + .1vw, .875rem); --t-0: clamp(1rem, .97rem + .16vw, 1.0938rem); --t-1: clamp(1.125rem, 1.08rem + .22vw, 1.25rem); --t-2: clamp(1.3rem, 1.21rem + .45vw, 1.6rem); --t-3: clamp(1.6rem, 1.42rem + .9vw, 2.25rem); --t-4: clamp(2rem, 1.66rem + 1.7vw, 3rem); --t-5: clamp(2.5rem, 1.9rem + 3vw, 4.25rem); /* space */ --sp-1: .5rem; --sp-2: .875rem; --sp-3: 1.25rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem; --sp-7: 7rem; /* shape */ --r-sm: .55rem; --r: .95rem; --r-lg: 1.5rem; --r-xl: 2.25rem; --r-pill: 999px; /* elevation: layered, soft, tinted to the brand rather than pure black */ --shadow-1: 0 1px 2px -1px rgb(6 35 43 / .10), 0 2px 6px -2px rgb(6 35 43 / .07); --shadow-2: 0 2px 4px -2px rgb(6 35 43 / .10), 0 8px 22px -8px rgb(6 35 43 / .14); --shadow-3: 0 4px 8px -4px rgb(6 35 43 / .12), 0 20px 48px -16px rgb(6 35 43 / .20); --wrap: 74rem; --wrap-narrow: 46rem; --header-h: 4.5rem; } /* gradient interpolation space, guarded for older engines */ :root { --in-oklab: ; } @supports (background: linear-gradient(in oklab, red, blue)) { :root { --in-oklab: in oklab; } } /* -------------------------------------------------------------------------- RESET -------------------------------------------------------------------------- */ @layer reset { html { box-sizing: border-box; } html :where(*, *::before, *::after) { box-sizing: inherit; } :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; padding: 0; } :where(ul[role="list"], ol[role="list"]) { list-style: none; } :where(img, svg, video) { display: block; max-width: 100%; height: auto; } :where(button, input, select, textarea) { font: inherit; color: inherit; } :where(a) { color: inherit; } } /* -------------------------------------------------------------------------- BASE -------------------------------------------------------------------------- */ @layer base { html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1.5rem); /* Must live on : `overflow-x` set on propagates to the viewport instead of clipping, so decorative bleeds would create sideways scroll. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--ink-2); font-family: var(--font-body); font-size: var(--t-0); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* Paper grain: the single biggest thing keeping this off "default template" territory */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); } h1, h2, h3, h4, .display { font-family: var(--font-display); font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--ink); line-height: 1.08; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; } h1 { font-size: var(--t-5); font-weight: 800; } h2 { font-size: var(--t-4); } h3 { font-size: var(--t-2); line-height: 1.2; } h4 { font-size: var(--t-1); line-height: 1.3; } p { text-wrap: pretty; } p + p { margin-block-start: 1em; } a { text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover { text-decoration-color: var(--accent); } :where(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid var(--teal-500); outline-offset: 3px; border-radius: var(--r-sm); } ::selection { background: var(--aqua-200); color: var(--marine-900); } strong { color: var(--ink); font-weight: 700; } hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--sp-5); } } /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ @layer layout { .wrap { inline-size: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { inline-size: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; } .section { padding-block: clamp(3rem, 1.9rem + 4.4vw, 4.5rem); } .section-lg { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); } .section-tight { padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 3rem); } .stack > * + * { margin-block-start: var(--flow, 1.25rem); } .grid-3 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } .grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } main { display: block; } } /* -------------------------------------------------------------------------- COMPONENTS -------------------------------------------------------------------------- */ @layer components { /* ---------- skip link ---------- */ .skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -100%; z-index: 200; background: var(--marine-800); color: var(--cream); padding: .75rem 1.25rem; border-radius: var(--r-sm); text-decoration: none; } .skip:focus { inset-block-start: 1rem; } /* ---------- buttons ---------- */ .btn { --btn-bg: var(--coral-500); --btn-fg: var(--marine-900); --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-block-size: 3rem; padding: .75rem 1.5rem; border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: var(--t-0); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: translate .18s ease, box-shadow .18s ease, background-color .18s ease; box-shadow: var(--shadow-1); } .btn:hover:not(:disabled) { translate: 0 -2px; box-shadow: var(--shadow-2); } .btn:active:not(:disabled) { translate: 0 0; } .btn:disabled { opacity: .55; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn-primary:hover:not(:disabled) { --btn-bg: var(--coral-600); } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--marine-800); --btn-bd: var(--line-2); box-shadow: none; } .btn-ghost:hover { --btn-bg: var(--sand-100); --btn-bd: var(--marine-800); } .btn-light { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: color-mix(in oklab, var(--cream) 45%, transparent); box-shadow: none; } .btn-light:hover { --btn-bg: color-mix(in oklab, var(--cream) 12%, transparent); --btn-bd: var(--cream); } .btn-sm { min-block-size: 2.6rem; padding: .5rem 1.15rem; font-size: var(--t--1); } .btn-lg { min-block-size: 3.4rem; padding: .9rem 2rem; font-size: var(--t-1); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } /* ---------- header ---------- */ /* Always a visible bar so the navigation is obvious at a glance. */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: color-mix(in oklab, var(--sand-50) 92%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-block-end: 1px solid var(--line); transition: box-shadow .25s ease; } .site-header[data-stuck] { box-shadow: var(--shadow-1); } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--sand-50); } } /* the open mobile menu needs an opaque bar above it */ .site-header:has(.nav-toggle[aria-expanded="true"]) { background: var(--sand-50); } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } .header-inner { min-block-size: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); } .logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-inline-end: auto; padding-block: .4rem; } .logo svg { inline-size: 2.5rem; block-size: 2.5rem; flex: none; } .logo-text { display: grid; line-height: 1; } .logo-name { font-family: var(--font-display); font-weight: 800; font-variation-settings: "SOFT" 40; font-size: 1.32rem; color: var(--ink); letter-spacing: -.01em; } .logo-sub { font-size: .58rem; font-weight: 700; letter-spacing: .3em; color: var(--teal-500); margin-block-start: .28rem; text-transform: uppercase; } .nav { display: flex; align-items: center; gap: .35rem; } .nav a { padding: .6rem .95rem; border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: 1rem; color: var(--ink); transition: background-color .15s ease, color .15s ease; } .nav a:hover { background: var(--sand-200); color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); } .nav a[aria-current="page"]:not(.btn)::after { content: ""; display: block; block-size: 2px; background: var(--accent); border-radius: 2px; margin-block-start: 2px; } .nav-toggle { display: none; } @media (width < 60rem) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.9rem; block-size: 2.9rem; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: transparent; cursor: pointer; order: 3; } .nav-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav { position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; gap: .15rem; padding: var(--sp-2) 1.25rem var(--sp-3); background: var(--sand-50); border-block-end: 1px solid var(--line); box-shadow: var(--shadow-2); } .nav[hidden] { display: none; } .nav a { padding: .85rem 1rem; font-size: 1.05rem; } .nav a[aria-current="page"]::after { inline-size: 2rem; } .nav .btn { margin-block-start: .5rem; } .header-cta-desktop { display: none; } } @media (width >= 60rem) { .nav .btn { display: none; } } /* ---------- hero ---------- */ .hero { position: relative; padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) clamp(2.5rem, 1rem + 5vw, 4rem); text-align: center; } .hero .eyebrow { margin-inline: auto; } .hero .btn-row { justify-content: center; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--t--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; /* marine rather than teal: teal-on-aqua lands at 4.46:1, just under AA */ color: var(--marine-700); background: var(--aqua-100); border: 1px solid color-mix(in oklab, var(--aqua-400) 35%, transparent); padding: .45rem 1rem; border-radius: var(--r-pill); } .eyebrow .dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--coral-500); flex: none; } .hero h1 { margin-block: 1.5rem .25rem; max-inline-size: 18ch; margin-inline: auto; } .hero .lede { font-size: var(--t-1); color: var(--ink-2); max-inline-size: 48ch; margin: 1.35rem auto 2rem; } /* hand-drawn coral swash under a key word */ .swash { position: relative; white-space: nowrap; color: var(--teal-500); } .swash::after { content: ""; position: absolute; inset-inline: -.08em; inset-block-end: -.16em; block-size: .32em; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 17C48 8 108 4 168 6c40 1.4 78 5 126 11' fill='none' stroke='%23FF7A4D' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); z-index: -1; } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.75rem; margin: 2.25rem auto 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); max-inline-size: 46rem; font-size: var(--t--1); font-weight: 600; color: var(--ink-3); } .trust-row li { display: flex; align-items: center; gap: .45rem; list-style: none; } .trust-row svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--aqua-400); flex: none; } /* ---------- image + bullets split section ---------- */ .choose-grid { display: grid; gap: clamp(1.75rem, 1rem + 3.5vw, 3.25rem); align-items: center; grid-template-columns: 1fr; } @media (width >= 58rem) { .choose-grid { grid-template-columns: .82fr 1.18fr; } } .choose-media { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-3); aspect-ratio: 4 / 5; background: var(--marine-800); } .choose-media img { inline-size: 100%; block-size: 100%; object-fit: cover; } @media (width < 58rem) { .choose-media { aspect-ratio: 16 / 11; } } .choose-media.is-wide { aspect-ratio: 4 / 3; } .choose-grid.align-start { align-items: start; } /* ---------- heading beside a list ---------- */ .feature-split { display: grid; gap: clamp(1.75rem, 1rem + 3.5vw, 4rem); grid-template-columns: 1fr; } @media (width >= 58rem) { .feature-split { grid-template-columns: .92fr 1.08fr; align-items: start; } } /* Numbered hairline list. No boxes, no shadows: the whitespace does the work. */ .plain-list { list-style: none; display: grid; } .plain-list li { display: flex; gap: 1.1rem; padding-block: 1.15rem; border-block-start: 1px solid var(--line); font-size: 1rem; } .plain-list li:last-child { border-block-end: 1px solid var(--line); } .plain-list .n { font-family: var(--font-display); font-weight: 800; font-size: 1rem; /* teal-500 clears 4.5:1 on the sand background; aqua-400 does not. */ color: var(--teal-500); inline-size: 1.75rem; flex: none; line-height: 1.65; letter-spacing: .02em; } .plain-list b { color: var(--ink); } @media (width < 30rem) { .plain-list li { gap: .8rem; } .plain-list .n { inline-size: 1.5rem; } } /* ---------- check bullet list ---------- */ .check-list { list-style: none; display: grid; gap: .85rem; margin-block-start: 1.5rem; } .check-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .99rem; } .check-list svg { inline-size: 1.3rem; block-size: 1.3rem; flex: none; color: var(--aqua-400); margin-block-start: .2rem; } .check-list b { color: var(--ink); } /* ---------- big-number fact list (dark band) ---------- */ .fact-list { list-style: none; display: grid; gap: 0; } .fact-list li { display: flex; gap: 1.5rem; align-items: baseline; padding-block: 1.15rem; border-block-start: 1px solid color-mix(in oklab, var(--cream) 16%, transparent); } .fact-list li:last-child { border-block-end: 1px solid color-mix(in oklab, var(--cream) 16%, transparent); } .fact-list .fig { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.65rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--aqua-300); flex: none; inline-size: 5.5rem; } .fact-list .txt { font-size: 1rem; } .fact-list cite { display: block; margin-block-start: .3rem; font-style: normal; font-size: .82rem; color: color-mix(in oklab, var(--cream) 58%, transparent); } @media (width < 34rem) { .fact-list li { flex-direction: column; gap: .35rem; padding-block: 1rem; } .fact-list .fig { inline-size: auto; } } /* ---------- evidence / big-number cards ---------- */ .evidence { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); list-style: none; } .evidence-card { background: color-mix(in oklab, var(--cream) 8%, transparent); border: 1px solid color-mix(in oklab, var(--cream) 18%, transparent); border-radius: var(--r-lg); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; } .evidence-card .figure { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2.6vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--aqua-300); } .evidence-card p { color: color-mix(in oklab, var(--cream) 84%, transparent); font-size: .975rem; } .evidence-card cite { margin-block-start: auto; padding-block-start: .5rem; font-size: .78rem; font-style: normal; color: color-mix(in oklab, var(--cream) 58%, transparent); border-block-start: 1px solid color-mix(in oklab, var(--cream) 14%, transparent); } .evidence-note { margin-block-start: var(--sp-3); font-size: .88rem; color: color-mix(in oklab, var(--cream) 62%, transparent); max-inline-size: 62ch; } /* ---------- section heading ---------- */ .sec-head { max-inline-size: 40rem; margin-block-end: var(--sp-4); } .sec-head.center { margin-inline: auto; text-align: center; } .kicker { display: block; font-size: var(--t--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-500); margin-block-end: .85rem; } .sec-head p { margin-block-start: 1rem; font-size: var(--t-1); color: var(--ink-2); } /* ---------- cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--shadow-1); } @supports (corner-shape: squircle) { .card, .btn, .price-card, .evidence-card { corner-shape: squircle; } } .feature { padding: 1.75rem 1.5rem; } .feature .f-icon { inline-size: 3.25rem; block-size: 3.25rem; display: grid; place-items: center; border-radius: var(--r); background: linear-gradient(140deg var(--in-oklab), var(--aqua-200), var(--aqua-100)); color: var(--marine-700); margin-block-end: 1.15rem; } .feature .f-icon svg { inline-size: 1.6rem; block-size: 1.6rem; } .feature h3 { font-size: var(--t-1); margin-block-end: .55rem; } .feature p { font-size: .975rem; } /* ---------- steps ---------- */ .steps { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); counter-reset: step; } .step { position: relative; padding-block-start: .5rem; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--aqua-400); margin-block-end: .75rem; } .step h3 { font-size: var(--t-1); margin-block-end: .5rem; } .step p { font-size: .975rem; } /* ---------- pricing ---------- */ .price-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); align-items: start; } .price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.9rem 1.6rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 1.1rem; block-size: 100%; } .price-card.featured { border-color: var(--marine-800); border-width: 2px; box-shadow: var(--shadow-3); background: linear-gradient(180deg var(--in-oklab), color-mix(in oklab, var(--aqua-100) 70%, var(--cream)), var(--cream) 42%); } .price-tag { position: absolute; inset-block-start: -.85rem; inset-inline-start: 1.6rem; background: var(--coral-500); color: var(--marine-900); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .85rem; border-radius: var(--r-pill); box-shadow: var(--shadow-1); } .price-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-2); color: var(--ink); line-height: 1.15; } .price-amount { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .price-amount .amt { font-family: var(--font-display); font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3rem); font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; } .price-amount .per { font-size: .95rem; color: var(--ink-3); font-weight: 600; } .price-note { font-size: .875rem; color: var(--ink-3); margin-block-start: -.6rem; } .price-list { list-style: none; display: grid; gap: .65rem; font-size: .95rem; } .price-list li { display: flex; gap: .65rem; align-items: flex-start; } .price-list svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; color: var(--aqua-400); margin-block-start: .2rem; } .price-card .btn { margin-block-start: auto; inline-size: 100%; } /* ---------- dark band ---------- */ .band { position: relative; background: var(--marine-800); color: color-mix(in oklab, var(--cream) 82%, transparent); overflow: clip; } .band :where(h1, h2, h3, h4) { color: var(--cream); } .band .kicker { color: var(--aqua-300) !important; } .band a:not(.btn) { color: var(--aqua-300); } /* Anything that hard-codes a dark ink colour has to be re-lit on the dark band. Automated contrast checkers skip this section because of the gradient behind it. */ .band :where(p, li, dd) { color: color-mix(in oklab, var(--cream) 84%, transparent); } .band .sec-head p { color: color-mix(in oklab, var(--cream) 84%, transparent); } .band strong, .band b { color: var(--cream); } .band::after { content: ""; position: absolute; inset-block-start: -4rem; inset-inline-end: -10rem; inline-size: 34rem; block-size: 34rem; border-radius: 50%; background: radial-gradient(circle closest-side var(--in-oklab), color-mix(in oklab, var(--teal-500) 60%, transparent), transparent); pointer-events: none; } .band > * { position: relative; z-index: 1; } /* wave dividers */ .wave { display: block; inline-size: 100%; block-size: clamp(2.5rem, 5vw, 4.5rem); } .wave path { fill: currentColor; } /* the wave must match the background of the section ABOVE it */ .wave-top { color: var(--bg); } .wave-top-alt { color: var(--bg-alt); } /* ---------- coach / bio ---------- */ .bio-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } @media (width >= 58rem) { .bio-grid { grid-template-columns: .85fr 1.15fr; } } .portrait { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(160deg var(--in-oklab), var(--marine-700), var(--teal-500)); box-shadow: var(--shadow-3); display: grid; place-items: center; } .portrait svg { inline-size: 100%; block-size: 100%; } .portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; } .cred-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); list-style: none; } .cred { display: flex; gap: .8rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; } .cred svg { inline-size: 1.4rem; block-size: 1.4rem; color: var(--teal-500); flex: none; margin-block-start: .1rem; } .cred b { display: block; color: var(--ink); font-size: .975rem; line-height: 1.3; } .cred span { font-size: .85rem; color: var(--ink-3); } .band .cred { background: color-mix(in oklab, var(--cream) 8%, transparent); border-color: color-mix(in oklab, var(--cream) 16%, transparent); } .band .cred b { color: var(--cream); } .band .cred span { color: color-mix(in oklab, var(--cream) 66%, transparent); } .band .cred svg { color: var(--aqua-300); } /* ---------- stats ---------- */ .stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); list-style: none; } .stat b { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.02em; } .stat span { font-size: .9rem; color: var(--ink-3); display: block; margin-block-start: .5rem; } .band .stat b { color: var(--aqua-300); } .band .stat span { color: color-mix(in oklab, var(--cream) 70%, transparent); } /* ---------- FAQ ---------- */ .faq { display: grid; gap: .6rem; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-1); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 3.25rem 1.15rem 1.25rem; font-weight: 700; color: var(--ink); font-size: 1.03rem; position: relative; min-block-size: 3rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; inset-inline-end: 1.25rem; inset-block-start: 1.45rem; inline-size: .7rem; block-size: .7rem; border-inline-end: 2.5px solid var(--teal-500); border-block-end: 2.5px solid var(--teal-500); rotate: 45deg; transition: rotate .2s ease; } .faq details[open] summary::after { rotate: -135deg; } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } } .faq summary:hover { background: var(--sand-100); } .faq .faq-body { padding: 0 1.25rem 1.35rem; font-size: .975rem; } /* ---------- forms ---------- */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: var(--shadow-2); } .fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); } .fieldset:last-of-type { margin-block-end: var(--sp-3); } .fieldset legend { font-family: var(--font-display); font-size: var(--t-2); font-weight: 700; color: var(--ink); padding: 0; margin-block-end: 1.25rem; line-height: 1.2; } .field-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .field { display: grid; gap: .4rem; margin-block-end: 1.15rem; } .field:last-child { margin-block-end: 0; } .field label { font-weight: 700; color: var(--ink); font-size: .93rem; } .field .req { color: var(--coral-600); } .hint { font-size: .82rem; color: var(--ink-3); } /* nested radio/checkbox group inside a fieldset */ .subgroup { border: 0; padding: 0; margin: 0 0 1.15rem; } .subgroup > legend { font-family: var(--font-body); font-weight: 700; color: var(--ink); font-size: .93rem; padding: 0; margin-block-end: .6rem; line-height: 1.4; } /* two-column booking layout */ .booking-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (width >= 62rem) { .booking-grid { grid-template-columns: 1.55fr 1fr; gap: var(--sp-5); align-items: start; } } .field :where(input, textarea, select) { inline-size: 100%; min-block-size: 3rem; padding: .7rem .95rem; font-size: 1rem; background: var(--sand-50); color: var(--ink); border: 1.5px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .15s ease, background-color .15s ease; } .field textarea { min-block-size: 7rem; resize: vertical; line-height: 1.55; } .field select { appearance: none; padding-inline-end: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316788A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; background-size: 1.15rem; } [dir="rtl"] .field select { background-position: left .95rem center; } .field :where(input, textarea, select):hover { border-color: var(--teal-500); } .field :where(input, textarea, select):focus { background: var(--cream); } .field ::placeholder { color: color-mix(in oklab, var(--ink-3) 78%, transparent); } .field :where(input, textarea):user-invalid { border-color: var(--coral-600); background: color-mix(in oklab, var(--coral-100) 55%, var(--cream)); } .field :where(input, textarea):user-invalid + .hint { color: var(--coral-600); font-weight: 600; } @media (pointer: coarse) { .field :where(input, textarea, select) { min-block-size: 3.25rem; } } .choice-grid { display: flex; flex-wrap: wrap; gap: .55rem; } .choice { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.05rem; min-block-size: 2.75rem; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background: var(--sand-50); font-size: .93rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .choice input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; } .choice:hover { border-color: var(--teal-500); } .choice:has(:checked) { background: var(--marine-800); border-color: var(--marine-800); color: var(--cream); } .choice:has(:focus-visible) { outline: 3px solid var(--teal-500); outline-offset: 3px; } .honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-status { margin-block-start: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem; border: 1.5px solid; } .form-status:empty { display: none; } .form-status[data-state="ok"] { background: var(--aqua-100); border-color: var(--aqua-400); color: var(--marine-800); } .form-status[data-state="err"] { background: var(--coral-100); border-color: var(--coral-600); color: #8A2D10; } /* ---------- Booksy booking card ---------- */ .book-card { text-align: center; } .book-icon { inline-size: 3.6rem; block-size: 3.6rem; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: var(--r-lg); background: linear-gradient(140deg var(--in-oklab), var(--aqua-200), var(--aqua-100)); color: var(--marine-700); } .book-icon svg { inline-size: 1.8rem; block-size: 1.8rem; } .book-head { font-size: var(--t-2); margin-block-start: 1.9rem; padding-block-start: 1.6rem; border-block-start: 1px solid var(--line); } .book-lede { font-size: 1.02rem; margin: .75rem auto 0; max-inline-size: 50ch; } .book-btn { inline-size: 100%; } .book-list { text-align: start; margin-block-start: 1.5rem; gap: 1rem; } .book-list b { color: var(--ink); } /* ---------- contact tiles ---------- */ .contact-tiles { display: grid; gap: .75rem; } .contact-tile { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color .15s ease, translate .15s ease; } .contact-tile:hover { border-color: var(--marine-800); translate: 0 -2px; } @media (prefers-reduced-motion: reduce) { .contact-tile { transition: none; } } .contact-tile .ct-icon { inline-size: 2.75rem; block-size: 2.75rem; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--aqua-100); color: var(--marine-700); } .contact-tile .ct-icon svg { inline-size: 1.35rem; block-size: 1.35rem; } .contact-tile span { display: block; font-size: .8rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .contact-tile b { display: block; color: var(--ink); font-size: 1.05rem; line-height: 1.3; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; } /* ---------- callout ---------- */ .callout { display: flex; gap: 1rem; padding: 1.35rem 1.5rem; background: linear-gradient(120deg var(--in-oklab), var(--coral-100), var(--sand-100)); border: 1px solid color-mix(in oklab, var(--coral-500) 32%, transparent); border-radius: var(--r-lg); } .callout svg { inline-size: 1.6rem; block-size: 1.6rem; color: var(--coral-600); flex: none; margin-block-start: .15rem; } .callout b { color: var(--ink); } /* ---------- level list (age groups) ---------- */ .level { display: grid; gap: 1.25rem; grid-template-columns: 1fr; padding-block: var(--sp-3); border-block-start: 1px solid var(--line); } @media (width >= 48rem) { .level { grid-template-columns: 15rem 1fr; gap: 2.5rem; } } .level-label .age { font-family: var(--font-display); font-size: var(--t-2); font-weight: 700; color: var(--ink); display: block; line-height: 1.15; } .level-label .range { font-size: .85rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-500); margin-block-start: .4rem; display: block; } .level-body ul { list-style: none; display: grid; gap: .55rem; margin-block-start: .9rem; font-size: .975rem; } .level-body li { display: flex; gap: .6rem; align-items: flex-start; } .level-body li::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--coral-500); flex: none; margin-block-start: .62rem; } /* ---------- page hero (inner pages) ---------- */ .page-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem); position: relative; } .page-hero-tight { padding-block: clamp(1.75rem, 1rem + 2.5vw, 2.5rem) clamp(1.25rem, .75rem + 1.5vw, 1.75rem); } .page-hero .lede { font-size: var(--t-1); color: var(--ink-2); max-inline-size: 46ch; margin-block-start: 1.25rem; } .breadcrumb { font-size: var(--t--1); color: var(--ink-3); margin-block-end: 1rem; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; } .breadcrumb li + li::before { content: "/"; margin-inline-end: .4rem; color: var(--line-2); } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* ---------- footer ---------- */ .site-footer { background: var(--marine-900); color: color-mix(in oklab, var(--cream) 72%, transparent); padding-block: var(--sp-5) var(--sp-3); font-size: .95rem; } .site-footer h2 { color: var(--cream); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; margin-block-end: 1rem; } .footer-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } @media (width >= 56rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } .footer-grid > :first-child { grid-column: auto; } } .site-footer .logo-name { color: var(--cream); } .site-footer ul { list-style: none; display: grid; gap: .6rem; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--aqua-300); text-decoration: underline; } .footer-bottom { margin-block-start: var(--sp-4); padding-block-start: var(--sp-3); border-block-start: 1px solid color-mix(in oklab, var(--cream) 15%, transparent); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .85rem; color: color-mix(in oklab, var(--cream) 55%, transparent); } } /* -------------------------------------------------------------------------- UTILITIES -------------------------------------------------------------------------- */ @layer utilities { .center { text-align: center; } .mx-auto { margin-inline: auto; } .measure { max-inline-size: 62ch; } .mt-4 { margin-block-start: var(--sp-4); } .mt-3 { margin-block-start: var(--sp-3); } .mt-2 { margin-block-start: var(--sp-2); } .bg-alt { background: var(--bg-alt); } .visually-hidden { position: absolute; clip-path: inset(50%); overflow: hidden; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap; } } /* -------------------------------------------------------------------------- MOTION: progressive enhancement only. Content is always visible without it. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } @supports (animation-timeline: view()) { .reveal { animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; } } .hero-in { animation: hero-in .8s cubic-bezier(.22, .68, .32, 1) both; animation-delay: calc(var(--i, 0) * 90ms); } } @keyframes reveal-up { from { opacity: 0; translate: 0 1.6rem; } to { opacity: 1; translate: 0 0; } } @keyframes hero-in { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } } ::view-transition-old(root) { animation: vt-out .28s ease both; } ::view-transition-new(root) { animation: vt-in .34s ease both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; translate: 0 .75rem; } } /* -------------------------------------------------------------------------- FORCED COLORS -------------------------------------------------------------------------- */ @media (forced-colors: active) { .btn { border: 2px solid ButtonText; } .card, .price-card, .cred, .contact-tile, .faq details { border: 1px solid CanvasText; } .step::before { -webkit-text-stroke: 0; color: CanvasText; } body::before { display: none; } } /* -------------------------------------------------------------------------- PRINT -------------------------------------------------------------------------- */ @media print { .site-header, .nav, .btn, .hero-art, body::before { display: none !important; } body { background: #fff; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }