/* ============ light-overrides.css ============ Loaded AFTER app.css. Re-tones dark-specific spots for the light theme and applies an advanced "liquid glass" treatment: deep frost · chromatic dispersion rim · pointer/tap-reactive specular glare. ============================================== */ /* ---- LIQUID GLASS core ---- layered specular (warm top-left sheen + cool counter-light) over heavy frost, plus a chromatic rim: cool light on the top edge, warm light on the bottom edge. */ .glass { position: relative; overflow: hidden; background: radial-gradient(140% 95% at 14% -10%, rgba(255,255,255,0.82), rgba(255,255,255,0) 44%), radial-gradient(120% 90% at 92% 112%, rgba(214,230,255,0.30), rgba(255,255,255,0) 52%), linear-gradient(158deg, rgba(255,255,255,0.60), rgba(255,255,255,0.30)); border: 1px solid rgba(255,255,255,0.78); backdrop-filter: blur(40px) saturate(2.0); -webkit-backdrop-filter: blur(40px) saturate(2.0); box-shadow: 0 1.4px 0 rgba(255,255,255,0.95) inset, /* bright top rim */ 0 1px 0 rgba(150,190,255,0.55) inset, /* cool dispersion (top) */ 0 -1.2px 0 rgba(255,205,225,0.40) inset, /* warm dispersion (bottom) */ 0 -14px 30px -22px rgba(30,50,110,0.30) inset, /* inner depth */ 0 2px 10px -3px rgba(20,30,60,0.07), 0 30px 70px -30px rgba(20,30,60,0.34); } /* reactive specular glare — driven by liquid.js setting --gx/--gy + .glare-on */ .glass::after, .tile::after, .float-card::after, .chip::after, .slot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(220px 220px at var(--gx, 50%) var(--gy, -12%), rgba(255,255,255,0.65), rgba(255,255,255,0) 60%); opacity: 0; transition: opacity .4s ease; mix-blend-mode: screen; z-index: 2; } .glare-on::after { opacity: 1; } /* ---- NAV ---- */ .nav.scrolled { background: rgba(255,255,255,0.55); border-bottom: 1px solid rgba(22,27,45,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 28px -18px rgba(20,30,60,0.35); backdrop-filter: blur(28px) saturate(2.0); -webkit-backdrop-filter: blur(28px) saturate(2.0); } /* ---- HERO: keep the phone mockup dark, force its internals to light text ---- */ .phone-shell { border-color: rgba(255,255,255,0.10); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 48px 96px -44px rgba(22,30,62,0.5), 0 0 0 1px rgba(0,0,0,0.35); } .phone-screen, .screen-content { color: #fff; } .screen-title { color: #fff; } .screen-sub { color: rgba(255,255,255,0.66); } .screen-badge { color: #fff; } .screen-eta { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); } .screen-eta b { color: #fff; } .screen-eta span { color: rgba(255,255,255,0.5); } .screen-eta .ic { background: rgba(10,132,255,0.26); color: #6cc0ff; } /* floating cards — light liquid glass with dispersion rim */ .float-card { position: absolute; overflow: hidden; background: radial-gradient(130% 100% at 18% -8%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(255,255,255,0.68), rgba(255,255,255,0.48)); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 1.2px 0 rgba(255,255,255,0.95) inset, 0 1px 0 rgba(150,190,255,0.5) inset, 0 -1px 0 rgba(255,205,225,0.4) inset, 0 24px 56px -22px rgba(20,30,60,0.48); } /* ---- steps ---- */ .step-card .line-num { color: rgba(24,46,104,0.07); z-index: 0; } /* ---- coverage: keep the map a premium dark glass panel, float it ---- */ .cover-map { border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 34px 80px -34px rgba(20,30,60,0.5); } /* ---- frosted controls (tiles / inputs / calendar / slots) ---- */ .tile, .slot, .wz-input, .wz-select, .cal { position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.60), rgba(255,255,255,0.38)); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 0.5px 0 rgba(150,190,255,0.4) inset; } .tile, .slot { overflow: hidden; } .tile:hover, .slot:hover { background: linear-gradient(160deg, rgba(255,255,255,0.82), rgba(255,255,255,0.58)); } .tile.sel { background: linear-gradient(160deg, rgba(10,132,255,0.17), rgba(10,132,255,0.07)); } .slot.sel { background: linear-gradient(160deg, rgba(10,132,255,0.17), rgba(10,132,255,0.07)); } .tile-ic { background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.45)); } .wz-input:focus, .wz-select:focus { background: rgba(255,255,255,0.88); } .wz-select option { background: #ffffff; color: #11141c; } /* ---- WIZARD shell — deep frosted liquid glass sheet ---- */ .wz-overlay { background: rgba(16,22,40,0.34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .wz-sheet { position: relative; background: radial-gradient(120% 52% at 18% -4%, rgba(255,255,255,0.92), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(255,255,255,0.86), rgba(245,248,252,0.80)); border: 1px solid rgba(255,255,255,0.9); backdrop-filter: blur(46px) saturate(2.0); -webkit-backdrop-filter: blur(46px) saturate(2.0); box-shadow: 0 1.4px 0 rgba(255,255,255,0.95) inset, 0 1px 0 rgba(150,190,255,0.45) inset, 0 44px 110px -34px rgba(20,30,60,0.5); } .wz-grip { background: rgba(22,27,45,0.20); } .wz-prog { background: rgba(22,27,45,0.10); } .wz-foot { background: rgba(255,255,255,0.70); border-top: 1px solid rgba(22,27,45,0.10); backdrop-filter: blur(24px) saturate(1.9); -webkit-backdrop-filter: blur(24px) saturate(1.9); } /* ---- misc polish ---- */ .success-card { background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4)); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset; } .chip { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.72), rgba(255,255,255,0.5)); box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 0.5px 0 rgba(150,190,255,0.4) inset; } /* respect reduced motion — glare still appears, just no transition flicker */ @media (prefers-reduced-motion: reduce) { .glass::after, .tile::after, .float-card::after, .chip::after, .slot::after { transition: none; } }