/* ============================================================ KineticReaction — Liquid Glass surface treatment Frosted, translucent cards with a lit top edge, matching the iOS apps. Loaded LAST in so it overrides per-page card fills. The ambient orange orbs already live on body::before (site.css) — translucent cards let that glow refract through. ============================================================ */ .tile, .app-card, .feat, .pillar, .quote, .faq-item, .summary, .fact, .asset, .mention, .founder-card, .note, .rel-card, .card, .order-card, .form-col, .main-image, .row, .field-text, .result { background: rgba(24, 19, 16, 0.55) !important; -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 18px 44px rgba(0, 0, 0, 0.38) !important; } /* Brighten the lit edge on the interactive cards when hovered. */ .tile:hover, .app-card:hover, .faq-item:hover, .asset:hover, .mention:hover, .rel-card:hover, .card:hover, .fact:hover { border-color: rgba(255, 255, 255, 0.24) !important; } /* Preserve the orange accent bar on note/callout cards. */ .note { border-left: 3px solid var(--accent) !important; } /* The small "stat" panels inside the app pages — give them glass too. */ .settings-card, .drill-card, .coach, .cal, .home-card, .gtile { background: rgba(20, 16, 14, 0.55) !important; -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); border: 1px solid rgba(255, 255, 255, 0.10) !important; } /* Frosted nav + footer to match (they sit over the orbs). */ header.site { background: rgba(13, 9, 7, 0.55) !important; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } footer { background: rgba(8, 8, 10, 0.45) !important; -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); } /* Graceful fallback: if a browser can't do backdrop-filter, fall back to a more opaque fill so cards never look washed out. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tile, .app-card, .feat, .pillar, .quote, .faq-item, .summary, .fact, .asset, .mention, .founder-card, .note, .rel-card, .card, .order-card, .form-col, .main-image, .row, .field-text, .result { background: rgba(20, 16, 14, 0.92) !important; } } /* ===================== Mobile vertical rhythm ===================== glass.css loads last, so these win over per-page section padding — without touching .hero horizontals or full-bleed (inline-padding) sections. Tightens the heavy desktop spacing on phones. */ @media (max-width: 600px) { /* .hero keeps its own (more specific) padding; this only trims plain content sections, which carry the heavy 80–96px desktop spacing. */ section { padding-top: 56px; padding-bottom: 56px; } /* Section headers use a side-by-side flex (title + blurb) that squishes on phones — stack them. */ .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; } .sec-h { margin-bottom: 28px; } }