/* ========================================================================== White Physiotherapy: base styles 1. Tokens 2. Base 3. Typography 4. Layout 5. Pills 6. Buttons 7. Header + nav 8. Utilities 9. Footer 10. Back to top 11. Homepage hero 12. Stats bar 13. Pathways 14. Conditions (programme + home-visit cards) 15. Virtual recovery programs 16. Pricing 17. Highlight (.hl) 18. Video cards + patient stories 19. Why White 20. Studio teaser 21. FAQ 22. Fraud notice 23. Final call to action 24. WhatsApp button, bold text, count-up 25. Home-visit page (/home-service): header button, hero, trust strip, "sounds familiar" quotes, "why quick fixes fail" cards, why home visits, what a home visit looks like, swipe carousel, treatment samples, patients, team, how it works, "first step" surgery comparison, condition cards, what is included, home or studio, pain medication, why choose us, final call to action 26. Studio page (/studio): hero with Ota / Osogbo buttons, choose your studio cards, what you get, how it works, inside our studios (photo carousels), patient stories, can't come to the studio, FAQ, final call to action 27. Programme pages (/programmes/...): logo-only top bar, deep blue hero, "sounds like your life" quotes, "honest truth" list with red crosses, real-causes box with arrow bullets, free sample video, testimonials (deep blue, four video cards), 30-day phases (three cards), everything included (deep blue), "is this right for you", pricing card, money-back guarantee, FAQ cards, "is this a scam" trust section, final decision 10b. Floating WhatsApp button (every page) 28. Registration form modal (programme pages) 29. Payment page (/payment): three-step tracker, exact amount, 30-minute hold bar and box, account details with copy button, what happens next 30. Home-visit booking quiz (/home-service): progress bar, four steps (details, problems, state and area, price), bottom bar Fonts are loaded from Google Fonts in each page's . ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { /* Brand blue (sampled from the logo) and its shades */ --blue: #004AAD; --blue-hover: #003A8A; --blue-deep: #002F70; /* replaces Therafit's dark green blocks */ --blue-night: #001F4D; /* footer: a step darker so it separates from the deep blue CTA above it */ --blue-tint: #EAF1FB; /* replaces Therafit's mint tint */ --blue-line: #D5E2F5; /* Accent (replaces Therafit's gold) */ --accent: #FF66C4; /* pink: use on dark blue, badges, dashes */ --accent-hover: #FF80CE; --accent-ink: #B0157F; /* darker pink for text on white (passes contrast) */ --lilac: #CB6CE6; /* Text and surfaces */ --ink: #14181F; --text: #4A5160; --muted: #6B7280; --white: #FFFFFF; --bg-soft: #F5F8FD; --cream: #FFF6E5; /* fee and payment notes */ --cream-line: #F0DDB0; --danger: #B42318; /* "do not register if" boxes, warnings */ --danger-bg: #FDEDEC; --danger-line: #F5C2BD; /* Type */ --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Shape and depth */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 47, 112, .06), 0 4px 12px -4px rgba(0, 47, 112, .10); --shadow: 0 2px 4px rgba(0, 47, 112, .05), 0 14px 32px -12px rgba(0, 47, 112, .22); --header-h: 72px; --focus: #004AAD; } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); color-scheme: light; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--blue); } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .7rem 1rem; background: var(--blue); color: #fff; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 1rem; } /* 3. Typography ------------------------------------------------------------ */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { margin: 0 0 .6em; font-family: var(--font-serif); font-weight: 700; line-height: 1.15; color: var(--ink); text-wrap: balance; } h1, .h1 { font-size: clamp(2.1rem, 1.2rem + 5vw, 4.25rem); line-height: 1.1; } h2, .h2 { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.75rem); } h3, .h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); } h4, .h4 { font-size: 1.1rem; } p { margin: 0 0 1em; } .lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.7; } /* Accent phrase inside a headline: italic. Brand blue on light, pink on dark. */ .accent-italic { font-style: italic; color: var(--blue); } .italic { font-style: italic; } .text-accent { color: var(--accent); } .text-brand { color: var(--blue); } .text-deep { color: var(--blue-deep); } /* Short accent underline dash under left-aligned headings */ .dash::after { content: ""; display: block; width: 56px; height: 4px; margin-top: .8rem; border-radius: 4px; background: var(--accent); } /* 4. Layout ---------------------------------------------------------------- */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } .container--narrow { max-width: 820px; } @media (min-width: 768px) { .container { padding-inline: 2rem; } } .section { padding-block: clamp(3.5rem, 8vw, 6rem); } .section--soft { background: var(--bg-soft); } .section--tint { background: var(--blue-tint); } .section--dark { background: var(--blue-deep); color: rgba(255, 255, 255, .82); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark a:not(.btn) { color: #fff; } .section--dark .accent-italic { color: var(--accent); } .section--dark :focus-visible { outline-color: #fff; } .section-head { max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3rem); text-align: center; } .section-head .pill { margin-bottom: 1.1rem; } /* 5. Pills (section labels, badges, chips) --------------------------------- */ .pill { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .6rem 1.15rem; font-family: var(--font-sans); font-size: .75rem; font-weight: 600; line-height: 1.45; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--blue-deep); background: var(--blue-tint); border: 1px solid rgba(0, 74, 173, .22); border-radius: var(--r-pill); } /* Small dot before the text */ .pill--dot::before { content: ""; flex: none; width: .42rem; height: .42rem; border-radius: 50%; background: var(--blue); } /* Full-width pill for the hero label: text centred, dot pinned to the left */ .pill--block { display: flex; width: 100%; font-size: .69rem; letter-spacing: .08em; } .pill--block.pill--dot { position: relative; padding-inline: 1.9rem; } .pill--block.pill--dot::before { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); } .pill--sm { padding: .35rem .8rem; font-size: .68rem; } .pill--on-dark { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); } .pill--on-dark.pill--dot::before { background: var(--accent); } /* Badge, e.g. MOST POPULAR */ .pill--accent { color: var(--blue-deep); background: var(--accent); border-color: var(--accent); } /* Trust chips: CAC Registered, Licensed Physiotherapist, etc. */ .pill--outline { color: var(--ink); background: var(--white); border-color: var(--blue-line); font-size: .85rem; font-weight: 500; letter-spacing: .01em; text-transform: none; } /* 6. Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem 1.6rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.35; text-align: center; text-decoration: none; color: var(--ink); background: transparent; border: 1.5px solid transparent; border-radius: var(--r); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; -webkit-tap-highlight-color: transparent; } .btn:active { transform: translateY(1px); } .btn__icon { flex: none; font-size: 1.15em; line-height: 1; } /* Solid brand blue */ .btn--primary { color: #fff; background: var(--blue); box-shadow: 0 8px 18px -8px rgba(0, 74, 173, .6); } /* White with a blue outline */ .btn--outline { color: var(--blue); background: var(--white); border-color: var(--blue); } /* Pink, for use on dark blue */ .btn--accent { color: var(--blue-deep); background: var(--accent); } /* White, for use on dark blue */ .btn--light { color: var(--blue-deep); background: #fff; } /* Translucent, for use on dark blue */ .btn--ghost { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); } /* Outlined white, for use on photo cards */ .btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .75); } @media (hover: hover) { .btn--primary:hover { background: var(--blue-hover); transform: translateY(-1px); } .btn--outline:hover { background: var(--blue-tint); } .btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn--light:hover { background: var(--blue-tint); } .btn--ghost:hover { background: rgba(255, 255, 255, .22); } .btn--outline-light:hover { background: rgba(255, 255, 255, .14); } } /* Modifiers */ .btn--pill { border-radius: var(--r-pill); } /* programme pages use full pills */ .btn--sm { padding: .65rem 1.1rem; font-size: .9rem; } .btn--lg { padding: 1.1rem 2rem; font-size: 1.1rem; } .btn--block { display: flex; width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .9rem; } .btn-row--stack { flex-direction: column; } @media (min-width: 640px) { .btn-row--stack { flex-direction: row; } } /* 7. Header + nav ---------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--blue-line); transition: box-shadow .2s; } .site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(0, 47, 112, .5); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; flex: none; } .brand img { height: 52px; width: auto; } /* Hamburger turns into an X when open */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--blue-deep); border-radius: 2px; transition: transform .25s, opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile: dropdown panel under the header */ .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: .25rem 1.5rem 1.5rem; background: var(--white); border-bottom: 1px solid var(--blue-line); box-shadow: 0 24px 40px -24px rgba(0, 47, 112, .4); } .nav.is-open { display: block; animation: nav-in .22s ease-out; } @keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nav.is-open { animation: none; } .btn, .nav-toggle span { transition: none; } } .nav__list { margin: 0; padding: 0; list-style: none; } .nav__link { display: block; padding: .9rem .5rem; font-size: 1.1rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--blue-line); } .nav__cta { margin-top: 1.1rem; } /* Desktop: inline nav, no hamburger */ @media (min-width: 900px) { .brand img { height: 56px; } .nav-toggle { display: none; } .nav { display: block; position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; } .nav.is-open { animation: none; } .nav__list { display: flex; align-items: center; gap: 2rem; } .nav__link { position: relative; padding: .5rem 0; font-size: .95rem; border-bottom: 0; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__cta { margin: 0 0 0 .5rem; } .nav__cta .btn { display: inline-flex; width: auto; padding: .7rem 1.3rem; font-size: .95rem; } } /* 8. Utilities ------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } /* 9. Footer ---------------------------------------------------------------- */ .site-footer { padding: clamp(3rem, 7vw, 4.5rem) 0 4.5rem; /* extra bottom room so the back-to-top button never covers text */ font-size: .9rem; color: rgba(255, 255, 255, .72); background: var(--blue-night); } .site-footer a { color: inherit; text-decoration: none; transition: color .2s; } .site-footer a:hover { color: #fff; } .site-footer :focus-visible { outline-color: #fff; } .site-footer__grid { display: grid; gap: 2.5rem; } .site-footer__logo { display: inline-block; } .site-footer__logo img { height: 56px; width: auto; } .site-footer__blurb { max-width: 34rem; margin: 1.25rem 0 1.5rem; line-height: 1.7; } .site-footer__contact { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; } .site-footer__contact li { display: flex; align-items: baseline; gap: .65rem; } .site-footer__contact a { font-weight: 500; color: #fff; } .site-footer__contact a:hover { color: var(--accent); } .site-footer__title { margin: 0 0 .9rem; font-family: var(--font-sans); font-size: .75rem; font-weight: 700; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .site-footer__list { margin: 0; padding: 0; list-style: none; } .site-footer__list a { display: inline-block; padding: .4rem 0; } .site-footer__disclaimer { max-width: 60rem; margin: 2.75rem 0 0; font-size: .8rem; line-height: 1.65; color: rgba(255, 255, 255, .62); } .site-footer__bar { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.75rem; padding-top: 1.25rem; font-size: .8rem; color: rgba(255, 255, 255, .62); border-top: 1px solid rgba(255, 255, 255, .14); } .site-footer__bar p { margin: 0; } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } .site-footer__bar { flex-direction: row; justify-content: space-between; } } @media (min-width: 900px) { .site-footer { padding-bottom: 4.5rem; } .site-footer__bar { padding-right: 3.5rem; } /* keeps the last words clear of the floating buttons */ .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3.5rem; } .site-footer__brand { grid-column: auto; } } /* 10. Back to top ---------------------------------------------------------- */ .back-to-top { position: fixed; right: calc(1rem + 2px); /* centred over the 48px WhatsApp button below it */ bottom: calc(1rem + 48px + .6rem + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; background: var(--blue); border: 0; border-radius: var(--r); box-shadow: 0 0 0 2px #fff, var(--shadow); cursor: pointer; transition: background-color .2s, transform .2s; } .back-to-top[hidden] { display: none; } .back-to-top svg { width: 20px; height: 20px; } @media (hover: hover) { .back-to-top:hover { background: var(--blue-hover); transform: translateY(-2px); } } /* 10b. Floating WhatsApp button: small, green, bottom right on every page (written by js/components.js with the footer). No label, no pulse: it is just there. The back-to-top button sits above it. */ .wa-float { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 90; display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: #25D366; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 6px 16px -4px rgba(0, 47, 112, .35); -webkit-tap-highlight-color: transparent; transition: background-color .2s, transform .2s; } .wa-float svg { width: 26px; height: 26px; } .wa-float:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } @media (hover: hover) { .wa-float:hover { background: #1EBE5A; transform: translateY(-2px); } } @media print { .wa-float, .back-to-top { display: none; } } /* 11. Homepage hero -------------------------------------------------------- */ .hero { position: relative; overflow: hidden; /* clips the watermark at the bottom edge */ padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem); background: radial-gradient(60% 55% at 92% 8%, rgba(0, 74, 173, .07), transparent 70%), radial-gradient(50% 50% at 0% 70%, rgba(0, 74, 173, .05), transparent 70%), linear-gradient(180deg, var(--white) 0%, var(--bg-soft) 100%); } .hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero__pill { margin-bottom: 1.75rem; } .hero__title { margin: 0 0 1.4rem; font-size: clamp(2.5rem, 1.35rem + 5.6vw, 5rem); line-height: 1.08; letter-spacing: -.01em; } .hero__title .italic { font-weight: 600; } .hero__text { max-width: 38rem; margin: 0 0 2.25rem; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.75; } .hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; width: 100%; margin-bottom: 2.5rem; } .hero__btn { position: relative; padding: 1.05rem 1.5rem; font-size: 1.05rem; line-height: 1.55; } /* Mobile: icon pinned left, label centred, as on Therafit */ .hero__btn .btn__icon { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); } .hero__btn > span:last-child { padding-inline: 1.5rem; } /* Soft outlined button: white, pale blue border, deep blue text */ .btn--outline-soft { color: var(--blue-deep); background: var(--white); border-color: var(--blue-line); box-shadow: var(--shadow-sm); } @media (hover: hover) { .btn--outline-soft:hover { background: var(--blue-tint); border-color: var(--blue); } } /* Trust marks: stacked on mobile, one row on desktop */ .hero__trust { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin: 0; padding: 0; list-style: none; font-size: 1rem; color: var(--text); } .hero__trust li { display: flex; align-items: center; gap: .65rem; } .hero__trust li::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; font-size: .95rem; font-weight: 700; color: var(--blue-deep); background: var(--blue-tint); border-radius: 50%; } /* Faded logo watermark: desktop only */ .hero__watermark { display: none; } @media (min-width: 768px) { .hero__pill.pill--block { display: inline-flex; width: auto; } .hero__actions { align-items: center; width: auto; } .hero__btn { width: auto; padding-inline: 1.9rem; } .hero__btn .btn__icon { position: static; transform: none; } .hero__btn > span:last-child { padding-inline: 0; } .hero__trust { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; font-size: .9rem; } .hero__trust li::before { width: 1.4rem; height: 1.4rem; font-size: .75rem; } } @media (min-width: 900px) { .hero__watermark { display: flex; align-items: center; justify-content: center; position: absolute; right: clamp(1rem, 4vw, 6rem); bottom: -14%; width: clamp(340px, 34vw, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(0, 74, 173, .11), rgba(0, 74, 173, .06) 70%); pointer-events: none; } .hero__watermark img { width: 72%; opacity: .16; } } /* 12. Stats bar ------------------------------------------------------------ */ .stats { padding-block: clamp(2.5rem, 6vw, 3.5rem); } .stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; margin: 0; padding: 0; list-style: none; } .stats__item { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-inline: 1rem; text-align: center; } .stats__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .14); } .stats__num { font-family: var(--font-serif); font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.1rem); font-weight: 700; line-height: 1.1; color: #fff; } .stats__accent { color: var(--accent); } .stats__label { font-size: .9rem; line-height: 1.4; color: rgba(255, 255, 255, .72); } @media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); row-gap: 0; } .stats__item + .stats__item { border-left: 1px solid rgba(255, 255, 255, .14); } } /* 13. Pathways: photo cards with a deep blue overlay ------------------------- */ .pathways__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .path-card { position: relative; display: flex; overflow: hidden; isolation: isolate; color: rgba(255, 255, 255, .84); background: var(--blue-deep); border-radius: 22px; box-shadow: var(--shadow); } .path-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .path-card::before { /* dark blue overlay keeps the white text readable on any photo */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 47, 112, .55) 0%, rgba(0, 31, 77, .88) 100%); } .path-card__body { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: clamp(1.4rem, 4vw, 2rem); } .path-card__pill { margin-bottom: 1rem; text-align: left; border-radius: 16px; } .path-card h3 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.85rem); color: #fff; } .path-card p { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.6; } .ticks { margin: 0 0 1.75rem; padding: 0; list-style: none; } .ticks li { position: relative; padding-left: 1.85rem; font-size: .9rem; line-height: 1.5; } .ticks li + li { margin-top: .6rem; } .ticks li::before { content: "\2713"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; font-size: .7rem; font-weight: 700; border-radius: 50%; } .ticks--light li::before { color: #fff; border: 1px solid rgba(255, 255, 255, .55); } .pathways .section-head { max-width: 860px; } .path-card__btn { display: inline-block; /* arrow follows the text when the label wraps */ margin-top: auto; /* pins the button to the bottom so all cards line up */ max-width: 100%; padding: .8rem 1.1rem; font-size: .9rem; line-height: 1.4; text-align: left; background: rgba(255, 255, 255, .1); border-width: 1px; border-color: rgba(255, 255, 255, .5); } @media (min-width: 640px) { .path-card__body { padding: 2rem; } } @media (min-width: 1024px) { .pathways__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } /* 14. Conditions we treat ---------------------------------------------------- */ .conditions { background: var(--white); } /* Serif, small-caps style pill used above each card group */ .pill--serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: .12em; } .cond-group__pill { display: flex; width: fit-content; max-width: 100%; margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); padding: .65rem 1.9rem; font-size: .7rem; line-height: 1.5; position: relative; } .cond-group__pill::before { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); } @media (min-width: 720px) { .cond-group { text-align: center; } .cond-group__pill { display: inline-flex; width: auto; font-size: .78rem; padding-inline: 1.5rem 1.5rem; } .cond-group__pill::before { position: static; transform: none; } } .cond-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; text-align: center; } @media (min-width: 720px) { .cond-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } .cond-card { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s, transform .25s, background-color .25s; -webkit-tap-highlight-color: transparent; } .cond-card__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--blue-tint); } .cond-card__media img { width: 100%; height: 100%; object-fit: cover; } /* Overlay with the centred "View programme" button (hover, keyboard focus, press) */ .cond-card__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 47, 112, .5); opacity: 0; transition: opacity .25s; } .cond-card__cta { padding: .8rem 1.35rem; font-size: .78rem; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 2px solid rgba(255, 255, 255, .9); border-radius: var(--r-pill); } .cond-card__body { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 1rem .9rem 1.15rem; transition: background-color .25s; } .cond-card h3 { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--blue-deep); } .cond-card p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted); } /* Touch devices have no hover, so show a small text cue instead */ .cond-card__more { display: none; margin-top: auto; padding-top: .8rem; font-size: .8rem; font-weight: 700; color: var(--blue); } @media (hover: none) { .cond-card__more { display: block; } } .cond-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .cond-card:focus-visible .cond-card__overlay, .cond-card:active .cond-card__overlay { opacity: 1; } @media (hover: hover) { .cond-card:hover { border-color: var(--blue-deep); box-shadow: 0 0 0 1px var(--blue-deep), var(--shadow); transform: translateY(-3px); } .cond-card:hover .cond-card__overlay { opacity: 1; } .cond-card:hover .cond-card__body { background: var(--blue-tint); } } @media (min-width: 900px) { .cond-card__body { padding: 1.15rem 1.15rem 1.35rem; } .cond-card h3 { font-size: 1.05rem; } .cond-card p { font-size: .85rem; } } /* Home-visit group: five cards, 2 across on mobile, 3 on tablet, 5 on desktop. Flex + centred wrap so a short last row never hangs to one side on tablet. */ .cond-group + .cond-group { margin-top: clamp(3rem, 7vw, 5rem); } .cond-grid--visit { --gap: 1rem; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--gap); } .cond-grid--visit .cond-card { flex: 0 0 calc(50% - var(--gap) / 2); } @media (min-width: 720px) { .cond-grid--visit { --gap: 1.25rem; justify-content: center; } .cond-grid--visit .cond-card { flex-basis: calc((100% - 2 * var(--gap)) / 3); } } @media (min-width: 1000px) { .cond-grid--visit { --gap: 1rem; } .cond-grid--visit .cond-card { flex-basis: calc((100% - 4 * var(--gap)) / 5); } } /* Home-visit photos are 4:5 (shorter than the 9:16 programme cards) so more of each photo shows */ .cond-grid--visit .cond-card__media { aspect-ratio: 4 / 5; } /* Smaller title, caption and button than the programme cards */ .cond-group--visit .cond-card h3 { font-size: .9rem; margin-bottom: .35rem; } .cond-group--visit .cond-card p { font-size: .75rem; } .cond-group--visit .cond-card__cta { padding: .55rem 1.1rem; font-size: .7rem; border-width: 1px; } /* 15. Virtual Recovery Programs ---------------------------------------------- */ .virtual__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } .virtual__intro .pill { margin-bottom: 1.25rem; } .virtual__intro h2 { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); line-height: 1.15; } .virtual__intro > p { margin: 0 0 1.75rem; max-width: 34rem; } .icon-list { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; } .icon-list li { display: flex; align-items: center; gap: .9rem; color: var(--ink); font-size: .98rem; line-height: 1.45; } .icon-list__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.05rem; background: var(--white); border: 1px solid var(--blue-line); border-radius: 10px; } .virtual__cards { display: grid; gap: 1rem; } .prog-card { display: flex; align-items: flex-start; gap: 1rem; min-height: 6.5rem; padding: 1.25rem 1.4rem; color: inherit; text-decoration: none; background: var(--white); border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s; -webkit-tap-highlight-color: transparent; } .prog-card__icon { flex: none; font-size: 1.5rem; line-height: 1.2; } .prog-card__text { display: grid; gap: .3rem; } .prog-card strong { font-size: 1rem; line-height: 1.35; color: var(--blue-deep); } .prog-card__text > span { font-size: .85rem; line-height: 1.55; color: var(--muted); } .prog-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } @media (hover: hover) { .prog-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); } } @media (min-width: 900px) { .virtual__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); } } /* 16. Pricing ---------------------------------------------------------------- */ .pricing__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 840px; margin-inline: auto; } .price-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 4vw, 2rem); background: var(--white); border: 1px solid var(--blue-line); border-radius: 22px; box-shadow: var(--shadow-sm); } .price-card__name { margin: 0 0 1rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: var(--ink); } .price-card__price { margin: 0 0 .35rem; font-family: var(--font-serif); font-size: clamp(2.4rem, 2rem + 1.6vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--blue); } .price-card__price--text { font-family: var(--font-sans); font-size: 1.6rem; color: #fff; } .price-card__note { margin: 0 0 1.5rem; font-size: .85rem; color: var(--muted); } .price-card .ticks { margin-bottom: 2rem; } .price-card .ticks li { font-size: .95rem; color: var(--text); } .ticks--brand li::before { content: "\2713"; width: auto; height: auto; top: 0; font-size: 1rem; color: var(--blue); border: 0; } .ticks--accent li::before { content: "\2713"; width: auto; height: auto; top: 0; font-size: 1rem; color: var(--accent); border: 0; } .price-card__btn { margin-top: auto; width: 100%; padding-block: 1rem; } .price-card--featured { color: rgba(255, 255, 255, .82); background: var(--blue-deep); border-color: var(--blue-deep); box-shadow: var(--shadow); } .price-card--featured .price-card__name { color: #fff; } .price-card--featured .price-card__note { color: rgba(255, 255, 255, .7); } .price-card--featured .ticks li { color: rgba(255, 255, 255, .92); } .price-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; } @media (min-width: 720px) { .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } } /* 17. Highlight: marks the few words that matter most (keeps copy scannable) --- */ .hl { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 58%, rgba(255, 102, 196, .38) 58%); padding-inline: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hl--on-dark { color: #fff; background: linear-gradient(transparent 58%, rgba(255, 102, 196, .5) 58%); } /* 18. Video cards ------------------------------------------------------------ */ .video-card { --thumb: none; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 38%), var(--thumb), linear-gradient(135deg, #0F2A57 0%, #0A1B3D 100%); background-size: cover; background-position: center; border-radius: var(--r-lg); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55); } .video-card__btn { position: absolute; inset: 0; width: 100%; padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-tap-highlight-color: transparent; } .video-card__btn:disabled { cursor: default; } .video-card__btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } .video-card__title { position: absolute; top: .9rem; left: 1rem; right: 1rem; font-size: .9rem; font-weight: 600; line-height: 1.35; text-align: left; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); } /* Red play button in the YouTube style */ .video-card__play { position: absolute; top: 50%; left: 50%; width: 4.25rem; height: 3rem; transform: translate(-50%, -50%); background: #E62117; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .2s, background-color .2s; } .video-card__play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: .7rem 0 .7rem 1.15rem; border-color: transparent transparent transparent #fff; } @media (hover: hover) { .video-card__btn:not(:disabled):hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); background: #FF0000; } } .video-card__note { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); padding: .3rem .8rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); border-radius: var(--r-pill); } .video-card[data-ready] .video-card__note { display: none; } .video-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .stars { margin: .8rem 0 0; font-size: 1.15rem; letter-spacing: .18em; text-align: center; color: var(--accent); } /* Patient stories */ .stories__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; max-width: 34rem; margin-inline: auto; } .video-item { margin: 0; } .stories__stats { display: none; margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { .stories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; max-width: none; } } @media (min-width: 768px) { .stories__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; } .stories__stats li { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: rgba(255, 255, 255, .72); } .stories__num { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--accent); } } /* 19. Why White ---------------------------------------------------------------- */ .why__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } .why__main .pill { margin-bottom: 1.1rem; } .why__main h2 { margin: 0 0 1.75rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.15; } .why-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; } .why-card { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; background: var(--white); border: 1px solid var(--blue-line); border-left: 4px solid var(--blue); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .why-card__icon { flex: none; font-size: 1.6rem; line-height: 1.2; } .why-card h3 { margin: 0 0 .3rem; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--blue-deep); } .why-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text); } .why__panel { padding: clamp(1.5rem, 4vw, 2.25rem); color: rgba(255, 255, 255, .86); background: var(--blue-deep); border-radius: 22px; box-shadow: var(--shadow); } .why__panel h3 { margin: 0 0 1rem; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.8rem); line-height: 1.25; color: #fff; } .why__panel p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; } .tag-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .tag-list li { padding: .5rem .95rem; font-size: .85rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-pill); } .tag-list li::before { content: "\2713"; margin-right: .45rem; color: var(--accent); } @media (min-width: 900px) { .why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4.5rem); } } /* 20. FlexRecovery Studio teaser ------------------------------------------------ */ .studio__card { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--blue-tint); border: 1px solid var(--blue-line); border-radius: 24px; } .studio__logo { display: grid; place-items: center; max-width: 17rem; padding: 1.5rem; margin-inline: auto; background: var(--white); border-radius: 20px; box-shadow: var(--shadow-sm); } .studio__logo img { width: 100%; max-width: 13rem; height: auto; } .studio__body { text-align: center; } .studio__body .pill { margin-bottom: 1rem; } .studio__body h2 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); line-height: 1.2; } .studio__body > p { max-width: 32rem; margin: 0 auto 1.25rem; font-size: 1.05rem; } .studio__places { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .studio__places .pill { font-size: .9rem; } @media (min-width: 768px) { .studio__card { grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); } .studio__logo { margin: 0; } .studio__body { text-align: left; } .studio__body > p { margin-inline: 0; } .studio__places { justify-content: flex-start; } } /* 21. FAQ: simple rows with thin dividers and a round arrow, large tap targets ---- */ .faq__list { max-width: 46rem; margin-inline: auto; border-top: 1px solid var(--blue-line); } .faq__item { border-bottom: 1px solid var(--blue-line); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 1rem .25rem; font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ink); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; } .faq__icon { flex: none; position: relative; width: 2rem; height: 2rem; background: var(--blue-tint); border-radius: 50%; transition: background-color .2s, transform .25s; } .faq__icon::after { /* small down arrow */ content: ""; position: absolute; top: 50%; left: 50%; margin: -.15rem 0 0 -.32rem; border-style: solid; border-width: .42rem .32rem 0 .32rem; border-color: var(--blue-deep) transparent transparent transparent; } .faq__item[open] .faq__icon { transform: rotate(180deg); background: var(--blue); } .faq__item[open] .faq__icon::after { border-top-color: #fff; } @media (hover: hover) { .faq__item summary:hover .faq__icon { background: var(--blue-line); } .faq__item[open] summary:hover .faq__icon { background: var(--blue-deep); } } .faq__answer { padding: 0 .25rem 1.4rem; } .faq__answer p { max-width: 40rem; margin: 0; font-size: 1rem; line-height: 1.7; color: var(--text); } .faq__answer strong { color: var(--ink); } /* 22. Fraud notice: cream warning band ---------------------------------------- */ .notice { padding-block: clamp(2rem, 5vw, 3rem); background: var(--cream); border-top: 2px solid #E2B94D; } .notice__card { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 62rem; margin-inline: auto; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--white); border: 1px solid var(--cream-line); border-radius: 18px; box-shadow: var(--shadow-sm); } .notice__icon { flex: none; margin-top: .1rem; } .notice h2 { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; color: #6B4A0F; } .notice p { margin: 0; font-size: 1rem; line-height: 1.7; color: #7A5A1C; } .notice strong { color: #4F3608; } .notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 480px) { .notice__card { flex-direction: column; gap: .75rem; } } /* 23. Final call to action ------------------------------------------------------ */ .final-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 6rem); color: rgba(255, 255, 255, .88); background: var(--blue-deep); text-align: center; } .final-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .22; /* the team photo stays faded behind the text */ } .final-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 47, 112, .78), rgba(0, 47, 112, .92)); } .final-cta h2 { margin: 0 0 1rem; font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem); line-height: 1.12; color: #fff; } .final-cta p { max-width: 36rem; margin: 0 auto 2rem; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); line-height: 1.7; } .final-cta strong { color: #fff; } .final-cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; max-width: 24rem; margin-inline: auto; } .final-cta__actions .btn { padding-block: 1.05rem; font-size: 1.05rem; } @media (min-width: 768px) { .final-cta__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; } .final-cta__actions .btn { padding-inline: 1.7rem; } } /* 24. WhatsApp green button, readable bold text, count-up numbers ---------------- */ .btn--whatsapp { color: #fff; background: #12803F; box-shadow: 0 8px 18px -8px rgba(18, 128, 63, .7); } @media (hover: hover) { .btn--whatsapp:hover { background: #0D6A33; } } .btn--whatsapp:focus-visible { outline-color: #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #0D6A33; } /* Bold key words: a shade darker than the body text so they stand out; white on dark blocks */ :where(p, li) > strong { color: var(--ink); } .section--dark strong, .why__panel strong, .path-card strong, .price-card--featured strong, .final-cta strong { color: #fff; } .notice strong { color: #4F3608; } /* Count-up numbers: the width is locked by the script so nothing jumps while counting */ .cnt { display: inline-block; text-align: right; } /* 25. Home-visit page (/home-service) -------------------------------------------- */ /* Header button beside the menu on small screens (turned on by ) */ .site-header__cta { margin-left: auto; white-space: nowrap; } @media (max-width: 359px) { .site-header__cta { display: none; } } @media (min-width: 900px) { .site-header__cta { display: none; } } /* Cream pill (hero label) */ .pill--cream { color: #5C4008; background: var(--cream); border-color: var(--cream-line); } /* 25a. Hero: text first on phones, photo beside the text on desktop */ .hv-hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); background: radial-gradient(60% 55% at 92% 8%, rgba(0, 74, 173, .07), transparent 70%), linear-gradient(180deg, var(--white) 0%, var(--bg-soft) 100%); } .hv-hero__inner { display: grid; gap: 2.5rem; align-items: center; } .hv-hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; } .hv-hero__pill { margin-bottom: 1.5rem; } .hv-hero__title { margin: 0 0 1.25rem; font-size: clamp(2.2rem, 1.3rem + 4.6vw, 3.75rem); line-height: 1.1; letter-spacing: -.01em; } .hv-hero__title span { display: block; } .hv-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .hv-hero__chips .pill { font-size: .9rem; padding: .5rem 1rem; } .hv-hero__text { max-width: 36rem; margin: 0 0 1.1rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; } .hv-hero__note { max-width: 36rem; margin: 0 0 1.75rem; padding: .85rem 1rem; text-align: left; font-size: 1rem; line-height: 1.6; color: var(--blue-deep); background: var(--blue-tint); border-left: 4px solid var(--blue); border-radius: var(--r-sm); } .hv-hero__actions { display: flex; flex-direction: column; gap: .8rem; width: 100%; max-width: 26rem; margin-bottom: 1.25rem; } .hv-hero__actions .btn { width: 100%; padding: 1.05rem 1.5rem; font-size: 1.05rem; } .hv-hero__where { margin: 0; font-size: .95rem; color: var(--text); } .hv-hero__media { position: relative; width: 100%; max-width: 34rem; margin: 0; } .hv-hero__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--blue-tint); border-radius: 20px; box-shadow: var(--shadow); } .hv-hero__caption { position: absolute; left: .9rem; right: .9rem; bottom: .9rem; display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; text-align: left; background: rgba(255, 255, 255, .96); border-radius: var(--r); box-shadow: var(--shadow-sm); } .hv-hero__caption-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--blue); background: var(--blue-tint); border-radius: 10px; } .hv-hero__caption-icon svg { width: 1.4rem; height: 1.4rem; } .hv-hero__caption strong { display: block; font-size: .95rem; line-height: 1.3; color: var(--ink); } .hv-hero__caption span:not(.hv-hero__caption-icon) { display: block; font-size: .85rem; line-height: 1.4; color: var(--text); } @media (min-width: 640px) { .hv-hero__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; max-width: none; } .hv-hero__actions .btn { width: auto; } } @media (min-width: 900px) { .hv-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 5vw, 4.5rem); } .hv-hero__copy { align-items: flex-start; text-align: left; } .hv-hero__chips { justify-content: flex-start; } .hv-hero__actions { justify-content: flex-start; } .hv-hero__media { justify-self: end; } } /* 25b. Trust strip: 2 x 2 on phones, one row from tablet up */ .hv-trust { padding-block: 1.75rem; } .hv-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; margin: 0; padding: 0; list-style: none; } .hv-trust__item { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; font-size: .95rem; font-weight: 600; line-height: 1.35; color: #fff; } .hv-trust__item svg { flex: none; width: 1.75rem; height: 1.75rem; color: var(--accent); } @media (min-width: 768px) { .hv-trust { padding-block: 1.5rem; } .hv-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hv-trust__item { flex-direction: row; justify-content: center; gap: .75rem; text-align: left; } .hv-trust__item svg { width: 1.5rem; height: 1.5rem; } } /* 25c. "Does any of this sound familiar?": quote cards, one per row on phones, 2 x 2 from 560px */ .hv-familiar__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 60rem; margin: 0 auto 2rem; padding: 0; list-style: none; } .hv-familiar__grid > li { display: flex; } .hv-quote { flex: 1; margin: 0; padding: 1.1rem 1.25rem 1.35rem 1.4rem; background: var(--white); border: 1px solid var(--blue-line); border-left: 4px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-sm); } .hv-quote::before { content: "\201C"; display: block; margin-bottom: .3rem; font-family: var(--font-serif); font-size: 2.75rem; line-height: .8; color: var(--accent); } .hv-quote p { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.65; } .hv-familiar__summary { max-width: 38rem; margin: 0 auto 1.75rem; text-align: center; font-size: 1.1rem; line-height: 1.65; } .hv-familiar__real { max-width: 38rem; margin: -.75rem auto 1.75rem; text-align: center; font-size: 1.05rem; line-height: 1.65; color: var(--blue-deep); } .hv-familiar__real strong { color: var(--blue-deep); } .hv-familiar__action { display: flex; justify-content: center; } @media (min-width: 560px) { .hv-familiar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } } /* 25d. "Why quick fixes fail": one card per row, red cross in a pink circle */ .hv-fails__list { display: grid; gap: .9rem; max-width: 44rem; margin: 0 auto 2rem; padding: 0; list-style: none; } .hv-fail { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 1.25rem; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .hv-fail__icon { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--danger); background: var(--danger-bg); border-radius: 50%; } .hv-fail__icon svg { width: 1.05rem; height: 1.05rem; } .hv-fail__title { margin: 0 0 .3rem; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; line-height: 1.3; } .hv-fail p { margin: 0; font-size: 1rem; line-height: 1.6; } .hv-fails__note { max-width: 38rem; margin: 0 auto; text-align: center; font-size: 1.1rem; line-height: 1.65; } /* 25e. Why home visits: 1 column on phones, 2 from 560px, 3 from 900px */ .hv-why__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; } .hv-why-card { padding: 1.4rem 1.35rem 1.5rem; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .hv-why-card__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 1rem; color: var(--blue); background: var(--blue-tint); border-radius: 10px; } .hv-why-card__icon svg { width: 1.45rem; height: 1.45rem; } .hv-why-card__title { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; line-height: 1.3; } .hv-why-card p { margin: 0; font-size: 1rem; line-height: 1.6; } @media (min-width: 560px) { .hv-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } } @media (min-width: 900px) { .hv-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } /* 25f. What a home visit looks like: flyer video card + text on deep blue. Video card variant with its own cover image (portrait). */ .video-card--flyer { aspect-ratio: 4 / 5; background: var(--thumb), linear-gradient(135deg, #0F2A57 0%, #0A1B3D 100%); background-size: cover; background-position: center; } .video-card__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the note sits under the play button, over the photo part of the flyer (white text needs the dark area) */ .video-card--flyer .video-card__note { bottom: auto; top: 64%; } .hv-visit__inner { display: grid; gap: 2.25rem; align-items: center; } .hv-visit__video { width: 100%; max-width: 24rem; margin-inline: auto; } .hv-visit__copy { display: flex; flex-direction: column; align-items: flex-start; } .hv-visit__copy .pill { margin-bottom: 1.1rem; } .hv-visit__copy h2 { margin-bottom: .8rem; } .hv-visit__copy > p { margin-bottom: 1.4rem; font-size: 1.1rem; line-height: 1.7; } .hv-visit .ticks { margin-bottom: 2rem; } .hv-visit .ticks li { font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .9); } .hv-visit .ticks li + li { margin-top: .8rem; } .hv-visit .btn { width: 100%; } @media (min-width: 640px) { .hv-visit .btn { width: auto; } } @media (min-width: 900px) { .hv-visit__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 5rem); } .hv-visit__video { margin-inline: 0; } } /* 25g. Swipe carousel (generic). Works by swiping even without JavaScript; the arrows and dots are added by js/main.js and hidden when everything fits on screen. */ .carousel { position: relative; } .carousel__track { position: relative; display: flex; gap: 1rem; margin: 0; padding: .25rem .1rem .75rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 min(16rem, 74%); scroll-snap-align: start; } .carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; } .carousel__nav[hidden] { display: none; } .carousel__btn { display: grid; place-items: center; width: 4rem; height: 2.75rem; padding: 0; color: var(--blue-deep); background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r-pill); cursor: pointer; transition: background-color .2s, opacity .2s; -webkit-tap-highlight-color: transparent; } .carousel__btn svg { width: 1.25rem; height: 1.25rem; } .carousel__btn:disabled { opacity: .4; cursor: default; } @media (hover: hover) { .carousel__btn:not(:disabled):hover { background: var(--blue-tint); } } .carousel__dots { display: flex; align-items: center; gap: .4rem; } .carousel__dot { width: .5rem; height: .5rem; background: var(--blue-line); border-radius: var(--r-pill); transition: width .2s, background-color .2s; } .carousel__dot.is-active { width: 1.5rem; background: var(--blue); } @media (prefers-reduced-motion: reduce) { .carousel__dot, .carousel__btn { transition: none; } } /* 25h. What your treatment involves: three parts */ .hv-part { margin-bottom: 2.75rem; } .hv-part__head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; } .hv-part__num { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-weight: 700; color: var(--accent); background: var(--blue-deep); border-radius: 8px; } .hv-part__title { margin: 0 0 .15rem; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700; line-height: 1.3; } .hv-part__head p { margin: 0; font-size: 1rem; line-height: 1.55; } .hv-slide { margin: 0; } .hv-slide__cap { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .15rem 0; } .hv-slide__cap strong { font-size: 1.02rem; line-height: 1.35; color: var(--ink); } .hv-slide__cap span { font-size: .92rem; line-height: 1.45; color: var(--text); } .hv-treat__action { display: flex; justify-content: center; } /* Home programme card (phone-style, built in HTML so the text stays real). Not clickable: White has no app. */ .video-card--app { aspect-ratio: auto; min-height: 28rem; background: linear-gradient(170deg, #062A63 0%, #001F4D 100%); border: 1px solid rgba(255, 255, 255, .14); } .video-card--app .video-card__note { bottom: auto; top: calc(50% + 2.4rem); } .hv-app { display: flex; flex-direction: column; gap: .7rem; padding: 1rem .95rem 1.1rem; text-align: left; color: rgba(255, 255, 255, .85); } .hv-app p { margin: 0; } .hv-app__welcome { padding: .45rem .7rem; font-size: .72rem; font-weight: 600; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: rgba(255, 102, 196, .1); border: 1px solid rgba(255, 102, 196, .45); border-radius: 10px; } .hv-app__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #fff; } .hv-app__title span { display: block; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; margin-bottom: .15rem; } .hv-app__lead { font-size: .85rem; line-height: 1.5; } .hv-app__watch { padding: .7rem .8rem; font-size: .9rem; font-weight: 700; line-height: 1.3; text-align: center; color: var(--blue-deep); background: var(--accent); border-radius: 10px; } .hv-app__levels { display: flex; flex-direction: column; gap: .55rem; margin: .25rem 0 0; padding: 0; list-style: none; } .hv-app__level { display: flex; flex-direction: column; gap: .05rem; padding: .65rem .8rem; border: 1px solid; border-radius: 10px; } .hv-app__level strong { font-size: .88rem; line-height: 1.3; color: #fff; } .hv-app__level span { font-size: .78rem; color: rgba(255, 255, 255, .78); } .hv-app__level--easy { background: rgba(0, 74, 173, .55); border-color: #5B8FE0; } .hv-app__level--mid { background: rgba(203, 108, 230, .22); border-color: var(--lilac); } .hv-app__level--high { background: rgba(255, 102, 196, .2); border-color: var(--accent); } .hv-app__level--bonus { background: transparent; border-color: rgba(255, 255, 255, .35); } /* 25i. Patients treated at home */ .hv-patient { margin: 0; padding: .6rem .6rem 1rem; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .hv-patient .video-card { border-radius: var(--r); box-shadow: none; } .hv-patient__who { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; padding-inline: .4rem; } .hv-patient__avatar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; font-weight: 700; color: var(--blue-deep); background: var(--blue-tint); border-radius: 50%; } .hv-patient__who strong { display: block; font-size: 1rem; line-height: 1.3; color: var(--ink); } .hv-patient__who span > span { display: block; font-size: .9rem; line-height: 1.4; color: var(--text); } /* 25j. Team: one card per row on phones, two from 640px */ .hv-team__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 60rem; margin: 0 auto; padding: 0; list-style: none; } .hv-member { display: flex; flex-direction: column; align-items: center; padding: 1.6rem 1.35rem 1.7rem; text-align: center; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .hv-member__photo { width: 6.5rem; height: 6.5rem; margin-bottom: 1rem; object-fit: cover; background: var(--blue-tint); border-radius: 50%; box-shadow: 0 0 0 3px var(--white), 0 0 0 4.5px var(--blue-line); } .hv-member__name { margin: 0 0 .3rem; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .hv-member__role { margin: 0 0 .8rem; font-size: .78rem; font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); } .hv-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; } .hv-tags li { padding: .3rem .8rem; font-size: .85rem; font-weight: 600; color: var(--blue-deep); background: var(--blue-tint); border-radius: var(--r-pill); } .hv-member__bio { margin: 0; font-size: 1rem; line-height: 1.65; } .hv-member--more { justify-content: center; background: var(--bg-soft); border: 1.5px dashed rgba(0, 74, 173, .4); box-shadow: none; } .hv-member__plus { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; margin-bottom: 1rem; font-size: 2.5rem; line-height: 1; color: var(--blue); background: var(--white); border-radius: 50%; } @media (min-width: 640px) { .hv-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } /* 25k. How it works: three steps, one per row on phones */ .hv-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 2.25rem; padding: 0; list-style: none; } .hv-step { padding: 1.5rem 1.4rem 1.6rem; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .hv-step__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 700; color: var(--accent); background: var(--blue-deep); border-radius: 9px; } .hv-step__title { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; line-height: 1.3; } .hv-step p { margin: 0; font-size: 1rem; line-height: 1.65; } .hv-how__action { display: flex; justify-content: center; } @media (min-width: 768px) { .hv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } /* 25l. "Physiotherapy is usually the first step": surgery card vs home-physiotherapy card, Book button inside the second card */ .hv-first__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 64rem; margin: 0 auto 2.25rem; } .hv-cmp { display: flex; flex-direction: column; padding: 1.6rem 1.35rem 1.75rem; border-radius: var(--r-lg); } .hv-cmp--surgery { background: #FEF5F4; border: 1px solid var(--danger-line); } .hv-cmp--physio { color: rgba(255, 255, 255, .85); background: var(--blue-deep); border: 1px solid var(--blue-deep); border-top: 5px solid var(--accent); box-shadow: var(--shadow); } .hv-cmp__head { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; } .hv-cmp--surgery .hv-cmp__label { color: var(--danger); background: var(--white); border-color: var(--danger-line); } .hv-cmp__list { display: grid; gap: 1.15rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .hv-cmp__item { display: flex; align-items: flex-start; gap: .95rem; } .hv-cmp__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; font-size: 1.15rem; font-weight: 700; border-radius: 10px; } .hv-cmp__icon svg { width: 1.3rem; height: 1.3rem; } .hv-cmp--surgery .hv-cmp__icon { color: var(--danger); background: var(--white); border: 1px solid var(--danger-line); } .hv-cmp--physio .hv-cmp__icon { color: var(--accent); background: rgba(255, 255, 255, .1); } .hv-cmp__item strong { display: block; margin-bottom: .1rem; font-size: 1.08rem; line-height: 1.35; } .hv-cmp__item > div > span { display: block; font-size: 1rem; line-height: 1.55; } .hv-cmp--surgery .hv-cmp__item strong { color: #7A1A12; } .hv-cmp--physio .hv-cmp__item strong { color: #fff; } .hv-cmp--physio .hv-cmp__item > div > span { color: rgba(255, 255, 255, .8); } .hv-cmp__cta { margin-top: auto; padding-top: 1.9rem; } .hv-cmp__note { margin: .8rem 0 0; font-size: .95rem; text-align: center; color: rgba(255, 255, 255, .8); } .hv-first__after, .hv-choose__after { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .hv-first__honest, .hv-choose__honest { max-width: 34rem; margin: 0; font-size: 1.1rem; line-height: 1.65; } @media (min-width: 900px) { .hv-first__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 1.5rem; align-items: stretch; } .hv-cmp { padding: 2rem 1.9rem 2.1rem; } } /* 25m. Condition cards: 2 across on phones, 3 across from 640px. Each opens WhatsApp with the condition in the message. */ .hv-cond__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 60rem; margin: 0 auto 1.5rem; padding: 0; list-style: none; } .hv-cond__grid > li { display: flex; } .hv-cond { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem .95rem 1.05rem; color: var(--ink); text-decoration: none; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r); box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; } .hv-cond__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .55rem; color: var(--blue); background: var(--blue-tint); border-radius: 10px; } .hv-cond__icon svg { width: 1.35rem; height: 1.35rem; } .hv-cond strong { font-size: 1rem; line-height: 1.35; color: var(--ink); } .hv-cond__go { margin-top: auto; padding-top: .35rem; font-size: .88rem; font-weight: 600; color: var(--blue); } @media (hover: hover) { .hv-cond:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); } } .hv-cond__other { display: flex; justify-content: center; } .hv-cond__other .btn { width: 100%; max-width: 30rem; text-align: center; } @media (min-width: 640px) { .hv-cond__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .hv-cond { padding: 1.15rem 1.1rem 1.2rem; } } @media (prefers-reduced-motion: reduce) { .hv-cond { transition: none; } .hv-cond:hover { transform: none; } } /* 25n. What is included: gift cards and WhatsApp bonus cards, 2 across on phones, bonuses 3 across from 768px */ .hv-inc__label { margin: 2.25rem 0 1rem; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .hv-inc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; max-width: 60rem; margin: 0 auto; padding: 0; list-style: none; } .hv-inc__grid--gifts { max-width: 40rem; } .hv-inc-card { display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: 1.3rem .85rem 1.35rem; text-align: center; background: var(--white); border: 1.5px solid var(--cream-line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .hv-inc-card__icon { color: var(--blue); } .hv-inc-card__icon svg { width: 1.7rem; height: 1.7rem; } .hv-inc-card__title { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--ink); } .hv-inc-tag { padding: .2rem .65rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-tint); border-radius: var(--r-pill); } .hv-inc-value { margin-top: auto; padding: .3rem .8rem; font-size: .85rem; white-space: nowrap; font-weight: 700; color: #6B4A08; background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-pill); } .hv-inc__total { margin: 2.25rem 0 1.4rem; text-align: center; font-size: 1.15rem; line-height: 1.5; } .hv-inc__action { display: flex; justify-content: center; } @media (min-width: 768px) { .hv-inc__grid--bonus { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } /* 25o. Home or studio: two option cards, each with its own button; WhatsApp button underneath for "not sure" */ .hv-choose__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 64rem; margin: 0 auto 2.25rem; } .hv-opt { display: flex; flex-direction: column; padding: 1.75rem 1.4rem 1.9rem; border-radius: var(--r-lg); } .hv-opt--home { color: rgba(255, 255, 255, .88); background: var(--blue-deep); box-shadow: var(--shadow); } .hv-opt--studio { background: var(--white); border: 1px solid var(--blue-line); box-shadow: var(--shadow-sm); } .hv-opt__title { margin: 0 0 1.25rem; font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; line-height: 1.25; } .hv-opt--home .hv-opt__title { color: #fff; } .hv-opt .ticks { margin-bottom: 0; } .hv-opt .ticks li { font-size: 1.05rem; line-height: 1.55; } .hv-opt .ticks li + li { margin-top: .8rem; } .hv-opt--home .ticks li { color: rgba(255, 255, 255, .9); } .hv-opt--home .ticks strong { color: #fff; } .hv-opt__logo { width: 10.5rem; height: auto; margin: 0 0 .9rem; } .hv-opt__places { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; } .hv-opt__cta { margin-top: auto; padding-top: 1.9rem; } @media (min-width: 900px) { .hv-choose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .hv-opt { padding: 2rem 1.9rem 2.1rem; } } /* 25p. Physiotherapy and pain medication */ .hv-meds__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 60rem; margin: 0 auto 1.75rem; } .hv-meds__card { padding: 1.6rem 1.4rem 1.75rem; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .hv-meds__card--physio { border-top: 5px solid var(--blue); box-shadow: var(--shadow); } .hv-meds__title { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1.4rem; font-weight: 700; line-height: 1.25; } .hv-meds__card > p { margin: 0 0 1.15rem; font-size: 1.02rem; line-height: 1.6; } .hv-meds__list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; } .hv-meds__list li { position: relative; padding-left: 1.7rem; font-size: 1.02rem; line-height: 1.5; } .hv-meds__list--dots li::before { content: ""; position: absolute; left: .25rem; top: .6em; width: .5rem; height: .5rem; background: #9AA3B2; border-radius: 50%; } .hv-meds__list--ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--blue); } .hv-meds__note { max-width: 44rem; margin: 0 auto 1rem; padding: 1rem 1.25rem; text-align: center; font-size: 1.05rem; line-height: 1.65; background: var(--blue-tint); border-radius: var(--r); } .hv-meds__safety { max-width: 44rem; margin: 0 auto 1.9rem; text-align: center; font-size: 1rem; line-height: 1.6; } .hv-meds__action { display: flex; justify-content: center; } @media (min-width: 900px) { .hv-meds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } } /* 25q. Final call to action (home-visit page): small extras on top of the shared .final-cta block */ .final-cta .pill { margin-bottom: 1.25rem; } .final-cta__disclaimer { max-width: 34rem; margin: 2.25rem auto 0; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .72); } /* 26. FlexRecovery Studio page (/studio) ----------------------------------------- */ /* 26a. Hero: reuses .hv-hero (25a); adds the studio logo, the Ota / Osogbo buttons and a text link */ .st-hero__logo { width: 9.5rem; height: auto; margin: 0 0 1.25rem; } .st-pick { width: 100%; max-width: 32rem; margin: 0 0 1.4rem; } .st-pick__label { margin: 0 0 .8rem; font-size: 1.1rem; line-height: 1.4; color: var(--ink); } .st-pick__btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; } .st-pick__btn { justify-content: flex-start; gap: .85rem; padding: .95rem 1.25rem; text-align: left; } .st-pick__btn .btn__icon { font-size: 1.5rem; } .st-pick__text { display: flex; flex-direction: column; align-items: flex-start; } .st-pick__name { font-size: 1.1rem; font-weight: 700; line-height: 1.3; } .st-pick__sub { font-size: .875rem; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .9); } .st-link { font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; } .st-link:hover { color: var(--blue-hover); } /* Side by side when there is room for both names on one line (wide phones and tablets, big screens); stacked in between */ @media (min-width: 640px) and (max-width: 899px), (min-width: 1180px) { .st-pick { max-width: 38rem; } .st-pick__btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-pick__name { white-space: nowrap; } } /* 26b. Choose your studio: one card per studio, photo on top. 1 column on phones, 2 from 768px */ .st-locs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 64rem; margin: 0 auto; } .st-loc { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--blue-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .st-loc__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--blue-tint); } .st-loc__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.6rem; } .st-loc__state { margin: 0 0 .35rem; font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); } .st-loc__name { margin: 0 0 1.15rem; font-size: clamp(1.55rem, 1.25rem + 1vw, 1.95rem); line-height: 1.2; } .st-loc__facts { display: grid; gap: .95rem; margin: 0 0 1.25rem; padding: 0; list-style: none; } .st-loc__facts li { display: flex; align-items: flex-start; gap: .85rem; } .st-loc__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; font-size: 1.15rem; background: var(--blue-tint); border-radius: 10px; } .st-loc__facts strong { display: block; font-size: .9rem; line-height: 1.3; color: var(--muted); } .st-loc__facts li > div > span { display: block; font-size: 1.05rem; line-height: 1.5; color: var(--ink); } .st-loc__note { margin: 0 0 1.4rem; padding: .8rem 1rem; font-size: 1rem; line-height: 1.55; color: var(--blue-deep); background: var(--blue-tint); border-radius: var(--r-sm); } .st-loc__btn { margin-top: auto; padding-inline: 1rem; } @media (min-width: 768px) { .st-locs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .st-loc__body { padding: 1.6rem 1.7rem 1.8rem; } } /* 26c. What you get: reuses the .hv-why cards (25e); adds the "good choice if you..." card */ .st-for { max-width: 52rem; margin: 2rem auto 0; padding: 1.6rem 1.4rem 1.7rem; background: var(--white); border: 1px solid var(--blue-line); border-left: 4px solid var(--blue); border-radius: var(--r); box-shadow: var(--shadow-sm); } .st-for__title { margin: 0 0 1.1rem; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700; line-height: 1.3; } .st-for__list { display: grid; gap: .85rem; margin: 0; } .st-for__list li { font-size: 1.05rem; line-height: 1.55; } .st-for__list li + li { margin-top: 0; } @media (min-width: 768px) { .st-for { padding: 1.9rem 2rem 2rem; } .st-for__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2rem; } } /* 26d. How it works: reuses .hv-steps (25k); the studio buttons sit centred underneath */ .st-pick--center { margin: 0 auto; text-align: center; } .st-how .st-pick__label { margin-bottom: 1rem; font-size: 1.2rem; } /* 26e. Inside our studios: one photo carousel per studio (reuses .carousel, 25g); wider slides for landscape photos, three across on big screens (the arrows hide by themselves when everything fits) */ .st-gal + .st-gal { margin-top: 2.75rem; } .st-gal__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; } .st-gal__pin { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--accent); background: var(--blue-deep); border-radius: 9px; } .st-gal__pin svg { width: 1.3rem; height: 1.3rem; } .st-gal__title { margin: 0; font-family: var(--font-sans); font-size: 1.3rem; font-weight: 700; line-height: 1.25; } .st-gal__state { margin: .1rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--muted); } .st-gal .carousel__slide { flex-basis: min(19rem, 82%); } .st-shot { margin: 0; } .st-shot__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--blue-tint); border-radius: var(--r); box-shadow: var(--shadow-sm); } .st-shot__cap { padding: .75rem .15rem 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--ink); } @media (min-width: 900px) { .st-gal .carousel__slide { flex-basis: calc((100% - 2.2rem) / 3); } } /* 26f. Patient stories: reuses the HV8 cards (.hv-patient, 25i) and the swipe carousel (25g). On big screens, when all four cards fit, they sit in the middle ("safe" keeps the first card reachable if they ever overflow). */ @media (min-width: 900px) { .st-stories .carousel__track { justify-content: safe center; } } /* 26g. Can't come to the studio? Two cards on deep blue: 1 column on phones, 2 from 768px */ .st-alt__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 60rem; margin: 0 auto; } .st-alt__card { display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.7rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-lg); } .st-alt__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 1rem; color: var(--accent); background: rgba(255, 255, 255, .1); border-radius: 10px; } .st-alt__icon svg { width: 1.5rem; height: 1.5rem; } .st-alt__title { margin: 0 0 .6rem; font-family: var(--font-sans); font-size: 1.3rem; font-weight: 700; line-height: 1.3; } .st-alt__card p { margin: 0 0 1.6rem; font-size: 1.05rem; line-height: 1.65; color: rgba(255, 255, 255, .9); } .st-alt__card .btn { margin-top: auto; padding-inline: 1rem; } @media (min-width: 768px) { .st-alt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } .st-alt__card { padding: 1.9rem 1.8rem 2rem; } } /* 26h. FAQ: reuses .faq (21). No new CSS needed. */ /* 26i. Final call to action: reuses .final-cta (23) and the two-line studio buttons (26a); one link line for visitors who cannot travel */ .final-cta .st-final__home { margin: 1.75rem auto 2.25rem; font-size: 1.05rem; } .final-cta .st-link { color: #fff; } .final-cta .st-link:hover { color: var(--accent); } .final-cta__actions .st-pick__btn { justify-content: flex-start; } /* 27. Programme pages (/programmes/...) ------------------------------------------ One template for every condition. Built from the Piriformis page. Section labels here are plain small text (as on Therafit's programme pages), not pills; headings are left-aligned. */ /* 27-top. Logo-only top bar (): the shared .site-header with the logo alone */ .site-header--logo .site-header__inner { justify-content: flex-start; } /* 27-shared. Small label above a heading, and the left-aligned heading */ .pg-label { margin: 0 0 .7rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--accent-ink); /* darker pink: plain pink fails contrast on white */ } .pg-h2 { margin: 0 0 1.25rem; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem); line-height: 1.2; text-align: left; } /* 27a. Hero: deep blue, pink glow, programme pill, three-line headline, one button */ .pg-hero { position: relative; overflow: hidden; padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem); text-align: center; background: radial-gradient(48% 60% at 88% 10%, rgba(255, 102, 196, .18), transparent 70%), radial-gradient(46% 50% at 4% 96%, rgba(70, 130, 225, .24), transparent 70%), linear-gradient(180deg, var(--blue-deep) 0%, #00265C 100%); } .pg-hero::after { /* thin pink line along the bottom edge, as on Therafit */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); } .pg-hero__inner { display: flex; flex-direction: column; align-items: center; } .pg-hero__pill { max-width: 100%; margin-bottom: 1.6rem; padding: .55rem 1.1rem; font-size: .7rem; letter-spacing: .08em; border-radius: 1.25rem; } .pg-hero__title { max-width: 46rem; margin: 0 0 1.4rem; font-size: clamp(1.9rem, 1.1rem + 3.9vw, 3.4rem); line-height: 1.16; letter-spacing: -.005em; } .pg-hero__title span { display: block; } .pg-hero__title .accent-italic { margin-block: .15em; font-weight: 600; } .pg-hero__text { max-width: 38rem; margin: 0 0 2rem; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.75; color: rgba(255, 255, 255, .88); } .pg-hero__text strong { color: #fff; } .pg-hero__btn { max-width: 100%; box-shadow: 0 14px 30px -12px rgba(255, 102, 196, .55); } .btn__play { flex: none; width: 1em; height: 1em; } .pg-hero__note { margin: 1rem 0 0; font-size: .875rem; color: rgba(255, 255, 255, .7); } /* 27a2. Early "quick register" bar, right under the hero: for visitors who won't read the whole page. Not a .section (too tall for a slim bar). */ .pg-early-cta { padding-block: 1rem; background: var(--blue-tint); border-bottom: 1px solid var(--blue-line); } .pg-early-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .pg-early-cta__kicker { margin: 0 0 .15rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); } .pg-early-cta__line { margin: 0; max-width: 40rem; font-size: .95rem; line-height: 1.55; color: var(--text); } .pg-early-cta__line strong { color: var(--blue-deep); } .pg-early-cta__btn { flex: none; } @media (max-width: 560px) { .pg-early-cta__inner { flex-direction: column; align-items: stretch; text-align: center; } .pg-early-cta__btn { width: 100%; } } /* 27b. "Does any of this sound like your life right now?": one card, five italic quotes, pink left edge */ .pg-quotes { display: grid; gap: 1.15rem; margin: 0 0 2rem; padding: clamp(1.25rem, 4vw, 2rem) clamp(1.15rem, 4vw, 2rem); background: var(--white); border: 1px solid var(--blue-line); border-left: 5px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-sm); } .pg-quote { margin: 0; } .pg-quote p { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; color: var(--ink); } .pg-quote strong { font-weight: 700; color: var(--blue-deep); } .pg-sound__yes { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.6; color: var(--ink); } .pg-sound__real, .pg-sound__good { margin: 0 0 1rem; line-height: 1.7; } .pg-sound__good { margin-bottom: 0; } /* 27c. "The honest truth": list of what was tried (red crosses, thin dividers), the real-causes box, the way forward */ .pg-truth__intro { margin: 0 0 .25rem; font-size: 1.05rem; } .pg-x-list { margin: 0 0 2.25rem; padding: 0; list-style: none; } .pg-x-list li { display: flex; align-items: flex-start; gap: .9rem; padding: 1.05rem .15rem; border-bottom: 1px solid var(--blue-line); } .pg-x-list li:last-child { border-bottom: 0; } .pg-x-list__icon { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-top: .1rem; color: var(--danger); background: var(--danger-bg); border-radius: 50%; } .pg-x-list__icon svg { width: .9rem; height: .9rem; } .pg-x-list p { margin: 0; line-height: 1.7; } .pg-x-list strong { color: var(--ink); } .pg-causes { margin: 0 0 2rem; padding: clamp(1.25rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2rem); background: var(--blue-tint); border: 1px solid var(--blue-line); border-left: 5px solid var(--accent); border-radius: var(--r); } .pg-causes__title { margin: 0 0 .6rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem); line-height: 1.25; } .pg-causes__intro { margin: 0 0 .5rem; } .pg-arrows { margin: 0; padding: 0; list-style: none; } .pg-arrows li { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid rgba(0, 74, 173, .14); } .pg-arrows li:last-child { border-bottom: 0; padding-bottom: 0; } .pg-arrows__mark { flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.6rem; color: var(--accent-ink); } .pg-arrows__mark svg { width: 1.1rem; height: 1.1rem; } .pg-arrows p { margin: 0; line-height: 1.65; } .pg-arrows strong { color: var(--ink); } .pg-truth__only { margin: 0; font-size: 1.1rem; line-height: 1.75; color: var(--ink); } /* 27d. Free sample video: centred heading, one wide video card with a "Free sample" tag, "after watching" box, Register button */ .pg-center { text-align: center; } .pg-sample__text { max-width: 36rem; margin: 0 auto 2rem; text-align: center; line-height: 1.7; } .pg-sample__video { max-width: 44rem; margin: 0 auto 1.5rem; } .video-card--tagged .video-card__title { right: 6.5rem; } .video-tag { position: absolute; top: .85rem; right: .9rem; z-index: 1; padding: .25rem .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; /* taps go through to the play button */ color: var(--blue-deep); background: var(--accent); border-radius: var(--r-pill); } .pg-sample__after { max-width: 44rem; margin: 0 auto 1.4rem; padding: .95rem 1.25rem; text-align: center; font-weight: 600; line-height: 1.5; color: var(--blue-deep); background: var(--blue-tint); border: 1px solid rgba(0, 74, 173, .25); border-radius: var(--r); } .pg-sample__action { display: flex; flex-direction: column; align-items: center; gap: .85rem; } .pg-sample__action .btn { max-width: 100%; } .pg-sample__small { margin: 0; font-size: .875rem; color: var(--muted); } /* 27e. Testimonials (deep blue): four video cards, 1 per row on phones, 2 x 2 from 640px */ .pg-testi { position: relative; } .pg-testi::before { /* thin pink line along the top edge, as on Therafit */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); } .pg-label--on-dark { color: var(--accent); } .pg-testi__head { max-width: 40rem; margin: 0 auto clamp(2rem, 5vw, 2.75rem); text-align: center; } .pg-testi__head h2 { margin-bottom: .8rem; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem); } .pg-testi__head p:not(.pg-label) { margin: 0; line-height: 1.7; } .pg-testi__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 34rem; margin: 0 auto 2.25rem; padding: 0; list-style: none; } .pg-testi-card { padding: .7rem .7rem 1.1rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-lg); } .pg-testi-card .video-card { border-radius: var(--r); box-shadow: none; } .pg-testi-card__who { margin: .95rem .45rem 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: #fff; } .pg-testi-card__how { margin: .15rem .45rem 0; font-size: .85rem; line-height: 1.4; color: rgba(255, 255, 255, .72); } .pg-testi__cta { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; } .pg-testi__cta .btn { max-width: 100%; } .pg-testi__small { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .72); } @media (min-width: 640px) { .pg-testi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 56rem; } } /* 27f. The 30-day journey: three phase cards, 1 per row on phones, 3 across from 960px. Also holds .pg-ticks, the tick list reused by "Is this right for you". */ .pg-phases__head { max-width: 42rem; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); } .pg-phases__head p:not(.pg-label) { margin: 0; line-height: 1.7; } .pg-phases__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 44rem; margin: 0; padding: 0; list-style: none; } .pg-phase { position: relative; overflow: hidden; padding: 1.5rem 1.35rem 1.6rem; background: var(--white); border: 1px solid var(--blue-line); border-top: 4px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .pg-phase--blue { border-top-color: var(--blue); } .pg-phase__num { /* big faded number, top right */ position: absolute; top: .1rem; right: 1rem; font-family: var(--font-serif); font-size: 5.5rem; font-weight: 700; line-height: 1; color: rgba(0, 74, 173, .08); pointer-events: none; } .pg-phase__days { margin-bottom: .9rem; text-transform: none; letter-spacing: .02em; font-size: .78rem; } .pg-phase__title { position: relative; margin: 0 0 .6rem; padding-right: 2.5rem; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); line-height: 1.25; } .pg-phase__goal { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.55; color: var(--accent-ink); } .pg-phase__goal strong { color: var(--accent-ink); } .pg-ticks { margin: 0; padding: 0; list-style: none; } .pg-ticks li { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem 0; line-height: 1.6; } .pg-ticks__mark { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.6rem; color: var(--blue); } .pg-ticks__mark svg { width: 1rem; height: 1rem; } .pg-ticks strong { color: var(--ink); } @media (min-width: 960px) { .pg-phases__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: none; } } /* 27g. Everything included (deep blue): eight package cards, 1 per row on phones, 2 across from 768px, then the one-price box */ .pg-included__head { max-width: 44rem; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); } /* same width as the cards below, so the left edges line up */ .pg-included__head .pg-h2 { color: #fff; } .pg-included__head p:not(.pg-label) { margin: 0; line-height: 1.7; } .pg-included__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; max-width: 44rem; margin: 0 auto 1.75rem; padding: 0; list-style: none; } .pg-inc { display: flex; align-items: flex-start; gap: .95rem; padding: 1.05rem 1.1rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r); } .pg-inc__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; font-size: 1.15rem; line-height: 1; background: var(--accent); border-radius: 50%; } .section--dark .pg-inc__title { margin: 0 0 .3rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--accent); text-wrap: pretty; } /* .section--dark h3 sets white: this needs the same weight */ .pg-inc p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .84); } .pg-included__price { max-width: 44rem; margin: 0 auto; padding: 1.2rem 1.25rem; text-align: center; font-size: 1.1rem; line-height: 1.4; color: var(--blue-deep); background: var(--accent); border-radius: var(--r); } .pg-included__price strong { font-family: var(--font-serif); font-size: 1.6rem; color: var(--blue-deep); } @media (min-width: 768px) { .pg-included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; } .pg-included__head, .pg-included__price { max-width: 60rem; } .pg-included__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd number of cards: the last one spans both columns */ } /* 27h. "Is this right for you?": two cards, 1 per row on phones, side by side from 720px. Uses .pg-ticks (27f). */ .pg-fit__head { max-width: 40rem; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); } .pg-fit__head .pg-h2 { margin-bottom: 0; } .pg-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; max-width: 60rem; margin: 0 auto; } .pg-fit-card { padding: 1.35rem 1.3rem 1.1rem; background: var(--blue-tint); border: 1.5px solid var(--blue); border-radius: var(--r-lg); } .pg-fit-card--no { background: var(--danger-bg); border-color: var(--danger); } .pg-fit-card__title { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--ink); } .pg-fit-card--no .pg-fit-card__title { color: var(--danger); } .pg-ticks--lines li { border-bottom: 1px solid rgba(0, 74, 173, .16); } .pg-ticks--lines li:last-child { border-bottom: 0; } .pg-fit-card--no .pg-ticks--lines li { border-bottom-color: rgba(180, 35, 24, .2); } .pg-fit-card--no .pg-ticks--lines li:last-child { border-bottom: 0; } .pg-ticks--x .pg-ticks__mark { color: var(--danger); } @media (min-width: 720px) { .pg-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } } /* 27i. Pricing: one white card with a pink border. No ribbon, struck-through price or "% off" (deferred urgency). */ .pg-price__text { max-width: 38rem; margin: 0 auto 2rem; text-align: center; line-height: 1.7; } .pg-price-card { max-width: 28rem; margin: 0 auto; padding: 1.75rem 1.35rem 1.5rem; background: var(--white); border: 2px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow); text-align: center; } .pg-price-card__name { margin: 0 0 .25rem; font-weight: 600; color: var(--muted); } .pg-price-card__price { margin: 0 0 1.25rem; font-family: var(--font-serif); font-size: clamp(3rem, 2.4rem + 3vw, 4rem); font-weight: 700; line-height: 1.1; color: var(--ink); } .pg-price-card .pg-ticks { margin-bottom: 1.5rem; text-align: left; } .pg-price-card .pg-ticks li { padding-block: .6rem; } .btn--stack { flex-direction: column; gap: .15rem; width: 100%; } .btn__main { display: block; } .btn__sub { display: block; font-size: .875rem; font-weight: 500; opacity: .92; } .pg-price-card__steps { margin: .95rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--muted); } /* 27j. Zero risk: round pink badge, short promise, small print */ .pg-guarantee__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .pg-badge { display: grid; place-content: center; width: 7rem; height: 7rem; margin-bottom: 1.4rem; text-align: center; color: var(--blue-deep); background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 7px rgba(255, 102, 196, .22), 0 14px 30px -10px rgba(255, 102, 196, .65); } .pg-badge__num { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; line-height: 1; } .pg-badge__txt { max-width: 5rem; margin: .1rem auto 0; font-size: .62rem; font-weight: 700; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; } .pg-guarantee__text { max-width: 36rem; margin: 0 0 1rem; font-size: 1.1rem; line-height: 1.7; } .pg-guarantee__small { max-width: 34rem; margin: 0; font-size: .9rem; line-height: 1.65; color: var(--muted); } /* 27k. FAQ: the shared .faq accordion (21) with each row as a white card and a pink left edge */ .pg-faq { display: grid; gap: .75rem; max-width: 46rem; border-top: 0; } .pg-faq .faq__item { background: var(--white); border: 1px solid var(--blue-line); border-left: 4px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-sm); } .pg-faq .faq__item summary { padding: 1rem 1.1rem; } .pg-faq .faq__answer { padding: 0 1.1rem 1.3rem; } /* 27l. "Is this a scam?": deep blue trust section: six evidence tiles (2 across on phones, 3 from 640px), the free-sample line, the team card and the contact line */ .pg-trust__text { max-width: 36rem; margin: 0 auto 2rem; text-align: center; line-height: 1.7; } .pg-trust__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0 0 2rem; padding: 0; list-style: none; } .pg-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .8rem; text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.4; color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r); } .pg-tile__icon { font-size: 1.5rem; line-height: 1; } .pg-trust__sample { margin: 0 0 2rem; text-align: center; line-height: 1.7; } .pg-trust__sample strong { color: var(--accent); } .pg-team { padding: 1.25rem 1.2rem .5rem; margin: 0 0 1.75rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-lg); } .section--dark .pg-team__title { margin: 0 0 .5rem; font-size: 1.25rem; text-align: center; color: var(--accent); } .pg-team__list { margin: 0; padding: 0; list-style: none; } .pg-team__row { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-top: 1px solid rgba(255, 255, 255, .14); } .pg-team__row:first-child { border-top: 0; } .pg-team__avatar { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--blue-deep); background: var(--accent); border-radius: 50%; } .pg-team__avatar svg { width: 1.35rem; height: 1.35rem; } .pg-team__name { margin: 0; font-weight: 700; line-height: 1.3; color: #fff; } .pg-team__role { margin: .1rem 0 0; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .74); } .pg-trust__contact { margin: 0; text-align: center; line-height: 1.8; } .pg-trust__contact a { font-weight: 700; color: var(--accent); text-underline-offset: 3px; } .section--dark .pg-trust__contact a { color: var(--accent); } @media (min-width: 640px) { .pg-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; } } /* 27m. The decision: last block before the footer, a step darker than the trust section above it */ .pg-decision { text-align: center; background: linear-gradient(180deg, #002A66 0%, var(--blue-night) 100%); border-top: 1px solid rgba(255, 255, 255, .14); } .pg-decision__inner { display: flex; flex-direction: column; align-items: center; } .pg-decision p { max-width: 36rem; margin: 0 0 1.1rem; line-height: 1.75; } .pg-decision .pg-decision__sure { margin: .4rem 0 1.75rem; font-size: 1.15rem; } .pg-decision .btn { max-width: 100%; } .pg-decision .pg-decision__small { margin: 1rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .7); } /* 28. Registration form modal (programme pages). A native