/* ============================================================================ AERO PALETTE — blue + orange + white-pastel Site-wide alternate theme, activated by . Loaded last. Inert unless the attribute is present. ============================================================================ */ /* ---- smooth cross-fade when the palette switches ---- */ html, body, .hero, .stats, .cta-banner, .footer, .labs, .capabilities, .about, .focus, .missions, .quality, .clients, .services, .contact, .hero-badge, .e-thermal-card, .stat-item, .section { transition: background-color .5s var(--ease-smooth), color .4s var(--ease-smooth), border-color .5s var(--ease-smooth); } /* ---- the palette toggle control (nav) ---- */ .palette-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 100px; background: var(--green-pale); border: 1px solid var(--border); } .pal-opt { width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; transition: border-color .25s var(--ease), transform .2s var(--ease); } .pal-opt:hover { transform: translateY(-1px); } .pal-opt i { width: 15px; height: 15px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .pal-opt[data-pal="emerald"] i { background: linear-gradient(135deg, #0b7a3e, #11a357); } .pal-opt[data-pal="aero"] i { background: linear-gradient(135deg, #1766cf 0 48%, #ee6c22 52% 100%); } .pal-opt.active { border-color: var(--green); } /* ========================================================================== THE AERO PALETTE (green → blue, plus an orange action accent) ========================================================================== */ :root[data-palette="aero"] { --off-white: #f4f8fd; --cream: #edf3fb; --light: #e2ebf7; --text-primary: #0d2444; --text-body: #33435c; --text-muted: #5a6a84; --text-faint: #93a2ba; --green: #1766cf; /* primary blue */ --green-dark: #10305e; /* navy */ --green-darker: #0b2145; /* deep navy */ --green-light: #3d8ae8; --green-pale: #e7f0fc; --green-glow: rgba(23,102,207,0.12); --green-rgb: 23,102,207; --green-light-rgb: 61,138,232; --border: #d7e3f2; --border-hover: rgba(23,102,207,0.28); --accent: #ee6c22; /* orange action */ --accent-dark: #d85c15; --accent-rgb: 238,108,34; } /* hero backdrop → cool blue-white pastel */ :root[data-palette="aero"] .hero { background: linear-gradient(160deg, #eaf3fe 0%, #dbeafb 34%, #f6faff 68%, #e8f1fc 100%); } /* headline shimmer → blue ⇄ orange */ :root[data-palette="aero"] .hero-title-accent { background: linear-gradient(100deg, #1766cf 0%, #3d8ae8 26%, #ee6c22 52%, #f0873b 70%, #1766cf 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; } /* primary calls-to-action → orange */ :root[data-palette="aero"] .hero-btn-primary, :root[data-palette="aero"] .nav-cta, :root[data-palette="aero"] .btn-primary, :root[data-palette="aero"] .labs-cta, :root[data-palette="aero"] .form-submit, :root[data-palette="aero"] .pd-form-submit { background: var(--accent) !important; box-shadow: 0 10px 28px -10px rgba(var(--accent-rgb), .6); } :root[data-palette="aero"] .hero-btn-primary:hover, :root[data-palette="aero"] .nav-cta:hover, :root[data-palette="aero"] .btn-primary:hover, :root[data-palette="aero"] .labs-cta:hover, :root[data-palette="aero"] .form-submit:hover, :root[data-palette="aero"] .pd-form-submit:hover { background: var(--accent-dark) !important; box-shadow: 0 16px 40px -10px rgba(var(--accent-rgb), .7); } /* orange highlight touches */ :root[data-palette="aero"] .stat-number .stat-suffix { color: var(--accent); } :root[data-palette="aero"] .hero-float-temp span { color: var(--accent); } :root[data-palette="aero"] .lab-num { color: var(--accent); opacity: .75; } :root[data-palette="aero"] .btn-arrow { color: inherit; } /* keep the WhatsApp FAB its own brand green (never themed) */ :root[data-palette="aero"] .whatsapp-fab { background: #25D366; }