/* ============================================================================ The Cricket Physio — stylesheet, v2 (dark only) ---------------------------------------------------------------------------- The design system is specified in docs/website-brief.md, sections 9, 10, 12, 28 and 38. This file implements it. Change a value there and here together. One theme: dark. Brand teal and grey are sampled from the logo as it is reversed for dark backgrounds (assets/brand/). Every text pairing below was measured against every surface it sits on and holds WCAG 2.2 AA. Components use the semantic tokens (--ink, --text, --link...) only. Motion: reveals, the marquee, the pathway line, parallax and hover effects all switch off under prefers-reduced-motion, and nothing is hidden if JavaScript does not run (reveals key off html.js). ========================================================================== */ /* --- Fonts: self-hosted, latin subset ------------------------------------ */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Tokens ---------------------------------------------------------------- Contrast, measured: ink 17.1, text 11.9, muted 6.8, teal 6.9 on --bg; muted 5.5 and teal 5.6 on --surface-2 (the worst case). Button text on the teal gradient 4.7 at its darkest end. Input border 3.5+ everywhere. */ :root { /* Brand */ --teal: #14ACAA; /* the logo's wordmark teal on dark */ --teal-bright: #3FD0CB; /* hover, glows */ --teal-deep: #0B6F6D; /* gradient floor */ --grey: #ADA7AC; /* the logo's "Physio" grey on dark */ --clay: #CB7A55; /* leather: seam stitches only */ /* Surfaces, darkest first. A teal undertone keeps black from going flat. */ --bg: #071012; --bg-2: #0A1618; --surface: #0F1D20; --surface-2: #142629; --glass: rgba(10, 22, 24, .72); /* Text */ --ink: #F4F1EA; /* headings, warm white */ --text: #C4CDCB; /* body */ --muted: #8E9C9A; /* labels, metadata */ /* Lines */ --line: rgba(196, 226, 223, .10); --line-2: rgba(196, 226, 223, .18); --line-strong: #627C80; /* inputs: 3.5:1 or better on every surface */ /* Semantic */ --link: var(--teal); --link-hover: var(--teal-bright); --accent: var(--teal); --accent-wash: rgba(20, 172, 170, .10); --btn-fg: #041012; --btn-grad: linear-gradient(135deg, #1BB8B4 0%, #129E9B 55%, #0E8C89 100%); --focus: #F2B35B; --danger: #FF8A73; /* Legacy names used by older markup */ --surface-tint: var(--bg-2); --band-dark: var(--bg); --glow-teal: radial-gradient(60% 60% at 50% 40%, rgba(20, 172, 170, .22), transparent 70%); --shadow-2: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line); --shadow-glow: 0 0 0 1px rgba(20,172,170,.35), 0 20px 60px -20px rgba(20,172,170,.35); /* Type */ --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Space: 4 8 12 16 24 32 48 64 96 128 */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem; --wrap: 80rem; /* 1280px */ --measure: 42rem; --gutter: 1.25rem; --radius: 999px; /* buttons and chips are pills */ --radius-sm: 10px; /* inputs */ --radius-lg: 20px; /* cards, images, tables */ --hdr: 4.5rem; --ease: cubic-bezier(.2, .7, .2, 1); color-scheme: dark; } @media (min-width: 48rem) { :root { --gutter: 2rem; } } @media (min-width: 80rem) { :root { --gutter: 3rem; } } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 1.25rem); scroll-padding-bottom: 5rem; background: var(--bg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } @media (min-width: 48rem) { body { font-size: 1.125rem; } } /* Film grain over everything, very faint. Desktop only: it costs paint time. */ @media (min-width: 48rem) { body::after { content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none; opacity: .045; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } } img, svg, video { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } ::selection { background: rgba(20,172,170,.35); color: var(--ink); } /* --- Type ------------------------------------------------------------------ Display: Instrument Serif, regular and italic. H1 44 → 88px, H2 36 → 60px. Text and UI: Manrope. An inside a heading turns italic and teal. */ :is(h1, h2) { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0 0 .45em; text-wrap: balance; letter-spacing: -.012em; } h1 { font-size: clamp(2.75rem, 1.5rem + 5.1vw, 5.5rem); line-height: .98; max-width: 16ch; } h2 { font-size: clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem); line-height: 1.02; } :is(h1, h2) em { font-style: italic; color: var(--teal); } h3 { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.3; letter-spacing: -.012em; color: var(--ink); margin: 0 0 .45em; } h4 { font-family: var(--font-text); font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--ink); margin: 0 0 .4em; } p { margin: 0 0 1.1em; } strong { color: var(--ink); font-weight: 700; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .15s; } a:hover { color: var(--link-hover); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-text); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin: 0 0 1.1rem; } /* A crease line: the short mark that starts every eyebrow. */ .eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: linear-gradient(90deg, var(--teal), transparent); border-radius: 2px; flex: none; } .eyebrow--plain::before { display: none; } .lede { font-size: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); line-height: 1.6; color: var(--text); max-width: 38rem; } .small { font-size: .9375rem; line-height: 1.6; } .muted { color: var(--muted); } .num { font-variant-numeric: tabular-nums lining-nums; } .serif { font-family: var(--font-display); } /* --- Layout ---------------------------------------------------------------- */ .wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 48rem; } .wrap.narrow { max-width: calc(48rem + 2 * var(--gutter)); } section { padding-block: clamp(4rem, 2.75rem + 5vw, 8rem); position: relative; } .band--stone, .section--tint, .band--white { background: var(--bg-2); } .band--tight { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); } .band--flush-top { padding-top: 0; } .band--line { border-top: 1px solid var(--line); } /* A glow band: navy in v1, now a surface lit from above. */ .band--navy, .cta-band { background: var(--bg-2); isolation: isolate; overflow: hidden; } .band--navy::before, .cta-band::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 50% 0%, rgba(20,172,170,.18), transparent 70%); } .band--navy { border-block: 1px solid var(--line); } .section-head { max-width: 50rem; margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.75rem); } .section-head > :last-child { margin-bottom: 0; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lede { margin-inline: auto; } .section-head--center .eyebrow { justify-content: center; } .section-head--row { display: grid; gap: var(--s5); max-width: none; } @media (min-width: 64rem) { .section-head--row { grid-template-columns: 1fr auto; align-items: end; } } .split { display: grid; gap: var(--s7) var(--s8); } @media (min-width: 64rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .split--even { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--center { align-items: center; } } .rulecols { display: grid; gap: var(--s6); list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .rulecols--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .rulecols--3 { grid-template-columns: repeat(3, 1fr); } .rulecols--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 48rem) and (max-width: 63.99rem) { .rulecols--3, .rulecols--4 { grid-template-columns: 1fr 1fr; } } .rulecols > * { border-top: 1px solid var(--line-2); padding-top: var(--s5); position: relative; } .rulecols > *::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--teal); } .rulecols > * > :last-child { margin-bottom: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--teal); color: var(--btn-fg); padding: .75rem 1.1rem; text-decoration: none; font-weight: 700; border-radius: var(--radius-sm); } .skip-link:focus { left: .75rem; top: .75rem; } /* --- Header ---------------------------------------------------------------- Sits over the page, turns to glass once the page scrolls. */ .hdr { position: sticky; top: 0; z-index: 100; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; background: rgba(7,16,18,.55); } .hdr.is-scrolled { background: var(--glass); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: var(--line); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr.is-scrolled { background: var(--bg); } } .hdr__inner { display: flex; align-items: center; gap: var(--s4); min-height: var(--hdr); transition: min-height .3s var(--ease); } @media (min-width: 48rem) { .hdr__inner { min-height: 5.25rem; } } .hdr.is-scrolled .hdr__inner { min-height: 4rem; } /* The logo box has a fixed width; the image fills it and its height follows from the file's own width and height attributes. Nothing about it changes on scroll, so it cannot squash. Do not set a height on .brand img. */ .brand { display: block; margin-right: auto; flex: none; line-height: 0; width: 168px; } .brand picture { display: block; } .brand img { display: block; width: 100%; height: auto; } @media (min-width: 75rem) and (max-width: 89.99rem) { .brand { width: 144px; } } @media (max-width: 37.5rem) { .brand { width: 148px; } } @media (max-width: 23rem) { .brand { width: 132px; } } .nav { display: flex; align-items: center; gap: .1rem; } .nav a { position: relative; color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; padding: .55rem .75rem; white-space: nowrap; letter-spacing: .005em; } .nav a:not(.btn)::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px; border-radius: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav a:not(.btn):hover { color: var(--ink); } .nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--ink); } /* Book sits in the header above 900px: "Book" on tablets, the full label beside the desktop nav. Below that the action bar carries it. */ .hdr .hdr__book { flex: none; gap: 0; } .hdr__book-more { display: none; margin-left: .28em; } @media (min-width: 75rem) { .hdr__book-more { display: inline; } } /* --- Buttons: pills ------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-text); font-size: .975rem; font-weight: 700; letter-spacing: .005em; line-height: 1.2; text-decoration: none; text-align: center; padding: .95rem 1.6rem; min-height: 52px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), box-shadow .3s var(--ease), border-color .2s, background-color .2s, color .2s; } .btn--primary { background: var(--btn-grad); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 30px -12px rgba(20,172,170,.55); } .btn--primary:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 18px 40px -12px rgba(20,172,170,.7); } /* A sheen that crosses the button on hover. */ .btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); } .btn--primary:hover::before { transform: translateX(120%); } .btn--primary:active { transform: translateY(0); } .btn--secondary, .btn--ghost { background: rgba(255,255,255,.035); color: var(--ink); border-color: var(--line-2); } .btn--secondary:hover, .btn--ghost:hover { color: var(--ink); border-color: var(--teal); background: rgba(20,172,170,.08); } .btn--arrow::after { content: "→"; transition: transform .25s var(--ease); } .btn--arrow:hover::after { transform: translateX(4px); } .btn--sm { padding: .6rem 1.1rem; min-height: 42px; font-size: .9rem; } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .btn, .btn::before { transition: none; } .btn--primary:hover { transform: none; } } .textlink { font-weight: 700; text-decoration: none; display: inline-flex; gap: .45rem; align-items: baseline; color: var(--teal); } .textlink::after { content: "→"; transition: transform .25s var(--ease); } .textlink:hover { color: var(--teal-bright); } .textlink:hover::after { transform: translateX(4px); } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(255,255,255,.03); color: var(--ink); cursor: pointer; } .iconbtn:hover { border-color: var(--teal); } .iconbtn svg { width: 20px; height: 20px; } /* The Menu button opens the slide-out menu at every width. Below 1200px it is the only navigation in the header; above, it sits after the nav and holds the rest (articles, contact, clinic details). */ .menubtn { display: inline-flex; align-items: center; gap: .55rem; flex: none; min-height: 44px; padding: .5rem .95rem .5rem .85rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background-color .2s; } .menubtn:hover { border-color: var(--teal); background: var(--accent-wash); } .menubtn__bars { display: grid; gap: 4px; width: 18px; } .menubtn__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; } .menubtn__bars i:last-child { width: 11px; } html:not(.js) .menubtn { display: none; } @media (max-width: 74.99rem) { .nav { display: none; } } /* Desktop dropdowns under the main nav: hover or keyboard focus, no script needed. Escape closes one. */ @media (min-width: 75rem) { .nav__item { position: relative; } .nav__panel { position: absolute; top: 100%; left: 50%; width: 19rem; padding-top: .35rem; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s .15s; } .nav__panel ul { list-style: none; margin: 0; padding: .5rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); } .nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel { visibility: visible; opacity: 1; transition-delay: 0s; } .nav__item.is-dismissed .nav__panel { visibility: hidden; opacity: 0; } .hdr .nav .nav__panel a { display: block; padding: .5rem .75rem; border-radius: 4px; font-size: .9rem; font-weight: 500; white-space: normal; } .hdr .nav .nav__panel a::after { display: none; } .hdr .nav .nav__panel a:hover, .hdr .nav .nav__panel a:focus-visible { background: var(--accent-wash); color: var(--ink); } .nav__label { padding: .6rem .75rem .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } } @media (prefers-reduced-motion: reduce) { .nav__panel { transition: none; } } @media (min-width: 75rem) { .nav { margin-right: .5rem; } } @media (max-width: 22.5rem) { .menubtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .menubtn { padding-inline: .8rem; } } /* --- Hero ------------------------------------------------------------------ */ .hero { padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(3rem, 2rem + 4vw, 6rem); position: relative; isolation: isolate; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% -20% auto 30%; height: 110%; z-index: -1; pointer-events: none; background: var(--glow-teal); opacity: .8; } .hero .lede { max-width: 36rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .hero__note { margin-top: 1.25rem; font-size: .9375rem; color: var(--muted); } .hero--compact { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); } @media (max-width: 29.99rem) { .hero__cta .btn { width: 100%; } } /* Home hero: copy left, portrait right. */ .hero--home { padding-top: clamp(2rem, 1rem + 4vw, 5rem); } .hero__grid { display: grid; gap: var(--s7); align-items: center; } @media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); } } .hero__name { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.5rem; } .hero__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid rgba(20,172,170,.6); box-shadow: 0 0 0 4px rgba(20,172,170,.1); } .hero__name span { line-height: 1.35; font-size: .9375rem; color: var(--muted); } .hero__name strong { display: block; font-size: 1rem; } @media (min-width: 64rem) { .hero__avatar { display: none; } } .hero__portrait { position: relative; margin: 0; } .hero__portrait picture { display: block; border-radius: 28px; overflow: hidden; position: relative; box-shadow: var(--shadow-glow); } .hero__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; } .hero__portrait picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,16,18,.75) 100%); pointer-events: none; } .hero__portrait::before { content: ""; position: absolute; inset: 7% -7% -5% 7%; z-index: -1; border-radius: 32px; border: 1px solid rgba(20,172,170,.35); } @media (max-width: 63.99rem) { .hero__portrait { max-width: 30rem; } .hero__portrait img { aspect-ratio: 1; } } .glasscard { position: absolute; left: clamp(-2.5rem, -3vw, -1rem); bottom: 1.5rem; max-width: 19rem; background: rgba(10, 22, 24, .74); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--line-2); border-radius: 16px; padding: .9rem 1.1rem; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); font-size: .875rem; line-height: 1.45; color: var(--text); } .glasscard strong { display: block; font-size: .95rem; color: var(--ink); } .glasscard__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: .25rem; } @media (max-width: 63.99rem) { .glasscard { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } } /* Holding page: on small screens the photo leads, as a short crop so the buttons stay in the first screen. */ @media (max-width: 63.99rem) { .hero--holding .hero__portrait { order: -1; max-width: none; } .hero--holding .hero__portrait img { aspect-ratio: 2 / 1; max-height: 15rem; object-position: 50% 10%; } .hero--holding .hero__portrait::before, .hero--holding .glasscard, .hero--holding .hero__avatar { display: none; } .hero--holding .hero__grid { gap: var(--s4); } .hero--holding .hero__portrait picture { border-radius: 20px; } .hero--holding .lede { font-size: 1.0625rem; } .hero--holding .hero__cta { margin-top: 1.25rem; } .hero--holding .hero__name { margin-bottom: 1rem; } } /* Load animation: hero copy rises in, once. */ @media (prefers-reduced-motion: no-preference) { .hero--home .hero__copy > *, .hero--animate > .wrap > * { animation: rise .9s var(--ease) both; } .hero--home .hero__copy > :nth-child(2), .hero--animate > .wrap > :nth-child(2) { animation-delay: .08s; } .hero--home .hero__copy > :nth-child(3), .hero--animate > .wrap > :nth-child(3) { animation-delay: .16s; } .hero--home .hero__copy > :nth-child(4), .hero--animate > .wrap > :nth-child(4) { animation-delay: .24s; } .hero--home .hero__copy > :nth-child(5), .hero--animate > .wrap > :nth-child(5) { animation-delay: .32s; } .hero--home .hero__portrait { animation: fadein 1.2s var(--ease) .2s both; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } } @keyframes fadein { from { opacity: 0; transform: scale(.98); } } /* Proof strip: big numerals, small labels. */ .proof { list-style: none; margin: clamp(3rem, 2rem + 3vw, 5rem) 0 0; padding: var(--s6) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s5) var(--s6); grid-template-columns: 1fr 1fr; } @media (min-width: 64rem) { .proof { grid-template-columns: repeat(4, 1fr); } } .proof li { display: flex; flex-direction: column; gap: .3rem; } .proof__big { font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); line-height: 1; color: var(--ink); background: linear-gradient(180deg, var(--ink) 35%, var(--teal-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .proof__label { font-size: .9rem; color: var(--muted); line-height: 1.45; } /* Credibility line (product pages). */ .credline { list-style: none; margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line); display: grid; gap: .6rem 2rem; font-size: .9375rem; color: var(--muted); } @media (min-width: 36rem) { .credline { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .credline--4 { grid-template-columns: repeat(4, auto); justify-content: start; } } .credline strong { color: var(--ink); } /* Byline: "overseen by Thihan" on product pages. */ .byline { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.75rem; padding: .4rem 1.1rem .4rem .4rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgba(255,255,255,.03); font-size: .875rem; line-height: 1.35; } .byline img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; } .byline strong { color: var(--ink); } /* --- Organisation marquee --------------------------------------------------- */ .orgbar { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-block: 1px solid var(--line); background: var(--bg-2); } .orgbar__label { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.5rem; } .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee__track { display: flex; gap: 1.25rem; width: max-content; list-style: none; margin: 0; padding: 0; } .marquee__track li { flex: none; } .logo-chip { display: flex; align-items: center; justify-content: center; width: 9.5rem; height: 5.75rem; border-radius: 16px; background: #F1F2EF; padding: .65rem; box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); transition: transform .3s var(--ease), filter .3s; filter: grayscale(1) contrast(1.2); } .logo-chip img { height: 4.25rem; width: auto; max-width: 8rem; object-fit: contain; } .logo-chip:hover { filter: none; opacity: 1; transform: translateY(-2px); } @media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee 42s linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } } @keyframes marquee { to { transform: translateX(calc(-50% - .625rem)); } } @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; } .marquee__track [aria-hidden="true"] { display: none; } } /* Organisation names as text (legacy). */ .orgs { display: grid; gap: var(--s4); } @media (min-width: 64rem) { .orgs { grid-template-columns: 14rem 1fr; align-items: baseline; } } .orgs__label { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; } .orgs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; } .orgs li { font-weight: 700; color: var(--ink); white-space: nowrap; } /* --- Pathway cards: "What brings you here?" --------------------------------- The spotlight follows the pointer (script.js sets --mx and --my). */ .paths { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 40rem) { .paths { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .paths { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .spot { position: relative; isolation: isolate; overflow: hidden; } .spot::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(20,172,170,.16), transparent 45%); } .spot:hover::before, .spot:focus-within::before { opacity: 1; } .path { display: flex; flex-direction: column; height: 100%; min-height: 12.5rem; padding: 1.6rem 1.6rem 1.4rem; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: border-color .3s, transform .3s var(--ease); } .path:hover { border-color: rgba(20,172,170,.45); transform: translateY(-3px); color: var(--text); } .path__num { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--teal); line-height: 1; margin-bottom: 1.4rem; } .path__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.5rem + .8vw, 2.125rem); line-height: 1.05; color: var(--ink); margin: 0 0 .5rem; } .path__desc { font-size: .975rem; line-height: 1.55; margin: 0 0 1.25rem; } .path__go { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: var(--teal); } .path__go::after { content: "→"; transition: transform .25s var(--ease); } .path:hover .path__go::after { transform: translateX(5px); } /* Problem selector (compact list form). */ .selector { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); } .selector__title { font-family: var(--font-text); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; } .selector ul { list-style: none; margin: 0; padding: 0; } .selector li + li { border-top: 1px solid var(--line); } .selector a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.35; } .selector a::after { content: "→"; color: var(--teal); flex: none; transition: transform .2s var(--ease); } .selector a:hover { color: var(--teal-bright); } .selector a:hover::after { transform: translateX(4px); } /* --- The pathway: six stages, the line draws itself ------------------------- */ .pathway { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; counter-reset: stage; } .pathway > li { position: relative; padding: 0 0 var(--s6) 3.25rem; counter-increment: stage; } .pathway > li:last-child { padding-bottom: 0; } .pathway::before, .pathway::after { content: ""; position: absolute; left: 1.05rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; } .pathway::before { background: var(--line-2); } .pathway::after { background: linear-gradient(180deg, var(--teal-bright), var(--teal-deep)); transform-origin: top; transform: scaleY(0); transition: transform 1.6s var(--ease); } .pathway.is-in::after { transform: scaleY(1); } .pathway > li::before { content: counter(stage, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); font-family: var(--font-text); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color .4s, color .4s, box-shadow .4s, background-color .4s; z-index: 1; } .pathway.is-in > li::before { border-color: var(--teal); color: var(--ink); background: var(--surface); box-shadow: 0 0 0 5px rgba(20,172,170,.12); } .pathway h3 { margin-bottom: .35rem; } .pathway p { margin: 0; font-size: .975rem; line-height: 1.55; } @media (min-width: 64rem) { .pathway { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } .pathway > li { padding: 3.75rem 0 0; } .pathway::before, .pathway::after { left: 1.1rem; right: 1.1rem; top: 1.05rem; bottom: auto; width: auto; height: 2px; } .pathway::after { background: linear-gradient(90deg, var(--teal-deep), var(--teal-bright)); transform-origin: left; transform: scaleX(0); } .pathway.is-in::after { transform: scaleX(1); } } @media (prefers-reduced-motion: no-preference) { .pathway > li:nth-child(2)::before { transition-delay: .25s; } .pathway > li:nth-child(3)::before { transition-delay: .5s; } .pathway > li:nth-child(4)::before { transition-delay: .75s; } .pathway > li:nth-child(5)::before { transition-delay: 1s; } .pathway > li:nth-child(6)::before { transition-delay: 1.25s; } } @media (prefers-reduced-motion: reduce) { .pathway::after, .pathway > li::before { transition: none; } } html:not(.js) .pathway::after { transform: none; } html:not(.js) .pathway > li::before { border-color: var(--teal); color: var(--ink); } /* Legacy continuum and journey (membership and RTP pages). */ .continuum, .journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .continuum > li, .journey > li { position: relative; padding: 0 0 var(--s6) var(--s6); border-left: 2px solid var(--line-2); } .continuum > li:last-child, .journey > li:last-child { border-left-color: transparent; padding-bottom: 0; } .continuum > li::before, .journey > li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--teal); } .continuum > li:last-child::before, .journey > li:last-child::before { background: var(--teal); box-shadow: 0 0 0 5px rgba(20,172,170,.15); } .continuum__phase { font-family: var(--font-display); font-size: 1.75rem; color: var(--ink); margin: 0 0 .3rem; line-height: 1.05; } .continuum__def { font-size: .9375rem; color: var(--muted); margin: 0 0 .75rem; } .continuum__stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .continuum__stages li { font-size: .8125rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .2rem .7rem; } .continuum-source { margin-top: var(--s5); font-size: .875rem; color: var(--muted); } .journey__tier { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; } .journey__name { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; margin-bottom: .3rem; } .journey__verbs { font-weight: 700; color: var(--teal); font-size: 1rem; margin: 0 0 .4rem; } .journey p:last-child { margin-bottom: 0; } @media (min-width: 64rem) { .continuum, .journey { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } .continuum > li, .journey > li { border-left: 0; border-top: 2px solid var(--line-2); padding: var(--s5) var(--s3) 0 0; } .continuum > li:last-child, .journey > li:last-child { border-top-color: var(--teal); } .continuum > li::before, .journey > li::before { left: 0; top: -7px; } } /* --- Image band with parallax ---------------------------------------------- */ .imageband { position: relative; min-height: clamp(28rem, 55vw, 42rem); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding: 0; border-block: 1px solid var(--line); } .imageband__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; } .imageband__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .imageband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,16,18,.97) 0%, rgba(7,16,18,.55) 40%, rgba(7,16,18,.1) 100%), linear-gradient(90deg, rgba(7,16,18,.94) 0%, rgba(7,16,18,.7) 38%, transparent 70%); } @media (max-width: 47.99rem) { .imageband::after { background: linear-gradient(0deg, rgba(7,16,18,.98) 0%, rgba(7,16,18,.8) 55%, rgba(7,16,18,.3) 100%); } } .imageband__copy { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); max-width: 42rem; } .imageband__copy h2 { margin-bottom: .35em; } .imageband__caption { font-size: .8125rem; color: var(--muted); margin: 1rem 0 0; } /* --- Media: images inside sections ------------------------------------------ */ .media { position: relative; margin: 0; isolation: isolate; } .media picture { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); } .media img { width: 100%; height: auto; } .media--4x3 img { aspect-ratio: 4 / 3; object-fit: cover; } .media figcaption { font-size: .8125rem; color: var(--muted); margin-top: .8rem; } .media::before { content: ""; position: absolute; inset: -1.5rem auto auto -1.5rem; width: 60%; height: 60%; z-index: -1; border-radius: var(--radius-lg); background: var(--glow-teal); } /* --- Fast bowling feature ----------------------------------------------------- */ .bowling { position: relative; overflow: hidden; isolation: isolate; } .bowling__pitch { position: absolute; z-index: -1; right: -8rem; top: 45%; width: min(60rem, 110vw); transform: translateY(-50%) rotate(-10deg); opacity: .55; pointer-events: none; color: var(--teal); } .bowling__head { display: grid; gap: var(--s5); margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); } @media (min-width: 64rem) { .bowling__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: var(--s8); } } .bowling__title { font-size: clamp(3.75rem, 2rem + 7vw, 8rem); line-height: .88; margin: 0; max-width: none; } .topics { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 40rem) { .topics { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .topics { grid-template-columns: repeat(3, 1fr); } } .topic { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(7,16,18,.6); backdrop-filter: blur(4px); text-decoration: none; color: var(--ink); transition: border-color .25s, background-color .25s, transform .25s var(--ease); height: 100%; } .topic strong { display: block; font-size: 1.0625rem; } .topic span { display: block; font-size: .875rem; color: var(--muted); margin-top: .15rem; } .topic::after { content: "→"; color: var(--teal); transition: transform .25s var(--ease); } .topic:hover { border-color: rgba(20,172,170,.5); background: rgba(20,172,170,.07); color: var(--ink); transform: translateY(-2px); } .topic:hover::after { transform: translateX(4px); } .bowling__foot { margin-top: var(--s7); display: grid; gap: var(--s5); align-items: center; padding: 1.5rem 1.75rem; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(20,172,170,.12), rgba(7,16,18,.6)); } @media (min-width: 64rem) { .bowling__foot { grid-template-columns: 1fr auto; } } .bowling__foot p { margin: 0; } /* --- Seam: the cricket-ball stitch divider ----------------------------------- */ .seam { border: 0; height: 14px; margin: 0 auto; max-width: calc(var(--wrap) + 2 * var(--gutter)); opacity: .6; background: repeating-linear-gradient(90deg, transparent 0 10px, var(--clay) 10px 17px, transparent 17px 28px) 0 2px / 100% 2px no-repeat, linear-gradient(90deg, var(--line-2), var(--line-2)) 0 6px / 100% 1px no-repeat, repeating-linear-gradient(90deg, transparent 0 10px, var(--clay) 10px 17px, transparent 17px 28px) 0 10px / 100% 2px no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); } /* --- Cards ------------------------------------------------------------------- */ .grid { display: grid; gap: 1.25rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .3s, transform .3s var(--ease); } .card :is(h2, h3) { font-family: var(--font-text); font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin-bottom: .5rem; } .card--serif :is(h2, h3) { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; } .card p { font-size: 1rem; margin-bottom: 1rem; } .card__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin: 0 0 .9rem; } .card__link { margin-top: auto; font-weight: 700; font-size: .9375rem; text-decoration: none; color: var(--teal); } .card__link::after { content: " →"; } .card--link:hover { border-color: rgba(20,172,170,.45); transform: translateY(-3px); } .card--link:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; } .card--link :is(h2, h3) a { text-decoration: none; color: var(--ink); } .card--link :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; } .card--link :is(h2, h3) a:focus-visible { outline: none; } .audience { border-left: 2px solid var(--teal); padding-left: 1.25rem; } /* --- Experience ------------------------------------------------------------- */ .quote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.15; color: var(--ink); text-wrap: balance; } .quote::before { content: "“"; display: block; font-size: 1.6em; line-height: .6; color: var(--teal); margin-bottom: .2em; } .quote cite { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font-family: var(--font-text); font-style: normal; font-size: .9375rem; color: var(--muted); } .quote cite img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; } .quote cite strong { color: var(--ink); display: block; } .career { list-style: none; margin: 0; padding: 0; } .career li { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 36rem) { .career li { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: baseline; } } .career li:first-child { border-top: 1px solid var(--line); } .career__level { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .career__orgs { color: var(--ink); font-weight: 600; } .career__orgs span { display: block; color: var(--muted); font-weight: 400; font-size: .9375rem; } /* --- Journal cards ---------------------------------------------------------- */ .journal { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 48rem) { .journal { grid-template-columns: repeat(3, 1fr); } } .jcard { display: flex; flex-direction: column; height: 100%; padding: 1.75rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); transition: border-color .3s, transform .3s var(--ease); } .jcard:hover { border-color: rgba(20,172,170,.45); transform: translateY(-3px); color: var(--text); } .jcard__tag { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(20,172,170,.4); border-radius: var(--radius); padding: .3rem .75rem; margin-bottom: 1.5rem; } .jcard__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.5rem + .8vw, 2.125rem); line-height: 1.08; color: var(--ink); margin: 0 0 .75rem; } .jcard__desc { font-size: .975rem; line-height: 1.55; margin: 0 0 1.5rem; } .jcard__meta { margin-top: auto; display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; } .jcard__meta b { color: var(--teal); font-weight: 700; } .taxonomy { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 var(--s6); padding: 0; } .taxonomy li { font-size: .8125rem; font-weight: 600; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius); padding: .4rem .9rem; } .taxonomy li span { color: var(--muted); margin-left: .35rem; } /* --- Membership components --------------------------------------------------- */ .tiers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 64rem) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 40rem) and (max-width: 63.99rem) { .tiers--clubs { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .tiers--clubs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 60rem; } } .tier { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.25rem 1.75rem 1.75rem; } /* Featured tier: a slowly turning teal border, a text flag and a glow. */ @property --angle { syntax: ""; inherits: false; initial-value: 0deg; } .tier--featured { border-color: transparent; background: linear-gradient(180deg, var(--surface), var(--bg-2)) padding-box, conic-gradient(from var(--angle), var(--teal-deep), var(--teal-bright), var(--teal-deep), var(--teal), var(--teal-deep)) border-box; box-shadow: 0 30px 80px -40px rgba(20,172,170,.6); } @media (prefers-reduced-motion: no-preference) { .tier--featured { animation: turn 8s linear infinite; } } @keyframes turn { to { --angle: 360deg; } } .tier__flag { position: absolute; top: 0; left: 1.75rem; transform: translateY(-50%); background: var(--btn-grad); color: var(--btn-fg); font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: .3rem .8rem; border-radius: var(--radius); margin: 0; } .tier__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; } .tier__name { font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1; margin: 0; } .tier__label { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; } .tier__tagline { font-weight: 600; color: var(--ink); margin: 0 0 1.25rem; line-height: 1.45; } .tier__price { margin: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .tier__amount { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; } .tier__per { color: var(--muted); font-size: .9375rem; } .tier__alt { list-style: none; margin: .7rem 0 1.25rem; padding: 0; font-size: .9375rem; color: var(--muted); } .tier__alt li { padding: .1rem 0; } .tier__feels { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--text); border-left: 2px solid var(--teal); padding-left: .9rem; margin: 0 0 1.25rem; } .tier__best { font-size: .9375rem; margin: 0 0 1rem; } .tier__best strong { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .2rem; } .tier__cta { margin-top: auto; padding-top: var(--s4); display: grid; gap: .7rem; } .tier__meta { font-size: .8125rem; color: var(--muted); margin: .25rem 0 0; } .tier__more { font-size: .9375rem; font-weight: 700; text-align: center; } .tier__group { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .3rem; } .tier details { border-top: 1px solid var(--line); margin-top: .25rem; } .tier summary { cursor: pointer; font-weight: 700; color: var(--teal); padding: .85rem 0; min-height: 44px; list-style: none; display: flex; justify-content: space-between; align-items: center; } .tier summary::-webkit-details-marker { display: none; } .tier summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--muted); } .tier details[open] summary::after { content: "−"; } .ticks { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .9375rem; line-height: 1.5; } .ticks li { position: relative; padding: .32rem 0 .32rem 1.7rem; } .ticks li::before { content: ""; position: absolute; left: .15rem; top: .68rem; width: .8rem; height: .45rem; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); } .ticks--no li::before { border: 0; width: .7rem; height: 2px; top: 1.02rem; left: .2rem; background: var(--muted); transform: none; } .ticks--no li { color: var(--muted); } /* Comparison table: a real table from 768px, grouped blocks below. */ .compare-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); } .compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; line-height: 1.45; } .compare :is(th, td) { text-align: left; vertical-align: top; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); } .compare thead th { position: sticky; top: 4rem; z-index: 2; background: var(--surface); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-top: 1.1rem; } .compare thead th:first-child { border-top-left-radius: var(--radius-lg); } .compare thead th:last-child { border-top-right-radius: var(--radius-lg); } .compare thead th span { display: block; font-family: var(--font-text); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .compare tbody th { font-weight: 600; color: var(--ink); width: 26%; } .compare .compare__group th { background: var(--bg-2); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); padding-block: .6rem; } .compare .is-featured { background: rgba(20,172,170,.06); } .compare thead .is-featured { background: var(--surface); box-shadow: inset 0 3px 0 var(--teal); } .compare .v-yes::before { content: "✓"; content: "✓" / ""; display: inline-block; width: 1.2rem; font-weight: 700; color: var(--teal); } .compare .v-no { color: var(--muted); } .compare tbody:last-child tr:last-child > * { border-bottom: 0; } @media (max-width: 47.99rem) { .compare-wrap { background: transparent; border: 0; border-radius: 0; } .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; } .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .compare tbody tr { padding: .95rem 0; border-bottom: 1px solid var(--line); } .compare tbody th, .compare td { border: 0; padding: 0; } .compare tbody th { font-size: 1rem; margin-bottom: .4rem; width: 100%; } .compare td { display: grid; grid-template-columns: 8.75rem 1fr; gap: .75rem; padding: .2rem 0; } .compare td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: .8125rem; } .compare .is-featured { background: transparent; } .compare td.is-featured::before { color: var(--teal); } .compare .compare__group { border-bottom: 0; padding: 1.75rem 0 0; } .compare .compare__group th { background: transparent; padding: 0 0 .5rem; border-bottom: 1px solid var(--teal); } } .datatable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .datatable :is(th, td) { text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .datatable thead th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--bg-2); } .datatable tbody th { color: var(--ink); font-weight: 600; } .datatable td.num, .datatable th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .datatable tr:last-child > * { border-bottom: 0; } .datatable .strike { color: var(--muted); } @media (max-width: 35.99rem) { .datatable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .datatable--stack, .datatable--stack tbody, .datatable--stack tr, .datatable--stack th, .datatable--stack td { display: block; width: 100%; } .datatable--stack tr { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); } .datatable--stack tr:last-child { border-bottom: 0; } .datatable--stack :is(th, td) { border: 0; padding: .15rem 0; } .datatable--stack td { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .75rem; text-align: left !important; } .datatable--stack { table-layout: fixed; } .datatable--stack td, .datatable--stack th { min-width: 0; overflow-wrap: anywhere; } .datatable--stack td::before { content: attr(data-label); color: var(--muted); font-weight: 700; font-size: .8125rem; } } .scenarios { display: grid; gap: var(--s6) var(--s7); margin: 0; } @media (min-width: 48rem) { .scenarios { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .scenarios { grid-template-columns: repeat(3, 1fr); } } .scenarios > div { border-top: 1px solid var(--line-2); padding-top: var(--s4); } .scenarios dt { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; } .scenarios dd { margin: 0; } .scenarios dd p { margin: 0 0 .6rem; } .scenarios .fit { font-size: .9375rem; color: var(--muted); } .scenarios .fit a { font-weight: 700; } .versus { display: grid; gap: var(--s5); } @media (min-width: 48rem) { .versus { grid-template-columns: 1fr 1fr; gap: var(--s7); } } .versus h3 { font-size: 1.125rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line-2); } .versus > div:last-child h3 { border-bottom: 2px solid var(--teal); color: var(--teal); } .versus ul { list-style: none; margin: 0; padding: 0; } .versus li { padding: .75rem 0; border-bottom: 1px solid var(--line); } .versus > div:first-child li { color: var(--muted); } .lines { list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem); color: var(--ink); line-height: 1.15; } .lines li { padding: .6rem 0; border-bottom: 1px solid var(--line); } .lines li:last-child { color: var(--teal); font-style: italic; border-bottom: 0; } .tierlist { margin: var(--s5) 0; border-top: 1px solid var(--line); } .tierlist > div { display: grid; gap: .15rem .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 36rem) { .tierlist > div { grid-template-columns: 12rem 1fr; } } .tierlist dt { font-weight: 700; color: var(--ink); } .tierlist dd { margin: 0; } .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s6) var(--s5); } @media (min-width: 48rem) { .steps--4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 64rem) { .steps--4 { grid-template-columns: repeat(4, 1fr); } } .steps > li { counter-increment: step; position: relative; padding-top: 3.25rem; } .steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-style: italic; font-size: 2rem; line-height: 1; color: var(--teal); } .steps > li::after { content: ""; position: absolute; top: 1rem; left: 3.25rem; right: 0; height: 1px; background: var(--line-2); } .steps h3 { font-size: 1.125rem; margin-bottom: .35rem; } .steps p { font-size: 1rem; margin: 0; } .profile { display: grid; gap: var(--s6); align-items: start; } @media (min-width: 48rem) { .profile { grid-template-columns: 16rem 1fr; gap: var(--s7); } } .profile__img { width: 100%; max-width: 16rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius-lg); background: var(--surface); } .profile__role { color: var(--muted); } .facts { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: .5rem 2rem; font-size: .9375rem; } @media (min-width: 36rem) { .facts { grid-template-columns: 1fr 1fr; } } .facts li { border-top: 1px solid var(--line); padding-top: .55rem; } .articles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .articles li { border-bottom: 1px solid var(--line); } .articles a { display: grid; gap: .25rem; padding: 1.25rem 0; text-decoration: none; color: var(--text); } @media (min-width: 48rem) { .articles a { grid-template-columns: 11rem 1fr auto; gap: 1.5rem; align-items: baseline; } } .articles__cat { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .articles__title { font-family: var(--font-display); font-size: 1.625rem; color: var(--ink); line-height: 1.1; display: block; } .articles__desc { display: block; font-size: 1rem; margin-top: .25rem; } .articles__date { font-size: .8125rem; color: var(--muted); white-space: nowrap; } .articles a:hover .articles__title { color: var(--teal-bright); } .notice { border-left: 2px solid var(--teal); padding: .25rem 0 .25rem 1.25rem; margin: var(--s5) 0; } .notice > :last-child { margin-bottom: 0; } .notice--sand { border-left-color: var(--clay); } .callout { background: var(--accent-wash); border: 1px solid rgba(20,172,170,.25); border-radius: var(--radius-lg); padding: 1.4rem 1.6rem; margin: 2em 0; } .callout > :last-child { margin-bottom: 0; } .callout :is(h2, h3) { font-family: var(--font-text); font-weight: 700; font-size: 1.0625rem; margin: 0 0 .4rem; } /* --- CTA band ---------------------------------------------------------------- */ .cta-band { text-align: center; border-top: 1px solid var(--line); } .cta-band .wrap { max-width: calc(52rem + 2 * var(--gutter)); } .cta-band h2 { margin-inline: auto; max-width: 18ch; } .cta-band .lede { margin-inline: auto; } .cta-band .hero__cta { justify-content: center; } .cta-band .fitlist { margin-inline: auto; text-align: left; } .cta-band::before { inset: auto -10% -40%; height: 140%; background: radial-gradient(50% 50% at 50% 100%, rgba(20,172,170,.28), transparent 70%); } .fitlist { list-style: none; margin: var(--s5) 0 0; padding: 0; max-width: 44rem; } .fitlist li { padding: .75rem 0; border-top: 1px solid var(--line); } .fitlist li:last-child { border-bottom: 1px solid var(--line); } .fitlist a { font-weight: 700; } /* --- Phone action bar: Call, Ask, Book ------------------------------------------ The same bar as bridgeroad.physio, on every page up to 900px. It replaces the header Book button there, so the header is the logo and Menu only. The Ask button needs JavaScript and hides without it (see the no-JS rules). */ .actionbar { display: none; } @media (max-width: 56.25rem) { /* Keyboard focus scrolls clear of the bar (WCAG 2.2, 2.4.11). */ html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } .hdr .hdr__book { display: none; } .actionbar { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 105; display: flex; gap: .5rem; } .actionbar > * { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; padding-inline: 1.1rem; border-radius: var(--radius); font: 600 1rem/1 var(--font-text); text-decoration: none; box-shadow: 0 12px 30px -8px rgba(0,0,0,.8); cursor: pointer; } .actionbar__call, .actionbar__ask { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); } .actionbar__call:hover, .actionbar__ask:hover { border-color: var(--teal); } .actionbar__book { flex: 1; background: var(--btn-grad); color: var(--btn-fg); border: 0; } .actionbar svg { width: 18px; height: 18px; flex: none; } .totop { display: none !important; } } /* --- Prose ------------------------------------------------------------------- */ .prose { max-width: var(--measure); } .prose :is(h2, h3) { margin-top: 1.8em; } .prose h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.3em; } .prose li { margin-bottom: .55em; } .prose li::marker { color: var(--teal); } .prose blockquote { margin: 1.8em 0; padding: .2em 0 .2em 1.3rem; border-left: 2px solid var(--teal); color: var(--ink); font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.3; } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95rem; } .prose :is(th, td) { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line); } .prose th { color: var(--ink); } .meta { font-size: .875rem; color: var(--muted); margin-bottom: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); } .meta dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0; } .meta dt { font-weight: 700; color: var(--text); } .meta dd { margin: 0; } .refs { font-size: .9rem; } .refs ol { padding-left: 1.2rem; } .refs li { margin-bottom: .7em; color: var(--muted); } /* Scroll progress, every page. script.js sets --p from 0 to 1. */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--teal-deep), var(--teal-bright)); z-index: 150; pointer-events: none; } /* --- FAQ --------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; padding: 1.2rem 3rem 1.2rem 0; position: relative; font-weight: 700; color: var(--ink); font-size: 1.0625rem; list-style: none; min-height: 52px; display: flex; align-items: center; line-height: 1.4; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-weight: 400; font-size: 1.1rem; color: var(--teal); transition: transform .3s var(--ease), background-color .3s; } .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: rgba(20,172,170,.12); } .faq summary:hover { color: var(--teal-bright); } .faq .faq__a { padding: 0 0 1.4rem; max-width: var(--measure); } .faq .faq__a > :last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } } /* --- Forms ------------------------------------------------------------------- */ .form { max-width: 46rem; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .form fieldset { border: 0; padding: 0; margin: 0 0 var(--s6); min-width: 0; } .form legend { font-family: var(--font-display); font-size: 1.75rem; color: var(--ink); padding: 0; margin-bottom: var(--s4); } .fieldrow { display: grid; gap: 0 var(--s5); } @media (min-width: 40rem) { .fieldrow { grid-template-columns: 1fr 1fr; } } .field { margin-bottom: 1.2rem; } .field > label, .field > .label { display: block; font-weight: 700; color: var(--ink); font-size: .9375rem; margin-bottom: .4rem; } .field .opt { font-weight: 400; color: var(--muted); } .field .hint { font-size: .875rem; color: var(--muted); margin: -.15rem 0 .45rem; line-height: 1.5; } .field :is(input, textarea, select) { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .8rem .9rem; min-height: 50px; transition: border-color .2s, box-shadow .2s; } .field select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .field textarea { min-height: 7.5rem; resize: vertical; } .field :is(input, textarea, select):focus-visible { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,172,170,.15); } .field[data-invalid="true"] :is(input, textarea, select) { border-color: var(--danger); border-width: 2px; } .field .err { display: none; color: var(--danger); font-size: .875rem; font-weight: 700; margin: .4rem 0 0; } .field .err::before { content: "✕ "; } .field[data-invalid="true"] .err { display: block; } .check { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.5; } .field > label.check { display: flex; font-weight: 400; color: var(--text); } .check input, .field .check input { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; flex: none; margin: .15rem 0 0; accent-color: var(--teal); } .fieldrow .check { margin-bottom: .5rem; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formnote { font-size: .875rem; color: var(--muted); } .formstatus { margin-top: 1rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm); display: none; font-size: .9375rem; } .formstatus[data-state="ok"] { display: block; background: var(--accent-wash); border: 1px solid var(--teal); color: var(--ink); } .formstatus[data-state="err"] { display: block; border: 1px solid var(--danger); color: var(--ink); } .formstatus > :last-child { margin-bottom: 0; } .spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: none; } .btn[data-loading="true"] .spinner { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } } /* --- Footer ------------------------------------------------------------------ */ .ftr { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line); padding-block: var(--s9) var(--s6); font-size: .9375rem; } .ftr::before { content: ""; position: absolute; inset: -60% -10% auto; height: 100%; z-index: -1; background: radial-gradient(40% 50% at 50% 100%, rgba(20,172,170,.14), transparent 70%); pointer-events: none; } .ftr__top { display: grid; gap: var(--s6); margin-bottom: var(--s8); align-items: end; } @media (min-width: 64rem) { .ftr__top { grid-template-columns: 1fr auto; } } .ftr__logo { display: inline-block; margin-bottom: 1.5rem; } .ftr__logo img { height: 84px; width: auto; } .ftr__line { color: var(--text); margin: 0; max-width: 36rem; font-size: 1rem; } .ftr__line strong { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; display: block; margin-bottom: .35rem; } .ftr__grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); } .ftr h2 { font-family: var(--font-text); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; } .ftr ul { list-style: none; margin: 0; padding: 0; } .ftr li a { display: inline-block; padding: .3rem 0; } .ftr a:not(.btn) { color: var(--text); text-decoration: none; } .ftr a:not(.btn):hover { color: var(--ink); } .ftr__grid--4 { grid-template-columns: 1fr; } @media (min-width: 48rem) { .ftr__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .ftr__grid--4 { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s7); } } .ftr__brand .ftr__line { margin-bottom: 1.25rem; } .ftr__nap, .ftr__contact, .ftr__hours { color: var(--text); margin: 0 0 .9rem; line-height: 1.6; } .ftr__contact a { display: inline-block; padding: .15rem 0; } .ftr__brand .ftr__social { margin-top: 1rem; } .ftr__book { margin: 1.25rem 0 0; } .ftr__legal { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; display: grid; gap: var(--s4); } @media (min-width: 64rem) { .ftr__legal { grid-template-columns: 1fr auto; align-items: start; } } .ftr__legal p { margin-bottom: .5em; max-width: 72ch; } .ftr__legal a:not(.btn) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); } .ftr__social { display: flex; gap: .6rem; } /* --- Back to top ------------------------------------------------------------- */ /* As on bridgeroad.physio: 48px, bottom right, after 800px of scroll, and above 900px only, because on phones the action bar owns the bottom of the screen. */ .totop { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 48px; height: 48px; opacity: 0; visibility: hidden; background: var(--surface); box-shadow: 0 10px 26px -6px rgba(0,0,0,.8); transition: opacity .25s, visibility .25s, transform .2s, border-color .2s; } .totop[data-show="true"] { opacity: 1; visibility: visible; } .totop:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .totop, .totop:hover { transition: none; transform: none; } } /* --- Reveal on scroll -------------------------------------------------------- script.js marks elements with [data-reveal] and adds .is-in as they enter the viewport. Without JavaScript, nothing is hidden. */ @media (prefers-reduced-motion: no-preference) { html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); } html.js [data-reveal].is-in { opacity: 1; transform: none; } } /* --- Utility ----------------------------------------------------------------- */ .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .crumbs { font-size: .8125rem; color: var(--muted); margin: 0 0 1.5rem; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--muted); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--teal); } nav.wrap.crumbs { padding-top: 1.5rem; margin-bottom: 0; } nav.crumbs + main > section:first-child { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); } .stack > * + * { margin-top: 1.5rem; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); } .mt-7 { margin-top: var(--s7); } .tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; } .tags li { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--radius); padding: .25rem .7rem; } /* --- Print ------------------------------------------------------------------- */ @media print { .hdr, .ftr, .totop, .progress, .hero__cta, .callout--cta, .actionbar, .noprint, .selector, .marquee, .orgbar { display: none !important; } body::after { display: none; } html, body { background: #fff; color: #000; font-size: 11pt; } :is(h1, h2, h3, h4, strong) { color: #000; } a { color: #000; text-decoration: underline; } section { padding-block: .6rem; } .wrap { max-width: none; padding: 0; } [data-reveal] { opacity: 1 !important; transform: none !important; } } /* --- Help list: "I need help with..." rows (Work with me) ------------------ */ .helplist { border-top: 1px solid var(--line); } .help { display: grid; gap: 1rem var(--s8); padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hdr) + 1rem); } @media (min-width: 64rem) { .help { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .help__num { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--teal); margin: 0 0 .5rem; } .help__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.5vw, 2.875rem); line-height: 1.02; color: var(--ink); margin: 0; } .help__body > :last-child { margin-bottom: 0; } .help__body .lede { margin-bottom: 1rem; } .help__cta { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 1.25rem; } .help:target { background: linear-gradient(90deg, rgba(20,172,170,.06), transparent 60%); } /* Fixes after the v2 visual pass. */ nav.wrap.crumbs { margin: 0 auto; } .prose .callout :is(h2, h3) { font-family: var(--font-text); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0; margin: 0 0 .4rem; } @media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 63.99rem) { .hero__portrait::before { display: none; } } /* Text-only heroes carry a faint crease diagram on the right, desktop only: popping crease, bowling crease, return creases and stumps. */ @media (min-width: 64rem) { .hero--animate::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: max(-6rem, calc((100vw - 90rem) / 2)); top: 50%; width: 46rem; height: 32rem; opacity: .5; transform: translateY(-50%) rotate(-9deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 300' fill='none' stroke='%2314ACAA'%3E%3Crect x='20' y='70' width='420' height='160' stroke-opacity='.3'/%3E%3Cpath d='M130 20v260' stroke-opacity='.75' stroke-width='2'/%3E%3Cpath d='M70 70v160' stroke-opacity='.55' stroke-width='2'/%3E%3Cpath d='M130 104H40M130 196H40' stroke-opacity='.4'/%3E%3Cpath d='M190 150h250' stroke-opacity='.2' stroke-dasharray='4 10'/%3E%3Ccircle cx='70' cy='138' r='3.5' fill='%2314ACAA' stroke='none'/%3E%3Ccircle cx='70' cy='150' r='3.5' fill='%2314ACAA' stroke='none'/%3E%3Ccircle cx='70' cy='162' r='3.5' fill='%2314ACAA' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); } } .hero__portrait--landscape img { aspect-ratio: 5 / 4.2; object-position: 40% center; } @media (max-width: 63.99rem) { .hero__portrait--landscape img { aspect-ratio: 4 / 3; } } /* Tablet: the stacked hero photo runs the full measure in a landscape crop, so it does not leave half the row empty beside it. */ @media (min-width: 48rem) and (max-width: 63.99rem) { .hero__portrait { max-width: none; } .hero__portrait img { aspect-ratio: 3 / 2; object-position: 50% 8%; } .hero__portrait--landscape img { aspect-ratio: 3 / 2; object-position: 40% 0%; } } /* --- Slide-out menu ------------------------------------------------------------ Opens from the right at every width. The middle scrolls; the head and the actions at the foot stay put, so Book, Call, WhatsApp and Ask are always in reach on a small phone. Without JavaScript the menu does not exist and the footer carries every link. */ .drawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(3, 8, 9, .66); touch-action: none; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; } .menu-open .drawer-scrim { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(25rem, calc(100vw - 2.5rem)); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--bg-2) 60%); border-left: 1px solid var(--line-2); box-shadow: -30px 0 80px -30px rgba(0,0,0,.95); touch-action: pan-y; transform: translateX(100%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s linear .32s; } .menu-open .drawer { transform: none; visibility: visible; transition: transform .32s var(--ease); } .drawer.is-dragging { transition: none; } html.menu-open, html.menu-open body { overflow: hidden; } html:not(.js) .drawer, html:not(.js) .drawer-scrim { display: none; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; padding: .6rem .75rem .6rem 1.25rem; border-bottom: 1px solid var(--line); } .drawer__title { font-family: var(--font-display); font-size: 1.875rem; line-height: 1; color: var(--ink); margin: 0; } .drawer__close { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .95rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; } .drawer__close:hover { border-color: var(--teal); } .drawer__close svg { width: 18px; height: 18px; } .drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1.25rem 1.5rem; } .dgroup { border-bottom: 1px solid var(--line); } .dgroup__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .8rem 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: 1.0625rem; font-weight: 700; text-align: left; cursor: pointer; } .dgroup__btn:hover { color: var(--teal-bright); } .dgroup__btn svg { width: 20px; height: 20px; flex: none; color: var(--teal); transition: transform .25s var(--ease); } .dgroup__btn[aria-expanded="true"] svg { transform: rotate(180deg); } .dgroup__list { list-style: none; margin: 0 0 .75rem; padding: 0; } .dgroup__list a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 44px; margin: 0 -.75rem; padding: .5rem .75rem; border-radius: 12px; color: var(--text); text-decoration: none; font-size: 1rem; line-height: 1.35; transition: background-color .2s, color .2s; } .dgroup__list a:hover { background: var(--accent-wash); color: var(--ink); } .dgroup__list a[aria-current="page"] { color: var(--ink); font-weight: 700; background: var(--accent-wash); } .dgroup__list a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 2px; border-radius: 2px; background: var(--teal); } .dgroup__list .dsub { padding: .85rem .75rem .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .dgroup__list .dsub:first-child { padding-top: .25rem; } .dgroup__list .dlink--all { color: var(--teal); font-weight: 700; } .dgroup__list .dlink--all::after { content: "→"; } .dlink__note { flex: none; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(20,172,170,.4); border-radius: var(--radius); padding: .15rem .55rem; } @media (prefers-reduced-motion: no-preference) { .dgroup__list:not([hidden]) { animation: listin .25s var(--ease); } .menu-open .dgroup { animation: rise .45s var(--ease) both; } .menu-open .dgroup:nth-child(2) { animation-delay: .03s; } .menu-open .dgroup:nth-child(3) { animation-delay: .06s; } .menu-open .dgroup:nth-child(4) { animation-delay: .09s; } .menu-open .dgroup:nth-child(5) { animation-delay: .12s; } .menu-open .dgroup:nth-child(6) { animation-delay: .15s; } } @keyframes listin { from { opacity: 0; transform: translateY(-4px); } } .drawer__clinic { margin-top: 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); font-size: .9375rem; line-height: 1.55; } .drawer__clinic p { margin: 0 0 .25rem; } .drawer__clinic .textlink { min-height: 44px; align-items: center; } .drawer__label { font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .drawer__foot { flex: none; display: grid; gap: .6rem; padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(10,22,24,.97); } .drawer__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 64px; padding: .45rem .3rem; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink); text-decoration: none; font: inherit; text-align: center; line-height: 1.2; cursor: pointer; transition: border-color .2s, background-color .2s; } .action:hover { border-color: var(--teal); background: var(--accent-wash); color: var(--ink); } .action svg { width: 20px; height: 20px; margin-bottom: .2rem; color: var(--teal); } .action__label { font-size: .8125rem; font-weight: 700; } .action__sub { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } a.action[href^="tel:"] .action__sub { letter-spacing: 0; white-space: nowrap; } @media (max-width: 22.5rem) { .action { padding-inline: .15rem; } } [data-chat-open][aria-busy="true"] { cursor: progress; } [data-chat-open][aria-busy="true"] svg { animation: pulse 1s var(--ease) infinite; } @keyframes pulse { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim, .menu-open .drawer, .menu-open .drawer-scrim, .dgroup__btn svg { transition: none; } [data-chat-open][aria-busy="true"] svg { animation: none; } } /* --- Chat assistant ------------------------------------------------------------ Its styles live in _partials/chat.css and load with chat.js, only when someone opens it. What stays here is the small panel script.js shows if chat.js fails to load. */ .chatfb { position: fixed; z-index: 130; right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); padding: 1.1rem 1.2rem 1.25rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow-2); } .chatfb__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; } .chatfb__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--ink); margin: 0; } .chatfb button { min-height: 44px; padding: .45rem .9rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .chatfb p { margin: 0; font-size: .9375rem; } /* --- FAQ page: group links and the filter --------------------------------------- */ .faqnav ul { list-style: none; margin: 0 0 var(--s7); padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .faqnav a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: var(--radius); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 600; transition: border-color .2s, background-color .2s; } .faqnav a:hover { border-color: var(--teal); background: var(--accent-wash); color: var(--ink); } .faqtools { max-width: 34rem; margin: 0 0 var(--s5); } .faqtools label { display: block; font-weight: 700; color: var(--ink); font-size: .9375rem; margin-bottom: .45rem; } .faqtools input { width: 100%; min-height: 50px; padding: .75rem 1.15rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); } .faqtools input:focus-visible { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,172,170,.15); } .faqtools__status { min-height: 1.6em; margin: .5rem 0 0; font-size: .9375rem; color: var(--muted); } .faqgroup { scroll-margin-top: calc(var(--hdr) + 1rem); } .faqgroup + .faqgroup { margin-top: var(--s8); } .faqgroup h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); } .faq details { scroll-margin-top: calc(var(--hdr) + 1rem); } .faq .faq__a :is(ul, ol) { padding-left: 1.3rem; margin: 0 0 1em; } .faq .faq__a li { margin-bottom: .4em; } .faq .faq__a li::marker { color: var(--teal); } /* --- Fees ------------------------------------------------------------------------ */ .feelist { list-style: none; margin: 0 0 1em; padding: 0; border-top: 1px solid var(--line); } .feelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); } .feelist strong { text-align: right; font-variant-numeric: tabular-nums; } .feelist .feelist__pending { max-width: 55%; font-weight: 600; color: var(--muted); } .feetable .feetable__group th { background: var(--bg-2); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .feetable td:last-child { color: var(--text); } .feetable__pending { color: var(--muted); font-weight: 600; white-space: normal; } .feetable tr[id] { scroll-margin-top: calc(var(--hdr) + 1rem); } .chooser { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .chooser li { display: grid; gap: .3rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 48rem) { .chooser li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } } .chooser__when { color: var(--ink); font-weight: 600; } .chooser__pick { color: var(--text); } .chooser__pick strong { color: var(--teal); } /* --- Journal sections and related guides ------------------------------------------ */ .jcard .jcard__title { margin-top: 0; } .journal > li[hidden] { display: none; } .journal--compact { grid-template-columns: 1fr; } @media (min-width: 40rem) { .journal--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .wrap:not(.prose) > .journal--compact, section > .wrap > .journal--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .journal--compact .jcard { padding: 1.35rem 1.4rem; } .journal--compact .jcard__tag { margin-bottom: 1rem; } .journal--compact .jcard .jcard__title { font-size: 1.5rem; line-height: 1.1; } .related { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); } .prose .related h2 { margin-top: 0; } /* --- Contact routes ---------------------------------------------------------------- */ .routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } @media (min-width: 48rem) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 75rem) { .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .route { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .route h3 { margin-bottom: .35rem; } .route p { font-size: 1rem; } .route__note { font-size: .9375rem; color: var(--muted); } .route__go { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .route--wa .route__label { color: var(--teal); } @media print { .drawer, .drawer-scrim, .chat, .menubtn, .faqtools { display: none !important; } } html:not(.js) button[data-chat-open], html:not(.js) [data-faq-tools] { display: none; } h2.h3 { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); line-height: 1.3; letter-spacing: -.012em; margin: 0 0 .45em; } /* --- Guide cards: topic icon, feature card, Journal sections ------------------------ */ .jcard__body { display: flex; flex-direction: column; flex: 1; min-width: 0; } .jcard__top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .jcard__top .jcard__tag { margin: 0; } .jcard__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 14px; color: var(--teal); background: var(--accent-wash); border: 1px solid rgba(20,172,170,.28); } .jcard__icon svg { width: 1.45rem; height: 1.45rem; } .jcard:hover .jcard__icon { background: var(--teal); color: var(--btn-fg); } .journal--compact .jcard__top { margin-bottom: .9rem; } .journal--compact .jcard__icon { width: 2.4rem; height: 2.4rem; border-radius: 12px; } .journal--compact .jcard__icon svg { width: 1.25rem; height: 1.25rem; } .jcard--feature { padding: 0; overflow: hidden; } .jcard__art { display: block; position: relative; overflow: hidden; background: var(--bg-2); } .jcard__art img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .jcard--feature .jcard__body { padding: 1.5rem 1.75rem 1.75rem; } .jnav { margin: 0 0 var(--s5); } .jnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 48rem) { .jnav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .jnav a { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .6rem .9rem; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .25s, transform .25s var(--ease); } .jnav a:hover { border-color: var(--teal); transform: translateY(-2px); color: var(--ink); } .jnav__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 12px; background: var(--accent-wash); color: var(--teal); } .jnav__icon svg { width: 1.2rem; height: 1.2rem; } .jnav__label { flex: 1; min-width: 0; } .jnav__n, .jsec__n { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; } .jsec { scroll-margin-top: 6rem; } .jsec + .jsec { margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--line); } .jsec__head { display: flex; align-items: center; gap: 1rem; margin: 0 0 var(--s5); } .jsec__head h2 { margin: 0; } .jsec__icon { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 16px; color: var(--teal); background: var(--accent-wash); border: 1px solid rgba(20,172,170,.28); } .jsec__icon svg { width: 1.7rem; height: 1.7rem; } .jsec__n { margin-left: auto; align-self: flex-end; } @media (min-width: 64rem) { .jsec .journal > li:first-child:has(.jcard--feature) { grid-column: span 2; } .jcard--feature { flex-direction: row; } .jcard--feature .jcard__art { flex: 0 0 52%; } .jcard--feature .jcard__art img { aspect-ratio: auto; object-position: 60% 50%; } .jcard--feature .jcard__body { padding: 2rem; justify-content: center; } .jcard--feature .jcard__title { font-size: clamp(2rem, 1.6rem + .8vw, 2.5rem); } } .hero--art { position: relative; overflow: hidden; } .hero--art > .wrap { position: relative; z-index: 1; } .hero__art { display: none; } @media (min-width: 64rem) { .hero__art { display: block; position: absolute; inset: 0 0 0 auto; width: 52%; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); } .hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: .85; } } .prose > .journal { padding: 0; margin: var(--s5) 0; } @media (max-width: 29.99rem) { .jnav__icon { display: none; } }