/* ═══════════════════════════════════════════════════════════════ LIQUID GLASS SYSTEM ─────────────────────────────────────────────────────────────── Layers per surface: 1. base — backdrop-filter blur + saturate (background read) 2. tint — subtle bone-on-ink tint, lifts contrast 3. refract — SVG displacement filter through .lg-refract 4. specular — top edge highlight (1px gradient line) 5. spot — pointer-tracked radial highlight (--mx, --my, --on) 6. inner border — inset shadow for crisp edge ═══════════════════════════════════════════════════════════════ */ .lg{ position: relative; isolation: isolate; border-radius: 22px; background: /* tint */ linear-gradient(180deg, rgba(242,238,229,0.10), rgba(242,238,229,0.03) 50%, rgba(7,16,31,0.20)); backdrop-filter: blur(18px) saturate(160%) brightness(1.05); -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(1.05); border: 1px solid rgba(242,238,229,0.18); box-shadow: /* outer ambient drop */ 0 12px 40px -12px rgba(7,16,31,0.55), /* inner top highlight */ inset 0 1px 0 rgba(255,255,255,0.35), /* inner bottom rim */ inset 0 -1px 0 rgba(255,255,255,0.06), /* inner side rim */ inset 1px 0 0 rgba(255,255,255,0.05), inset -1px 0 0 rgba(255,255,255,0.05); --mx: 50%; --my: 0%; --on: 0; } /* spot — pointer-tracked highlight (above content) */ .lg::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 280px 220px at var(--mx) var(--my), rgba(255,255,255,0.32), rgba(255,255,255,0.08) 35%, transparent 65% ); opacity: calc(var(--on) * 0.85); pointer-events: none; mix-blend-mode: screen; transition: opacity .4s ease; z-index: 1; } /* specular — top edge */ .lg::after{ content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); border-radius: 1px; pointer-events: none; z-index: 2; } /* refraction layer — applied to a child .lg__refract that mirrors the bg */ .lg__refract{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; filter: url(#lg-refract); opacity: 0.22; background: radial-gradient(60% 80% at var(--mx) var(--my), rgba(124,200,255,0.55), transparent 60%), radial-gradient(40% 60% at calc(100% - var(--mx)) calc(100% - var(--my)), rgba(242,162,74,0.35), transparent 60%); mix-blend-mode: screen; z-index: 0; } /* content sits above */ .lg > *:not(.lg__refract){ position: relative; z-index: 3; } /* variants ─────────────────────────────────────────── */ .lg--strong{ backdrop-filter: blur(28px) saturate(180%) brightness(1.08); -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.08); background: linear-gradient(180deg, rgba(242,238,229,0.14), rgba(242,238,229,0.04) 50%, rgba(7,16,31,0.25)); } .lg--rim{ border: 1px solid rgba(242,238,229,0.25); box-shadow: 0 20px 60px -16px rgba(7,16,31,0.65), 0 0 0 1px rgba(124,200,255,0.10), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(255,255,255,0.08); } .lg--pill{ border-radius: 999px; } .lg--pill::after{ left: 14%; right: 14%; } /* ═══════════════ NAV — glass ═══════════════ */ .nav.lg{ border-radius: 0; border: none; border-bottom: 1px solid rgba(242,238,229,0.14); box-shadow: 0 8px 24px -16px rgba(7,16,31,0.5), inset 0 1px 0 rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(7,16,31,0.55), rgba(7,16,31,0.30)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } .nav.lg::after{ left: 0; right: 0; background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.3) 50%, transparent 95%); } /* ═══════════════ HERO GLASS CARD ═══════════════ */ .hero__glass-card{ margin-top: 8px; margin-bottom: 56px; padding: 28px 32px 24px; max-width: 760px; border-radius: 28px; display: flex; flex-direction: column; gap: 24px; } .hero__glass-card .hero__ctas{ margin-bottom: 0; } .hero__glass-card .hero__stats{ margin: 0; padding-top: 20px; border-top: 1px solid rgba(242,238,229,0.12); } @media (max-width: 720px){ .hero__glass-card{ padding: 22px 22px 20px; border-radius: 22px; } } /* ═══════════════ BUTTONS — glass primary ═══════════════ */ .btn--glass{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(242,238,229,0.78)); color: var(--ink); border: 1px solid rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 8px rgba(7,16,31,0.08), 0 8px 24px -8px rgba(7,16,31,0.45); overflow: hidden; } .btn--glass::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at var(--mx, 50%) var(--my, 0%), rgba(124,200,255,0.35), transparent 60%); opacity: var(--on, 0); transition: opacity .35s ease; pointer-events: none; } .btn--glass:hover{ transform: translateY(-1px); } .btn--glass > *{ position: relative; z-index: 1; } /* ═══════════════ PACKAGE cards — glass ═══════════════ */ .pkg.lg{ background: linear-gradient(180deg, rgba(242,238,229,0.08), rgba(242,238,229,0.025) 50%, rgba(7,16,31,0.15)); border: 1px solid rgba(242,238,229,0.16); border-radius: 24px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .pkg.lg.pkg--featured{ background: linear-gradient(180deg, rgba(124,200,255,0.16), rgba(124,200,255,0.04) 50%, rgba(7,16,31,0.20)); border: 1px solid rgba(124,200,255,0.32); box-shadow: 0 30px 80px -24px rgba(53,104,212,0.4), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(124,200,255,0.18); } /* ═══════════════ FORM — glass ═══════════════ */ .contact.lg, .form.lg{ border-radius: 28px; padding: 40px; background: linear-gradient(180deg, rgba(242,238,229,0.06), rgba(242,238,229,0.015) 50%, rgba(7,16,31,0.2)); } /* reduced motion / low-end fallback */ @media (prefers-reduced-motion: reduce){ .lg__refract{ display: none; } .lg::before{ transition: none; } } /* Safari fallback when backdrop-filter unsupported */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){ .lg{ background: rgba(7,16,31,0.85); } }