/* ======================================================= SolarTempe — Landing Styles (v7 - Updated) Matches UPDATED HTML: - Solar sun/rays hero canvas - Theme toggle (dark/light via [data-theme]) - Sun Path Lab (Theme-aware) - Impact Breakdown donut (Theme-aware) - ROI Glow effect (Theme-aware) - Upgraded Leaflet map tools ======================================================= */ /* ------------------------------ THEME TOKENS (dark default) ------------------------------ */ :root{ --bg:#0a0f14; --bg-deep:#070b10; --surface:rgba(14,18,26,.55); --text:#E7EDF2; --muted:#95A3B6; --accent:#00BFFF; --accent-2:#7fe3ff; --accent-glow:rgba(0,191,255,.28); --line:rgba(255,255,255,.10); --radius:14px; --shadow:0 18px 60px rgba(0,0,0,.45); --speed:.4s; } /* Light theme overrides when */ html[data-theme="light"]{ color-scheme: light; --bg:#f6fbff; --bg-deep:#eaf2f7; --surface:rgba(255,255,255,.85); --text:#0e1a26; --muted:#556276; --accent:#0077ff; --accent-2:#6db4ff; --accent-glow:rgba(0,119,255,.25); --line:rgba(0,0,0,.08); } /* Base */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; color:var(--text); background:linear-gradient(var(--bg), var(--bg-deep)); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition: background .25s ease, color .25s ease; } /* FOR CUSTOM BUTTON /* Fancy field label used next to the select */ .status-label{ font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); user-select:none; } /* ===== Stylish Business Size Select ===== */ .select-wrap{ position:relative; display:inline-grid; align-items:center; isolation:isolate; --pad:12px; --arrow:12px; --ring:0 0 0 0 rgba(0,191,255,0); border-radius:12px; box-shadow: var(--shadow); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box, linear-gradient(180deg, rgba(127,227,255,.55), rgba(0,191,255,.35)) border-box; border:1px solid transparent; } .select-wrap:focus-within{ --ring:0 0 0 6px rgba(0,191,255,.12); } .select-wrap::after{ /* custom chevron */ content:""; pointer-events:none; position:absolute; right:14px; top:50%; translate:0 -50%; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform: translateY(-2px) rotate(45deg); opacity:.9; } .select-wrap .pretty-select{ -webkit-appearance:none; appearance:none; border:none; outline:none; background:transparent; color:var(--text); font: 600 14px/1.2 Inter, system-ui, sans-serif; padding: calc(var(--pad) + 2px) calc(var(--pad) + 24px) calc(var(--pad) + 2px) var(--pad); border-radius:12px; min-width:240px; cursor:pointer; position:relative; z-index:2; text-shadow: 0 1px 0 rgba(0,0,0,.2); } .select-wrap .pretty-select:focus{ outline:none; } .select-wrap:has(select:focus){ box-shadow: var(--shadow), var(--ring); } /* Input rail behind the range gets a subtle glow from canvas already; ensure height */ #roi-aurora{ height: 34px; display:block; } /* Glass cards in the ROI metric grid look denser here for numbers */ .glass-card.compact{ padding:1rem !important; } .status-value{ font: 900 26px/1.1 Inter, system-ui, sans-serif; } .status-value .unit{ opacity:.65; font-weight:700; margin-left:.25rem; } /* FAQ pills for definitions */ #faq details{ border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:14px; padding:1rem 1.2rem; margin:.6rem 0; transition:background .25s ease, border-color .25s ease; } #faq details[open]{ background:rgba(0,191,255,.06); border-color:rgba(0,191,255,.28); } #faq summary{ list-style:none; cursor:pointer; font: 800 20px/1.25 Inter, system-ui, sans-serif; } #faq summary::-webkit-details-marker{ display:none; } #faq p{ margin:.65rem 0 0 0; color:#cbd5e1; } /* ----------------------------------- TOP SCROLL PROGRESS ----------------------------------- */ .scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:100; background:transparent; pointer-events:none; } .scroll-progress .bar{ height:100%; width:100%; transform-origin:left center; transform:scaleX(0); background:linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow:0 0 18px var(--accent-glow); will-change: transform; } /* ----------------------------------- HERO (Canvas FX background) ----------------------------------- */ #hero{ position:relative; display:grid; place-items:center; text-align:center; padding:6rem 1rem 8rem; border-bottom:1px solid var(--line); overflow:hidden; background: radial-gradient(1200px 60% at 50% -10%, rgba(0,0,0,.35), transparent 60%), radial-gradient(1200px 70% at 50% 110%, rgba(0,0,0,.40), transparent 60%), linear-gradient(var(--bg), var(--bg-deep)); } #hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:48px 48px; } #hero-fx{ display:block; width:100%; height:100% } /* canvas fills section */ /* Futuristic dotted/diagonal overlay (blends differently in light) */ .grid-overlay{ position:absolute; inset:0; pointer-events:none; opacity:.12; z-index:1; background: radial-gradient(circle at 20% 30%, rgba(127,227,255,.18) 0 1px, transparent 2px) 0 0/120px 120px, radial-gradient(circle at 70% 60%, rgba(127,227,255,.18) 0 1px, transparent 2px) 0 0/140px 140px, repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px); mix-blend-mode:screen; } html[data-theme="light"] .grid-overlay{ opacity:.18; mix-blend-mode:multiply; background: radial-gradient(circle at 20% 30%, rgba(0,0,0,.06) 0 1px, transparent 2px) 0 0/120px 120px, radial-gradient(circle at 70% 60%, rgba(0,0,0,.06) 0 1px, transparent 2px) 0 0/140px 140px, repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 1px, transparent 1px 40px); } .hero-content{ position:relative; z-index:2; max-width:980px; padding:2rem; margin-inline:1rem; background: radial-gradient(ellipse at center, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 72%); } html[data-theme="light"] .hero-content{ background: radial-gradient(ellipse at center, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 72%); } .hero-headline{margin:0 0 .6rem; line-height:1.04; letter-spacing:-.02em} .hero-headline .line{display:block; font-weight:900; font-size:clamp(2.6rem, 7vw, 5.4rem); will-change:transform, opacity} .hero-headline .accent{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-subheadline{ margin:0 auto 1.8rem; max-width:720px; color:var(--muted); font-size:clamp(1rem, 1.6vw, 1.15rem); will-change:transform, opacity; } /* CTA buttons */ .hero-cta-group{display:flex; gap:.8rem; justify-content:center; align-items:center; flex-wrap:wrap} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; font-size:1rem; font-weight:800; border-radius:12px; cursor:pointer; border:2px solid transparent; transition:transform var(--speed) ease, filter var(--speed) ease, box-shadow var(--speed) ease, border-color var(--speed) ease; user-select:none; will-change: transform; } .btn-primary{ color:#071018; background:var(--accent); box-shadow:0 0 22px var(--accent-glow) } .btn-primary:hover{ filter:brightness(1.05); transform:translateY(-2px) scale(1.02); box-shadow:0 8px 26px var(--accent-glow) } .btn-ghost{ color:var(--text); background:transparent; border-color:var(--line) } .btn-ghost:hover{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04) } html[data-theme="light"] .btn-ghost:hover{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12) } .btn[aria-pressed="true"]{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25) } html[data-theme="light"] .btn[aria-pressed="true"]{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.15) } .btn-magnetic .btn-inner{ display:inline-block; transition:transform .12s ease } /* Theme Toggle Button */ #theme-toggle { padding: 12px; } /* More square for an icon button */ #theme-toggle .moon-icon { display: block; } #theme-toggle .sun-icon { display: none; } html[data-theme="light"] #theme-toggle .moon-icon { display: none; } html[data-theme="light"] #theme-toggle .sun-icon { display: block; } /* UPDATED: Enforce specific icon size for theme toggle SVGs */ #theme-toggle svg { width: 14px; height: 14px; } /* NEW: ROI Aurora beam canvas */ #roi-aurora{ width:100%; height:100%; filter: drop-shadow(0 0 12px var(--accent-glow)); border-radius: 999px; } /* Scroll indicator + progress ring (JS sets --pr & --rot) */ .scroll-down-indicator{ position:relative; display:grid; place-items:center; gap:.5rem; margin-inline:auto; width:140px; margin-top:1.1rem; color:var(--muted); letter-spacing:.12em; font-size:.75rem; opacity:.85; } .scroll-down-indicator .arrow{ width:1px; height:40px; background:var(--muted); animation:arrowPulse 2s infinite } @keyframes arrowPulse{50%{transform:scaleY(.25); opacity:.5}} .scroll-down-indicator .ring{ --pr:0deg; --rot:0deg; position:absolute; inset:auto 0 -54px 0; margin:auto; width:64px; height:64px; border-radius:50%; background: conic-gradient(var(--accent) 0 var(--pr), rgba(255,255,255,.1) var(--pr) 360deg), radial-gradient(closest-side, #000 68%, transparent 70% 100%); filter: drop-shadow(0 0 12px var(--accent-glow)); transform: rotate(var(--rot)); transition: transform .2s linear; } /* ----------------------------------- TICKER (neutral, minimal) ----------------------------------- */ .ticker{ position:sticky; top:0; z-index:5; background:rgba(5,8,12,.65); border-bottom:1px solid var(--line); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); backdrop-filter:saturate(120%) blur(4px); } html[data-theme="light"] .ticker{ background:rgba(255,255,255,.7) } .ticker-track{ display:flex; gap:28px; padding:10px 16px; white-space:nowrap; animation:marquee 24s linear infinite; will-change: transform; } .ticker-track span{color:var(--muted)} .ticker-track b{color:var(--text)} @keyframes marquee{to{transform:translateX(-50%)}} /* ----------------------------------- CONTENT ----------------------------------- */ .content-wrapper{position:relative; z-index:1; width:90%; max-width:1100px; margin:0 auto} .page-section{padding:5.5rem 0} .section-title{text-align:center; font-weight:900; font-size:clamp(2rem,5vw,3.2rem); margin:0 0 1.2rem} .section-subtitle{color:var(--muted); text-align:center; max-width:720px; margin:0 auto 3.2rem} /* Glass grid */ .grid-3-col{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.6rem} .glass-card{ position:relative; padding:2rem; border-radius:12px; background:var(--surface); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); overflow:hidden; transition:transform var(--speed) ease, border-color var(--speed) ease, box-shadow var(--speed) ease; will-change: transform; } html[data-theme="light"] .glass-card{ border-color:var(--line) } .glass-card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.18); box-shadow:0 10px 26px rgba(0,0,0,.35)} html[data-theme="light"] .glass-card:hover{ border-color:rgba(0,0,0,.12) } .glass-card::before, .glass-card::after{ content:""; position:absolute; width:0; height:0; background:var(--accent); box-shadow:0 0 8px var(--accent-glow), 0 0 16px var(--accent-glow); transition:width .28s ease, height .28s ease; } .glass-card::before{top:0; left:0} .glass-card::after{bottom:0; right:0} .glass-card:hover::before, .glass-card:hover::after{width:3px; height:100%} .card-icon{color:var(--accent); width:46px; height:46px; margin-bottom:1rem} .card-title{margin:.4rem 0 .25rem; font-size:1.35rem; font-weight:800} /* Subtle 3D tilt (JS drives rotation) */ .tilt{ transform:perspective(900px) rotateX(0) rotateY(0); transform-style:preserve-3d } .tilt *{ transform:translateZ(0) } /* Live status */ .live-status-section{ display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:2rem; background:var(--surface); border-radius:12px; padding:2.4rem; border:1px solid rgba(255,255,255,.1); } .status-item{text-align:center} .status-label{display:block; font-size:.95rem; color:var(--muted); margin-bottom:.5rem; letter-spacing:.05em; text-transform:uppercase} .status-value{display:block; font-size:2.4rem; font-weight:900; line-height:1} .status-value .unit{font-size:1.1rem; font-weight:600; color:var(--muted); margin-left:.25rem} .status-value.glow{ text-shadow:0 0 10px var(--accent-glow), 0 0 22px var(--accent-glow); color:#eafaff } /* ----------------------------------- MINI MAP (Leaflet) ----------------------------------- */ #mini-map{height:520px; border-radius:12px; overflow:hidden; border:1px solid var(--line); position:relative} .leaflet-container{background:#0b0f14} html[data-theme="light"] .leaflet-container{ background:#e9f2fb } /* Custom tiny dot marker */ .map-dot, .leaflet-div-icon.map-dot{ background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent)); border-radius:50%; width:10px; height:10px; border:1px solid rgba(255,255,255,.25); box-shadow:0 0 10px var(--accent-glow); transform: translate(-5px, -5px); } /* Leaflet controls themed */ .leaflet-control-zoom a{ background:var(--surface); color:var(--text); border:1px solid var(--line); width:32px; height:32px; line-height:30px; text-align:center; border-radius:8px; box-shadow:none; } .leaflet-control-zoom a:hover{ background:rgba(255,255,255,.06) } html[data-theme="light"] .leaflet-control-zoom a { background: var(--surface); color: var(--text); } html[data-theme="light"] .leaflet-control-zoom a:hover { background: rgba(0,0,0,.05); } .leaflet-bar a{ border-bottom:1px solid var(--line) } .leaflet-control-attribution{ display:none } /* ----------------------------------- SHARED SLIDER STYLES ----------------------------------- */ #roi-range, #sun-month { width:100%; height:6px; border-radius:999px; outline:0; background:rgba(255,255,255,.12); -webkit-appearance:none; appearance:none; transition: background .2s ease; } html[data-theme="light"] #roi-range, html[data-theme="light"] #sun-month { background: rgba(0,0,0,.08); } /* Webkit (Chrome, Safari) */ /* UPDATED: Simplified track to a subtle bar to complement the new canvas animation */ #roi-range::-webkit-slider-runnable-track, #sun-month::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:rgba(255,255,255,.1); } html[data-theme="light"] #roi-range::-webkit-slider-runnable-track, html[data-theme="light"] #sun-month::-webkit-slider-runnable-track { background:rgba(0,0,0,.08); } #roi-range::-webkit-slider-thumb, #sun-month::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid #071018; box-shadow:0 0 18px var(--accent-glow); margin-top:-8px; transition: border-color .2s ease; } html[data-theme="light"] #roi-range::-webkit-slider-thumb, html[data-theme="light"] #sun-month::-webkit-slider-thumb { border-color: #f6fbff; } /* Mozilla (Firefox) */ /* UPDATED: Simplified track to a subtle bar to complement the new canvas animation */ #roi-range::-moz-range-track, #sun-month::-moz-range-track { height:6px; border-radius:999px; background:rgba(255,255,255,.1); } html[data-theme="light"] #roi-range::-moz-range-track, html[data-theme="light"] #sun-month::-moz-range-track { background:rgba(0,0,0,.08); } #roi-range::-moz-range-thumb, #sun-month::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid #071018; box-shadow:0 0 18px var(--accent-glow); transition: border-color .2s ease; } html[data-theme="light"] #roi-range::-moz-range-thumb, html[data-theme="light"] #sun-month::-moz-range-thumb { border-color: #f6fbff; } /* Milestones */ #milestones .status-value{font-size:2.1rem} #milestones .glass-card{background:rgba(14,18,26,.45)} html[data-theme="light"] #milestones .glass-card{background:rgba(255,255,255,.85)} /* FAQ */ #faq details{ max-width:900px; margin:0.6rem auto; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); } html[data-theme="light"] #faq details{ background:rgba(0,0,0,.02) } #faq summary{ cursor:pointer; font-weight:800; list-style:none; outline:0; } #faq summary::-webkit-details-marker{display:none} #faq details[open]{background:rgba(255,255,255,.05)} html[data-theme="light"] #faq details[open]{ background:rgba(0,0,0,.04) } /* ----------------------------------- QUICK ACTIONS DOCK ----------------------------------- */ .quick-dock{ position:fixed; right:18px; bottom:18px; display:flex; gap:10px; z-index:20; backdrop-filter: blur(8px) saturate(140%); border:1px solid var(--line); border-radius:999px; background:rgba(7,10,14,.6); padding:8px; box-shadow:var(--shadow) } html[data-theme="light"] .quick-dock{ background:rgba(255,255,255,.75) } .quick-dock .dock-btn{ padding:10px 14px; border-radius:999px; color:var(--text); border:1px solid transparent; background:transparent; font-weight:800 } .quick-dock .dock-btn:hover{ background:rgba(255,255,255,.06) } html[data-theme="light"] .quick-dock .dock-btn:hover{ background:rgba(0,0,0,.06) } .quick-dock .dock-btn.primary{ background:var(--accent); color:#061018; box-shadow:0 0 18px var(--accent-glow) } .quick-dock .dock-btn.outline{ border-color:var(--line) } /* ----------------------------------- SCROLL REVEAL ----------------------------------- */ .animate-on-scroll{opacity:0; transform:translateY(24px); transition:opacity .6s ease-out, transform .6s ease-out; transition-delay:var(--delay,0s)} .animate-on-scroll.visible{opacity:1; transform:none} /* ----------------------------------- MISC / ELEMENTS ----------------------------------- */ svg{width:100%; height:100%} hr{border:none; border-top:1px solid var(--line)} a{text-decoration:none; color:inherit} /* ----------------------------------- REDUCED MOTION ----------------------------------- */ @media (prefers-reduced-motion: reduce){ .ticker-track{animation:none} .scroll-down-indicator .arrow{animation:none} .animate-on-scroll{opacity:1; transform:none} .btn, .btn .btn-inner{transition:none} }