/* ============================================================ ELECTRO-LITE SOLUTIONS — main.css Variables · Reset · Typography · Global utilities ============================================================ */ /* --- Google Fonts preload happens in ; we declare here --- */ :root { /* Auburn palette */ --brand-orange: #E87722; --brand-orange-light: #F5953A; --brand-orange-glow: #FF8C2A; --brand-blue: #03244D; --brand-blue-mid: #0A3D6B; --brand-blue-light: #1565A8; --brand-white: #FFFFFF; --brand-card-dark: #1C1C1E; --brand-gray-text: #CCCCCC; /* Typography */ --font-script: 'Dancing Script', cursive; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; /* Layout */ --nav-height: 70px; --section-pad: clamp(80px, 10vw, 120px); --container-max: 1200px; --radius-card: 8px; /* Transitions */ --transition-fast: all 0.2s ease; --transition-med: all 0.3s ease; --transition-slow: all 0.5s ease; } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--brand-blue); color: var(--brand-white); font-family: var(--font-body); font-weight: 300; line-height: 1.6; overflow-x: hidden; cursor: none; /* custom cursor — desktop only */ } /* Restore cursor on touch/mobile */ @media (hover: none) { body { cursor: auto; } } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ===== TYPOGRAPHY ===== */ .eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--brand-orange); display: block; margin-bottom: 12px; } .section-heading { font-family: var(--font-script); font-weight: 700; color: var(--brand-white); line-height: 1.1; } .section-sub { font-family: var(--font-body); font-weight: 300; color: rgba(255, 255, 255, 0.8); max-width: 600px; } /* ===== LAYOUT UTILITIES ===== */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); } .section-header { text-align: center; margin-bottom: 60px; } .section-header .section-sub { margin: 16px auto 0; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px; padding: 14px 36px; transition: var(--transition-fast); cursor: pointer; } .btn-primary { background: var(--brand-orange); color: var(--brand-white); box-shadow: 0 4px 20px rgba(232, 119, 34, 0.35); } .btn-primary:hover { background: var(--brand-orange-light); transform: scale(1.04); box-shadow: 0 8px 30px rgba(232, 119, 34, 0.5); } .btn-primary:active { transform: scale(1.01); } .btn-outline { background: transparent; color: var(--brand-white); border: 2px solid var(--brand-white); } .btn-outline:hover { background: var(--brand-white); color: var(--brand-blue); } .btn-pill { border-radius: 24px; padding: 10px 28px; } /* ===== CUSTOM CURSOR ===== */ #cursor-dot, #cursor-ring { position: fixed; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: opacity 0.3s ease; opacity: 0; } #cursor-dot { width: 10px; height: 10px; background: var(--brand-orange); transition: transform 0.1s ease, opacity 0.3s ease; } #cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(232, 119, 34, 0.6); transition: transform 0.2s ease, opacity 0.3s ease; } @media (pointer: fine) { body { cursor: none; } #cursor-dot, #cursor-ring { opacity: 1; left: -999px; /* start off-screen so there's no dot at (0,0) before mouse moves */ top: -999px; } } /* ===== BACK TO TOP ===== */ #back-to-top { position: fixed; bottom: 28px; right: 28px; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-orange); color: var(--brand-white); display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 4px 16px rgba(232, 119, 34, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; cursor: pointer; } #back-to-top.visible { opacity: 1; pointer-events: auto; } #back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(232, 119, 34, 0.5); } /* ===== DROPLET CANVAS ===== */ #droplet-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* ===== Z-INDEX LAYERS ===== 1 = bg-panels (fullscreen image inserts) 2 = droplet canvas (fixed, falls over panels) 3 = content sections (solid bg, above canvas) */ .bg-panel { position: relative; z-index: 1; } section, header, footer, nav, #loader { position: relative; z-index: 3; } /* ===== SCROLL REVEAL BASE ===== */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } .reveal.from-left { transform: translateX(-40px); } .reveal.from-right { transform: translateX(40px); } .reveal.from-left.revealed, .reveal.from-right.revealed { transform: translateX(0); } /* ===== ORANGE DIVIDER ===== */ .divider-orange { width: 60px; height: 3px; background: var(--brand-orange); border-radius: 2px; margin: 20px auto 0; } /* ===== RESPONSIVE UTILITIES ===== */ @media (max-width: 768px) { :root { --section-pad: 70px; } } @media (max-width: 480px) { :root { --section-pad: 56px; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }