/* ========================================================================== BABY ANGELS · COMING SOON PAGE — Editorial Mock v2 (Jul 2026) Mirrors the refined pastel-nursery mock: hero with live nursery photo, feature strip, close-to-you (with nurse photo), three-paragraph promise column beside a pink Facebook card, footer. ========================================================================== */ /* ---- Design tokens ---- */ :root { --ivory: #FBF7F2; --ivory-warm: #FCF6EE; --cream: #FFFDFA; --ink: #2A2438; --ink-soft: #4A4258; --ink-mute: #7A7388; --rose: #E89BAF; --rose-deep: #D47896; --rose-soft: #F4C2D0; --rose-mist: #FCEEF1; --blush: #FADCD1; --blue: #8FA3C9; --blue-mist: #DCE5EF; --gold: #C9A55C; --gold-deep: #B08A45; --gold-warm: #E7CE85; --lavender: #D4C2E4; --violet: #A796CF; --coral: #E89B7E; --fb-blue: #1877F2; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, serif; --font-script: 'Allura', 'Cormorant Garamond', cursive; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --shadow-lift: 0 20px 44px -24px rgba(212, 120, 150, 0.28), 0 8px 18px -10px rgba(143, 163, 201, 0.18); } /* ---- Reset ---- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Clip horizontal overflow at the ROOT so the page can't be dragged left/right on mobile. Decorative bubbles, clouds and stars use negative offsets that bleed past the viewport edge; clipping here (not just on ) is what actually stops the sideways scroll on iOS Safari & Android, where stays the scroll container. */ overflow-x: hidden; width: 100%; /* Kill horizontal overscroll / rubber-band so the page can't be dragged sideways on touch even by a stray pixel. */ overscroll-behavior-x: none; } body { font-family: var(--font); color: var(--ink); line-height: 1.6; background: var(--ivory-warm); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; width: 100%; max-width: 100%; position: relative; overscroll-behavior-x: none; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } /* ---- Page shell ---- */ .page { min-height: 100vh; padding: clamp(24px, 3vw, 40px); position: relative; /* Extra containment guard: clip any decorative bleed inside the wrapper too. `clip` clips both axes without creating a scroll container, so it won't interfere with sticky/absolute anchoring. */ overflow-x: clip; max-width: 100%; background: radial-gradient(ellipse 55% 40% at 92% 5%, rgba(244, 194, 214, 0.40) 0%, rgba(252, 246, 238, 0) 62%), radial-gradient(ellipse 55% 40% at 5% 12%, rgba(190, 208, 236, 0.30) 0%, rgba(252, 246, 238, 0) 62%), radial-gradient(ellipse 55% 35% at 95% 100%, rgba(244, 194, 214, 0.24) 0%, rgba(252, 246, 238, 0) 60%), var(--ivory-warm); background-attachment: fixed; } /* Faint gold-and-rose star sparkles in the margins — absolute-positioned so they SCROLL with the page rather than being pinned to the viewport. */ .page { background-attachment: scroll; /* was fixed — same reason: scroll with page */ } .page::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Scattered along the page — six per screen-height so they repeat naturally as the page scrolls, keeping the sky-sparkle feel down the whole page instead of vanishing after the fold. */ background: url("data:image/svg+xml;utf8,") 6% 6%, url("data:image/svg+xml;utf8,") 94% 5%, url("data:image/svg+xml;utf8,") 3% 25%, url("data:image/svg+xml;utf8,") 97% 32%, url("data:image/svg+xml;utf8,") 4% 55%, url("data:image/svg+xml;utf8,") 96% 62%, url("data:image/svg+xml;utf8,") 5% 82%, url("data:image/svg+xml;utf8,") 95% 92%; background-size: 8px 8px, 7px 7px, 7px 7px, 8px 8px, 7px 7px, 7px 7px, 8px 8px, 7px 7px; background-repeat: no-repeat; opacity: 0.55; animation: sparkleT 5s ease-in-out infinite; } @keyframes sparkleT { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { .page::before { animation: none; opacity: 0.5; } } /* ========================================================================== HERO — text left, curvy quarter-circle photo top-right (Jul 2026 rev) ========================================================================== */ .hero { position: relative; z-index: 1; /* Full-bleed hero — the OTHER sections (feature strip, close section, footer) keep their 1240 max-width via their own wrappers, but the hero spans the full page so the left column can anchor close to the page's left edge on wide monitors instead of getting pushed centre-ward by a 1240 container. */ max-width: none; margin: 0; } .hero-inner { position: relative; /* Modest left padding keeps the content column flush against the LEFT side of the page. Right padding is small too — the photo sits inside its own gap via its `right` offset. */ padding: clamp(20px, 2.4vw, 32px) clamp(24px, 4vw, 56px); display: flex; align-items: center; min-height: min(820px, calc(100vh - 80px)); } /* ---- Brand mark (top-left of hero) ---- */ .brand-mark { display: flex; flex-direction: column; align-items: center; text-decoration: none; margin: 0 0 clamp(18px, 2vw, 26px); gap: 0; text-align: center; } /* Sized for the official BabyAngel FA logo (3 Aug 2026). That artwork carries roughly 14% transparent margin baked into the PNG on every side, so the box is set a little larger than the old circular mark in order to keep the VISIBLE logo the same optical size. */ .brand-logo { width: clamp(200px, 19vw, 260px); max-width: clamp(200px, 19vw, 260px); height: auto; /* Negative margin cancels the transparent strip built into the bottom of the PNG, so PREMIUM INFANT CARE sits tight under the wordmark instead of floating ~30px below it. Scales with the logo. */ margin-bottom: clamp(-36px, -2.6vw, -26px); filter: drop-shadow(0 4px 14px rgba(212, 120, 150, 0.20)); } .brand-sub { font-family: var(--font); font-size: clamp(13px, 1.25vw, 16px); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; /* Logo midnight-plum (3 Aug 2026). Sampled directly from the dark background of the BabyAngel logo artwork (#241F37) so the tagline matches the brand mark exactly, rather than sitting in the pink family. History: peach #EAA692 (1.9:1 — failed AA), then deep plum #94566F (5.1:1). This measures ~15:1 against the ivory page, comfortably past AAA for small text. */ color: #241F37; opacity: 1; } /* Cursive tagline — full slogan across two elegant lines with a pink sparkle anchoring the top-left and a blue sparkle anchoring the bottom-right. Text itself carries the site's dreamy rose→mauve→blue gradient with a slow, humble shine sweep. */ .hero-script { position: relative; /* Inline-flex lays the pink star + slogan + blue star out on ONE horizontal row, vertically centred on each other. */ display: inline-flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); /* Elegant italic serif instead of the heavy cursive Allura — much more readable, still refined and premium. */ font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; letter-spacing: 0.005em; margin: 0 auto clamp(6px, 1vw, 10px); padding: clamp(6px, 1vw, 12px) clamp(6px, 1vw, 12px); text-align: center; line-height: 1.3; white-space: nowrap; max-width: 100%; } /* Dreamy pink-mauve-blue gradient shining slowly across the text */ .tagline-words { display: inline-block; background: linear-gradient(115deg, #D47896 0%, #C08FB4 42%, #A296C4 58%, #8FA3C9 100%); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sloganShine 9s ease-in-out infinite; filter: drop-shadow(0 1px 2px rgba(200, 150, 180, 0.15)); } @keyframes sloganShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Twinkling 4-point star flourishes at opposite corners */ .tagline-flourish { /* Inline stars — sit on the same horizontal line as the slogan text (parent uses inline-flex + align-items: center). Delicate accents, sized in step with the slogan. */ position: static; display: inline-block; width: clamp(14px, 1.3vw, 18px); height: clamp(14px, 1.3vw, 18px); flex-shrink: 0; opacity: 0.85; animation: none !important; /* fully static — no twinkle */ } .tagline-flourish--pink { fill: var(--rose-deep); animation-delay: 0s; } .tagline-flourish--blue { fill: var(--blue); animation-delay: 1.6s; } @keyframes taglineFlourishTwinkle { 0%, 100% { opacity: 0.7; transform: scale(1) rotate(0deg); } 50% { opacity: 0.95; transform: scale(1.08) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { .tagline-words { animation: none; background-position: 50% 50%; } .tagline-flourish { animation: none; opacity: 0.8; } } /* Divider under the cursive line */ /* ---- Decorative pink & blue stars scattered across the hero ---- Replaces the old pink heart divider. Absolutely positioned within the hero area, each at a different corner / edge, with a delicate twinkle animation. Both palette tones from the site are used — pink (rose-deep) and blue (blue) — mixed 4-and-4. */ .deco-star { position: absolute; pointer-events: none; z-index: 0; /* Behind content but above the page background */ opacity: 0.7; /* Fully static — no animation. */ animation: none !important; transform: none !important; transition: none !important; } /* Universal star kill-switch — belt and braces. Any element whose class contains "star" or "flourish" is completely frozen: no animation of any kind, no transform, no transition, no animation name/duration/delay/iteration. Immune to any older rule anywhere else in the file, including the reduced-motion overrides. */ [class*="star"], [class*="flourish"], [class*="Star"], [class*="Flourish"] { animation: none !important; animation-name: none !important; animation-duration: 0s !important; animation-play-state: paused !important; animation-iteration-count: 0 !important; animation-delay: 0s !important; transform: none !important; transition: none !important; will-change: auto !important; } /* Even under prefers-reduced-motion, stars stay dead-frozen. */ @media (prefers-reduced-motion: reduce) { [class*="star"], [class*="flourish"] { animation: none !important; animation-name: none !important; animation-duration: 0s !important; transform: none !important; transition: none !important; } } .deco-star--pink { fill: var(--rose-deep); } .deco-star--blue { fill: var(--blue); } /* Individual star placements — spread across the hero corners and edges so the sparkle feels ambient, not clustered. Sizes vary from tiny satellite (10px) to a modest accent (22px). */ /* All stars are anchored to safe edge zones — none sit inside the content column where the logo, slogan, ribbon, description, or CTA render. Positions are fixed (no drift); only their opacity twinkles so they read as still glitter, not floating specks. */ /* Star positions — all repositioned to the LEFT column and the very top/bottom rims of the hero, well away from the bubble-foam cluster that sits around the photo on the right half. */ .ds-1 { top: 2%; left: 8%; width: 14px; height: 14px; } .ds-2 { top: 3%; left: 28%; width: 10px; height: 10px; } .ds-3 { top: 16%; left: 3%; width: 12px; height: 12px; } .ds-4 { top: 42%; left: 2%; width: 15px; height: 15px; } .ds-5 { top: 60%; left: 4%; width: 13px; height: 13px; } .ds-6 { top: 82%; left: 8%; width: 11px; height: 11px; } .ds-7 { bottom: 3%; left: 22%; width: 15px; height: 15px; } .ds-8 { bottom: 5%; left: 40%; width: 9px; height: 9px; } /* Static twinkle — opacity only, no transform, so the star holds its position (no scaling / rotation / drift). */ @keyframes decoStarTwinkle { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } } /* (Glitter halo effect on ds-3 / ds-4 removed — all stars use the quiet decoStarTwinkle opacity fade above.) */ @media (prefers-reduced-motion: reduce) { .deco-star { animation: none; opacity: 0.7; } } /* ========================================================================== LUXURY GOLD COMING SOON PILL (Jul 2026) Matches the main website's premium gold treatment: · 7-stop metallic gradient with warm mids + cool highlights · Subtle sheen mask on top · Foil rim + depth + halo drop shadows (3 layers, pulsing) · Slow gradient "molten" sweep · Travelling white shine band across the surface · Gold-pearl dot with breathing pulse ========================================================================== */ .coming-badge { position: relative; display: inline-flex; align-items: center; gap: 16px; /* Extra horizontal padding so the text clears the swallowtail V-notches carved into either end of the ribbon. */ padding: 18px 62px 18px 62px; margin: clamp(10px, 1.4vw, 16px) 0 clamp(24px, 2.6vw, 34px); border: none; border-radius: 0; /* Ceremonial ribbon banner — a rectangular gold body with V-cut swallowtails at both ends. Same shape you'd see draped across an opening-ceremony entrance. */ clip-path: polygon( 0% 0%, /* top-left corner */ 100% 0%, /* top-right corner */ 93% 50%, /* right V-notch (7% deep) */ 100% 100%, /* bottom-right corner */ 0% 100%, /* bottom-left corner */ 7% 50% /* left V-notch */ ); overflow: hidden; color: #4A3418; font-family: var(--font); font-size: clamp(14px, 1.25vw, 17px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; /* Layered gold foil: 1) subtle top sheen mask 2) primary metallic gradient with warm mids and cool highlights */ background: linear-gradient(180deg, rgba(255, 246, 214, 0.55) 0%, rgba(255, 246, 214, 0) 45%, rgba(0, 0, 0, 0.06) 100%), linear-gradient(135deg, #7A5A28 0%, #B08A45 14%, #E7CE85 32%, #F6EAB4 45%, #D9B565 60%, #A17F3E 78%, #6E4E22 100%); background-size: 100% 100%, 220% 100%; background-position: 0 0, 0% 50%; /* Inset shadows (top sheen, bottom depth) still work under clip-path. The outer border ring and drop shadow now come from `filter: drop-shadow()` on the wrapper element via .coming-badge itself — drop-shadow follows the clipped ribbon silhouette instead of being cut off at the rectangular box edge. */ box-shadow: inset 0 1px 0 rgba(255, 249, 224, 0.75), inset 0 -1px 0 rgba(52, 34, 8, 0.28); filter: drop-shadow(0 6px 18px rgba(161, 127, 62, 0.45)) drop-shadow(0 2px 4px rgba(52, 34, 8, 0.28)); animation: goldSweep 6s ease-in-out infinite, goldHalo 4.5s ease-in-out infinite; } /* Gold-pearl dot on the left — luminous highlight top-left, warm shadow bottom-right */ .cb-dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #FFF6D0 0%, #F0CE7A 35%, #A17F3E 75%, #6E4E22 100%); box-shadow: 0 0 0 2px rgba(255, 243, 199, 0.55), 0 0 12px rgba(240, 206, 122, 0.85); animation: goldDotPulse 2.4s ease-in-out infinite; flex-shrink: 0; position: relative; z-index: 2; } /* Text with an engraved-foil top/bottom highlight */ .cb-text { text-shadow: 0 1px 0 rgba(255, 243, 199, 0.45), 0 -1px 0 rgba(52, 34, 8, 0.18); position: relative; z-index: 2; white-space: nowrap; } /* Travelling diagonal white shine band that sweeps across the pill */ .cb-shine { position: absolute; top: -60%; left: -30%; width: 40%; height: 220%; transform: skewX(-22deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0) 100%); filter: blur(2px); mix-blend-mode: screen; pointer-events: none; animation: goldShineTravel 5.2s ease-in-out infinite; z-index: 1; } @keyframes goldSweep { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } } @keyframes goldShineTravel { 0%, 55% { left: -30%; opacity: 0; } 60% { opacity: 1; } 95% { left: 115%; opacity: 0.9; } 100% { left: 115%; opacity: 0; } } /* Halo pulse — inset only, since the ribbon shape is clipped and any outer box-shadow would be cut off at the rectangular box edge. Cycles the top/bottom inset highlights so the foil looks like it's catching a slow-moving light source. Outer drop shadow comes from `filter: drop-shadow()` on the badge itself. */ @keyframes goldHalo { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 249, 224, 0.75), inset 0 -1px 0 rgba(52, 34, 8, 0.28); } 50% { box-shadow: inset 0 2px 0 rgba(255, 249, 224, 0.95), inset 0 -2px 0 rgba(52, 34, 8, 0.34); } } @keyframes goldDotPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 243, 199, 0.55), 0 0 12px rgba(240, 206, 122, 0.85); transform: scale(1); } 50% { box-shadow: 0 0 0 4px rgba(255, 243, 199, 0), 0 0 18px rgba(240, 206, 122, 1); transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .coming-badge { animation: none; } .cb-shine { display: none; } .cb-dot { animation: none; } } /* ---- Hero description — justified ---- */ .hero-desc { font-family: var(--font); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.8; color: var(--ink-soft); max-width: 560px; /* Auto side margins centre the description block within the column while keeping the text itself justified inside. */ margin: 0 auto clamp(22px, 2.6vw, 32px); text-align: justify; text-align-last: center; /* No auto-hyphenation: whole words wrap to the next line rather than getting split mid-word (e.g. "prox-imity"). */ hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; } /* ---- CTA button ---- */ /* Old .hero-cta pill retired — replaced by the .hero-wa-row layout below. Kept as a hidden fallback so nothing lingers. */ .hero-cta { display: none; } /* ---- WhatsApp icon + statement row ---- A tasteful green WhatsApp circle (clickable). Instead of a heavy static double-halo, a single soft ring gently pulses outward every few seconds — quietly inviting a tap to connect, without shouting. */ .hero-wa-row { display: inline-flex; align-items: center; gap: 22px; margin-top: clamp(6px, 1vw, 12px); } .hero-wa-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(54px, 5vw, 64px); height: clamp(54px, 5vw, 64px); border-radius: 50%; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: #FFFFFF; text-decoration: none; /* Soft grounded shadow only — no oversized glow rings. */ box-shadow: 0 10px 22px -10px rgba(18, 140, 126, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.22); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } /* Gentle "tap me" pulse — one thin ring sitting on the rim that expands a little and fades, then repeats. Reads as a soft invitation to click, not a permanent halo. pointer-events:none so it never blocks the tap. */ .hero-wa-btn::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.55); pointer-events: none; animation: waInvite 2.8s ease-out infinite; } @keyframes waInvite { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } .hero-wa-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 28px -12px rgba(18, 140, 126, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.28); } /* Respect reduced-motion — no pulse, just the calm resting icon. */ @media (prefers-reduced-motion: reduce) { .hero-wa-btn::after { animation: none; opacity: 0; } } .hero-wa-btn .hero-cta-wa { width: 60%; height: 60%; fill: #FFFFFF; stroke: none; background: none; padding: 0; border-radius: 0; box-shadow: none; } /* Non-clickable statement beside the icon. */ .hero-wa-text { font-family: var(--font); font-size: clamp(14px, 1.3vw, 17px); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #2A2540; user-select: text; cursor: default; } /* Old .hero-cta style overrides kept below — safely no-op because .hero-cta is display:none. */ .legacy-hero-cta-was-here { display: inline-flex; align-items: center; gap: 14px; padding: 18px 46px 18px 14px; border-radius: 100px; background: transparent; border: 1.5px solid rgba(42, 37, 64, 0.20); color: #2A2540; text-decoration: none; font-family: var(--font); font-size: 14.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; box-shadow: none; transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .hero-cta:hover { transform: translateY(-2px); background: rgba(42, 37, 64, 0.06); border-color: rgba(42, 37, 64, 0.35); box-shadow: 0 14px 32px -12px rgba(42, 37, 64, 0.25); } /* Slow horizontal shimmer sweep across the pink-blue blend. */ @keyframes heroCtaShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; background-position: 50% 50%; } } .hero-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; } /* WhatsApp logo path — uses fill (not stroke) so the glyph renders as a solid mark rather than an outline. */ /* WhatsApp icon sits in a small brand-green circle badge — only the icon carries the WhatsApp green, the pill itself keeps the dreamy pink→blue gradient. */ .hero-cta svg.hero-cta-wa { box-sizing: content-box; width: 22px; height: 22px; padding: 8px; border-radius: 50%; background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); fill: #FFFFFF; stroke: none; box-shadow: 0 4px 10px -4px rgba(18, 140, 126, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .hero-cta-sub { margin-top: 18px; font-family: var(--font); font-size: 14.5px; color: var(--ink-mute); font-weight: 400; } .hero-cta-sub strong { font-weight: 700; background: linear-gradient(115deg, #D47896 0%, #C08FB4 50%, #8FA3C9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Hero content column — left, above the fold ---- */ .hero-content { position: relative; z-index: 2; /* Wider column so the left-hand stack pushes further into the middle of the page and the gap between wording and photo closes, but capped so it never runs into the photo's left edge. Every inline element (slogan, gold pill, CTA, sub-text) is centred within the column so they read as a centred stack — same axis as the logo, which is already centred via .brand-mark. */ width: 100%; max-width: clamp(520px, 44vw, 720px); flex-shrink: 0; text-align: center; } /* ---- Hero visual — big curvy quarter-circle photo anchored top-right, soft radial mask fading the diagonal edge into the page. ---- */ .hero-visual { /* Circular photo positioned on the right — vertically centred against the hero, held OFF the viewport's right edge by a comfortable gap. Enlarged so the whole picture (plus bath-time bubble foam floating around it) fills the right half of the hero and closes the visual gap between it and the wording. Positioning maths — the containing block is now `.hero-content` (narrower than the hero), so `right` breaks OUT past the content column to reach the viewport's right edge minus a comfortable gap. Formula: `100% + left-padding + gap - 100vw` where 100% is `.hero-content`'s width and the padding sum is `.page`'s + `.hero-inner`'s left padding. */ position: absolute; top: 50%; /* Right-edge gap now matches the wording's left-edge gap (page padding + hero-inner padding), so the picture ends the same distance from the right of the viewport as the wording sits from the left. */ right: calc(100% + clamp(24px, 3vw, 40px) + clamp(24px, 4vw, 56px) + clamp(24px, 3vw, 40px) + clamp(24px, 4vw, 56px) - 100vw); transform: translateY(-50%); width: clamp(420px, 44vw, 700px); height: clamp(420px, 44vw, 700px); overflow: visible; background: transparent; box-shadow: none; border-radius: 0; pointer-events: none; } /* ---- Glassy bath-time bubbles floating around the circle ---- Translucent orbs tinted across the dreamy pink→mauve→blue palette (same family as the slogan text and the CTA button). Each bubble is a soft radial gradient with an inner white highlight top-left (glass reflection), a subtle inner shadow bottom-right (curvature), and a wisp of drop shadow so it sits above the ivory paper. A slow drift + gentle scale keeps them alive without shouting. */ .bubble { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; /* Base — a soap-bubble translucent shell. Individual .bubble-N rules add their own hue tint on top of this base. */ background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 68% 74%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 40%), linear-gradient(135deg, rgba(240, 180, 200, 0.35) 0%, rgba(199, 158, 195, 0.30) 45%, rgba(169, 169, 206, 0.28) 65%, rgba(143, 163, 201, 0.32) 100%); -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset -8px -8px 18px rgba(180, 155, 200, 0.18), inset 6px 6px 14px rgba(255, 255, 255, 0.28), 0 12px 30px -14px rgba(180, 155, 200, 0.35); /* Long, slow, dreamy drift around the main circle. Individual bubble rules below stagger delay + swap direction so no two bubbles are ever at the same point in their orbit. */ animation: bubbleFloat 16s ease-in-out infinite; will-change: transform; } /* Individual bubbles — each has its own size, position, delay, and a slight hue tilt (pinker or bluer) via the tint layer. */ .bubble-1 { /* Big pink-leaning bubble top-left of the photo — shrunk ~20% and nudged further off the photo edge so it stops covering the ceiling light in the nursery picture. */ width: clamp(88px, 10.4vw, 152px); height: clamp(88px, 10.4vw, 152px); top: clamp(-64px, -4.6vw, -32px); left: clamp(-64px, -4.6vw, -32px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.10) 24%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(240, 176, 195, 0.42) 0%, rgba(224, 158, 188, 0.32) 55%, rgba(199, 158, 195, 0.28) 100%); animation: bubbleFloat 18s ease-in-out infinite; animation-delay: 0s; } .bubble-2 { /* Medium blue-leaning bubble bottom-left of the photo — tint bumped a touch more saturated / less grey so it reads as a clear baby-blue soap bubble, matching bubble-1's pink. */ width: clamp(70px, 8.5vw, 130px); height: clamp(70px, 8.5vw, 130px); bottom: clamp(-20px, -1.6vw, -8px); left: clamp(20px, 3vw, 60px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.12) 24%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(180, 205, 240, 0.48) 0%, rgba(150, 178, 224, 0.38) 55%, rgba(130, 158, 210, 0.34) 100%); animation: bubbleFloatAlt 15s ease-in-out infinite; animation-delay: 1.2s; } .bubble-3 { /* Small mauve bubble tucked into left side, mid-height */ width: clamp(40px, 5vw, 72px); height: clamp(40px, 5vw, 72px); top: 45%; left: clamp(-30px, -2.2vw, -14px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.12) 24%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(220, 190, 220, 0.42) 0%, rgba(199, 176, 210, 0.30) 100%); animation: bubbleFloat 13s ease-in-out infinite; animation-delay: 2.6s; } .bubble-4 { /* Tiny pink bubble above bubble-1 (a splash droplet) */ width: clamp(24px, 3vw, 42px); height: clamp(24px, 3vw, 42px); top: clamp(-60px, -4.5vw, -30px); left: clamp(70px, 9vw, 130px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.15) 26%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, rgba(244, 194, 214, 0.5) 0%, rgba(224, 168, 195, 0.32) 100%); animation: bubbleFloatAlt 11s ease-in-out infinite; animation-delay: 0.6s; } .bubble-5 { /* Small blue bubble on the right side, upper — same warmer / more saturated blue as bubble-2. */ width: clamp(38px, 4.5vw, 68px); height: clamp(38px, 4.5vw, 68px); top: clamp(-20px, -1.4vw, -6px); right: clamp(-30px, -2.2vw, -12px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.12) 24%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(180, 205, 240, 0.50) 0%, rgba(150, 178, 224, 0.34) 100%); animation: bubbleFloat 14s ease-in-out infinite; animation-delay: 3.4s; } .bubble-6 { /* Medium mauve-blue bubble on the right, lower — leaning cleaner blue now to match its siblings on the right side. */ width: clamp(56px, 7vw, 100px); height: clamp(56px, 7vw, 100px); bottom: clamp(-30px, -2.4vw, -14px); right: clamp(-16px, -1vw, -4px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.12) 24%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(200, 212, 240, 0.46) 0%, rgba(170, 190, 226, 0.36) 60%, rgba(150, 178, 220, 0.32) 100%); animation: bubbleFloatAlt 17s ease-in-out infinite; animation-delay: 1.8s; } .bubble-7 { /* Extra tiny pink bubble low left (a stray foam speck) */ width: clamp(18px, 2.2vw, 30px); height: clamp(18px, 2.2vw, 30px); bottom: clamp(30px, 5vw, 90px); left: clamp(-40px, -3vw, -16px); background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, rgba(244, 194, 214, 0.5) 0%, rgba(224, 168, 195, 0.30) 100%); animation: bubbleFloat 12s ease-in-out infinite; animation-delay: 4.2s; } /* Slow-motion "orbit" — traces a soft rounded path (up, right, down, left) so the bubble looks like it's drifting AROUND the main circle rather than just bobbing up-and-down. Slight scale + rotation keeps the light catching on the glass sheen. Duration is long (16s) for that dreamy slo-mo feel. */ @keyframes bubbleFloat { 0%, 100% { transform: translate( 0px, 0px) scale(1) rotate(0deg); } 15% { transform: translate( -6px, -14px) scale(1.04) rotate(6deg); } 30% { transform: translate( 4px, -20px) scale(1.06) rotate(-4deg); } 45% { transform: translate( 14px, -12px) scale(1.03) rotate(3deg); } 60% { transform: translate( 18px, 2px) scale(1.05) rotate(-6deg); } 75% { transform: translate( 8px, 12px) scale(1.03) rotate(4deg); } 90% { transform: translate( -4px, 6px) scale(1.02) rotate(-2deg); } } /* Second orbit path — opposite direction so adjacent bubbles feel like they're weaving past each other, not marching in lockstep. */ @keyframes bubbleFloatAlt { 0%, 100% { transform: translate( 0px, 0px) scale(1) rotate(0deg); } 15% { transform: translate( 6px, 10px) scale(1.03) rotate(-5deg); } 30% { transform: translate( -8px, 14px) scale(1.05) rotate(4deg); } 45% { transform: translate(-16px, 4px) scale(1.04) rotate(-3deg); } 60% { transform: translate(-14px, -10px) scale(1.06) rotate(5deg); } 75% { transform: translate( -4px, -16px) scale(1.03) rotate(-2deg); } 90% { transform: translate( 6px, -6px) scale(1.02) rotate(3deg); } } /* ---- Glass-shine bubbles (bubble-8 → bubble-13) ---- Extra bubbles floating in the GAP between the wording and the circular photo. Almost fully transparent — no palette tint, just the white sheen highlight + a whisper of a mauve-blue edge — so they read as clear soap bubbles catching light. They drift a bit slower than the tinted ones for that dreamy foam feel. */ .bubble-glass { /* Override the base tinted background with an almost-clear glass surface. Sheen is now brighter (0.95 white core + wider spread) so the bubble reads cleanly even against empty ivory page space, not just against the photo. */ background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.32) 22%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(240, 220, 232, 0.18) 0%, rgba(210, 218, 236, 0.20) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.70), inset -4px -4px 12px rgba(180, 170, 210, 0.14), inset 6px 6px 14px rgba(255, 255, 255, 0.42), 0 10px 28px -12px rgba(180, 170, 210, 0.35); } /* Each glass bubble sits FURTHER LEFT than the tinted bubbles, so they fill the visual gap between the photo and the wording. All use % or negative-vw values so they scale with the photo. */ .bubble-8 { /* Medium glass drop, upper-left area of the gap */ width: clamp(50px, 6vw, 90px); height: clamp(50px, 6vw, 90px); top: clamp(-30px, -2vw, -10px); left: clamp(-100px, -8vw, -50px); animation: bubbleFloat 19s ease-in-out infinite; animation-delay: 0.4s; } .bubble-9 { /* Small glass drop, mid-height in the gap */ width: clamp(28px, 3.5vw, 52px); height: clamp(28px, 3.5vw, 52px); top: 28%; left: clamp(-130px, -10vw, -70px); animation: bubbleFloatAlt 14s ease-in-out infinite; animation-delay: 1.6s; } .bubble-10 { /* Medium glass drop, lower-left in the gap */ width: clamp(42px, 5vw, 76px); height: clamp(42px, 5vw, 76px); bottom: clamp(20px, 4vw, 60px); left: clamp(-110px, -8.5vw, -55px); animation: bubbleFloat 21s ease-in-out infinite; animation-delay: 2.8s; } .bubble-11 { /* Tiny glass speck floating alone */ width: clamp(16px, 2vw, 28px); height: clamp(16px, 2vw, 28px); top: 60%; left: clamp(-80px, -6vw, -30px); animation: bubbleFloatAlt 12s ease-in-out infinite; animation-delay: 4.0s; } .bubble-12 { /* Small glass drop, upper area */ width: clamp(24px, 3vw, 44px); height: clamp(24px, 3vw, 44px); top: clamp(-40px, -3vw, -20px); left: clamp(-60px, -4.5vw, -22px); animation: bubbleFloat 16s ease-in-out infinite; animation-delay: 3.2s; } .bubble-13 { /* Medium-small glass drop, way down in the gap */ width: clamp(34px, 4vw, 60px); height: clamp(34px, 4vw, 60px); bottom: clamp(-40px, -3vw, -18px); left: clamp(-50px, -3.5vw, -18px); animation: bubbleFloatAlt 18s ease-in-out infinite; animation-delay: 5.4s; } .bubble-14 { /* Small glass drop drifting off the right side of the photo, balancing the heavier bubble cluster on the left. */ width: clamp(28px, 3.4vw, 50px); height: clamp(28px, 3.4vw, 50px); top: 38%; right: clamp(-70px, -5vw, -26px); animation: bubbleFloat 15s ease-in-out infinite; animation-delay: 1.4s; } .bubble-15 { /* Tiny glass speck floating above bubble-5 for extra right-side balance. */ width: clamp(20px, 2.4vw, 36px); height: clamp(20px, 2.4vw, 36px); top: clamp(-60px, -4vw, -28px); right: clamp(40px, 5vw, 90px); animation: bubbleFloatAlt 13s ease-in-out infinite; animation-delay: 3.8s; } @media (prefers-reduced-motion: reduce) { /* .bubble intentionally keeps floating even under Reduce Motion — re-asserted in the override block at the end of this file. */ } .hero-photo { /* The main ink-drop — a perfect circle sitting on top of the decorative satellite drops. Soft pink outer glow + a whisper of inner white ring so it feels like fresh ink beading on paper. */ width: 100%; height: 100%; min-height: auto; object-fit: cover; display: block; position: relative; z-index: 2; border-radius: 50%; box-shadow: 0 30px 80px -30px rgba(212, 120, 150, 0.40), 0 12px 30px -12px rgba(180, 140, 160, 0.22), inset 0 0 0 6px rgba(255, 255, 255, 0.55); } /* ========================================================================== FEATURE ICONS ROW ========================================================================== */ .feature-strip { position: relative; z-index: 1; max-width: 1240px; margin: clamp(24px, 3vw, 40px) auto 0; padding: 0 clamp(16px, 3vw, 40px); } .feature-strip-inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 20px); background: #FFFDFA; border-radius: 24px; padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 32px); box-shadow: var(--shadow-lift); border: 1px solid rgba(232, 155, 175, 0.16); } .feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .fi-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.12); } .fi-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .fi-rose { background: linear-gradient(135deg, #FCEEF1, #F4C2D0); color: #D47896; } .fi-violet { background: linear-gradient(135deg, #F0E5F5, #D4C2E4); color: #7C63A8; } .fi-gold { background: linear-gradient(135deg, #FFF6E0, #F0CE7A); color: #A17F3E; } .fi-coral { background: linear-gradient(135deg, #FFEDE3, #F8C6A9); color: #C87456; } .fi-blue { background: linear-gradient(135deg, #E5EEFA, #BBC8E5); color: #5D74A6; } .fi-deeprose { background: linear-gradient(135deg, #F4D8DF, #E89BAF); color: #A03A5A; } .fi-title { font-family: var(--font-display); font-size: clamp(13px, 1.15vw, 15px); font-weight: 600; color: var(--ink); line-height: 1.2; } .fi-sub { font-family: var(--font); font-size: 11.5px; color: var(--ink-mute); line-height: 1.3; } /* ========================================================================== CLOSE TO YOU ========================================================================== */ .close-to-you { position: relative; z-index: 1; /* Wider container so the section fills more of a desktop screen — the enlarged nurse-and-baby photo needs the extra horizontal room. */ max-width: 1440px; margin: clamp(28px, 3.4vw, 44px) auto 0; padding: 0 clamp(16px, 3vw, 40px); } .close-grid { display: grid; /* Two equal columns, two rows. Photo sits in row 1 / col 1; the heading + two cards sit in row 1 / col 2 (and stretch to the photo's height); the Facebook block + dropdown + map sit in row 2 / col 2, below the photo. */ /* Give the right column (heading + cards) a little more width than the photo so the two cards read wider and the justified copy isn't so tightly spaced. */ grid-template-columns: 0.82fr 1.18fr; grid-template-rows: auto auto; column-gap: clamp(26px, 3vw, 46px); row-gap: clamp(22px, 2.4vw, 34px); align-items: start; } .close-visual { grid-column: 1; grid-row: 1; } .close-content { grid-column: 2; grid-row: 1; /* Stretch to the photo's height so the cards inside can grow down to finish level with the bottom of the photo. */ align-self: stretch; display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 32px); min-width: 0; /* Let grid child shrink without overflow */ } /* The card pair grows to fill whatever height is left in .close-content under the heading — i.e. down to the photo's bottom edge. */ .close-content .close-paragraphs--pair { flex: 1 1 auto; } /* Cloud row — sits close beneath the confinement block above (small gap only), and hosts the big cloud + scattered mini-cloud decorations. */ .close-extra { position: relative; grid-column: 1 / -1; grid-row: 2; display: block; min-width: 0; margin-top: clamp(6px, 0.8vw, 14px); min-height: clamp(320px, 30vw, 440px); } .close-extra .btn-ghost { display: none; } .section-heading { font-family: var(--font-display); /* Sized to keep the whole line on ONE row within the content column. */ font-size: clamp(24px, 2.7vw, 38px); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: clamp(6px, 1vw, 12px); white-space: nowrap; /* Midnight-purple heading — matches the footer palette. */ color: #2A2540; background: none; -webkit-text-fill-color: currentColor; } .section-heading em { font-style: italic; font-weight: 400; display: inline; /* one continuous line with the first half */ color: #2A2540; } .heart-tiny { color: var(--rose); font-size: 0.5em; vertical-align: middle; margin-left: 8px; } /* ---- Close-to-you paragraphs — three rows with left icons ---- Moved in from the old .follow-section. Text is JUSTIFIED with the last line left-aligned, and hyphenation is OFF so no word splits across lines mid-word. */ .close-paragraphs { display: flex; flex-direction: column; /* Bigger vertical gap so the boxes can drift side-to-side without bumping into their neighbours. */ gap: clamp(28px, 3.4vw, 44px); margin: clamp(14px, 1.6vw, 22px) 0 clamp(10px, 1vw, 14px); /* Room around the whole stack so the outer glass foam bubbles around each box aren't clipped. */ padding: clamp(20px, 2.4vw, 32px) 0; } .close-paragraphs .para-row { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 20px; /* Content sits vertically centred so the added length (min-height per rank below) reads as a balanced tall card rather than an empty gap under the text. */ align-items: center; /* Longer rectangle: extra vertical padding + per-rank min-height elongate each box downward, while the narrower widths (per-rank below) keep them from getting wider. Cleaner, more rectangular corners (14px vs the old 24px pill). */ padding: clamp(30px, 3.4vw, 46px) clamp(22px, 2.4vw, 32px); border-radius: 14px; /* Warm peach hairline border tuned to the Baby Angels logo tone. */ border: 1px solid rgba(230, 165, 140, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 14px 32px -16px rgba(206, 150, 120, 0.30); overflow: visible; /* Let the foam bubbles show past the box edge */ transition: box-shadow 0.35s var(--ease); } .close-paragraphs .para-copy, .close-paragraphs .para-icon { position: relative; z-index: 2; } /* Box 1 — centred, narrowed to 88% so it reads as a longer rectangle, not a wide banner. Warm peach/salmon fill tuned to the Baby Angels logo colour (deepening toward the logo tone at the far corner). */ .close-paragraphs .para-row--rank1 { width: 88%; margin-left: auto; margin-right: auto; /* Elongated downward to match the taller box below it. */ min-height: clamp(300px, 31vw, 400px); background: radial-gradient(ellipse 55% 60% at 18% 16%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(ellipse 70% 60% at 88% 90%, rgba(234, 166, 146, 0.30) 0%, rgba(234, 166, 146, 0) 65%), linear-gradient(120deg, #FDF3EE 0%, #FAE4D8 32%, #F3CFBB 66%, #EBB59C 100%); animation: boxDriftLeft 11s ease-in-out infinite; } /* Box 2 — shifted RIGHT (narrower + margin-left: auto), 82% wide so it grows taller, not wider. Same logo peach, a touch lighter/airier. */ .close-paragraphs .para-row--rank2 { width: 82%; margin-left: auto; margin-right: 0; /* Stays in its right-shifted spot, made longer as well (tallest box). */ min-height: clamp(340px, 35vw, 460px); background: radial-gradient(ellipse 55% 60% at 18% 16%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(ellipse 70% 60% at 90% 88%, rgba(234, 166, 146, 0.24) 0%, rgba(234, 166, 146, 0) 65%), linear-gradient(120deg, #FEF6F1 0%, #FBE7DB 40%, #F2CDB6 100%); animation: boxDriftRight 13s ease-in-out infinite; animation-delay: -2.4s; } /* Box 3 — shifted LEFT (narrower + margin-right: auto), 82% wide. Same logo peach, deepening a little more toward the salmon logo tone. */ .close-paragraphs .para-row--rank3 { width: 82%; margin-left: 0; margin-right: auto; /* Sized to fit the remaining space, elongated to match its siblings. */ min-height: clamp(320px, 33vw, 420px); background: radial-gradient(ellipse 55% 60% at 18% 16%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(ellipse 70% 60% at 90% 88%, rgba(234, 166, 146, 0.28) 0%, rgba(234, 166, 146, 0) 65%), linear-gradient(120deg, #FDF1EA 0%, #F8DECE 38%, #EFC0A5 78%, #E8AC92 100%); animation: boxDriftLeft 12s ease-in-out infinite; animation-delay: -5.6s; } /* Slow side-to-side drift — small movement (≤10px each way) so the boxes never come close to overlapping their neighbours. Each rank uses one of two paths + staggered delay so they weave. */ @keyframes boxDriftLeft { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-10px) translateY(-2px); } } @keyframes boxDriftRight { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(10px) translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .close-paragraphs .para-row { animation: none !important; } } /* ========================================================= TWO-BOX PAIR (rev Jul 2026) Boxes 1 & 2 sit side by side as a floating pair of long rectangular cards. Inside each card the icon stacks on top of the copy so the narrower side-by-side card keeps a comfortable text width; both cards stretch to equal height. (Same source-order beats the base .close-paragraphs rules.) ========================================================= */ .close-paragraphs--pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 34px); /* Let each bubble size to its own content and float at its own height — no forced equal-height grid, so bubble 2 can sit lower. */ align-items: start; /* Head-room + foot-room so the floating bubbles and their glass foam specks are never clipped, and bubble 2 has space to drop down. */ margin: 0; padding: clamp(10px, 1.4vw, 20px) 0 clamp(30px, 3.4vw, 56px); } /* --- Minimalist-luxury card --------------------------------------- Quiet, editorial cards: frosted warm-ivory glass, one champagne hairline, a soft diffuse float shadow, and generous padding. The busy coloured foam bubbles are dropped in favour of negative space. */ .close-paragraphs--pair .para-row { position: relative; /* Grid layout — icon + tag sit on ONE horizontal row at the top, copy fills the row beneath spanning both columns. */ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "icon tag" "copy copy"; column-gap: 16px; row-gap: clamp(16px, 1.6vw, 22px); align-items: center; justify-items: start; width: 100%; margin: 0; /* Roomy padding so the wording sits comfortably INSIDE the bubble, with clear breathing room from every edge — and a big cushion at the BOTTOM so the last line has a real generous space against the box edge. */ padding: clamp(54px, 5.4vw, 76px) clamp(42px, 4vw, 56px) clamp(110px, 10vw, 150px); min-height: clamp(300px, 30vw, 380px); /* Big pillowy radius so the card reads as a soft, transparent bubble. */ border-radius: clamp(36px, 4.4vw, 64px); overflow: visible; /* ---- Transparent glass foam ---- Mostly see-through: a frosted blur lets the ivory page glow through, with only a whisper of pink→blue so it never turns grey. The two white radial highlights are the glass REFLECTIONS (a bright top-left light-catch + a softer lower-right bounce) that make it read as a clean, sealed, protected surface — like a soap/water bubble. */ background: radial-gradient(60% 46% at 24% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.28) 34%, rgba(255, 255, 255, 0) 66%), radial-gradient(52% 44% at 82% 84%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, rgba(244, 194, 214, 0.16) 0%, rgba(222, 216, 236, 0.10) 46%, rgba(190, 208, 236, 0.16) 100%); -webkit-backdrop-filter: blur(16px) saturate(1.18); backdrop-filter: blur(16px) saturate(1.18); /* Bright glassy rim — light wrapping the edge of a soap bubble. */ border: 1px solid rgba(255, 255, 255, 0.60); box-shadow: /* soft float shadow so the bubble hovers off the page */ 0 42px 72px -34px rgba(150, 138, 178, 0.42), /* rim light on top + curvature shade at the base = 3D glass */ inset 0 2px 1px rgba(255, 255, 255, 0.90), inset 10px 12px 26px rgba(255, 255, 255, 0.30), inset -10px -14px 30px rgba(176, 160, 202, 0.16); animation: foamFloatA 9s ease-in-out infinite; } /* Curved specular streak across the top-left — the tell-tale glass highlight that sells the bubble as clean, sealed glass. Sits below the icon/tag/copy (which are z-index:2) so it never washes out the words. */ .close-paragraphs--pair .para-row::before { content: ""; position: absolute; top: 7%; left: 8%; width: 46%; height: 26%; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0) 100%); transform: rotate(-18deg); filter: blur(4px); pointer-events: none; z-index: 1; } /* Bubble 2 sits slightly LOWER and further RIGHT, drifting on its own rhythm, so the pair feels like two real floating bubbles — not a grid. */ .close-paragraphs--pair .para-row--rank2 { margin-top: clamp(34px, 5vw, 74px); animation: foamFloatB 11s ease-in-out infinite; animation-delay: -3s; } @keyframes foamFloatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5px, -12px); } } @keyframes foamFloatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, 11px); } } /* A little blue-pink foam around each card — small, subtle glass specks at the corners and edges (much smaller than the old bath-foam). */ .close-paragraphs--pair .box-bubble { display: block; } /* Base sizes — small, small, small; each rank overrides positions below. */ .close-paragraphs--pair .bb-1 { width: 20px; height: 20px; } .close-paragraphs--pair .bb-2 { width: 12px; height: 12px; } .close-paragraphs--pair .bb-3 { width: 16px; height: 16px; } .close-paragraphs--pair .bb-4 { width: 10px; height: 10px; } .close-paragraphs--pair .bb-5 { width: 14px; height: 14px; } .close-paragraphs--pair .bb-6 { width: 8px; height: 8px; } .close-paragraphs--pair .bb-7 { width: 18px; height: 18px; } .close-paragraphs--pair .bb-8 { width: 11px; height: 11px; } .close-paragraphs--pair .bb-9 { width: 9px; height: 9px; } .close-paragraphs--pair .bb-10 { width: 13px; height: 13px; } /* Positions — many small bubbles scattered around each card's edges and corners. Six existing spots kept; four new spots added per box to fill out the "small small" foam feel. */ .close-paragraphs--pair .para-row--rank1 .bb-6 { top: 10%; left: -14px; animation-delay: 5.4s; } .close-paragraphs--pair .para-row--rank1 .bb-7 { top: -18px; right: 30%; animation-delay: 6.6s; } .close-paragraphs--pair .para-row--rank1 .bb-8 { bottom: 20%; right: -10px; animation-delay: 7.8s; } .close-paragraphs--pair .para-row--rank1 .bb-9 { top: 45%; right: -6px; animation-delay: 3.2s; } .close-paragraphs--pair .para-row--rank1 .bb-10 { bottom: -6px; left: 55%; animation-delay: 2.1s; } .close-paragraphs--pair .para-row--rank2 .bb-5 { top: 15%; left: -12px; animation-delay: 5.6s; } .close-paragraphs--pair .para-row--rank2 .bb-6 { top: -16px; left: 50%; animation-delay: 6.8s; } .close-paragraphs--pair .para-row--rank2 .bb-7 { bottom: 30%; right: -14px; animation-delay: 7.4s; } .close-paragraphs--pair .para-row--rank2 .bb-8 { top: 60%; right: 8%; animation-delay: 3.6s; } .close-paragraphs--pair .para-row--rank2 .bb-9 { bottom: -6px; right: 40%; animation-delay: 2.4s; } .close-paragraphs--pair .para-row--rank2 .bb-10 { top: 35%; left: -10px; animation-delay: 1.8s; } /* Unified icon — bigger ivory disc, soft rose hairline ring, and a rose Material-icon glyph (filled) that ties into the page's dreamy pink- blue palette. Filled = universally-legible at a glance. */ /* Icon disc + glyph — FLIPPED palette: dark-purple disc with a pink glyph on top. Dominant tone is the deep midnight purple from the footer, accented by the same rose the tag pill uses. */ .close-paragraphs--pair .para-icon { grid-area: icon; position: relative; z-index: 2; width: 60px; height: 60px; border-radius: 50%; /* Clean frosted-glass disc that echoes the bubble — not a heavy dark chip. A rose/blue tinted glyph reads crisply on the light glass. */ background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.50) 34%, rgba(255, 255, 255, 0.10) 72%), linear-gradient(150deg, rgba(244, 194, 214, 0.55) 0%, rgba(190, 208, 236, 0.50) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.70), inset 6px 6px 12px rgba(255, 255, 255, 0.40), inset -6px -6px 12px rgba(176, 160, 202, 0.18), 0 10px 20px -10px rgba(150, 138, 178, 0.40); color: #C85E86; flex-shrink: 0; } .close-paragraphs--pair .para-row--rank1 .para-icon { color: #C85E86; } .close-paragraphs--pair .para-row--rank2 .para-icon { color: #5D74A6; } .close-paragraphs--pair .para-tag { grid-area: tag; position: relative; z-index: 2; align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin: 0; border-radius: 100px; /* Frosted-glass pill instead of the heavy grey chip. */ background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.70); box-shadow: 0 6px 14px -8px rgba(150, 138, 178, 0.40); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4258; line-height: 1; } .close-paragraphs--pair .para-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #F0B4C7; flex-shrink: 0; } /* Tag pills removed per request — the glass icon + the copy carry each card on their own now. */ .close-paragraphs--pair .para-tag { display: none; } .close-paragraphs--pair .para-copy { grid-area: copy; } /* Corner sparkle sits absolutely so it doesn't interfere with the grid. */ .close-paragraphs--pair .para-corner { position: absolute; top: clamp(22px, 3vw, 34px); right: clamp(26px, 3.2vw, 40px); z-index: 2; width: 14px; height: 14px; color: rgba(212, 120, 150, 0.55); pointer-events: none; } .close-paragraphs--pair .para-corner svg { width: 100%; height: 100%; fill: currentColor; } .close-paragraphs--pair .para-icon svg { width: 32px; height: 32px; fill: currentColor; fill-rule: evenodd; /* lets the shield's inner check show as a cutout */ stroke: none; } /* A short ROSE hairline between the icon and the copy — same editorial cue as before, translated to the pink palette. */ .close-paragraphs--pair .para-copy::before { content: ""; display: block; width: 28px; height: 1px; margin-top: 2px; margin-bottom: clamp(8px, 0.9vw, 12px); background: linear-gradient(90deg, rgba(212, 120, 150, 0.60) 0%, rgba(212, 120, 150, 0) 100%); } /* Restore the generous bottom padding on BOTH cards in the pair — an earlier legacy `.para-row:last-child { padding-bottom: 0 }` rule was zeroing the second card's bottom padding at higher specificity. */ .close-paragraphs--pair .para-row, .close-paragraphs--pair .para-row:last-child { padding-bottom: clamp(110px, 10vw, 150px); border-bottom: none; } /* Justified, airier body copy. Auto-hyphenation is OFF so whole words wrap to the next line instead of breaking with a dash. */ .close-paragraphs--pair .para-row .para-copy { text-align: justify; text-align-last: left; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 2.05; letter-spacing: 0.004em; color: #4A4258; } /* ========================================================= FACEBOOK FOLLOW NOTE The old third box's copy, lifted OUT of the card grid into a standalone sentence set off by a Facebook-blue accent rule, followed by a Facebook-blue CTA button. ========================================================= */ /* ========================================================= FACEBOOK MARKETING INVITATION (Jul 2026 rev) Editorial-luxury style — no box, just an elegant standalone marketing block designed to attract follows. Gold sparkle eyebrow, Playfair headline, refined body, prominent CTA, and a small closing note reinforcing exclusivity. ========================================================= */ .fb-note { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(14px, 1.6vw, 20px); padding: clamp(40px, 3.8vw, 60px) clamp(42px, 4vw, 62px) clamp(44px, 4vw, 64px); background: transparent; border: none; box-shadow: none; overflow: visible; isolation: isolate; } /* ---- WIDE, clickable, "step-into-the-cloud" variant -------------------- The whole cloud is an pointing to Facebook. Content is horizontally centred inside a wide flat cloud silhouette. Cursor:pointer, hover lifts + brightens, and a very gentle "breath" float loops on idle to draw the eye and invite a tap. */ a.fb-note--wide { position: relative; display: block; width: 100%; /* Big cloud sits centered and only as wide as needed to hold the wording — not stretching all the way to the page edges. */ max-width: clamp(720px, 62vw, 1000px); margin: 0 auto; min-height: clamp(280px, 26vw, 360px); padding: clamp(40px, 4vw, 62px) clamp(48px, 5vw, 88px); text-decoration: none; color: inherit; cursor: pointer; text-align: center; z-index: 1; /* Big cloud floats above the mini-cloud siblings. */ transition: transform 0.55s var(--ease), filter 0.55s var(--ease); animation: fbBreathe 8s ease-in-out infinite; } a.fb-note--wide > * { align-self: center; } /* Every piece of copy sits perfectly centred inside the wide cloud. */ a.fb-note--wide .fb-note-eyebrow, a.fb-note--wide .fb-note-heading, a.fb-note--wide .fb-note-text, a.fb-note--wide .fb-note-note { text-align: center; text-align-last: center; margin-left: auto; margin-right: auto; } a.fb-note--wide .fb-note-text { max-width: 640px; } /* Extra breathing space between the big serif headline and the description below it — the headline is a moment, the description is a paragraph, they need visible daylight between them. */ a.fb-note--wide .fb-note-heading { margin-bottom: clamp(20px, 2.4vw, 34px); } a.fb-note--wide .fb-note-eyebrow { margin-bottom: clamp(8px, 1vw, 14px); } /* Gold shimmer sweep — a slow travelling highlight across the cloud that makes it feel like premium fabric catching light. */ a.fb-note--wide::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 246, 220, 0.35) 50%, rgba(255, 255, 255, 0) 60%, transparent 100%); background-size: 260% 100%; background-position: -60% 0; mix-blend-mode: soft-light; animation: fbSilkShine 12s ease-in-out infinite; z-index: 2; } @keyframes fbSilkShine { 0% { background-position: -60% 0; opacity: 0; } 15% { opacity: 0.9; } 50% { background-position: 160% 0; opacity: 0.9; } 65% { opacity: 0; } 100% { background-position: 160% 0; opacity: 0; } } /* Delicate corner gold sparkles — the premium luxe accent. */ a.fb-note--wide .fb-luxe-star { position: absolute; z-index: 2; pointer-events: none; fill: #E7CE85; filter: drop-shadow(0 0 6px rgba(240, 206, 122, 0.55)); animation: fbLuxeTwinkle 3.5s ease-in-out infinite; } @keyframes fbLuxeTwinkle { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } } a.fb-note--wide .fb-luxe-star--1 { top: 8%; left: 10%; width: 14px; height: 14px; animation-delay: 0s; } a.fb-note--wide .fb-luxe-star--2 { top: 12%; right: 9%; width: 12px; height: 12px; animation-delay: 1.2s; } a.fb-note--wide .fb-luxe-star--3 { bottom: 14%; left: 15%; width: 10px; height: 10px; animation-delay: 2.4s; } /* ------------------------------------------------------------------- Dreamy cloud photo — user-supplied "Dreamy cloud.png" sits behind the wording at 50% opacity, masked into a soft cloud outline so it reads as a real dreamy sky cloud (not a rectangular photo). ------------------------------------------------------------------- */ .fb-cloud-image { position: absolute; inset: -30px -50px; width: calc(100% + 100px); height: calc(100% + 60px); object-fit: cover; opacity: 0.5; z-index: -1; pointer-events: none; /* Compact rounded cloud outline — the shape is DRAWN at the centre of a wider viewBox so its edges sit inside the image, giving the impression that the cloud is "just enough" to hold the wording. */ --fb-cloud-mask: url("data:image/svg+xml;utf8,"); -webkit-mask-image: var(--fb-cloud-mask); mask-image: var(--fb-cloud-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* ---- Scattered mini clouds — same Dreamy cloud photo, small, masked to a fluffy cloud outline, fading in and out at staggered intervals. */ .fb-mini-clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .fb-mini-cloud { position: absolute; /* Steady opacity — mini clouds are ALWAYS visible, gently floating behind the big cloud (not fading in and out). */ opacity: 0.5; object-fit: cover; --fb-mini-mask: url("data:image/svg+xml;utf8,"); -webkit-mask-image: var(--fb-mini-mask); mask-image: var(--fb-mini-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: fbMiniDrift 14s ease-in-out infinite; } /* All 8 mini clouds hover around the BOTTOM-LEFT and BOTTOM-RIGHT corners, behind the big cloud, at varied heights so the cluster feels organic (not a straight line). */ /* Bottom-left cluster (4 clouds) */ .fb-mini-cloud--1 { bottom: 6%; left: 3%; width: 140px; height: 70px; animation-delay: 0s; } .fb-mini-cloud--2 { bottom: 24%; left: 8%; width: 100px; height: 50px; animation-delay: 2s; } .fb-mini-cloud--3 { bottom: 12%; left: 22%; width: 110px; height: 55px; animation-delay: 4s; } .fb-mini-cloud--4 { bottom: 40%; left: 2%; width: 80px; height: 40px; animation-delay: 6s; } /* Bottom-right cluster (4 clouds) */ .fb-mini-cloud--5 { bottom: 6%; right: 3%; width: 145px; height: 72px; animation-delay: 1s; } .fb-mini-cloud--6 { bottom: 24%; right: 8%; width: 100px; height: 50px; animation-delay: 3s; } .fb-mini-cloud--7 { bottom: 12%; right: 22%; width: 115px; height: 58px; animation-delay: 5s; } .fb-mini-cloud--8 { bottom: 40%; right: 2%; width: 80px; height: 40px; animation-delay: 7s; } /* Gentle floating drift — small side-to-side + up/down loop so each cloud feels alive without ever disappearing. */ @keyframes fbMiniDrift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -4px); } 50% { transform: translate(6px, 0); } 75% { transform: translate(3px, 4px); } } @media (prefers-reduced-motion: reduce) { .fb-mini-cloud { animation: none; } } /* Idle "breath" — cloud rises and settles slowly, like it's floating. */ @keyframes fbBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.008); } } /* Hover — the whole cloud lifts and brightens subtly (no drop-shadow so nothing sits "behind" the silhouette). */ a.fb-note--wide:hover, a.fb-note--wide:focus-visible { transform: translateY(-6px) scale(1.01); filter: brightness(1.04) saturate(1.06); outline: none; } /* No filter on the cloud shape at any state — keeps the silhouette clean. */ a.fb-note--wide .fb-sky-shape { filter: none; } a.fb-note--wide:hover .fb-sky-shape, a.fb-note--wide:focus-visible .fb-sky-shape { filter: none; } @media (prefers-reduced-motion: reduce) { a.fb-note--wide { animation: none; transition: none; } } .fb-note::before { content: none; } /* All wording sits ABOVE the small clouds so a wisp can never eat a letter. Sky background stays behind (z-index: -1). */ .fb-note-eyebrow, .fb-note-heading, .fb-note-text, .fb-follow-btn, .fb-note-note { position: relative; z-index: 3; } /* ---- Fluffy CLOUD-shaped background ---- Instead of a rectangular panel, the wording sits inside an actual fluffy cloud silhouette (inline SVG) filled with a natural pink → lavender → sky-blue gradient. The soft Gaussian blur on the SVG fill gives cotton-like edges that blend into the ivory page. */ /* Legacy SVG cloud — no longer rendered (replaced by the image). Left as a rule so any stale reference doesn't break the layout. */ .fb-sky-shape { display: none; } .fb-sky-shape-noop { position: absolute; z-index: -1; inset: -20px -30px -20px -30px; width: auto; height: auto; /* No exterior shadow or glow — the cloud sits cleanly on the page. */ filter: none; animation: fbSkyDrift 22s ease-in-out infinite; } @keyframes fbSkyDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4px, -3px) scale(1.008); } } /* ---- Small clouds scattered across the sky ---- A range of sizes — a few larger ones inside the sky, plus many tiny ones sprinkled around the edges and off the panel, like real scattered cirrus. Each drifts on its own gentle path. */ .fb-cloud { position: absolute; z-index: 0; pointer-events: none; opacity: 0.92; filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.55)) drop-shadow(0 1px 3px rgba(180, 200, 230, 0.18)); animation: fbCloudFloat 14s ease-in-out infinite; } /* Small clouds are moved to the RIGHT column of the sky panel (past the text's max-width of ~560px) and to the extreme top/bottom EDGES, so they never sit under the wording. Opacity kept low so they read as atmospheric wisps behind the sky, not solid shapes competing with text. Text has its own higher stacking context (see .fb-note-eyebrow through .fb-note-note below) so it always sits above these clouds. */ /* Sub-clouds spread across both edges of the wide horizontal cloud. */ .fb-cloud-1 { width: 74px; top: 6%; left: 4%; animation-delay: 0s; opacity: 0.92; } .fb-cloud-2 { width: 50px; top: 32%; left: 6%; animation-delay: 3s; opacity: 0.80; } .fb-cloud-3 { width: 42px; bottom: 8%; left: 10%; animation-delay: 6s; opacity: 0.75; } .fb-cloud-4 { width: 60px; top: 4%; right: 4%; animation-delay: 2s; opacity: 0.92; } .fb-cloud-5 { width: 34px; top: 38%; right: 3%; animation-delay: 8s; opacity: 0.72; } .fb-cloud-6 { width: 38px; bottom: 6%; right: 8%; animation-delay: 5s; opacity: 0.70; } .fb-cloud-7 { width: 26px; top: 8%; left: 22%; animation-delay: 9s; opacity: 0.68; } .fb-cloud-8 { width: 30px; top: 6%; right: 22%; animation-delay: 11s; opacity: 0.75; } .fb-cloud-9 { width: 22px; bottom: 4%; right: 32%; animation-delay: 4s; opacity: 0.65; } @keyframes fbCloudFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -4px); } } /* ---- Tiny stars scattered around the sky (fully static) ---- */ .fb-tinystar { position: absolute; z-index: 0; pointer-events: none; opacity: 0.75; animation: none !important; } .fb-tinystar-1 { width: 12px; height: 12px; top: 12%; left: 12%; fill: #D47896; } .fb-tinystar-2 { width: 10px; height: 10px; top: 62%; left: 22%; fill: #8FA3C9; } .fb-tinystar-3 { width: 9px; height: 9px; top: 18%; right: 14%; fill: #D47896; } .fb-tinystar-4 { width: 11px; height: 11px; bottom: 20%; right: 24%; fill: #B5A6D8; } @keyframes fbStarTwinkle { 0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(15deg); } } @media (prefers-reduced-motion: reduce) { .fb-sky-shape, .fb-cloud, .fb-tinystar { animation: none; } } /* Small sparkle eyebrow — "Exclusive Early Access" between stars. Deep midnight-purple text, matching the footer palette, so the label grounds the marketing block with a bit of editorial weight. */ .fb-note-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font); font-size: clamp(10.5px, 0.85vw, 12px); font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; padding: 4px 0; color: #2A2540; /* footer midnight-purple */ background: none; -webkit-text-fill-color: currentColor; } /* Flanking stars — fully static, soft rose on the left, soft blue on the right (matches the tagline flourish stars at the top). */ .fb-note-star { width: 12px; height: 12px; animation: none !important; } .fb-note-star:first-of-type { fill: #D47896; } .fb-note-star:last-of-type { fill: #8FA3C9; } @media (prefers-reduced-motion: reduce) { .fb-note-star { animation: none; } } /* Headline — Playfair Display, editorial, with an italic accent word that carries the site's dreamy rose→mauve→blue gradient. */ .fb-note-heading { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink); margin: 4px 0 2px; } .fb-note-heading em { font-style: italic; font-weight: 500; background: linear-gradient(115deg, #D47896 0%, #C08FB4 50%, #8FA3C9 100%); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: fbHeadingShine 8s ease-in-out infinite; } @keyframes fbHeadingShine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- Hidden clickable "first" word — the password-gate entry point ---- Looks IDENTICAL to a plain italic gradient word in the headline (no underline, no tooltip, no visible cue). Only the cursor changes on hover, so only visitors who happen to move over it discover it opens the passcode modal. */ .fb-first-btn { display: inline; font-family: inherit; font-style: italic; font-weight: 500; color: transparent; background: linear-gradient(115deg, #D47896 0%, #C08FB4 50%, #8FA3C9 100%); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fbHeadingShine 8s ease-in-out infinite; cursor: pointer; outline: none; border: none; padding: 0; text-decoration: none; } /* Hint tooltip removed — nothing appears on hover. */ .fb-first-hint { display: none; } @media (prefers-reduced-motion: reduce) { .fb-first-btn { animation: none; } } .fb-note-text { font-family: var(--font); font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.9; letter-spacing: 0.003em; color: #4A4258; text-align: left; text-align-last: left; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; max-width: 560px; margin: 2px 0 4px; } .fb-note-text strong { color: var(--rose-deep); font-weight: 600; letter-spacing: 0.01em; } /* Small trailing note — exclusivity / scarcity cue below the CTA. */ .fb-note-note { font-family: var(--font-display); font-style: italic; font-size: clamp(12.5px, 1vw, 14px); color: var(--ink-mute); margin: 8px 0 0; letter-spacing: 0.005em; } @media (prefers-reduced-motion: reduce) { .fb-note-star { animation: none; } .fb-note-heading em { animation: none; background-position: 50% 50%; } } /* ---- Authentic Facebook "Follow" button ---- The exact compact style Facebook uses on Pages: brand-blue rectangle with subtly rounded corners, small filled-circle "f" glyph, a small profile "+" icon, and the word "Follow" in the Facebook system font weight. Small, sharp, and instantly familiar — parents recognise it as a real FB action, not a marketing pill. */ /* ------------------------------------------------------------------- Authentic Facebook "Follow" button — matches the exact style used on real Facebook Page profiles: solid FB-blue rectangle, small 6px corners, thin white "+" and "Follow" label, system font weight 600. Compact size, no pulse, no gradient — the real thing. ------------------------------------------------------------------- */ .fb-follow-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; background: #1877F2; color: #FFFFFF; text-decoration: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.2; box-shadow: none; margin-top: 4px; } /* Facebook "f" logo circle sits beside the + Follow. */ .fb-follow-icon { display: inline-flex; align-items: center; justify-content: center; } .fb-follow-icon svg { width: 18px; height: 18px; color: #FFFFFF; } .fb-follow-plus { display: inline-flex; align-items: center; margin-left: 2px; } .fb-follow-plus svg { width: 15px; height: 15px; color: #FFFFFF; } .fb-follow-label { display: inline-block; font-weight: 600; } .fb-follow-arrow { display: none; } /* real FB button has no arrow */ /* Hover — the exact hover state Facebook uses (slightly darker blue). */ a.fb-note--wide:hover .fb-follow-btn { background: #166FE5; } a.fb-note--wide:active .fb-follow-btn { background: #1462CC; } /* Legacy giant pill — kept but hidden by default so the old class doesn't visually double up if it ever renders. */ .fb-note-btn { display: none; } ._old-fb-note-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 34px; border-radius: 100px; background: linear-gradient(135deg, #2E8CF8 0%, #1877F2 55%, #0F5FCB 100%); color: #FFFFFF; text-decoration: none; overflow: hidden; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; box-shadow: 0 14px 30px -12px rgba(24, 119, 242, 0.55), 0 4px 12px -6px rgba(24, 119, 242, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.28); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .fb-note-btn::after { content: ""; position: absolute; top: -60%; left: -30%; width: 40%; height: 220%; transform: skewX(-22deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%); filter: blur(2px); mix-blend-mode: screen; pointer-events: none; animation: fbBtnShine 6s ease-in-out infinite; } @keyframes fbBtnShine { 0%, 55% { left: -30%; opacity: 0; } 60% { opacity: 1; } 95% { left: 115%; opacity: 0.8; } 100% { left: 115%; opacity: 0; } } .fb-note-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(24, 119, 242, 0.65), 0 6px 14px -6px rgba(24, 119, 242, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.34); } .fb-note-btn svg { width: 16px; height: 16px; flex-shrink: 0; position: relative; z-index: 1; } .fb-note-btn span { position: relative; z-index: 1; } /* The right-hand arrow moves gently on hover — a small marketing touch that draws the eye toward the click. */ .fb-note-btn-arrow { width: 14px !important; height: 14px !important; margin-left: 2px; transition: transform 0.35s var(--ease); } .fb-note-btn:hover .fb-note-btn-arrow { transform: translateX(4px); } .fb-note-btn { margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .fb-note-btn::after { display: none; } } /* ---- Foam glass bubbles around each box ---- Transparent pink / blue / mauve bubbles floating around every paragraph box, mimicking baby-body-wash foam. Sizes range from tiny specks to medium orbs; positions place them at the box's corners and edges. Each bubble drifts on its own gentle orbit. */ .box-bubble { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; animation: boxBubbleFloat 12s ease-in-out infinite; } /* Transparent glass bubbles — pink and blue tinted, blending between the two like real soap foam. Very translucent so they read as clear bubbles catching light, not solid balls. */ .bb-pink { background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.30) 20%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(244, 194, 214, 0.28) 0%, rgba(190, 208, 236, 0.24) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.70), inset 4px 4px 12px rgba(255, 255, 255, 0.35), 0 4px 14px -6px rgba(212, 120, 150, 0.22); } .bb-blue { background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.30) 20%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(190, 208, 236, 0.28) 0%, rgba(244, 194, 214, 0.24) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.70), inset 4px 4px 12px rgba(255, 255, 255, 0.35), 0 4px 14px -6px rgba(143, 163, 201, 0.22); } .bb-mauve { /* Blended blue-pink — the transition tone. */ background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.30) 20%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(135deg, rgba(220, 200, 226, 0.28) 0%, rgba(200, 210, 232, 0.24) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65), inset 4px 4px 12px rgba(255, 255, 255, 0.32), 0 4px 14px -6px rgba(180, 170, 210, 0.20); } /* Individual bubble sizes + positions per rank. Each `.para-row` has 4-5 bubbles at corners / edges. Sizes graduate from big (near the corner) to tiny (a stray speck), like real bath-foam pops. */ .para-row--rank1 .bb-1 { width: 48px; height: 48px; top: -22px; left: -18px; animation-delay: 0s; } .para-row--rank1 .bb-2 { width: 22px; height: 22px; top: -30px; left: 15%; animation-delay: 1.2s; } .para-row--rank1 .bb-3 { width: 34px; height: 34px; top: -14px; right: -14px; animation-delay: 2.4s; } .para-row--rank1 .bb-4 { width: 18px; height: 18px; bottom: -22px; right: 25%; animation-delay: 3.6s; } .para-row--rank1 .bb-5 { width: 26px; height: 26px; bottom: -12px; left: 20%; animation-delay: 4.8s; } .para-row--rank2 .bb-1 { width: 40px; height: 40px; top: -20px; right: -14px; animation-delay: 0.5s; } .para-row--rank2 .bb-2 { width: 24px; height: 24px; top: -28px; right: 22%; animation-delay: 1.8s; } .para-row--rank2 .bb-3 { width: 30px; height: 30px; bottom: -16px; left: -14px; animation-delay: 3.0s; } .para-row--rank2 .bb-4 { width: 16px; height: 16px; bottom: -24px; left: 30%; animation-delay: 4.2s; } .para-row--rank3 .bb-1 { width: 44px; height: 44px; top: -20px; left: -16px; animation-delay: 0.3s; } .para-row--rank3 .bb-2 { width: 20px; height: 20px; top: -26px; left: 30%; animation-delay: 1.6s; } .para-row--rank3 .bb-3 { width: 28px; height: 28px; bottom: -18px; right: -12px; animation-delay: 2.8s; } .para-row--rank3 .bb-4 { width: 14px; height: 14px; bottom: -22px; right: 24%; animation-delay: 4.0s; } @keyframes boxBubbleFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-3px, -5px) scale(1.05); } 50% { transform: translate(2px, -8px) scale(1.08); } 75% { transform: translate(4px, -3px) scale(1.03); } } @media (prefers-reduced-motion: reduce) { /* .box-bubble intentionally keeps floating even under Reduce Motion — re-asserted in the override block at the end of this file. */ } .close-paragraphs .para-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.10); } .close-paragraphs .para-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .close-paragraphs .para-icon-fb svg { fill: currentColor; stroke: none; } .close-paragraphs .para-copy { /* Same Inter stack + size range as the hero description so the two paragraphs read as one typographic voice on the page. */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.85; color: var(--ink-soft); text-align: justify; text-align-last: left; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; margin: 0; } /* ---- Confinement centres — DIRECT LIST (no dropdown) ---- Elegant frosted-glass panel with the pin+heading up top and the eight centres beneath, one per line. Same minimalist-luxury tone as the two cards above. */ /* Premium editorial panel — thin dark-purple hairline + soft ivory glass fill + a subtle top gold-hairline accent that reads as "curated selection". */ /* No box — the heading and actions sit directly on the page for a premium editorial feel. Sits beneath the two promise cards inside the right content column, with breathing space above. */ .centres-block { position: relative; margin-top: clamp(20px, 2.4vw, 32px); padding: 0; background: transparent; border: none; box-shadow: none; overflow: visible; } .centres-block::before { content: none; } /* Chip pill at the top — LIGHT frosted glass with a soft rose→blue tint and deep-rose text, matching the page's pastel palette (was a heavy dark-purple pill). */ .centres-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 12px; border-radius: 100px; background: linear-gradient(135deg, rgba(244, 194, 214, 0.30) 0%, rgba(190, 208, 236, 0.30) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.72); font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #C05B7E; margin-bottom: 16px; box-shadow: 0 6px 14px -8px rgba(150, 138, 178, 0.35); } .centres-chip-pin { width: 12px; height: 12px; fill: currentColor; } /* Serif headline — ONE LINE, with an italic rose-blue accent word. */ .centres-heading { font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 26px); font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; color: #2A2540; margin: 0 0 10px; display: block; white-space: nowrap; overflow: visible; } .centres-heading em { font-style: italic; font-weight: 500; background: linear-gradient(115deg, #D47896 0%, #C08FB4 50%, #8FA3C9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Short subtitle under the headline. */ .centres-sub { font-family: var(--font); font-size: 13.5px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 clamp(16px, 1.8vw, 22px); max-width: 560px; } /* Professional trust badges — three inline pills that signal quality before the eye even reaches the centre names. */ .centres-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.2vw, 26px); padding-bottom: clamp(16px, 1.8vw, 22px); border-bottom: 1px dashed rgba(42, 37, 64, 0.15); } /* Trust badges — LIGHT frosted-glass pills with deep-ink text and a palette-coloured icon each (gold / blue / rose), so they read as clean modern chips instead of heavy dark pills. */ .centres-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px; border-radius: 100px; background: rgba(255, 255, 255, 0.60); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.75); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #4A4258; box-shadow: 0 6px 14px -8px rgba(150, 138, 178, 0.35); } .centres-badge svg { width: 12px; height: 12px; fill: #8FA3C9; flex-shrink: 0; } .centres-badge:nth-of-type(1) svg { fill: #C9A55C; } /* gold — premium partners */ .centres-badge:nth-of-type(2) svg { fill: #8FA3C9; } /* blue — 5–10 min radius */ .centres-badge:nth-of-type(3) svg { fill: #D47896; } /* rose — verified & vetted */ /* ---- Two-button actions row — View All 8 Centres + Get Directions sit side-by-side as a matched pair. When the reveal opens, its 8-item list flows below the row spanning the full width. `display:contents` on the

flattens its children (summary + ol) into direct grid children so each can be placed independently. */ .centres-actions { display: grid; grid-template-columns: auto auto; column-gap: clamp(12px, 1.4vw, 18px); row-gap: clamp(20px, 2.4vw, 30px); align-items: center; justify-content: start; margin-top: clamp(18px, 2vw, 26px); } .centres-actions > .centres-reveal { display: contents; } .centres-actions .centres-reveal-summary { grid-column: 1; grid-row: 1; } .centres-actions .map-btn--compact { grid-column: 2; grid-row: 1; } .centres-actions .centres-grid { grid-column: 1 / -1; grid-row: 2; } /* ---- Editorial reveal dropdown for the 8 centres --------------- Closed by default with a soft "View all 8 centres" summary. When open, reveals a clean 2-column editorial list — no card boxes, just numerals, names, and hairline dividers. */ .centres-reveal { margin-top: clamp(4px, 0.8vw, 10px); border: none; background: none; } .centres-reveal-summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 20px; border-radius: 100px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 10px 24px -14px rgba(150, 138, 178, 0.40); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #4A4258; transition: transform 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease); } .centres-reveal-summary::-webkit-details-marker { display: none; } .centres-reveal-summary::marker { display: none; content: ""; } .centres-reveal-summary:hover { background: rgba(255, 255, 255, 0.78); transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(150, 138, 178, 0.50); } .centres-reveal-count { display: inline-flex; align-items: center; gap: 10px; } .centres-reveal-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #F4C2D0, #BED0EC); box-shadow: 0 0 0 3px rgba(244, 194, 214, 0.25); } .centres-reveal-chev { width: 14px; height: 14px; color: #B85C82; transition: transform 0.28s var(--ease); } .centres-reveal[open] .centres-reveal-chev { transform: rotate(180deg); } .centres-reveal[open] .centres-reveal-summary { background: rgba(255, 255, 255, 0.82); } .centres-reveal[open] .centres-grid { margin-top: clamp(22px, 2.4vw, 32px); animation: centresFadeIn 0.4s var(--ease) both; } @keyframes centresFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Allow heading to wrap on narrow screens. */ @media (max-width: 900px) { .centres-heading { white-space: normal; } } /* Old dropdown wrapper kept only for backward compatibility. */ .centres-dropdown { border: 1px solid rgba(201, 165, 92, 0.28); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 253, 250, 0.82) 0%, rgba(249, 240, 233, 0.74) 100%); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); overflow: hidden; box-shadow: 0 20px 44px -30px rgba(150, 120, 96, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.75); transition: box-shadow 0.3s ease; } .centres-dropdown[open] { box-shadow: 0 26px 54px -28px rgba(150, 120, 96, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .centres-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 22px; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #4A3E2A; user-select: none; } .centres-summary::-webkit-details-marker { display: none; } .centres-summary::marker { display: none; content: ''; } .centres-summary-pin { width: 18px; height: 18px; fill: none; stroke: #B08A5A; stroke-width: 1.6; flex-shrink: 0; } .centres-summary-text { flex: 1; } .centres-summary-chevron { width: 16px; height: 16px; fill: none; stroke: #B08A5A; stroke-width: 1.8; flex-shrink: 0; transition: transform 0.3s ease; } .centres-dropdown[open] .centres-summary-chevron { transform: rotate(180deg); } .centres-summary:hover .centres-summary-text, .centres-summary:hover .centres-summary-pin, .centres-summary:hover .centres-summary-chevron { color: #8A6A3E; stroke: #8A6A3E; } .centres-list { list-style: none; padding: 0; margin: 0; } /* When the list still sits inside the legacy .centres-dropdown wrapper, restore the original inset padding + top divider. */ .centres-dropdown .centres-list { padding: 8px 24px 22px 24px; border-top: 1px solid rgba(201, 165, 92, 0.20); } .centres-list li { position: relative; padding: 8px 0 8px 24px; font-family: var(--font); font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } .centres-list li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 6px; height: 6px; border-radius: 50%; /* Solid black bullet — clean, editorial. */ background: #000000; } /* ---- MODERN 2-column centre-card grid ---- Each centre sits in a small rounded card with a rose numbered badge on the left and the name on the right. Two columns on desktop, one column on narrow screens. */ .centres-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 3vw, 44px); counter-reset: none; } /* Editorial row — no card box, just a subtle hairline that fades from rose to blue on hover, and a serif numeral. */ .centre-card { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 16px; padding: 16px 4px; border-radius: 0; background: transparent; border: none; border-bottom: 1px solid rgba(74, 66, 88, 0.10); box-shadow: none; transition: border-color 0.28s var(--ease), padding-left 0.28s var(--ease); } .centre-card:hover { border-bottom-color: rgba(212, 120, 150, 0.55); padding-left: 10px; } /* Serif numeral in a deep rose — editorial, no chip. */ .centre-num { display: inline-flex; align-items: center; justify-content: flex-start; width: 36px; height: auto; background: none; box-shadow: none; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: 0.02em; color: #B85C82; flex-shrink: 0; } .centres-grid li:nth-child(even) .centre-num { color: #6D82AF; } .centre-name { font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: #2A2540; min-width: 0; } /* Stack to single column on narrow layouts. */ @media (max-width: 720px) { .centres-grid { grid-template-columns: 1fr; } } /* Ghost button */ /* ---- View on Map — DISTINCT action card ---- Deliberately different shape from the rounded rectangles above: an asymmetric card with a squared pin badge on the LEFT (small rose corner), two-line label + address subtext in the middle, and an arrow on the RIGHT. Rests as an ivory card with a rose hairline; on hover it fills to midnight-purple (matching the footer) and the arrow slides forward. */ /* Light frosted-glass action bar in the pastel palette — same family as the panel and cards above (was a dark-bordered card with a heavy midnight-purple hover fill). */ .map-btn { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 16px 22px 16px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); /* Light glass rim to match the frosted cards. */ border: 1px solid rgba(255, 255, 255, 0.70); color: var(--ink); text-decoration: none; font-family: var(--font); box-shadow: 0 18px 40px -26px rgba(150, 138, 178, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.85); transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .map-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; /* Pastel glass tile (rose→blue) matching the numbered discs, with a deep-rose pin glyph. */ background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 78%), linear-gradient(135deg, rgba(244, 194, 214, 0.90) 0%, rgba(190, 208, 236, 0.85) 100%); color: #B85C82; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 6px 14px -8px rgba(150, 138, 178, 0.40); transition: transform 0.35s var(--ease); } .map-btn-icon svg { width: 24px; height: 24px; fill: currentColor; stroke: none; } .map-btn-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .map-btn-label { font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); transition: color 0.35s var(--ease); } .map-btn-sub { font-size: 12.5px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink-mute); transition: color 0.35s var(--ease); } .map-btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--rose-deep); transition: transform 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease); } .map-btn-arrow svg { width: 16px; height: 16px; } /* Hover — a soft lift with a gentle rose glow (light, no dark fill). */ .map-btn:hover { border-color: rgba(212, 120, 150, 0.40); transform: translateY(-2px); box-shadow: 0 24px 46px -24px rgba(150, 138, 178, 0.50), 0 4px 12px -6px rgba(212, 120, 150, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.90); } .map-btn:hover .map-btn-icon { transform: scale(1.04); } .map-btn:hover .map-btn-arrow { transform: translateX(3px); } /* ---- Compact pill variant to sit next to the "View all 8 centres" button — matched pill height, uppercase label, small icon + arrow. */ .map-btn.map-btn--compact { display: inline-flex; grid-template-columns: none; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; border-radius: 100px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 10px 24px -14px rgba(150, 138, 178, 0.40); color: #4A4258; text-decoration: none; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; transition: transform 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease); } .map-btn.map-btn--compact .map-btn-icon { width: 22px; height: 22px; border-radius: 50%; padding: 0; background: none; box-shadow: none; color: #B85C82; } .map-btn.map-btn--compact .map-btn-icon svg { width: 16px; height: 16px; } .map-btn.map-btn--compact .map-btn-label { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #4A4258; } .map-btn.map-btn--compact .map-btn-arrow { width: 16px; height: 16px; background: none; color: #B85C82; transition: transform 0.28s var(--ease); } .map-btn.map-btn--compact .map-btn-arrow svg { width: 14px; height: 14px; } .map-btn.map-btn--compact:hover { background: rgba(255, 255, 255, 0.78); transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(150, 138, 178, 0.50); } .map-btn.map-btn--compact:hover .map-btn-arrow { transform: translateX(3px); } /* --- Legacy ghost class kept as harmless alias for any old markup --- */ .btn-ghost { display: none; } /* Close visual — the nurse-with-baby photo. Uses a fixed portrait aspect ratio (4:5) rather than stretching to match the text column, so the WORDING column stays taller than the picture: paragraphs, dropdown, and CTA button extend past where the photo ends on the right, giving the layout a natural editorial rhythm. */ .close-visual { border-radius: 22px; overflow: hidden; /* On desktop the photo takes no fixed ratio — align-self: stretch grows it to the height of the heading + cards beside it, so the picture finishes level with the bottom of the two cards. A min-height keeps it graceful if the copy is ever short. (≤1024 restores a 4:3 ratio when the layout stacks into one column.) */ align-self: stretch; min-height: clamp(460px, 42vw, 620px); max-height: none; background: linear-gradient(135deg, #F4C2D0 0%, #FADCD1 50%, #FCEEF1 100%); box-shadow: 0 22px 44px -22px rgba(212, 120, 150, 0.28); position: relative; } .close-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== PROMISE + FOLLOW US ON FACEBOOK ========================================================================== */ .follow-section { position: relative; z-index: 1; max-width: 1240px; margin: clamp(24px, 3vw, 36px) auto 0; padding: 0 clamp(16px, 3vw, 40px); } .follow-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(20px, 2.5vw, 30px); align-items: start; } /* --- Left: three side-icon paragraph rows --- */ .para-column { background: #FFFDFA; border-radius: 24px; padding: clamp(28px, 3.4vw, 40px); box-shadow: var(--shadow-lift); border: 1px solid rgba(232, 155, 175, 0.16); display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); } .para-row { display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: flex-start; padding-bottom: clamp(18px, 2.2vw, 24px); border-bottom: 1px dashed rgba(212, 120, 150, 0.22); } .para-row:last-child { border-bottom: none; padding-bottom: 0; } .para-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.12); } .para-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .para-icon-rose { background: linear-gradient(135deg, #FCEEF1, #F4C2D0); color: #D47896; } .para-icon-violet { background: linear-gradient(135deg, #F0E5F5, #D4C2E4); color: #7C63A8; } /* Official Facebook badge — solid Facebook blue circle, white "f". */ .para-icon-fb { background: var(--fb-blue); color: #FFFFFF; } .para-icon-fb svg { fill: currentColor; stroke: none; } .para-copy { font-family: var(--font); font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; } /* --- Right: pink Facebook promo card --- */ .fb-card { position: relative; background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 255, 255, 0.5) 0%, rgba(244, 194, 214, 0) 60%), linear-gradient(180deg, #FADCD1 0%, #F4C2D0 55%, #E89BAF 100%); border-radius: 24px; padding: clamp(30px, 3.6vw, 42px) clamp(24px, 3vw, 34px) clamp(28px, 3.4vw, 38px); text-align: center; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(212, 120, 150, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; } .fb-scene { position: relative; height: clamp(160px, 20vw, 200px); margin-bottom: 12px; } .cloud { position: absolute; background: #FFFDFA; border-radius: 100px; opacity: 0.9; box-shadow: 0 4px 12px -6px rgba(212, 120, 150, 0.25); } .cloud::before, .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; } .cloud.c1 { width: 60px; height: 20px; left: 15%; top: 55%; } .cloud.c1::before { width: 24px; height: 24px; left: 8px; top: -12px; } .cloud.c1::after { width: 20px; height: 20px; right: 8px; top: -8px; } .cloud.c2 { width: 80px; height: 22px; right: 12%; top: 62%; } .cloud.c2::before { width: 28px; height: 28px; left: 12px; top: -14px; } .cloud.c2::after { width: 22px; height: 22px; right: 10px; top: -10px; } .cloud.c3 { width: 100px; height: 26px; left: 50%; top: 78%; transform: translateX(-50%); } .cloud.c3::before { width: 32px; height: 32px; left: 15px; top: -16px; } .cloud.c3::after { width: 26px; height: 26px; right: 15px; top: -12px; } .fb-circle { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: clamp(90px, 11vw, 120px); height: clamp(90px, 11vw, 120px); border-radius: 50%; background: linear-gradient(135deg, #F4A5B8 0%, #E89BAF 60%, #D47896 100%); display: flex; align-items: center; justify-content: center; color: #FFFDFA; box-shadow: 0 18px 40px -12px rgba(212, 120, 150, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35); z-index: 2; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .fb-circle:hover { transform: translateX(-50%) translateY(-4px); box-shadow: 0 26px 52px -12px rgba(212, 120, 150, 0.60), inset 0 2px 0 rgba(255, 255, 255, 0.4); } .fb-circle svg { width: 50%; height: 50%; fill: currentColor; } .fbc-star { position: absolute; color: #FFFDFA; font-size: 12px; opacity: 0.8; animation: none !important; /* fully static */ } .fbc-star.s1 { top: 10%; left: 15%; font-size: 10px; animation-delay: 0s; } .fbc-star.s2 { top: 20%; right: 12%; font-size: 14px; animation-delay: 1.2s; } .fbc-star.s3 { top: 40%; left: 8%; font-size: 8px; animation-delay: 2.4s; } @keyframes fbcTwinkle { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .fb-title { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 10px; } .fb-title em { display: block; font-family: var(--font-script); font-style: normal; font-size: 1.5em; color: var(--rose-deep); line-height: 1; font-weight: 400; margin-top: 6px; } .fb-sub { font-family: var(--font); font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; } .fb-heart { color: var(--rose-deep); font-size: 16px; margin-top: 12px; opacity: 0.7; } /* ========================================================================== FOOTER ========================================================================== */ .footer { position: relative; z-index: 1; /* Full-bleed: break out of the .page padding so the dark background spans edge to edge. */ max-width: none; margin: clamp(28px, 3.5vw, 44px) calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)); padding: 0; background: radial-gradient(ellipse 60% 60% at 92% 6%, rgba(232, 155, 175, 0.18) 0%, rgba(232, 155, 175, 0) 60%), radial-gradient(ellipse 55% 55% at 4% 100%, rgba(180, 150, 220, 0.12) 0%, rgba(180, 150, 220, 0) 60%), linear-gradient(180deg, #2A2540 0%, #1E1A2E 100%); /* Warm rose hairline running along the top edge. */ border-top: 1px solid rgba(232, 155, 175, 0.22); } /* ========================================================================== FOOTER — dark editorial luxury (Jul 2026 rev) Deep midnight-navy card with a warm rose-pink accent, soft peach glow in the top-right, and elegant serif rhythm. Same premium tone the two cards above lean into, translated into a night palette. ========================================================================== */ .footer-inner { position: relative; /* Tightened max-width so the three columns cluster centrally on wide screens rather than spreading to the edges. */ max-width: 1080px; margin: 0 auto; padding: clamp(48px, 5vw, 72px) clamp(28px, 4vw, 60px) clamp(36px, 3.6vw, 48px); background: transparent; border: none; border-radius: 0; box-shadow: none; color: #E8E4F0; } /* (No inner rose line — it's now on .footer's top border.) */ .footer-inner::before { content: none; } .footer-grid { display: grid; /* Three tidy columns. Brand wider (holds logo + tagline horizontally), Reach Us + Opening equal-ish. Tops LOCKED to the same baseline. */ grid-template-columns: 1.5fr 1.2fr 1fr; gap: clamp(28px, 3.4vw, 56px); align-items: start; } /* Logo + tagline on ONE row, vertically centered against each other, but the whole brand block still tops with the other columns. */ .footer-brand { display: flex; flex-direction: row; align-items: center; /* Tightened from 20px — the logo PNG already carries its own transparent margin, which was reading as a double gap. */ gap: 6px; padding-top: 6px; /* small optical nudge so the tagline caps line up with the column headings */ } /* Footer logo — the round cream badge was built for the old circular transparent mark. The BabyAngel FA logo is a squarish lockup with the wordmark underneath, so the circle clipped its corners and the script. Badge removed (3 Aug 2026): the logo now sits directly on the dark footer with a soft shadow to lift it off the navy. */ .footer-logo { width: 120px; max-width: 120px; height: auto; flex-shrink: 0; background: none; border-radius: 0; padding: 0; box-shadow: none; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)); } .footer-brand-sub { font-family: var(--font); font-size: 11.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #F0B4C7; line-height: 1.55; /* Each of the two lines (separated by
in HTML) stays on one line — no inner wrapping that would create a 3rd line on narrow columns. */ white-space: nowrap; } /* On mobile the footer column is narrower — tighten letter-spacing and shrink font-size a hair so both lines still fit comfortably without overflow, and stay on exactly 2 lines as intended. */ @media (max-width: 640px) { .footer-brand-sub { font-size: 10.5px; letter-spacing: 0.16em; } } /* Every column inside the grid uses the same top alignment and left edge — no per-column padding tricks, so everything reads as one tidy row of tops. */ .footer-col { padding-top: 0; padding-left: 0; } /* Legacy quote — retained only as no-op safeguard; removed from markup. */ .footer-quote { display: none; } .footer-col h6 { font-family: var(--font); font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #F0B4C7; margin: 0 0 16px; position: relative; padding-bottom: 12px; line-height: 1; } .footer-col .footer-h6-2 { margin-top: 26px; } /* Delicate rose hairline beneath each column heading — same cue as the gold accent on the cards above, translated to the rose palette. */ .footer-col h6::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 1px; background: linear-gradient(90deg, rgba(232, 155, 175, 0.75) 0%, rgba(232, 155, 175, 0) 100%); } .footer-col p { font-family: var(--font); font-size: 14px; color: #E8E4F0; line-height: 1.7; margin-bottom: 8px; } .footer-col p a { color: #E8E4F0; text-decoration: none; transition: color 0.25s var(--ease); } .footer-col p a:hover { color: #F0B4C7; } .footer-phone a { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; } .footer-addr { color: #B8B0C8 !important; font-size: 13.5px !important; margin-top: 14px; } .footer-open { font-size: 17px !important; color: #FFFFFF !important; margin-bottom: 4px !important; } .footer-open strong { font-weight: 600; letter-spacing: 0.005em; } .footer-open-sub { color: #B8B0C8 !important; font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 0 !important; text-align: justify !important; text-justify: inter-word; } /* Facebook link on the "BIG Baby Expo" wording in the Upcoming Event block */ .footer-expo-link { color: #F0B4C7 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.25s var(--ease); } .footer-expo-link:hover { color: #FFFFFF !important; } .social-row { display: flex; gap: 12px; margin-bottom: 4px; } .social-row a { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #2E8CF8 0%, #1877F2 55%, #0F5FCB 100%); color: #FFFFFF; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); box-shadow: 0 8px 18px -6px rgba(24, 119, 242, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .social-row a:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(24, 119, 242, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.32); } .social-row svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Facebook glyph is filled (uses currentColor), Instagram stays as an outline camera in the champagne-ivory badge. */ .social-row a[aria-label="Facebook"] svg { fill: currentColor; stroke: none; } .footer-tagline { display: none; /* Legacy tagline block — replaced by .footer-quote in brand col */ text-align: right; padding-top: 8px; flex-direction: column; align-items: flex-end; gap: 4px; } .footer-tagline .script { display: inline-block; font-family: var(--font-script); font-size: clamp(28px, 3vw, 36px); /* Warm champagne-gold gradient with a slow shimmer, mirroring the Coming-Soon ribbon at the top of the hero. */ background: linear-gradient(115deg, #C9A55C 0%, #E7CE85 25%, #F6EAB4 45%, #E7CE85 65%, #B08A45 100%); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.15; font-weight: 400; animation: taglineShimmer 8s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(176, 138, 69, 0.18)); } @keyframes taglineShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .footer-tagline .script { animation: none; background-position: 50% 50%; } } .footer-tagline .heart-tiny { font-size: 14px; color: #C9A55C; margin: 0; } .footer-bottom { margin-top: clamp(32px, 3.4vw, 44px); padding-top: clamp(20px, 2.2vw, 28px); border-top: 1px solid rgba(232, 155, 175, 0.16); font-family: var(--font); } .footer-company { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 12.5px; color: #B8B0C8; letter-spacing: 0.02em; line-height: 1.55; } .footer-company strong { color: #FFFFFF; font-weight: 600; letter-spacing: 0.02em; } .footer-reg { position: relative; padding-left: 16px; } .footer-reg::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(240, 180, 199, 0.6); transform: translateY(-50%); } .footer-copy { position: relative; padding-left: 16px; opacity: 0.85; } .footer-copy::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(240, 180, 199, 0.6); transform: translateY(-50%); } /* ========================================================================== PASSWORD MODAL ========================================================================== */ .unlock-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(42, 36, 56, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .unlock-overlay.is-open { opacity: 1; visibility: visible; } .unlock-modal { position: relative; width: 100%; max-width: 420px; text-align: center; padding: 44px 38px 40px; border-radius: 20px; border: 1px solid rgba(232, 155, 175, 0.30); background: var(--ivory); box-shadow: 0 40px 90px -30px rgba(212, 120, 150, 0.45); } .unlock-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-mute); font-size: 26px; cursor: pointer; border-radius: 50%; } .unlock-close:hover { background: rgba(212, 120, 150, 0.12); color: var(--rose-deep); } .unlock-eyebrow { display: block; font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; } .unlock-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); font-weight: 500; color: var(--ink); line-height: 1.2; margin-bottom: 10px; } .unlock-title em { font-style: italic; font-weight: 400; color: var(--blue); } .unlock-sub { font-family: var(--font); font-size: 14.5px; color: var(--ink-mute); line-height: 1.6; margin-bottom: 24px; } .unlock-input { width: 100%; padding: 14px 18px; font-family: var(--font); font-size: 15px; color: var(--ink); text-align: center; letter-spacing: 0.04em; background: #FFFDFA; border: 1px solid rgba(212, 120, 150, 0.35); border-radius: 100px; outline: none; } .unlock-input:focus { border-color: var(--rose-deep); box-shadow: 0 0 0 4px rgba(212, 120, 150, 0.14); } .unlock-error { font-family: var(--font); font-size: 13px; color: var(--rose-deep); margin: 12px 0 0; min-height: 18px; opacity: 0; } .unlock-error.is-visible { opacity: 1; } .unlock-submit { width: 100%; margin-top: 18px; padding: 15px 28px; border: none; border-radius: 100px; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; color: #FFF; background: linear-gradient(135deg, #E89BAF 0%, #8FA3C9 100%); box-shadow: 0 12px 30px -10px rgba(160, 140, 190, 0.5); } /* ========================================================================== RESPONSIVE ========================================================================== */ /* Tablet ≤ 1024px */ @media (max-width: 1024px) { .hero-inner { display: block; min-height: 0; } /* On tablet/mobile the photo drops back into the natural flow — it's nested INSIDE .hero-content in the DOM right after the slogan, so this positioning reset makes it appear there. Kept as a CIRCLE (same shape as desktop) and centred on the page, with the bath-time bubble foam still floating around it. */ .hero-visual { position: relative; top: auto; right: auto; transform: none; display: block; width: min(72vw, 420px); height: min(72vw, 420px); margin: clamp(28px, 5vw, 44px) auto clamp(32px, 5vw, 48px); overflow: visible; border-radius: 0; box-shadow: none; } .hero-photo { min-height: 0; border-radius: 50%; box-shadow: 0 24px 60px -24px rgba(212, 120, 150, 0.35), inset 0 0 0 5px rgba(255, 255, 255, 0.55); } .hero-content { max-width: 100%; text-align: center; margin: 0 auto; } .hero-title { text-align: center; } /* Description keeps its DESKTOP justified alignment on mobile too — the paragraph text is justified (both edges flush) with the last line centred. */ .hero-desc { margin-left: auto; margin-right: auto; text-align: justify; text-align-last: center; } .hero-cta { margin-left: auto; margin-right: auto; } /* Let the slogan text wrap internally when the viewport is narrow, but keep the two stars flanking either side (not stacking above / below). flex-wrap stays `nowrap` so the three flex items sit on one flex line; min-width:0 lets the middle text item shrink and wrap its own words. */ .hero-script { white-space: normal; justify-content: center; flex-wrap: nowrap; } .tagline-words { white-space: normal; min-width: 0; } /* Rescale the bath-time bubbles to match the smaller mobile photo. Same pink → mauve → blue palette, same glass sheen, just tucked in closer to the circle so they don't crowd the surrounding text. Uses percentage positions so they scale with the photo. */ .bubble-1 { width: 26%; height: 26%; top: -8%; left: -8%; } .bubble-2 { width: 20%; height: 20%; bottom: -4%; left: 12%; } .bubble-3 { width: 12%; height: 12%; top: 44%; left: -6%; } .bubble-4 { width: 9%; height: 9%; top: -14%; left: 22%; } .bubble-5 { width: 11%; height: 11%; top: -4%; right: -6%; } .bubble-6 { width: 17%; height: 17%; bottom: -6%; right: -3%; } .bubble-7 { width: 6%; height: 6%; bottom: 24%; left: -9%; } /* Glass bubbles on mobile — smaller and hugging the photo circle more tightly (no "gap" to fill on mobile since content stacks, but the extra glass drops still add to the foam feel). */ .bubble-8 { width: 14%; height: 14%; top: -8%; left: -12%; } .bubble-9 { width: 8%; height: 8%; top: 20%; left: -14%; } .bubble-10 { width: 12%; height: 12%; bottom: 4%; left: -13%; } .bubble-11 { width: 5%; height: 5%; top: 62%; left: -8%; } .bubble-12 { width: 7%; height: 7%; top: -10%; right: -8%; } .bubble-13 { width: 10%; height: 10%; bottom: -6%; right: -12%; } .bubble-14 { width: 8%; height: 8%; top: 42%; right: -12%; } .bubble-15 { width: 6%; height: 6%; top: -8%; right: 14%; } .feature-strip-inner { grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Mobile stack order: HEADING → PHOTO → PROMISE CARDS → CENTRES → CLOUD. `display: contents` on .close-content dissolves its wrapper so its children become direct flex children of .close-grid — we can then reorder each with `order:`. */ .close-grid { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 36px); } .close-content { display: contents; } .close-content > .section-heading { order: 1; text-align: center; } .close-visual { order: 2; grid-column: auto; grid-row: auto; align-self: auto; } .close-content > .close-paragraphs--pair { order: 3; } .close-content > .centres-block { order: 4; margin-top: 0; text-align: center; } /* Centre the confinement heading + action pills once the layout stacks into a single column. */ .centres-block .centres-heading { text-align: center; white-space: normal; } .centres-block .centres-actions { justify-content: center; } .close-extra { order: 5; grid-column: auto; grid-row: auto; align-self: auto; } /* Stack cloud etc naturally on mobile. */ .close-extra { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 26px); } .close-extra .fb-note, .close-extra .centres-dropdown, .close-extra .btn-ghost { grid-column: auto; grid-row: auto; align-self: auto; } .close-extra .fb-note { min-height: 0; margin-top: clamp(10px, 2vw, 18px); } /* Mobile-friendly picture: portrait 4:5, capped width so it doesn't dominate the phone screen, and centered under the heading. The stretch-to-cards behaviour from desktop is disabled here since the layout is single-column on tablet/mobile. */ .close-visual { aspect-ratio: 4 / 5; min-height: 0; max-height: none; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-brand { grid-column: 1 / -1; } } /* Mobile ≤ 640px */ @media (max-width: 640px) { .page { padding: 14px; } /* Full-bleed footer must break out by exactly the mobile .page padding (14px), not the desktop clamp value (24px). The old -24px overshot the 14px padding by 10px each side, making the footer 20px wider than the screen — that hidden horizontal overflow is what caught a diagonal swipe and stalled vertical scrolling on mobile. */ .footer { margin-left: -14px; margin-right: -14px; margin-bottom: -14px; } .hero-inner { padding: 20px 16px; } /* 140px box ≈ the old 110px circular mark once the PNG's own transparent margin is accounted for. */ .brand-logo { width: 140px; max-width: 140px; max-height: none; margin-bottom: -19px; } .hero-script { font-size: 22px; line-height: 1.3; padding: 8px 12px; gap: 8px; } .tagline-flourish { width: 14px; height: 14px; } .hero-title-main { font-size: 50px; } .hero-title-sub { font-size: 26px; } /* On phones the photo circle shrinks with the viewport (min(72vw, 420px) already handled that in the tablet block) — override min-height / border-radius here since those were carried over from the old rectangular-banner treatment. */ .hero-visual { min-height: 0; border-radius: 0; } .hero-photo { min-height: 0; border-radius: 50%; } .hero-desc { font-size: 14px; line-height: 1.7; } /* Phone-sized nurse-and-baby picture: keep it a friendly, portrait card that fits comfortably on the screen without overwhelming the copy below. */ .close-visual { aspect-ratio: 4 / 5; max-width: min(88vw, 380px); border-radius: 18px; } .close-photo-img { border-radius: inherit; } .coming-badge { font-size: 11.5px; letter-spacing: 0.18em; padding: 14px 22px 14px 18px; gap: 10px; } .cb-dot { width: 9px; height: 9px; } .hero-cta { padding: 14px 28px; font-size: 12px; letter-spacing: 0.18em; gap: 10px; } .hero-cta svg { width: 16px; height: 16px; } .hero-cta-sub { font-size: 12px; } .feature-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 22px; border-radius: 20px; } .fi-icon { width: 48px; height: 48px; } .fi-icon svg { width: 24px; height: 24px; } /* Keep the caption on ONE line on phones too — scale the font to viewport width so it always fits, and hold nowrap. */ .section-heading { font-size: clamp(15px, 5.2vw, 22px); white-space: nowrap; } /* Mobile refinements for the three close-to-you paragraphs. Widths reset to 100% so the shift-left / shift-right treatment from desktop doesn't crop the boxes on a narrow phone. Drift animation stays on but with a slightly smaller sway range. */ .close-paragraphs .para-row { grid-template-columns: 46px 1fr; gap: 14px; width: 100%; margin: 0; } /* Stack the side-by-side pair into one column on phones. */ .close-paragraphs--pair { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 28px); } .close-paragraphs--pair .para-row { min-height: 0; } .close-paragraphs .para-icon { width: 46px; height: 46px; } .close-paragraphs .para-icon svg { width: 22px; height: 22px; } .close-paragraphs .para-copy { font-size: 14.5px; line-height: 1.75; } /* Slightly smaller mobile foam bubbles so they don't crowd the box */ .para-row--rank1 .bb-1, .para-row--rank2 .bb-1, .para-row--rank3 .bb-1 { width: 34px; height: 34px; } .para-row--rank1 .bb-3, .para-row--rank2 .bb-3, .para-row--rank3 .bb-3 { width: 24px; height: 24px; } /* Mobile refinements for the confinement dropdown */ .centres-summary { font-size: 12.5px; padding: 12px 14px; } .centres-list li { font-size: 13px; } /* ---- Centre the whole confinement block on phones: heading and action pills sit centred in the column. */ .centres-block { text-align: center; } .centres-heading { text-align: center; white-space: normal; } /* ---- Confinement actions: stack the two pills vertically on phones, each on its own line, so "View all 8 centres" doesn't wrap. */ .centres-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; } .centres-actions .centres-reveal-summary, .centres-actions .map-btn--compact { grid-column: auto; grid-row: auto; width: 100%; justify-content: center; white-space: nowrap; padding: 12px 18px; font-size: 11.5px; letter-spacing: 0.18em; } .centres-actions .centres-grid { grid-column: auto; grid-row: auto; margin-top: clamp(14px, 3vw, 22px); } /* ---- Cloud on mobile: full-width, softer round-edge mask so the image doesn't get stretched into a tall thin shape, and mini clouds hidden (too cramped on a phone screen). */ a.fb-note--wide { max-width: 100%; padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 30px) clamp(30px, 6vw, 46px); min-height: 0; } .fb-cloud-image { inset: -14px -20px; width: calc(100% + 40px); height: calc(100% + 28px); /* Radial-gradient mask — adapts naturally to any aspect ratio so the image doesn't get stretched by the fixed cloud-outline path when the container becomes tall & narrow. */ -webkit-mask-image: radial-gradient(ellipse 68% 58% at center, black 45%, transparent 82%); mask-image: radial-gradient(ellipse 68% 58% at center, black 45%, transparent 82%); } .fb-mini-cloud { display: none; } /* Copy sizes down for mobile so the cloud stays compact. */ a.fb-note--wide .fb-note-heading { font-size: clamp(22px, 6vw, 30px); } a.fb-note--wide .fb-note-text { font-size: 14px; line-height: 1.75; } .footer-inner { padding: 28px 22px; border-radius: 20px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; } .footer-tagline { display: none; } .footer-company { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; } } /* ========================================================================== MOBILE SCROLL PERFORMANCE (≤ 820px) The scroll stutter came from backdrop-filter, NOT the animations. On a phone, backdrop-filter is the #1 cause of janky scrolling because the GPU must re-blur the backdrop on every scroll frame — so we drop the blurs on small screens (the glass panels stay tinted/translucent, just not frosted). The bubble/cloud/star float animations use `transform`, which the GPU composites cheaply and does NOT hurt scrolling — so they stay ON and keep floating lively on mobile. Only the frosted blur is removed. ========================================================================== */ @media (max-width: 820px) { *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.15s !important; } } /* ========================================================================== KEEP THE SIGNATURE BUBBLES FLOATING — EVEN UNDER REDUCE MOTION By request, the decorative bubbles should always float (as they do on desktop), regardless of a phone's Reduce Motion / Low Power setting. The global rule above zeroes every animation-duration, so we re-assert a running duration for the bubbles here. This must come AFTER that rule and carries class-level specificity + !important, so it wins. Only the bubbles are restored; the more intense sweeps/shimmers still respect Reduce Motion. The float is transform-only (GPU-cheap) and lives inside clipped containers, so it has ZERO effect on the horizontal scroll lock — the page still can't be swiped left/right on mobile. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .bubble { animation-name: bubbleFloat !important; animation-duration: 16s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-play-state: running !important; } .box-bubble { animation-name: boxBubbleFloat !important; animation-duration: 12s !important; animation-timing-function: ease-in-out !important; animation-iteration-count: infinite !important; animation-play-state: running !important; } }