/* ============================================================ IASA THEMES — light (classic), dawn, dark. Loaded AFTER telehealth.css so these win by source order. Switch by setting (see iasa_theme.js). Semantic tokens cascade from , so every component below adapts automatically with proper contrast. ============================================================ */ :root, html[data-theme="light"] { --srf: #ffffff; /* card / surface */ --srf-2: #f6fbff; /* inset / soft surface */ --txt: #0C204D; /* body text */ --txt-dim: #6c87a3; /* muted text */ --head: #0C204D; /* headings */ --bd: rgba(12,32,77,.12); /* borders */ --nav-bg: rgba(255,255,255,.42); --link: #934397; --chip-bg: #eaf3f8; --chip-txt: #2D86AD; --disc-bg: #FFF9E8; --disc-txt: #6b5a13; --footer-bg: #EFEFEF; /* dreamy blue ONLY in a top band that fades to white; page is white below */ --page-fade: #ffffff; /* exact dev hero radial — rich blue around the tree, white only top-right */ --hero-grad: radial-gradient(42% 55% at 10% 16%, rgba(255,194,71,.12), transparent 62%), radial-gradient(125% 92% at 82% 2%, #ffffff 0%, #EAF6FF 36%, #DBEEFB 68%, #C9E5F7 100%); --bird-op: 0.85; --glass-bg: rgba(255,255,255,.90); /* clean white card */ --glass-bg-2: rgba(255,255,255,.78); --glass-bd: rgba(45,134,173,.14); --glass-sh: 0 10px 30px rgba(12,32,77,.08); } html[data-theme="dawn"] { --srf: #fff8f2; --srf-2: #fdeee3; --txt: #3b2b40; --txt-dim: #8a6f80; --head: #5C2C90; --bd: rgba(92,44,144,.16); --nav-bg: rgba(255,246,238,.44); --link: #b3478f; --chip-bg: #fbe6d8; --chip-txt: #9a4b6e; --disc-bg: #fff1e2; --disc-txt: #8a5a2a; --footer-bg: #f6e4d6; --page-fade: #fff8f2; --hero-grad: radial-gradient(42% 55% at 10% 16%, rgba(255,180,120,.16), transparent 62%), radial-gradient(125% 92% at 82% 2%, #fff8f2 0%, #ffe9da 38%, #fbd9ea 72%, #efdcf0 100%); --bird-op: 0.70; --glass-bg: rgba(255,250,246,.92); --glass-bg-2: rgba(255,250,246,.80); --glass-bd: rgba(179,71,143,.14); --glass-sh: 0 10px 30px rgba(179,71,143,.10); } html[data-theme="dark"] { --srf: #16243f; --srf-2: #1d2c49; --txt: #e8f0f8; --txt-dim: #9fb3cc; --head: #eaf2fb; --bd: rgba(255,255,255,.10); --nav-bg: rgba(12,20,40,.46); --link: #5CACE2; --chip-bg: #20314f; --chip-txt: #7fd0f1; --disc-bg: #20283a; --disc-txt: #d9c89a; --footer-bg: #0e1a33; --page-fade: #0a1428; --hero-grad: radial-gradient(42% 55% at 10% 16%, rgba(40,186,237,.08), transparent 62%), radial-gradient(125% 92% at 82% 2%, #0e1d3c 0%, #0c1830 52%, #0a1428 100%); --bird-op: 0.55; --glass-bg: rgba(22,36,63,.90); --glass-bg-2: rgba(29,44,73,.84); --glass-bd: rgba(255,255,255,.10); --glass-sh: 0 10px 30px rgba(0,0,0,.34); } /* ---- section-band tints (alternating, like dev.iamstillalive.com) ---- */ :root, html[data-theme="light"] { --band-sky: linear-gradient(180deg, #EAF5FD 0%, #F4FAFE 100%); --band-warm: linear-gradient(180deg, #FFFBF4 0%, #F7FBFE 100%); --band-rule: rgba(45,134,173,.18); } html[data-theme="dawn"] { --band-sky: linear-gradient(180deg, #fbe7f1 0%, #fff3ea 100%); --band-warm: linear-gradient(180deg, #fff1e3 0%, #fbe9f4 100%); --band-rule: rgba(179,71,143,.20); } html[data-theme="dark"] { --band-sky: linear-gradient(180deg, #0f2143 0%, #0c1a36 100%); --band-warm: linear-gradient(180deg, #141f3a 0%, #0e1830 100%); --band-rule: rgba(255,255,255,.10); } /* full-bleed bands use 100vw; guard against a horizontal scrollbar */ html, body { overflow-x: hidden; } /* ---- map components onto the semantic tokens (all themes) ---- */ body { color: var(--txt); } h1, h2, h3, h4, h5, h6 { color: var(--head); } .font-Kaushan, .h-script { color: var(--head); } a { color: var(--link); } a:hover { color: var(--iasa-sky); } .iasa-nav { background: var(--nav-bg) !important; border-bottom-color: var(--bd); } .iasa-nav .nav-link { color: var(--txt); } .iasa-nav .nav-link:hover { background: rgba(40,186,237,.14); color: var(--txt); } /* All cards are frosted glass over the dreamy-blue sky */ .card-soft { background: var(--glass-bg); color: var(--txt); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(14px) saturate(165%); backdrop-filter: blur(14px) saturate(165%); box-shadow: var(--glass-sh); } .card-soft .card-header { color: var(--head); border-bottom-color: var(--bd); } .home-tile { color: var(--txt); } .form-control, .form-select { background: var(--srf); color: var(--txt); border-color: var(--bd); } .form-control::placeholder { color: var(--txt-dim); } .form-label { color: var(--txt); } .table, .table td { color: var(--txt); } .table thead th { color: var(--head); } .chip { background: var(--chip-bg); color: var(--chip-txt); } .empty-state { color: var(--txt-dim); } .empty-state i { color: var(--iasa-sky-2); } .disclaimer { background: var(--disc-bg); color: var(--disc-txt); border-color: var(--bd); } .footer-iasa { background: var(--footer-bg); color: var(--txt); } .quote-line { color: var(--iasa-teal); } /* Dark mode only: fireflies drifting around the tree (replaces the bright white halo). Two box-shadow "swarms" on ::before / ::after rise and flicker on offset timers; a faint wash on .hero-art keeps the tree readable. Light/dawn unchanged. */ html[data-theme="dark"] .iasa-hero .hero-art { background: radial-gradient(58% 54% at 50% 44%, rgba(150,185,240,.09), transparent 70%); } html[data-theme="dark"] .iasa-hero .hero-art::before { z-index: 0; left: 50%; top: 55%; width: 5px; height: 5px; border-radius: 50%; background: transparent; filter: none; opacity: 1; box-shadow: -150px -40px 7px 1px rgba(160,245,205,.90), -60px 20px 6px 1px rgba(170,248,200,.85), 40px -10px 7px 1px rgba(150,240,205,.90), 130px 30px 6px 1px rgba(180,250,195,.80), -110px 60px 6px 1px rgba(160,245,205,.85), 90px 70px 7px 1px rgba(170,248,200,.85), 10px -60px 6px 1px rgba(150,240,205,.90); animation: iasaFlyA 6.5s ease-in-out infinite; } html[data-theme="dark"] .iasa-hero .hero-art::after { content: ""; position: absolute; z-index: 0; pointer-events: none; left: 50%; top: 58%; width: 5px; height: 5px; border-radius: 50%; background: transparent; box-shadow: -120px 10px 6px 1px rgba(170,248,200,.85), -30px -50px 7px 1px rgba(150,240,205,.90), 70px 40px 6px 1px rgba(160,245,205,.85), 160px -20px 6px 1px rgba(180,250,195,.80), -160px 50px 6px 1px rgba(160,245,205,.80), 20px 80px 7px 1px rgba(170,248,200,.85), 120px 80px 6px 1px rgba(150,240,205,.85); animation: iasaFlyB 8s ease-in-out infinite; animation-delay: -3.5s; } @keyframes iasaFlyA { 0% { transform: translate(-50%,-50%) translateY(24px); opacity: .15; } 30% { opacity: .95; } 70% { opacity: .9; } 100% { transform: translate(-50%,-50%) translateY(-66px); opacity: 0; } } @keyframes iasaFlyB { 0% { transform: translate(-50%,-50%) translateY(30px); opacity: .10; } 35% { opacity: .9; } 75% { opacity: .85; } 100% { transform: translate(-50%,-50%) translateY(-72px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .iasa-hero .hero-art::before, html[data-theme="dark"] .iasa-hero .hero-art::after { animation: none !important; opacity: .6; } } /* Page is white; the dreamy blue lives only in a top band that fades to white (scrolls with the page, like dev.iamstillalive.com). The fixed backdrop layer is now just a transparent stage for the hero storks. */ .iasa-nature-bg { background: transparent; } .iasa-nature-bird, .iasa-fly-bird { opacity: var(--bird-op); } /* Page is plain white; the HERO band carries the rich dreamy-blue (a radial, exactly like dev.iamstillalive.com) so the blue stays strong behind the tree and fades to white only at the hero's bottom edge. */ body { background: var(--page-fade); } .page-wrap { background: var(--page-fade); } /* ---- dark-mode legibility fixes for high-contrast components ---- */ html[data-theme="dark"] .btn-iasa-outline { background: var(--srf-2); color: var(--iasa-sky) !important; border-color: rgba(255,255,255,.16); } html[data-theme="dark"] .btn-iasa-outline:hover { background: rgba(40,186,237,.12); } html[data-theme="dark"] .alert { background: var(--srf-2); color: var(--txt); border-color: var(--bd); } html[data-theme="dark"] .dropdown-menu { background: var(--srf); border-color: var(--bd); } html[data-theme="dark"] .dropdown-item { color: var(--txt); } html[data-theme="dark"] .dropdown-item:hover { background: var(--srf-2); color: var(--txt); } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0e1a33; } html[data-theme="dawn"] .btn-iasa-outline { color: var(--iasa-purple) !important; } /* theme toggle button in the nav */ .iasa-theme-toggle { background: transparent; border: 1px solid var(--bd); color: var(--txt); width: 38px; height: 38px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .iasa-theme-toggle:hover { background: rgba(40,186,237,.14); } @media (prefers-reduced-motion: reduce) { .iasa-fly-bird { animation: none !important; } }