/* ============================================================ AAA — ALWAYS ON AUTOPILOT · DEMO SUITE BRAND SYSTEM Theme: aviation / cockpit / tech-forward autopilot Palette: Night-sky navy · jet-trail cyan · signal gold Shared by every demo page. Load AFTER Google Fonts. ============================================================ */ :root { /* core */ --sky: #0a1020; /* deepest night sky (bg) */ --sky-2: #0f1830; /* panel navy */ --sky-3: #16233f; /* raised panel */ --hull: #1c2c4d; /* fuselage navy */ --cyan: #22d3ee; /* jet-trail / HUD cyan */ --cyan-soft: #67e8f9; --gold: #f5b301; /* signal gold / runway light */ --gold-soft: #ffd257; --green: #22c55e; /* "on autopilot" ok */ --red: #ef4444; /* alert / money lost */ --white: #ffffff; --ink: #e8eefc; /* primary text on dark */ --ink-dim: #9db0d4; /* secondary text */ --line: rgba(120,160,220,0.16); --glass: rgba(255,255,255,0.05); --glass-2: rgba(255,255,255,0.08); --font-head: 'Sora','Montserrat',sans-serif; --font-body: 'Inter','Lato',sans-serif; --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 40px rgba(0,0,0,0.45); --shadow-cyan: 0 0 40px rgba(34,211,238,0.25); --shadow-gold: 0 0 40px rgba(245,179,1,0.25); --t: 0.35s cubic-bezier(0.4,0,0.2,1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--sky); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* animated aurora / radar background applied to */ .aaa-bg { position: relative; background: radial-gradient(1200px 700px at 15% -10%, rgba(34,211,238,0.12), transparent 60%), radial-gradient(900px 600px at 90% 0%, rgba(245,179,1,0.08), transparent 55%), linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%); } .aaa-bg::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(120,160,220,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,220,0.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); pointer-events: none; z-index: 0; } /* ---------- typography ---------- */ h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.1; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); } .eyebrow::before { content: "✈"; font-size: 0.9rem; filter: drop-shadow(0 0 6px var(--cyan)); } .grad-text { background: linear-gradient(100deg, var(--cyan) 0%, var(--gold) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- layout ---------- */ .wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; } .section { padding: clamp(3rem, 8vw, 6rem) 0; position: relative; z-index: 1; } /* ---------- brand bar / logo ---------- */ .aaa-topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.5rem; background: rgba(10,16,32,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .aaa-logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-weight: 800; letter-spacing: 0.02em; } .aaa-logo .mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), var(--gold)); color: var(--sky); font-size: 1.05rem; font-weight: 900; box-shadow: var(--shadow-cyan); } .aaa-logo .name { font-size: 1.02rem; color: var(--white); } .aaa-logo .name small { display:block; font-size:0.62rem; letter-spacing:0.24em; color: var(--cyan); font-weight:700; text-transform:uppercase; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; padding: 0.9rem 1.6rem; border-radius: 50px; border: none; cursor: pointer; text-decoration: none; transition: transform var(--t), box-shadow var(--t), background var(--t); } .btn-primary { background: linear-gradient(100deg, var(--cyan), var(--cyan-soft)); color: var(--sky); box-shadow: var(--shadow-cyan); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(34,211,238,0.45); } .btn-gold { background: linear-gradient(100deg, var(--gold), var(--gold-soft)); color: var(--sky); box-shadow: var(--shadow-gold); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(245,179,1,0.45); } .btn-ghost { background: var(--glass); color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--glass-2); transform: translateY(-3px); } /* ---------- glass panels / cards ---------- */ .panel { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(10px); box-shadow: var(--shadow); } .card { background: var(--sky-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,0.5); box-shadow: var(--shadow-cyan); } /* ---------- form controls ---------- */ label { display:block; font-family: var(--font-head); font-weight:600; font-size:0.8rem; color: var(--ink-dim); margin-bottom: 0.4rem; letter-spacing: 0.02em; } input, select, textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: rgba(6,11,24,0.7); color: var(--ink); border: 1px solid var(--line); transition: border-color var(--t), box-shadow var(--t); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34,211,238,0.18); } input::placeholder, textarea::placeholder { color: #5f719a; } select option { background: var(--sky-2); } /* ---------- scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } /* ---------- pills / badges ---------- */ .pill { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.35rem 0.75rem; border-radius:50px; } .pill-cyan { background: rgba(34,211,238,0.12); color: var(--cyan); border:1px solid rgba(34,211,238,0.3); } .pill-gold { background: rgba(245,179,1,0.12); color: var(--gold); border:1px solid rgba(245,179,1,0.3); } .pill-green{ background: rgba(34,197,94,0.12); color: var(--green); border:1px solid rgba(34,197,94,0.3); } .pill-red { background: rgba(239,68,68,0.12); color: var(--red); border:1px solid rgba(239,68,68,0.3); } /* ---------- footer ---------- */ .aaa-foot { text-align:center; padding: 2.5rem 1.5rem; border-top:1px solid var(--line); color: var(--ink-dim); font-size:0.85rem; position: relative; z-index:1; } .aaa-foot a { color: var(--cyan); text-decoration:none; } /* ---------- keyframes ---------- */ @keyframes pulseGlow { 0%,100% { opacity:0.6; transform:scale(1);} 50% { opacity:1; transform:scale(1.06);} } @keyframes floaty { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-12px);} } @keyframes sweep { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } @keyframes dash { to { stroke-dashoffset: 0; } } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} } .float { animation: floaty 6s ease-in-out infinite; } /* ---------- utility ---------- */ .center { text-align:center; } .mt1{margin-top:0.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2rem} .grid { display:grid; gap:1.25rem; } .g2{ grid-template-columns:repeat(2,1fr);} .g3{ grid-template-columns:repeat(3,1fr);} @media (max-width: 820px){ .g2,.g3{ grid-template-columns:1fr; } .aaa-topbar .aaa-nav{ display:none;} } /* ============================================================ MOBILE / PHONE-FIRST RESPONSIVE LAYER (additive — desktop intact) Standard breakpoints: 768px (tablet) · 480px (phone) Most AAA prospects view on their phones. Goals: - no horizontal scroll at 360 / 390 / 768px - tap targets >= 44px (buttons, links, inputs, sliders) - readable body text (>=15px), headings scale down - respect prefers-reduced-motion ============================================================ */ /* --- tap targets: min 44px on any pointer-coarse (touch) device --- */ @media (max-width: 768px), (pointer: coarse) { .btn { min-height: 44px; padding: 0.85rem 1.4rem; } input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */ .aaa-topbar .btn { min-height: 40px; } .pill { min-height: 28px; } a.card, .card a { -webkit-tap-highlight-color: rgba(34,211,238,0.2); } } /* --- tablet and below --- */ @media (max-width: 768px) { body { font-size: 15.5px; } .wrap { padding: 0 1.15rem; } .section { padding: clamp(2.2rem, 7vw, 4rem) 0; } /* keep any inline hero paragraphs from overflowing */ p { max-width: 100%; } } /* --- phone --- */ @media (max-width: 480px) { body { font-size: 15px; line-height: 1.55; } .wrap { padding: 0 1rem; } h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; line-height: 1.12; } h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; } h3 { font-size: 1.2rem; } .eyebrow { font-size: 0.66rem; letter-spacing: 0.16em; } /* topbar: shrink brand text so logo + CTA fit one row */ .aaa-topbar { padding: 0.7rem 1rem; gap: 0.5rem; } .aaa-logo .name { font-size: 0.9rem; } .aaa-logo .name small { font-size: 0.55rem; letter-spacing: 0.16em; } .aaa-logo .mark { width: 30px; height: 30px; } .aaa-topbar .btn { padding: 0.5rem 0.9rem !important; font-size: 0.78rem !important; } /* full-width primary CTAs feel better on phones */ .btn { font-size: 0.9rem; } /* cards / panels: trim padding so content isn't cramped */ .card { padding: 1.25rem; } .panel { border-radius: 14px; } /* footer */ .aaa-foot { padding: 2rem 1rem; font-size: 0.8rem; } } /* very narrow (small Android ~360px): stack topbar CTA under logo if needed */ @media (max-width: 360px) { .aaa-logo .name small { display: none; } } /* --- accessibility: honor reduced-motion for the heavy animations --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .float { animation: none !important; } }