@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Poppins:wght@300;400;500;600;700&display=swap'); /* ═══════════════════════════════════════════════════════════════ Yugawatt Landing — Design System Override Enforces consistent design primitives across ALL landing pages. Loaded after page CSS, before responsive.css. ═══════════════════════════════════════════════════════════════ */ /* ── Design tokens (override page-level hardcoded values) ── */ :root { --yw-radius-sm: 10px; --yw-radius: 14px; --yw-radius-pill: 999px; --yw-shadow-sm: 0 2px 8px rgba(18,14,44,.06); --yw-shadow: 0 8px 28px rgba(18,14,44,.08); --yw-shadow-lg: 0 16px 48px rgba(18,14,44,.12); --yw-shadow-hover: 0 12px 36px rgba(18,14,44,.14); --yw-hero-overlay: rgba(18,14,44,.52); --yw-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); --yw-gap: 24px; --yw-maxw: 1180px; /* Accent colors aligned to design.css tokens */ --yw-green: #0b7a4b; --yw-electric: #ffb000; --yw-amber: #ffb000; --yw-blue: #4b1d8c; /* Brand primitives: CTA role = Amber (Midnight ink), brand = Violet */ --yw-cta: #ffb000; --yw-cta-ink: #120e2c; /* Persona accent — set on per page */ --page-accent: var(--yw-electric); --page-accent-ink: #120e2c; } /* ── Normalize border-radius across all card-like elements ── */ .card, .pillar-infographic, .yugawatt-waitlist-form { border-radius: var(--yw-radius) !important; } .pillar-thumb, .pillar-infographic svg { border-radius: var(--yw-radius-sm) !important; } /* ── Normalize shadows ── */ .card { box-shadow: var(--yw-shadow-sm) !important; transition: box-shadow var(--yw-transition), transform var(--yw-transition) !important; } .card:hover { box-shadow: var(--yw-shadow-hover) !important; transform: translateY(-3px); } .pillar-infographic { box-shadow: var(--yw-shadow-sm) !important; } .yugawatt-waitlist-form { box-shadow: var(--yw-shadow) !important; } /* ── Consistent hero overlay + image ── */ .landing-hero, .hero { background-attachment: scroll !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; } .landing-hero, .hero { background-image: linear-gradient(var(--yw-hero-overlay), var(--yw-hero-overlay)), var(--hero-bg, none) !important; } /* ── Theme submit + mobile bar: CTA role = Amber ── */ .yw-submit-btn { background: var(--yw-cta, #ffb000) !important; color: var(--yw-cta-ink, #120e2c) !important; } .mobile-cta-bar a { background: var(--yw-cta, #ffb000) !important; color: var(--yw-cta-ink, #120e2c) !important; } .hero-cta, .end-cta, footer a, .mobile-cta-bar a { display: inline-flex !important; align-items: center; justify-content: center; font-weight: 700 !important; font-size: 1rem !important; padding: 14px 28px !important; border-radius: var(--yw-radius-pill) !important; text-decoration: none !important; transition: transform var(--yw-transition), box-shadow var(--yw-transition) !important; white-space: nowrap; } /* Primary card CTA (campaign summary) */ .card-link.link-primary { background: var(--yw-cta, #ffb000) !important; color: var(--yw-cta-ink, #120e2c) !important; border-color: transparent !important; flex: 1 1 auto; min-width: 7rem; } .card-formats { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; font-size: 0.78rem; color: #6f6885; } .card-formats a { color: #6f6885; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; min-height: auto !important; padding: 0 !important; background: none !important; border: none !important; } .card-formats a:hover { color: var(--yw-green); } .hero-cta:hover, .end-cta:hover, footer a:hover { transform: translateY(-2px); box-shadow: var(--yw-shadow) !important; } .hero-cta:active, .end-cta:active, footer a:active, .mobile-cta-bar a:active { transform: scale(0.97); } /* ── Consistent card-link buttons (campaign summary) ── */ .card-link { display: inline-flex !important; align-items: center; justify-content: center; font-weight: 700 !important; font-size: 0.85rem !important; padding: 10px 18px !important; border-radius: var(--yw-radius-pill) !important; text-decoration: none !important; transition: transform var(--yw-transition), background var(--yw-transition) !important; border: 1px solid transparent !important; } .card-link:active { transform: scale(0.96); } .link-photo { background: #f0f5f0 !important; color: var(--yw-green) !important; border-color: #d4e8d4 !important; } .link-photo:hover { background: #e4f0e4 !important; } .link-info { background: #f0f4fa !important; color: var(--yw-blue) !important; border-color: #d4dce8 !important; } .link-info:hover { background: #e4ecf4 !important; } .link-3d { background: #f8f0f8 !important; color: #8b2c8a !important; border-color: #e8d4e8 !important; } .link-3d:hover { background: #f0e4f0 !important; } /* ── Consistent image treatment ── */ .card img, .pillar-thumb { object-fit: cover; display: block; background: var(--yw-line, #e3e8e3); } /* ── Unified pillar media frame (photo / SVG / 3D) ── */ .pillar-thumb, .pillar-infographic, .pillar-3d { width: 100%; min-height: 110px; max-height: 140px; margin-bottom: 12px; border-radius: var(--yw-radius-sm) !important; overflow: hidden; border: 1px solid var(--yw-line, #e3e8e3); background: #f0f3f0; box-sizing: border-box; } .pillar-thumb { height: 120px; object-fit: cover; } .pillar-infographic { display: flex; align-items: center; justify-content: center; padding: 8px; background: #fbfcfb; } .pillar-infographic svg { max-height: 110px; width: 100%; height: auto; } /* Infographic contrast boost on light surfaces */ .pillar-infographic svg text { fill: #120e2c !important; } .pillar-3d { height: 120px; position: relative; } /* Focus-visible uses page accent */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--page-accent, #0b7a4b) !important; outline-offset: 2px; } /* Path switcher — back to campaign summary */ .yw-path-switch { text-align: center; padding: 12px 16px 0; font-size: 0.88rem; } .yw-path-switch a { color: #6f6885; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; min-height: auto !important; padding: 4px 8px !important; } .yw-path-switch a:hover { color: var(--page-accent, #0b7a4b); } body[data-theme="dark"] .yw-path-switch a { color: #8a988f; } /* ── Proof strip normalization ── */ .proof-strip { gap: var(--yw-gap) !important; max-width: 1180px !important; margin: 32px auto 40px !important; padding: 0 24px !important; display: flex !important; justify-content: center !important; align-items: stretch !important; flex-wrap: wrap !important; position: relative !important; z-index: 2 !important; } .proof-item { flex: 1 1 250px !important; max-width: 380px !important; border-radius: var(--yw-radius) !important; box-shadow: var(--yw-shadow-sm) !important; background: #ffffff !important; border: 1px solid var(--yw-line, #e3e8e3) !important; padding: 16px 20px !important; } body[data-theme="dark"] .proof-item { background: #120e2c !important; border-color: #24352a !important; } /* ── Inline SVG icons for pillar H3 headers ── */ .yw-h3-icon { width: 1.15em; height: 1.15em; vertical-align: -0.18em; margin-right: 0.35em; fill: none; stroke: var(--page-accent, currentColor); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; } /* ── Split Layout & Form Container — Generous Spacing, Zero Overlap ── */ .split-layout { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; max-width: 1180px !important; margin: 0 auto 64px !important; padding: 0 24px !important; align-items: start !important; position: relative !important; z-index: 1 !important; } .pillar:last-child { margin-bottom: 0 !important; } #waitlist-container { width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } .yugawatt-waitlist-form { width: 100% !important; max-width: 480px !important; box-sizing: border-box !important; margin: 0 auto !important; position: relative !important; z-index: 3 !important; } /* ── Eyebrow badge ── */ .eyebrow-badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ── Consistent theme section (campaign summary) ── */ .theme-icon { border-radius: var(--yw-radius-sm) !important; } /* ── News link card ── */ .news-link { border-radius: var(--yw-radius) !important; transition: background var(--yw-transition) !important; } /* ── End card finish ── */ .end-card { background: #120e2c !important; color: #ffffff !important; text-align: center !important; padding: 64px 24px !important; margin-top: 48px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; } .end-card h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; margin: 0 0 24px 0 !important; line-height: 1.25 !important; } .end-card h2 strong { font-weight: 800 !important; color: var(--page-accent, var(--yw-electric)) !important; } /* ── Typography refinement ── */ .hero-h1 { letter-spacing: -0.03em !important; line-height: 1.08 !important; } .hero-lede { line-height: 1.55 !important; letter-spacing: -0.005em !important; } .pillar-content h3, .card-body h3 { letter-spacing: -0.01em !important; font-weight: 700 !important; } /* ── Smooth transitions on all interactive elements ── */ a, button, input, select { transition: var(--yw-transition); } /* ═══════════════════════════════════════════════════════════════ Visual enhancement layer (2026-07-31) Appended — later rules win same-specificity originals. ═══════════════════════════════════════════════════════════════ */ /* ── Hero: accent-tinted overlay replaces flat dark wash ── */ .landing-hero, .hero { background-image: var(--hero-bg, none) !important; } .landing-hero::before, .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--page-accent, #0b7a4b) 18%, rgba(16,26,20,.58)) 0%, rgba(16,26,20,.60) 55%, color-mix(in srgb, var(--page-accent, #0b7a4b) 10%, rgba(16,26,20,.68)) 100% ); } /* Fallback for browsers without color-mix: keep a plain dark overlay */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .landing-hero::before, .hero::before { background: linear-gradient(180deg, rgba(16,26,20,.58), rgba(16,26,20,.68)); } } .landing-hero > *, .hero > * { position: relative; z-index: 1; } /* Hero entrance — CSS-only, runs on load, never hides content */ @keyframes yw-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .landing-hero > *, .hero > * { animation: yw-hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .landing-hero > :nth-child(2), .hero > :nth-child(2) { animation-delay: 0.08s; } .landing-hero > :nth-child(3), .hero > :nth-child(3) { animation-delay: 0.16s; } .landing-hero > :nth-child(4), .hero > :nth-child(4) { animation-delay: 0.24s; } .landing-hero > :nth-child(5), .hero > :nth-child(5) { animation-delay: 0.32s; } .hero-h1, .hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--page-accent, #0b7a4b) 22%, transparent) !important; } .eyebrow-badge { box-shadow: 0 0 24px color-mix(in srgb, var(--page-accent, #0b7a4b) 30%, transparent) !important; } /* ── CTAs: Brand CTA role = Amber, Midnight ink (per color primitives) ── */ .hero-cta, .end-cta { background: var(--yw-cta, #ffb000) !important; color: var(--yw-cta-ink, #120e2c) !important; box-shadow: 0 4px 22px color-mix(in srgb, var(--yw-cta, #ffb000) 38%, transparent) !important; position: relative; overflow: hidden; } .hero-cta:hover, .end-cta:hover { transform: translateY(-2px) scale(1.02) !important; filter: brightness(1.02); box-shadow: 0 8px 34px color-mix(in srgb, var(--yw-cta, #ffb000) 50%, transparent) !important; } .hero-cta::after, .end-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left 0.6s ease; pointer-events: none; } .hero-cta:hover::after, .end-cta:hover::after { left: 120%; } .yw-submit-btn { box-shadow: 0 4px 18px color-mix(in srgb, var(--page-accent, #0b7a4b) 32%, transparent) !important; } .yw-submit-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.08); } /* ── 3D scene containers: taller, accent-tinted, glow frame ── */ .pillar-3d { height: 200px !important; max-height: none !important; background: linear-gradient( 145deg, color-mix(in srgb, var(--page-accent, #0b7a4b) 6%, #fbfaf8) 0%, color-mix(in srgb, var(--page-accent, #0b7a4b) 3%, #eef1ee) 100% ) !important; border: 1px solid color-mix(in srgb, var(--page-accent, #0b7a4b) 16%, #e3e8e3) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.03), 0 4px 18px color-mix(in srgb, var(--page-accent, #0b7a4b) 10%, transparent) !important; } .pillar-3d canvas { border-radius: inherit; } @media (max-width: 900px) { .pillar-3d { height: 150px !important; } } /* ── Pillar icons: accent glow, pop on hover ── */ .pillar-icon { box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 0 16px color-mix(in srgb, var(--page-accent, #0b7a4b) 16%, transparent) !important; transition: transform var(--yw-transition), box-shadow var(--yw-transition) !important; } .pillar:hover .pillar-icon { transform: scale(1.08) rotate(-2deg); box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 26px color-mix(in srgb, var(--page-accent, #0b7a4b) 28%, transparent) !important; } /* ── Proof strip: accent edge, tinted surface, hover lift ── */ .proof-item { border-left: 3px solid var(--page-accent, #0b7a4b) !important; background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--page-accent, #0b7a4b) 4%, #ffffff) 100%) !important; transition: box-shadow var(--yw-transition), transform var(--yw-transition) !important; } .proof-item:hover { transform: translateY(-2px); box-shadow: 0 8px 26px color-mix(in srgb, var(--page-accent, #0b7a4b) 14%, rgba(0,0,0,.08)) !important; } /* ── End card: gradient depth + radial accent glow ── */ .end-card { background: linear-gradient( 180deg, #120e2c 0%, color-mix(in srgb, var(--page-accent, #ffb000) 14%, #120e2c) 100% ) !important; position: relative; overflow: hidden; } .end-card::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 640px; height: 420px; background: radial-gradient(ellipse, color-mix(in srgb, var(--page-accent, #0b7a4b) 28%, transparent) 0%, transparent 70%); filter: blur(60px); pointer-events: none; } .end-card > * { position: relative; z-index: 1; } .end-card h2 strong { text-shadow: 0 0 30px color-mix(in srgb, var(--page-accent, #0b7a4b) 45%, transparent) !important; } /* ── Waitlist form: accent frame ── */ .yugawatt-waitlist-form { border: 1px solid color-mix(in srgb, var(--page-accent, #0b7a4b) 12%, #e3e8e3) !important; } /* ── Scroll reveal (paired with _shared/reveal.js) ── */ .yw-pre { opacity: 0; transform: translateY(24px); } .yw-pre.yw-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .yw-pre:nth-child(2) { transition-delay: 0.08s; } .yw-pre:nth-child(3) { transition-delay: 0.16s; } .yw-pre:nth-child(4) { transition-delay: 0.24s; } .yw-pre:nth-child(5) { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .landing-hero > *, .hero > * { animation: none; } .yw-pre { opacity: 1; transform: none; } } /* Brand Book wordmark + type */ :root { --yw-font-sans: "Poppins", system-ui, -apple-system, sans-serif; --yw-font-script: "Birthstone", cursive; --yw-birthstone: #0b7a4b; --yw-descriptor: "Neighborhood EV charging that works."; --sans: "Poppins", system-ui, -apple-system, sans-serif; --serif: "Poppins", system-ui, -apple-system, sans-serif; } body { font-family: var(--yw-font-sans); } .yw-wordmark, .birthstone-regular { font-family: var(--yw-font-script); font-weight: 400; font-style: normal; color: var(--yw-birthstone); letter-spacing: 0.01em; text-transform: none; line-height: 1.15; }