@charset "UTF-8"; /* ======================================================================== Glassmorphism light theme — a separate, "super-modern" skin. Loaded AFTER styles.css (see index.html / privacy.html). It redefines the colour tokens for a light palette and layers frosted-glass surfaces, a soft gradient backdrop, floating colour orbs and a vibrant indigo→violet accent on top of the shared layout. Structure/spacing is inherited unchanged — only the look changes. ======================================================================== */ :root { /* Light palette. --bg matches the body backdrop exactly — a different tint here shows up as an off-colour strip wherever the bare canvas peeks out (overscroll, below the footer). */ --bg: #eef1f6; --text: #1b2340; --text-muted: #5d6a92; /* Frosted glass surfaces — translucent white; the blur is added per selector below (a token can't carry backdrop-filter). */ --bg-card: rgba(255, 255, 255, .55); --card-clickable: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .40)); --card-clickable-active: rgba(255, 255, 255, .80); /* Hover surface — a brighter glass *gradient* (same shape as --card-clickable) so the transition interpolates without flicker. */ --card-clickable-hover: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74)); --border: rgba(255, 255, 255, .60); /* Soft, cool-tinted glass shadows + bright top bevel */ --shadow: 0 8px 30px rgba(40, 70, 125, .14); --shadow-hover: 0 14px 42px rgba(40, 70, 125, .22); --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 30px rgba(40, 70, 125, .12); --card-shadow-clickable: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 34px rgba(40, 75, 135, .16); /* Lifted hover shadow — deeper, cooler glass drop for clear feedback. */ --card-shadow-clickable-hover: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 46px rgba(40, 75, 135, .30); /* Review avatars: no ring at all — the photo/initials circle sits directly on the card. */ --shadow-avatar-rim: none; /* The shine sweeping across the phone digits: light, not blue — a blue band is invisible over the dark navy digits of this theme. Kept subtle (blended toward the navy text) so the glare stays gentle. */ --phone-shine: #aebdd8; /* Form controls (callback modal) — the base tokens are built for dark surfaces; on the white popup the inputs need a grey hairline. */ --input-bg: rgba(255, 255, 255, .75); --input-border: rgba(27, 35, 64, .18); /* Restrained, professional accent — deep blue → steel blue */ --accent: #2f5fc6; --accent-bright: #3f86d4; --accent-soft: #284f9c; --accent-light: #6f9bd8; --link: var(--accent-soft); /* Link hover: maximally vivid electric blue — pops hard off the dark-navy resting colour. */ --link-hover: #0a84ff; --focus-ring: rgba(47, 95, 198, .22); --underline-soft: rgba(47, 95, 198, .30); } /* Soft pastel backdrop with colour washes — replaces the dark dotted texture and gives the frosted cards something colourful to blur over. */ body { background-image: none; /* drop the base dotted texture */ } /* The gradient lives on a fixed, GPU-composited layer instead of `background-attachment: fixed` — the latter repaints the whole background on every scroll frame, which (together with the frosted cards) is what made scrolling stutter. A fixed pseudo-element is rasterised once. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(60% 55% at 12% -5%, rgba(64, 104, 178, .20), transparent 70%), radial-gradient(55% 45% at 102% 12%, rgba(58, 132, 165, .15), transparent 70%), radial-gradient(48% 48% at 85% 105%, rgba(96, 120, 158, .13), transparent 70%), linear-gradient(165deg, #eef2f8 0%, #e9eef5 55%, var(--bg) 100%); } /* ---- Frosted glass on every card surface ---- */ .pros__container, .practice-item, .rating-card, .review-card, .qualification__link, .qualification__see-all { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--border); } /* Nav & footer text links hover with the same vivid blue as body links — their base hover (dark --text) barely reads as a change on light. */ .menu__link:hover, .footer__item:hover { color: var(--link-hover); } .footer__item:hover .footer__icon { color: var(--link-hover); } /* The cert-lightbox nav buttons sit flat — no blurry drop shadow / glow underneath, the gradient fill is enough. Review avatars likewise drop the base theme's bevel lip — the white 1px edge is meant for dark surfaces. (Footer socials and the mobile phone pill now share the raised CTA volume.) */ .review-card__avatar, .cert-lightbox__close, .cert-lightbox__btn, .callback-modal__close { box-shadow: none; } /* Floating colour orbs behind the glass — show at every width here (the base theme hides them below 1280); muted cool tones, not vivid. */ @media (max-width: 1279px) { .blur { display: block; } } .blur::before, .blur::after { opacity: .38; } .blur::before { background: #5a86c8; } .blur::after { background: #4fa3bf; }