/* ============================================================ Halcyon — Liquid Glass layer Adapted from the "liquid glass" pattern (frosted translucency + specular inner edges + optional refraction) into plain CSS, tinted to the Halcyon mint/green palette. Gated on . soft = frost + gentle edge light (safe everywhere) liquid = frost + specular rim, refraction on floating chrome, hover sheen ============================================================ */ :root { --glass-tint: rgba(255,255,255,.55); --glass-tint-strong: rgba(255,255,255,.72); --glass-tint-dark: rgba(28,62,48,.30); --glass-blur: blur(18px) saturate(165%); --glass-line: rgba(255,255,255,.65); /* D-011: the white hairline above reads as a specular edge over imagery/dark, but disappears on flat light backgrounds (paper #fbfdfc / mint). Surfaces that sit on light use this tinted line instead. See DESIGN_DELTAS.md D-011. */ --glass-line-light: rgba(39,83,64,.16); /* specular rim: two light edges + an inner bloom, then lift off the page */ --glass-rim: inset 1.5px 1.5px 1px -1px rgba(255,255,255,.95), inset -1.5px -1.5px 1px -1px rgba(255,255,255,.55), inset 0 0 8px 6px rgba(255,255,255,.10), 0 1px 2px rgba(28,62,48,.06), 0 14px 36px -12px rgba(28,62,48,.22); --glass-rim-dark: inset 1.5px 1.5px 1px -1px rgba(255,255,255,.55), inset -1.5px -1.5px 1px -1px rgba(255,255,255,.22), inset 0 0 8px 6px rgba(255,255,255,.06), 0 14px 40px -14px rgba(0,0,0,.35); } /* ---------- shared base ---------- */ body[data-tw-glass="soft"] .glass, body[data-tw-glass="liquid"] .glass { background: var(--glass-tint); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); isolation: isolate; } body[data-tw-glass="soft"] .glass { box-shadow: 0 1px 2px rgba(28,62,48,.06), 0 10px 28px -14px rgba(28,62,48,.20); } body[data-tw-glass="liquid"] .glass { box-shadow: var(--glass-rim); } /* Refraction underlay — only at "liquid", only on floating chrome. Sits behind the element's own content but above its background. */ body[data-tw-glass="liquid"] .glass-refract { position: relative; isolation: isolate; } body[data-tw-glass="liquid"] .glass-refract::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden; -webkit-backdrop-filter: url("#halcyon-glass"); backdrop-filter: url("#halcyon-glass"); } /* ---------- header ---------- */ /* D-013: the header read neutral white on Home (transparent .hero) but visibly mint on every inner page (mint-gradient heroes) — same glass, different backdrop. saturate 170%->110% mutes the tint; .62->.82 opacity reduces how much shows through. Measured RGB gap Home vs inner: 12 -> 9 (saturate alone) -> 4 (both), while keeping 18% translucency so the frost survives. .92 would reach 2 but flattens the glass entirely. */ body[data-tw-glass="soft"] .site-header, body[data-tw-glass="liquid"] .site-header { background: rgba(251,253,252,.82); -webkit-backdrop-filter: blur(20px) saturate(110%); backdrop-filter: blur(20px) saturate(110%); border-bottom: 1px solid rgba(255,255,255,.55); } body[data-tw-glass="liquid"] .site-header { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px -16px rgba(28,62,48,.35); } /* ---------- hero floating chrome ---------- */ body[data-tw-glass="soft"] .hero-chip, body[data-tw-glass="liquid"] .hero-chip, body[data-tw-glass="soft"] .trust-strip, body[data-tw-glass="liquid"] .trust-strip { background: var(--glass-tint-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-line); } body[data-tw-glass="liquid"] .hero-chip, body[data-tw-glass="liquid"] .trust-strip { box-shadow: var(--glass-rim); } body[data-tw-glass="liquid"] .hero-chip .dot { background: rgba(215,252,238,.7); box-shadow: inset 1px 1px 1px -.5px rgba(255,255,255,.9); } /* accreditation pills in the hero trust row */ body[data-tw-glass="soft"] .hero-trust .badges span, body[data-tw-glass="liquid"] .hero-trust .badges span { background: var(--glass-tint-strong); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-color: var(--glass-line-light); /* D-011: sits on paper, not imagery */ } body[data-tw-glass="liquid"] .hero-trust .badges span { box-shadow: var(--glass-rim); } /* ---------- cards (services, testimonials, blog feature, quiz) ---------- */ body[data-tw-glass="soft"] .card, body[data-tw-glass="liquid"] .card, body[data-tw-glass="soft"] .step, body[data-tw-glass="liquid"] .step, body[data-tw-glass="soft"] .quiz-card, body[data-tw-glass="liquid"] .quiz-card { background: var(--glass-tint); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-color: var(--glass-line-light); /* D-011: cards sit on paper/mint, not imagery */ } body[data-tw-glass="liquid"] .card, body[data-tw-glass="liquid"] .step, body[data-tw-glass="liquid"] .quiz-card { box-shadow: var(--glass-rim); } /* Dark cards (e.g. the featured "Free Consultation" price card) stay dark glass — the light tint would wash out their white copy. */ body[data-tw-glass="soft"] .card.featured, body[data-tw-glass="liquid"] .card.featured { background: rgba(28,62,48,.82); border-color: rgba(255,255,255,.22); } body[data-tw-glass="liquid"] .card.featured { box-shadow: var(--glass-rim-dark); } body[data-tw-glass="liquid"] .card.featured:hover { background: rgba(28,62,48,.9); box-shadow: var(--glass-rim-dark), 0 24px 48px -18px rgba(10,91,89,.32); } body[data-tw-glass="liquid"] .card:not(.featured):hover, body[data-tw-glass="liquid"] .step:hover { background: var(--glass-tint-strong); box-shadow: var(--glass-rim), 0 24px 48px -18px rgba(10,91,89,.28); } /* hover sheen sweeping across the glass */ body[data-tw-glass="liquid"] .svc-card, body[data-tw-glass="liquid"] .testi { position: relative; overflow: hidden; isolation: isolate; } body[data-tw-glass="liquid"] .svc-card::after, body[data-tw-glass="liquid"] .testi::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%); opacity: 0; transition: opacity .35s var(--ease); } body[data-tw-glass="liquid"] .svc-card:hover::after, body[data-tw-glass="liquid"] .testi:hover::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { body[data-tw-glass="liquid"] .svc-card::after, body[data-tw-glass="liquid"] .testi::after { transition: none; } } /* the mint band reads better as a soft wash under glass cards */ body[data-tw-glass="soft"] .section-mint, body[data-tw-glass="liquid"] .section-mint { background: linear-gradient(160deg, var(--mint) 0%, var(--mint-soft) 55%, var(--paper) 100%); } /* ---------- buttons: light + ghost become glass ---------- */ body[data-tw-glass="soft"] .btn-light, body[data-tw-glass="liquid"] .btn-light { background: var(--glass-tint-strong); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); border: 1px solid var(--glass-line-light); /* D-011: light buttons sit on paper */ } body[data-tw-glass="liquid"] .btn-light { box-shadow: var(--glass-rim); } body[data-tw-glass="liquid"] .btn-light:hover { background: rgba(255,255,255,.86); } body[data-tw-glass="soft"] .btn-ghost, body[data-tw-glass="liquid"] .btn-ghost { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } body[data-tw-glass="liquid"] .btn-ghost { box-shadow: var(--glass-rim-dark); } /* ---------- CTA band: content sits on a dark glass panel ---------- */ body[data-tw-glass="soft"] .cta-band .wrap, body[data-tw-glass="liquid"] .cta-band .wrap { background: var(--glass-tint-dark); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); border: 1px solid rgba(255,255,255,.22); border-radius: 24px; padding: 72px 56px; margin: 72px auto; max-width: min(calc(var(--maxw) - 56px), calc(100% - 48px)); } body[data-tw-glass="liquid"] .cta-band .wrap { box-shadow: var(--glass-rim-dark); } body[data-tw-glass="soft"] .cta-band::after, body[data-tw-glass="liquid"] .cta-band::after { background: linear-gradient(100deg, rgba(28,62,48,.62) 20%, rgba(28,62,48,.34) 100%); } @media (max-width: 767px) { body[data-tw-glass="soft"] .cta-band .wrap, body[data-tw-glass="liquid"] .cta-band .wrap { padding: 44px 24px; margin: 40px 16px; max-width: none; border-radius: 20px; } } /* ---------- mobile chrome ---------- */ body[data-tw-glass="soft"] .m-bookbar, body[data-tw-glass="liquid"] .m-bookbar { background: rgba(251,253,252,.66); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-top: 1px solid rgba(255,255,255,.7); } body[data-tw-glass="liquid"] .m-bookbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 -8px 30px rgba(28,62,48,.16); } body[data-tw-glass="soft"] .sticky-cta, body[data-tw-glass="liquid"] .sticky-cta { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } body[data-tw-glass="soft"] .mobile-nav, body[data-tw-glass="liquid"] .mobile-nav { background: rgba(251,253,252,.82); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); } /* ---------- contact modal ---------- */ body[data-tw-glass="soft"] .modal, body[data-tw-glass="liquid"] .modal { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid var(--glass-line); } body[data-tw-glass="liquid"] .modal { box-shadow: var(--glass-rim); } /* Browsers without backdrop-filter get opaque surfaces instead of washed-out text */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body[data-tw-glass] .glass, body[data-tw-glass] .card, body[data-tw-glass] .step, body[data-tw-glass] .hero-chip, body[data-tw-glass] .trust-strip, body[data-tw-glass] .btn-light, body[data-tw-glass] .modal, body[data-tw-glass] .site-header, body[data-tw-glass] .m-bookbar { background: #fff; } body[data-tw-glass] .cta-band .wrap { background: rgba(28,62,48,.78); } }