/* ============================================================ Solar Installers Manchester — Home-of-the-Future landing Dark-mode HUD aesthetic. Cyan-lead accent system. ============================================================ */ :root { /* Base */ --bg-0: #0B1220; --bg-1: #111827; --bg-2: #0E1628; --surface: rgba(255,255,255,0.035); --surface-2: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); /* Text */ --text: #F3F4F6; --text-body: #D1D5DB; --text-muted: #9CA3AF; --text-dim: #6B7280; /* Accents (semantic) */ --cyan: #22D3EE; --blue: #3B82F6; --amber: #F59E0B; --green: #10B981; --violet: #8B5CF6; /* Glow halos */ --glow-cyan: 0 0 24px rgba(34,211,238,0.35), 0 0 2px rgba(34,211,238,0.8); --glow-amber: 0 0 24px rgba(245,158,11,0.35), 0 0 2px rgba(245,158,11,0.8); --glow-green: 0 0 24px rgba(16,185,129,0.30); --glow-violet: 0 0 24px rgba(139,92,246,0.30); /* Type */ --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Radii */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; } /* Alternate type pairing (set on ) */ html[data-type-pair="inter-jbmono"] { --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } html[data-type-pair="space-plex"] { --font-display: 'Space Grotesk', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } html[data-type-pair="inter-plex"] { --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } html[data-type-pair="space-jbmono"] { --font-display: 'Space Grotesk', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); } body { font-family: var(--font-body); color: var(--text-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; background: radial-gradient(1200px 800px at 70% 10%, #14213D 0%, transparent 55%), radial-gradient(900px 700px at 10% 90%, #0a1a2e 0%, transparent 60%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%); background-attachment: fixed; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); letter-spacing: -0.01em; margin: 0; font-weight: 600; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* ============================================================ TOP BAR ============================================================ */ .topbar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); background: rgba(11,18,32,0.72); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; gap: 24px; padding: 14px 24px; max-width: 1280px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .logo-mark { width: 28px; height: 28px; border-radius: 7px; background: conic-gradient(from 180deg, var(--cyan), var(--blue), var(--violet), var(--cyan)); box-shadow: var(--glow-cyan); position: relative; } .logo-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 3px; background: var(--bg-0); } .logo-mark::before { content: ""; position: absolute; inset: 10px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .logo-text { font-size: 15px; } .logo-text small { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; } .nav { display: flex; gap: 22px; margin-left: 20px; } .nav a { font-size: 14px; color: var(--text-body); transition: color .18s; } .nav a:hover { color: var(--cyan); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .phone-num { font-family: var(--font-mono); font-size: 14px; color: var(--text); } .phone-num span { color: var(--text-muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; display: block; line-height: 1; } .mcs-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid rgba(34,211,238,0.35); color: var(--cyan); background: rgba(34,211,238,0.04); } .mcs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } /* Finance ribbon */ .finance-ribbon { text-align: center; padding: 9px 16px; background: linear-gradient(90deg, rgba(245,158,11,0.12), rgba(245,158,11,0.06), rgba(245,158,11,0.12)); border-bottom: 1px solid rgba(245,158,11,0.25); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: #FCD34D; } .finance-ribbon b { color: var(--amber); font-weight: 600; } .finance-ribbon .sep { opacity: 0.4; margin: 0 10px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: 56px 0 32px; } .hero-grid { display: grid; gap: 48px; align-items: center; } .hero.layout-split .hero-grid { grid-template-columns: 1.1fr 1fr; } .hero.layout-centered .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hero.layout-fullbleed .hero-grid { grid-template-columns: 1fr; } .hero.layout-fullbleed .hero-stage { order: -1; } .hero.layout-fullbleed .hero-copy { max-width: 620px; margin-top: -120px; position: relative; z-index: 3; } @media (max-width: 900px) { .hero.layout-split .hero-grid, .hero.layout-fullbleed .hero-grid { grid-template-columns: 1fr; } .hero.layout-fullbleed .hero-copy { margin-top: 0; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; padding: 5px 12px; border: 1px solid rgba(34,211,238,0.35); border-radius: var(--r-pill); background: rgba(34,211,238,0.04); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .hero h1 { font-size: clamp(36px, 5.4vw, 58px); line-height: 1.04; margin: 18px 0 18px; font-weight: 600; color: var(--text); } .hero h1 em { font-style: normal; color: var(--cyan); text-shadow: 0 0 24px rgba(34,211,238,0.35); } .hero h1 .amber { color: var(--amber); font-style: normal; text-shadow: 0 0 24px rgba(245,158,11,0.30); } .hero-sub { font-size: 17px; color: var(--text-body); max-width: 560px; margin-bottom: 28px; } .hero.layout-centered .hero-sub { margin-left: auto; margin-right: auto; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .hero.layout-centered .cta-row { justify-content: center; } .hero-forecast { margin-top: 24px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; max-width: 560px; } .hero.layout-centered .hero-forecast { margin-left: auto; margin-right: auto; } .hero-forecast-head { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; } .hero-forecast-row { display: grid; grid-template-columns: 1.1fr 1.1fr auto; gap: 8px; } .hero-forecast-row input { background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: var(--r-sm); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color .15s; min-width: 0; } .hero-forecast-row input::placeholder { color: var(--text-dim); } .hero-forecast-row input:focus { border-color: var(--cyan); } .hero-forecast-row .btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; } @media (max-width: 560px) { .hero-forecast-row { grid-template-columns: 1fr; } } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 500; font-size: 15px; border: 1px solid transparent; letter-spacing: -0.005em; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } .btn-primary { background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); color: #03131A; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(34,211,238,0.6), inset 0 1px 0 rgba(255,255,255,0.2); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 40px -10px rgba(34,211,238,0.8), inset 0 1px 0 rgba(255,255,255,0.3); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); border-color: rgba(34,211,238,0.4); } .btn .arrow { transition: transform .2s; } .btn:hover .arrow { transform: translateX(3px); } /* Hero stage */ .hero-stage { position: relative; aspect-ratio: 1.15 / 1; border-radius: 28px; overflow: visible; background: radial-gradient(80% 70% at 50% 45%, rgba(34,211,238,0.12), transparent 65%), radial-gradient(120% 80% at 50% 100%, rgba(245,158,11,0.08), transparent 60%), linear-gradient(180deg, #0c1628 0%, #070d1a 100%); border: 1px solid var(--border); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04); } .hero-stage::before { /* subtle grid */ content: ""; position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent 90%); pointer-events: none; } .hero-stage::after { /* horizon glow */ content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 60%; background: radial-gradient(closest-side, rgba(34,211,238,0.20), transparent); pointer-events: none; filter: blur(10px); } .stage-model { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; outline: none; } .stage-corner { position: absolute; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.18em; text-transform: uppercase; } .stage-corner.tl { top: 14px; left: 18px; } .stage-corner.tr { top: 14px; right: 18px; } .stage-corner.bl { bottom: 14px; left: 18px; } .stage-corner.br { bottom: 14px; right: 18px; } .stage-corner .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); margin-right: 6px; vertical-align: middle; } /* HUD cards */ .hud-card { position: absolute; z-index: 4; background: rgba(12,20,36,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 12px 14px; min-width: 150px; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); opacity: 1; } .hud-card .label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .hud-card .value { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--text); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 4px; margin-top: 2px; } .hud-card .value .unit { font-size: 12px; font-weight: 400; color: var(--text-muted); } .hud-card .trend { font-family: var(--font-mono); font-size: 10px; margin-top: 4px; letter-spacing: 0.08em; } .hud-card.accent-cyan { border-color: rgba(34,211,238,0.35); box-shadow: 0 0 0 1px rgba(34,211,238,0.1), 0 12px 30px -12px rgba(34,211,238,0.25); } .hud-card.accent-cyan .value { color: var(--cyan); } .hud-card.accent-amber { border-color: rgba(245,158,11,0.35); box-shadow: 0 0 0 1px rgba(245,158,11,0.1), 0 12px 30px -12px rgba(245,158,11,0.25); } .hud-card.accent-amber .value { color: var(--amber); } .hud-card.accent-green { border-color: rgba(16,185,129,0.35); box-shadow: 0 0 0 1px rgba(16,185,129,0.1), 0 12px 30px -12px rgba(16,185,129,0.25); } .hud-card.accent-green .value { color: var(--green); } .hud-card.accent-violet { border-color: rgba(139,92,246,0.35); box-shadow: 0 0 0 1px rgba(139,92,246,0.1), 0 12px 30px -12px rgba(139,92,246,0.25); } .hud-card.accent-violet .value { color: var(--violet); } /* ring card */ .ring-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; background: rgba(12,20,36,0.75); backdrop-filter: blur(14px); border: 1px solid rgba(34,211,238,0.4); border-radius: var(--r-lg); padding: 10px 14px 10px 10px; box-shadow: 0 0 30px -8px rgba(34,211,238,0.35); } .ring-svg { width: 56px; height: 56px; } .ring-card .pct { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--cyan); letter-spacing: -0.02em; } .ring-card .pct-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; display: block; margin-top: 1px; } .ring-card .pct-date { font-size: 9px; color: var(--text-dim); margin-top: 2px; } /* Credential pill rail */ .credential-rail { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .cred-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid rgba(34,211,238,0.3); background: rgba(34,211,238,0.03); color: var(--text-body); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.08em; transition: border-color .18s, background .18s; } .cred-pill:hover { border-color: rgba(34,211,238,0.6); background: rgba(34,211,238,0.08); } .cred-pill .tick { width: 14px; height: 14px; color: var(--cyan); } .cred-pill b { color: var(--text); font-weight: 600; } /* ============================================================ TELEMETRY RIBBON ============================================================ */ .telemetry { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); margin-top: 42px; } .telemetry-inner { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: 0 auto; } .telem-cell { padding: 20px 24px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; position: relative; } .telem-cell:first-child { border-left: none; } .telem-cell .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; } .telem-cell .value { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .telem-cell .value .unit { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 4px; } .telem-cell .value .star { color: var(--amber); } @media (max-width: 768px) { .telemetry-inner { grid-template-columns: 1fr 1fr; } .telem-cell:nth-child(3) { border-left: none; } .telem-cell:nth-child(3), .telem-cell:nth-child(4) { border-top: 1px solid var(--border); } } /* Co-brand strip */ .cobrand { display: flex; justify-content: center; align-items: center; gap: 42px; padding: 28px 24px; opacity: 0.45; flex-wrap: wrap; } .cobrand span { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 17px; letter-spacing: 0.02em; } .cobrand .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); } /* ============================================================ Section wrapper ============================================================ */ section { position: relative; } .section-pad { padding: 80px 0; } .section-head { max-width: 760px; margin-bottom: 48px; } .section-head.center { text-align: center; margin-left: auto; margin-right: auto; } .section-head .eyebrow { margin-bottom: 16px; } .section-head h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; margin-bottom: 14px; } .section-head p { color: var(--text-body); font-size: 17px; max-width: 620px; } .section-head.center p { margin-left: auto; margin-right: auto; } /* ============================================================ SERVICE TILES (mini-dashboards) ============================================================ */ .services-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } } .service-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; min-height: 260px; display: flex; flex-direction: column; } .service-card::before { content: ""; position: absolute; inset: -1px; border-radius: var(--r-lg); padding: 1px; background: linear-gradient(135deg, var(--accent, var(--cyan)) 0%, transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.45; } .service-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6), 0 0 40px -20px var(--accent, var(--cyan)); } .service-card[data-accent="cyan"] { --accent: var(--cyan); } .service-card[data-accent="amber"] { --accent: var(--amber); } .service-card[data-accent="green"] { --accent: var(--green); } .service-card[data-accent="violet"] { --accent: var(--violet); } .svc-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); margin-bottom: 20px; } .svc-title { font-family: var(--font-display); font-size: 17px; color: var(--text); margin-bottom: 4px; font-weight: 600; } .svc-brands { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .svc-metric { margin-top: auto; } .svc-metric .v { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; } .svc-metric .v .small { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 4px; } .svc-metric .outcome { color: var(--text-body); font-size: 14px; margin-top: 2px; } .svc-finance { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); } .svc-finance b { color: var(--text); } .svc-cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 500; } .svc-cta .arrow { transition: transform .2s; } .service-card:hover .svc-cta .arrow { transform: translateX(3px); } /* ============================================================ 3D PANEL SECTION ============================================================ */ .model-section { padding: 80px 0; } .model-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } @media (max-width: 900px) { .model-grid { grid-template-columns: 1fr; } } .model-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, rgba(34,211,238,0.14), transparent 65%), linear-gradient(180deg, #0c1628, #06101e); border: 1px solid var(--border); box-shadow: inset 0 0 80px rgba(0,0,0,0.5); } .model-stage model-viewer { width: 100%; height: 100%; } .model-stage .hotspot { --hs-accent: var(--cyan); display: block; width: 22px; height: 22px; border-radius: 50%; background: rgba(12,20,36,0.85); border: 1.5px solid var(--hs-accent); box-shadow: 0 0 14px var(--hs-accent); cursor: pointer; position: relative; padding: 0; color: var(--hs-accent); } .model-stage .hotspot::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--hs-accent); box-shadow: 0 0 8px var(--hs-accent); animation: hsPulse 2.6s ease-in-out infinite; } @keyframes hsPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } .model-stage .hotspot.amber { --hs-accent: var(--amber); } .model-stage .hotspot.green { --hs-accent: var(--green); } .model-stage .hotspot.violet { --hs-accent: var(--violet); } .model-stage .hs-tooltip { position: absolute; background: rgba(12,20,36,0.92); backdrop-filter: blur(12px); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 10px 14px; min-width: 220px; transform: translate(14px, -50%); top: 50%; left: 100%; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; z-index: 5; } .model-stage .hotspot:hover .hs-tooltip, .model-stage .hotspot:focus .hs-tooltip, .model-stage .hotspot:focus-visible .hs-tooltip { opacity: 1; visibility: visible; } .model-stage .hs-tooltip .t-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; } .model-stage .hs-tooltip .t-value { font-family: var(--font-mono); font-size: 15px; color: var(--text); font-weight: 600; margin-top: 2px; } .model-stage .stage-legend { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; } .model-stage .stage-legend::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 6px var(--cyan); } .spec-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; } .spec-list li { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border); } .spec-list li:last-child { border-bottom: 1px solid var(--border); } .spec-list .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; } .spec-list .v { font-family: var(--font-mono); font-weight: 600; color: var(--text); font-size: 14px; } /* ============================================================ ENERGY FLOW CHART ============================================================ */ .flow-panel { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; } .flow-head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .flow-head h3 { font-size: 18px; margin-right: auto; } .flow-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; } .legend { display: flex; gap: 16px; flex-wrap: wrap; } .legend-item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-body); } .legend-dot { width: 9px; height: 9px; border-radius: 50%; } .legend-dot.d-cyan { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .legend-dot.d-amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .legend-dot.d-green { background: var(--green); box-shadow: 0 0 6px var(--green); } .legend-dot.d-violet { background: var(--violet); box-shadow: 0 0 6px var(--violet); } .chart-wrap { position: relative; } #energy-chart { width: 100%; height: 320px; display: block; } .flow-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } .flow-stats > div { padding: 0 18px; border-left: 1px solid var(--border); } .flow-stats > div:first-child { border-left: none; padding-left: 0; } .flow-stats .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; } .flow-stats .v { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin-top: 4px; } .flow-stats .v.cyan { color: var(--cyan); } .flow-stats .v.amber { color: var(--amber); } .flow-stats .v.green { color: var(--green); } .flow-stats .v.violet { color: var(--violet); } @media (max-width: 700px) { .flow-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 0; } .flow-stats > div:nth-child(3) { border-left: none; padding-left: 0; } } /* ============================================================ CASE STUDIES ============================================================ */ .case-filters { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } .case-filter { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text-body); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color .18s, color .18s, background .18s; } .case-filter:hover { border-color: var(--border-strong); color: var(--text); } .case-filter.active { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.05); } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 1000px) { .case-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .case-grid { grid-template-columns: 1fr; } } .case-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform .2s, border-color .2s; } .case-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } .case-photo { aspect-ratio: 16/10; position: relative; background: repeating-linear-gradient(45deg, #0f1d35 0 10px, #0b1628 10px 20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .case-image { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .hero-image { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; } .case-photo .ph-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; text-align: center; padding: 6px 12px; background: rgba(11,18,32,0.7); border-radius: var(--r-sm); border: 1px solid var(--border); } .case-snapshot { position: absolute; right: 10px; bottom: 10px; background: rgba(12,20,36,0.9); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 10px 12px; backdrop-filter: blur(10px); display: flex; gap: 14px; align-items: center; } .case-snapshot .mini-metric .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; } .case-snapshot .mini-metric .v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--cyan); } .case-snapshot svg.mini-spark { display: block; } .case-body { padding: 18px; } .case-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .case-meta .sep { opacity: 0.4; } .case-tag { color: var(--cyan); } .case-quote { color: var(--text); font-size: 15px; line-height: 1.45; margin: 10px 0 14px; } .case-name { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; } .case-name b { color: var(--text); font-weight: 600; } /* ============================================================ ENGINEER / VAN STRIP ============================================================ */ .crew-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .crew-strip { grid-template-columns: repeat(2, 1fr); } } .crew-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; display: flex; gap: 14px; align-items: center; } .crew-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #1f2d48, #0c1628); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; color: var(--cyan); font-size: 16px; letter-spacing: 0.06em; } .crew-avatar-img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 1px solid var(--border-strong); } .crew-name { color: var(--text); font-weight: 600; font-size: 15px; } .crew-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; margin-top: 3px; } .crew-cred { font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* ============================================================ FINANCE BUS BLOCK ============================================================ */ .finance-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(34,211,238,0.05)); border: 1px solid rgba(245,158,11,0.25); border-radius: 24px; padding: 44px; position: relative; overflow: hidden; } .finance-panel::before { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; background: radial-gradient(closest-side, rgba(245,158,11,0.15), transparent); filter: blur(10px); } @media (max-width: 800px) { .finance-panel { grid-template-columns: 1fr; padding: 28px; } } .finance-panel h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; } .finance-grant { font-family: var(--font-mono); font-size: 64px; line-height: 1; color: var(--amber); font-weight: 600; letter-spacing: -0.03em; } .finance-grant .sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-top: 8px; } .finance-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .finance-opts li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-family: var(--font-mono); letter-spacing: 0.04em; } .finance-opts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); } /* ============================================================ FAQ ============================================================ */ .faq-list { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; } .faq-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .faq-q { width: 100%; text-align: left; padding: 18px 22px; background: transparent; border: none; color: var(--text); display: flex; align-items: center; gap: 14px; font-size: 16px; font-family: var(--font-body); font-weight: 500; } .faq-q::after { content: "+"; margin-left: auto; font-family: var(--font-mono); color: var(--cyan); font-size: 20px; transition: transform .2s; } .faq-item[open] .faq-q::after { content: "–"; } .faq-a { padding: 0 22px 18px 22px; color: var(--text-body); font-size: 14px; max-width: 720px; } /* ============================================================ STICKY DESIGN TAB ============================================================ */ .sticky-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%) translateX(-2px); z-index: 30; display: flex; } .sticky-tab button { writing-mode: vertical-rl; transform: rotate(180deg); padding: 18px 10px; background: linear-gradient(180deg, var(--cyan), var(--blue)); color: #03131A; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; border: none; border-radius: 10px 0 0 10px; box-shadow: -6px 0 20px -4px rgba(34,211,238,0.5); cursor: pointer; transition: transform .2s, box-shadow .2s; } .sticky-tab button:hover { transform: rotate(180deg) translateY(4px); box-shadow: -8px 0 28px -4px rgba(34,211,238,0.7); } @media (max-width: 768px) { .sticky-tab { display: none; } } /* ============================================================ FOOTER / CALLBACK ============================================================ */ .footer { padding: 64px 0 40px; border-top: 1px solid var(--border); margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } .footer h4 { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 16px; font-weight: 500; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .footer a { color: var(--text-body); font-size: 14px; } .footer a:hover { color: var(--cyan); } .callback-form { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; } .callback-form label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; } .callback-form input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); margin-top: 6px; margin-bottom: 14px; font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color .15s; } .callback-form input:focus { border-color: var(--cyan); } .callback-form .btn-primary { width: 100%; justify-content: center; } .legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; } /* ============================================================ Utility ============================================================ */ .mono { font-family: var(--font-mono); } .muted { color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hud-card, .ring-card { opacity: 1 !important; transform: none !important; animation: none !important; } }