/* ═══════════════════════════════════════════════════════════════════════════ CORE — tokens, reset, typography, nav, buttons, footer. Light & premium. Built for an audience of international clients and investors: high contrast, generous whitespace, restrained motion. Colour directs attention; it is never decoration. Palette inherits Prepco brand — teal #018380, gold #E7A81E. Every token lives here; restyle from this block, not from the sections file. ═════════════════════════════════════════════════════════════════════════ */ :root { /* Ground for the rounded dark-panel blocks — the actual Prepco brand teal (#018380), not the forest-green borrowed from an unrelated chiropractic reference this used to run on. */ --hero-grad: linear-gradient(165deg, #013E3C 0%, #016663 45%, #018380 100%); --ink-deep: #04211F; /* Page is white now; ink is a dark green-black rather than white-on-dark. */ --page-bg: #FFFFFF; --ink: #132A20; --body: #4A5D54; --muted: #71847B; --faint: #9FAFA7; /* On the dark rounded panels (hero, etc.) text still needs the light set — these are scoped inside .on-dark rather than living at :root. */ --ink-on-dark: #FFFFFF; --body-on-dark: rgba(235,250,241,.88); --muted-on-dark: rgba(235,250,241,.72); --faint-on-dark: rgba(235,250,241,.52); /* Accent — the actual Prepco brand teal, not the green this used to run on (was #16A34A/#0F7A38/#22C55E — a different brand entirely). */ --accent: #018380; --accent-deep: #016663; --accent-light: #14B8B4; --accent-wash: rgba(1,131,128,.09); /* Gold carries every booking action */ --gold: #E7A81E; --gold-bright: #F6C544; --gold-deep: #C08A0C; --gold-wash: rgba(231,168,30,.14); --brand-teal: #018380; /* Lines + surfaces. Cards are solid white now, not glass on a gradient. */ --line: rgba(4,45,43,.12); --line-2: rgba(4,45,43,.07); --glass: #FFFFFF; --glass-hi: #F4FAF9; --glass-line: rgba(4,45,43,.10); --glass-blur: blur(0px); --card: #FFFFFF; --shadow-sm: 0 1px 2px rgba(4,45,43,.05), 0 2px 10px rgba(4,45,43,.06); --shadow-md: 0 2px 6px rgba(4,45,43,.06), 0 10px 26px rgba(4,45,43,.08); --shadow-lg: 0 4px 10px rgba(4,45,43,.07), 0 20px 48px rgba(4,45,43,.10); --shadow-xl: 0 8px 18px rgba(4,45,43,.08), 0 32px 72px rgba(4,45,43,.12); /* Type */ --f-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Motion — restrained on purpose */ --ease: cubic-bezier(.22,.72,.16,1); --ease-out: cubic-bezier(.16,1,.3,1); /* Pointer tilt, shared so a card's own hover transform (lift/translate) can compose with it instead of overwriting it — see .tilt-card. */ --tilt: perspective(900px) rotateX(calc(var(--ty, 0) * -6deg)) rotateY(calc(var(--tx, 0) * 6deg)); --shell: 1360px; --nav-h: 64px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* overflow-x here is the actual fix for mobile's horizontal-scroll gap — , not , is what the viewport itself scrolls; body's own overflow-x:clip below only contained overflow inside body's own box and never stopped from being sideways-scrollable when some deeply nested element (a decorative blob, a horizontal rail) still leaked a few px past the edge. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; overflow-x: clip; } body { font-family: var(--f-sans); background: var(--page-bg); color: var(--body); font-size: 16px; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--accent-light); color: #0A2A1C; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ── Layout ────────────────────────────────────────────────────────────── */ .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; position: relative; } section { position: relative; } .band { padding: clamp(26px, 2.9vw, 42px) 0; background: transparent; } /* The page is a plain white ground now (no fixed full-page layer to protect), so alternating bands can carry a whisper of tint for rhythm without creating a seam anywhere that matters. */ .band.soft, .band.tint { background: var(--glass-hi); } /* ── Type ──────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); font-weight: 700; letter-spacing: -.022em; } .h-sec { font-size: clamp(27px, 3.3vw, 44px); line-height: 1.14; } .h-sec.big { font-size: clamp(31px, 4.4vw, 58px); } .accent { color: var(--accent); } .accent-gold { color: var(--gold); } .sub-sec { font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); margin-top: 14px; max-width: 58ch; line-height: 1.65; } .sec-subhead { margin-top: 16px; font-family: var(--f-display); font-weight: 700; font-size: clamp(15.5px, 1.6vw, 19px); color: var(--accent-deep); letter-spacing: -.01em; } .center .sec-subhead { margin-inline: auto; } .center { text-align: center; } .center .sub-sec { margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); padding: 7px 15px; border-radius: 100px; background: var(--accent-wash); border: 1px solid rgba(1,102,99,.14); } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .sec-head { margin-bottom: clamp(15px, 1.8vw, 24px); } .sec-head .h-sec { margin-top: 11px; } .ic { width: 20px; height: 20px; flex: none; fill: none; stroke-width: 1.75; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--f-display); font-size: 15px; font-weight: 600; letter-spacing: -.008em; padding: 14px 26px; border-radius: 100px; white-space: nowrap; transition: background .25s var(--ease), color .25s, border-color .25s, box-shadow .3s var(--ease), transform .3s var(--ease); } .btn .ic { width: 17px; height: 17px; transition: transform .3s var(--ease); } .btn:hover .ic { transform: translateX(3px); } /* Gold, properly: a three-stop ramp with a light top edge and a darker floor, plus an inset highlight so it reads as a lit surface rather than a flat swatch. The ink is a deep brown-gold, not black — black on gold reads cheap. */ .btn-primary { background: linear-gradient(168deg, #F7C948 0%, var(--gold-bright) 46%, #C08A0C 100%); color: #3A2A05; border: 1px solid rgba(255,255,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(120,86,8,.24), 0 10px 24px -10px rgba(184,134,11,.60); text-shadow: 0 1px 0 rgba(255,255,255,.22); } .btn-primary:hover { background: linear-gradient(168deg, #FBD469 0%, #EFAF22 48%, #B07E08 100%); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 2px 5px rgba(120,86,8,.26), 0 18px 38px -12px rgba(184,134,11,.66); } .btn-primary:active { transform: translateY(0); } .btn-dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-md); } .btn-dark:hover { background: #0B3E3A; transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-line { border: 1px solid var(--glass-line); color: var(--ink); background: var(--glass-hi); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-sm); } .btn-line:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-ghost { font-size: 14px; padding: 10px 18px; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); } .btn-lg { font-size: 16px; padding: 17px 32px; } .btn-block { width: 100%; } /* On the one dark band */ .on-dark .btn-line { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); color: #fff; box-shadow: none; } .on-dark .btn-line:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); color: #fff; } /* ── Scroll progress ───────────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900; background: transparent; pointer-events: none; } .scroll-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-light)); } /* ── Nav ─────────────────────────────────────────────────────────────────── A floating control rather than a bar welded to the top edge: the shell detaches from the viewport, the links live in their own inset pill, and the booking action is the one gold thing on screen. It contracts on scroll. */ .nav { /* Links only, centred. The mark and the booking button both came out — the bar's whole job now is navigation, and the page carries the CTA nine other times. It still contracts on scroll. Centred with left/right/margin-inline, NOT transform/translate: a `translate` (or `transform`) on this element makes it the containing block for any `position:fixed` descendant — which .nav-links is on mobile — so the dropdown menu would size itself against this ~52px pill instead of the viewport and render as a broken sliver. */ position: fixed; z-index: 800; top: 16px; left: 0; right: 0; margin-inline: auto; width: max-content; display: flex; align-items: center; justify-content: center; max-width: calc(100% - 32px); padding: 6px; border-radius: 100px; /* Barely there: on the teal ground a heavy bar competes with the page. A thin blurred wafer is enough to hold the links legible. */ background: rgba(255,255,255,.07); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255,255,255,.13); box-shadow: none; transition: top .4s var(--ease), padding .4s var(--ease), background .4s, box-shadow .4s, border-color .4s; } /* Unstuck, the nav floats over the dark hero panel — light text on a barely- there wafer. Past the hero it's riding over the white page instead, so the stuck state flips to a light pill with dark text rather than trying to stay legible against whatever content happens to scroll underneath it. */ .nav.stuck { top: 8px; background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(1.3); border-color: rgba(4,45,43,.08); box-shadow: 0 10px 30px -16px rgba(4,45,43,.22); } .nav.stuck .nav-links a { color: var(--body); } .nav.stuck .nav-links a:hover { color: var(--ink); background: var(--glass-hi); } .nav.stuck .nav-links a.active { color: var(--accent-deep); background: var(--accent-wash); box-shadow: inset 0 0 0 1px rgba(1,102,99,.18); } .nav.stuck .nav-burger { border-color: var(--line); background: var(--glass-hi); } .nav.stuck .nav-burger i { background: var(--ink); } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-links a { font-family: var(--f-display); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: rgba(233,250,247,.78); padding: 9px 16px; border-radius: 100px; /* Without this, a flex item's default min-width:auto lets the browser wrap its text onto a second line under any width pressure instead of letting the pill grow — at ~1000-1050px the bar visibly broke each link across two lines and rode up over the section heading below it. */ white-space: nowrap; flex: none; transition: color .22s, background .22s; } .nav-links a:hover { color: #fff; background: rgba(255,255,255,.10); } /* The current section reads by weight and a soft teal fill, not a solid block — a bright pill in a translucent bar looked stuck on. */ .nav-links a.active { color: #fff; background: rgba(20,184,180,.18); box-shadow: inset 0 0 0 1px rgba(20,184,180,.32); } .nav-burger { display: none; width: 40px; height: 40px; border-radius: 100px; border: 1px solid var(--line); background: rgba(255,255,255,.12); flex: none; } .nav-burger i { display: block; width: 16px; height: 1.6px; background: #fff; margin: 4px auto; border-radius: 2px; transition: transform .3s var(--ease); } .nav-burger[aria-expanded="true"] i:first-child { transform: translateY(2.8px) rotate(45deg); } .nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-2.8px) rotate(-45deg); } @media (max-width: 860px) { /* `backdrop-filter` (like `transform`) makes its element the containing block for any `position:fixed` descendant — .nav-links is exactly that on mobile, so with the filter left on, the dropdown sized itself against this ~40px burger pill instead of the viewport and rendered as a broken sliver. The pill's own blur is imperceptible on an object this small; the dropdown panel below has its own separate blur regardless. */ /* Only the burger remains visible in the pill on mobile (the links move into the off-canvas dropdown below) — anchored to the top-right corner like a normal menu button, not centred like the full desktop pill. The brand mark lives separately, at the top of the hero (see .hero-mobile-logo below) — not merged into this bar. */ .nav { padding: 6px; backdrop-filter: none; left: auto; right: 12px; margin-inline: 0; } .nav.stuck { backdrop-filter: none; } .nav-links { position: fixed; inset: calc(var(--nav-h) + 6px) 12px auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border-radius: 22px; background: rgba(4,45,43,.96); backdrop-filter: blur(22px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateY(-14px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .3s var(--ease); } .nav-links.open { transform: none; opacity: 1; pointer-events: auto; } .nav-links a { padding: 13px 16px; font-size: 15.5px; } .nav-burger { display: block; } } /* ── Footer ───────────────────────────────────────────────────────────── A solid dark panel bookending the hero rather than a translucent strip — now that the page itself is white, this is the one other place the ground goes dark. Same shared layout on the landing page and checkout — brand + social, site links, contact, legal, then a bottom bar with the copyright and the medical disclaimer. */ .foot { background: var(--ink-deep); padding: 56px 0 36px; } .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .foot-brand b { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 16px; font-weight: 700; color: var(--ink-on-dark); } .foot-brand b img { width: 26px; height: 26px; flex: none; } .foot-desc { margin-top: 14px; font-size: 13px; line-height: 1.6; max-width: 320px; color: var(--muted-on-dark); } .foot-social { display: flex; gap: 9px; margin: 16px 0 4px; } .foot-social .soc { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--muted-on-dark); transition: background .22s, border-color .22s, color .22s, transform .22s; } .foot-social .soc:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #3B2A04; transform: translateY(-2px); } .foot-social .soc .ic { width: 15px; height: 15px; } .foot-col h5 { color: var(--ink-on-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 14px; } .foot-col a, .foot-col span { display: flex; align-items: center; gap: 7px; color: var(--muted-on-dark); font-size: 13.5px; line-height: 1.4; text-decoration: none; margin-bottom: 11px; } .foot-col a:hover { color: var(--accent-light); } .foot-col .ic { width: 14px; height: 14px; color: var(--gold-bright); flex: none; } .foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: var(--faint-on-dark); } .foot-disc { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--faint-on-dark); opacity: .8; } @media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 560px) { .shell { padding: 0 20px; } .foot-top { grid-template-columns: 1fr; gap: 26px; } } /* ── Dark panel ───────────────────────────────────────────────────────────── The page is white now; this is the contained, rounded block that carries the old page-wide dark ground — used for the hero and one accent band, not the whole document. Same gradient, grain and drifting light, just scoped to its own rounded box instead of position:fixed;inset:0. */ .panel-dark { position: relative; overflow: hidden; isolation: isolate; border-radius: clamp(20px, 2.6vw, 32px); background: var(--hero-grad); color: var(--body-on-dark); } /* The faint graph-paper grid (last two layers) used to live only on the hero as its own separate .hero-grid-lines div — folded in here so every .panel-dark box shares the identical background, not a similar-looking hand copy of it. */ .panel-dark::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(2,28,27,.20) 0%, rgba(2,28,27,.38) 100%), radial-gradient(60% 50% at 15% 10%, rgba(1,131,128,.42), transparent 60%), radial-gradient(50% 45% at 90% 20%, rgba(231,168,30,.24), transparent 60%), radial-gradient(55% 55% at 82% 92%, rgba(1,131,128,.26), transparent 62%), linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: auto, auto, auto, auto, 68px 68px, 68px 68px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%); } .panel-dark::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size: 3px 3px; animation: grainShift 8s steps(8) infinite; } /* A steady dot pattern reads as a printed screen; letting it hop between a few offsets each second reads as film grain. Steps, not smooth easing — a grain that drifts smoothly looks like a bug, not texture. */ @keyframes grainShift { 0%, 100% { transform: translate(0,0); } 12% { transform: translate(-1px,1px); } 24% { transform: translate(1px,-1px); } 37% { transform: translate(-1px,-1px); } 50% { transform: translate(1px,1px); } 62% { transform: translate(-1px,0); } 75% { transform: translate(0,1px); } 87% { transform: translate(1px,0); } } @media (prefers-reduced-motion: reduce) { .panel-dark::before { animation: none; } } .panel-aura span { position: absolute; z-index: 0; border-radius: 50%; will-change: transform; pointer-events: none; } .panel-aura .a-teal { width: 62vw; height: 62vw; left: -14vw; top: -12vw; filter: blur(90px); opacity: .55; background: radial-gradient(circle, rgba(1,131,128,.55), rgba(1,131,128,0) 68%); } .panel-aura .a-gold { width: 52vw; height: 52vw; right: -12vw; top: -6vw; filter: blur(90px); opacity: .5; background: radial-gradient(circle, rgba(231,168,30,.42), rgba(231,168,30,0) 68%); } .panel-aura .a-aqua { width: 58vw; height: 58vw; right: -14vw; bottom: -16vw; filter: blur(100px); opacity: .5; background: radial-gradient(circle, rgba(1,131,128,.45), rgba(1,131,128,0) 70%); } .panel-aura .a-warm { width: 46vw; height: 46vw; left: -10vw; bottom: -12vw; filter: blur(100px); opacity: .42; background: radial-gradient(circle, rgba(246,197,68,.34), rgba(246,197,68,0) 70%); } /* A fifth, smaller accent — gives the drift more depth than four blobs moving in the same visual plane; this one is deliberately tighter and brighter so it reads as a near light rather than another wash. */ .panel-aura .a-glow { width: 26vw; height: 26vw; left: 38%; top: 42%; filter: blur(70px); opacity: .30; background: radial-gradient(circle, rgba(20,184,180,.5), rgba(20,184,180,0) 68%); } /* A slow diagonal sweep of light, independent of the drifting blobs — the difference between a background that sits there and one that feels lit. Wide and very low-opacity on purpose: at any single moment it should be nearly invisible, noticeable only as a slow overall brightening you catch out of the corner of your eye. CSS-animated (not JS) so it runs even if Motion.Aura never initialises. */ .panel-aura .a-beam { position: absolute; z-index: 0; inset: -30% -60%; opacity: .5; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 45%, rgba(246,197,68,.07) 50%, rgba(255,255,255,.05) 55%, transparent 70%); transform: translateX(-40%); animation: pageBeam 26s ease-in-out infinite; } @keyframes pageBeam { 0%, 100% { transform: translateX(-40%) translateY(-6%); } 50% { transform: translateX(40%) translateY(6%); } } @media (prefers-reduced-motion: reduce) { .panel-aura .a-beam { animation: none; opacity: .25; } } /* Text + accent tokens inside a dark panel — same names, dark-ground values (the root tokens were flipped for a white page and read as near-invisible dark-on-dark otherwise — e.g. the eyebrow pill's --accent-deep text). */ .on-dark, .panel-dark { --ink: var(--ink-on-dark); --body: var(--body-on-dark); --muted: var(--muted-on-dark); --faint: var(--faint-on-dark); --line: rgba(255,255,255,.16); --line-2: rgba(255,255,255,.09); --glass: rgba(255,255,255,.08); --glass-hi: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.18); --glass-blur: blur(14px); --card: rgba(255,255,255,.08); /* Two real stops, not one flat colour repeated — the hero watermark's gradient (gold → accent-light → accent-deep) needs actual movement between these two to read as a gradient instead of gold fading into a single flat teal against the dark panel. */ --accent-deep: #2DD4BF; --accent-light: #99F6E4; --accent-wash: rgba(94,234,212,.20); --gold-wash: rgba(231,168,30,.16); } /* Plain .accent (color: var(--accent), the base dark teal) is legible on the white page but is near-invisible on a dark panel of the SAME teal family — so any .accent text inside one of these panels gets the hero watermark's own gold → accent-light → accent-deep gradient instead, rather than staying flat and low-contrast. */ .on-dark .accent, .panel-dark .accent { background: linear-gradient(100deg, var(--gold-bright) 0%, var(--accent-light) 48%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }