/* ══════════════════════════════════════════════════════════════ SOAR BASE — Universal CSS for ALL Soar products Every page loads this file. Product-specific colors, shadows, and overrides live in the brand file (soar-brand.css, wai-brand.css, or waifoa-brand.css). Created: May 28, 2026 Owner: Rachel Alexandria ══════════════════════════════════════════════════════════════ REQUIRED INCLUDES (copy into every page): Font Awesome is required on ALL pages for social media icons. Material Symbols does NOT have brand icons (LinkedIn, X, etc). Social icon class reference: LinkedIn: fa-brands fa-linkedin-in X: fa-brands fa-x-twitter Instagram: fa-brands fa-instagram Facebook: fa-brands fa-facebook-f YouTube: fa-brands fa-youtube Substack: fa-solid fa-square-rss REQUIRED JS (before ): ══════════════════════════════════════════════════════════════ */ /* ── UNIVERSAL TOKENS ── */ :root { /* Foreground */ --fg: #1a1917; --fg-on-dark: #ffffff; /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 100px; /* Tag Palette */ --tag-red-bg: #FDEBEC; --tag-red-text: #9F2F2D; --tag-blue-bg: #E1F3FE; --tag-blue-text: #1F6C9F; --tag-green-bg: #EDF3EC; --tag-green-text: #346538; --tag-yellow-bg: #FBF3DB; --tag-yellow-text: #956400; --tag-purple-bg: #EDEBF7; --tag-purple-text: #4A3B8F; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1,h2,h3,h4,h5 { font-family: 'Urbanist', sans-serif; color: var(--fg); line-height: 1.08; text-wrap: balance; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── LAYOUT ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 48px; } .section { padding: 112px 0; } /* ── EYEBROW ── */ .eyebrow { font-family: 'Urbanist', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: block; /* color set per brand file */ } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Urbanist', sans-serif; font-weight: 600; border: none; cursor: pointer; text-decoration: none; } .btn-primary { color: #fff; font-size: 15px; padding: 12px 26px; border-radius: var(--r-pill); background: var(--brand); transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 24px var(--shadow-brand-rgb, rgba(0,0,0,0.15)); } .btn-primary:active { transform: scale(0.98) translateY(0); box-shadow: none; } .btn-ghost { background: transparent; font-family: 'Outfit', sans-serif; font-size: 14px; padding: 12px 24px; border-radius: var(--r-pill); border: 1.5px solid var(--border); color: var(--fg-muted); transition: color 0.15s, border-color 0.15s; } .btn-ghost:hover { color: var(--fg); border-color: var(--fg-muted); } /* Outline — transparent default, fills solid on hover. Use on light backgrounds. For dark backgrounds, add .btn-outline-ondark. */ .btn-outline { background: transparent; color: var(--fg); font-size: 15px; padding: 14px 28px; border-radius: var(--r-pill); border: 1.5px solid var(--border); transition: all 0.2s ease; } .btn-outline:hover { background: var(--fg); color: #fff; border-color: var(--fg); transform: translateY(-2px) scale(1.02); } .btn-outline:active { transform: scale(0.98) translateY(0); } /* On dark backgrounds: fills white, text goes dark */ .btn-outline-ondark { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2); } .btn-outline-ondark:hover { background: #fff; color: var(--fg); border-color: #fff; } /* ── NAV ── */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(16px) saturate(1.2); height: 64px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; /* background and border-bottom set per brand */ } .nav-logo { display: flex; align-items: center; gap: 8px; } .nav-logo svg { height: 28px; width: auto; } .nav-logo-text { font-family: 'Urbanist', sans-serif; font-size: 15px; font-weight: 800; } .nav-links { display: flex; list-style: none; gap: 36px; align-items: center; } .nav-links a { font-family: 'Outfit', sans-serif; font-size: 14px; transition: color 0.15s; } .nav-cta { color: #fff; padding: 9px 22px; border-radius: var(--r-pill); font-family: 'Urbanist', sans-serif; font-size: 13px; font-weight: 600; background: var(--brand); transition: transform 0.15s, box-shadow 0.15s; } .nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-brand); } .nav-cta:active { transform: scale(0.98); } /* ── CARDS ── */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-1px); box-shadow: var(--shadow-brand); } .interactive-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .interactive-card:hover { border-color: var(--brand); box-shadow: var(--shadow-brand); transform: translateY(-1px); } .interactive-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint), var(--shadow-brand); } .interactive-card:active { transform: scale(0.98); } /* ── FAQ ACCORDION ── */ .faq-item { border-bottom: 1px solid var(--border); } .faq-trigger { font-family: 'Urbanist', sans-serif; font-size: 17px; font-weight: 600; color: var(--fg); width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; background: none; border: none; text-align: left; } .faq-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color: var(--brand); background: var(--brand-tint); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; flex-shrink: 0; } .faq-item.open .faq-icon { background: var(--brand); color: #fff; transform: rotate(45deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-body-inner { font-size: 15px; color: var(--fg-muted); line-height: 1.7; max-width: 640px; padding-bottom: 24px; } /* ── FADE-UP & STAGGERED REVEALS ── */ .fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up[style*="--index"] { transition-delay: calc(var(--index) * 80ms); } /* ── MATERIAL SYMBOLS ── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* ── TAGS ── */ .tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--r-pill); font-family: 'Urbanist', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.6; } .tag-red { background: var(--tag-red-bg); color: var(--tag-red-text); } .tag-blue { background: var(--tag-blue-bg); color: var(--tag-blue-text); } .tag-green { background: var(--tag-green-bg); color: var(--tag-green-text); } .tag-yellow { background: var(--tag-yellow-bg); color: var(--tag-yellow-text); } .tag-purple { background: var(--tag-purple-bg); color: var(--tag-purple-text); } /* ── CONTENT-PAGE STRUCTURE ── */ .content-divider { border: none; border-top: 1px solid var(--border); margin: 48px 0; } .content-list-item { padding: 24px 0; border-bottom: 1px solid var(--border); } .content-list-item:last-child { border-bottom: none; } .accent-block { padding: 16px 0 16px 20px; border-left: 3px solid var(--brand); } .content-body { max-width: 720px; margin: 0 auto; } /* ── MOCKUP CHROME ── */ .mockup-window { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .mockup-titlebar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #FAFAF9; border-bottom: 1px solid var(--border); } .mockup-dot { width: 12px; height: 12px; border-radius: 50%; background: #E0DFDA; } /* ── FOOTER (universal structure) ── */ /* Privacy → https://soar.com/privacy/ Terms → https://soar.com/terms/ All footer links: target="_blank" rel="noopener" "Powered by SOAR" line at bottom */ /* ── SOCIAL ICONS ── */ .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 16px; color: inherit; opacity: 0.5; transition: opacity 0.15s ease; } .social-icon:hover { opacity: 1; } /* ── BRAND HIGHLIGHT (colored words in copy) ── */ .brand-highlight { color: var(--brand); font-weight: 500; } /* ── SECTION HEADING ACCENT ── */ .section-head h2 span { color: var(--brand); } /* ── BLOCKQUOTE / PULL-QUOTE ── */ blockquote, .pull-quote { border-left: 3px solid var(--brand); padding-left: 24px; margin: 24px 0; } /* ── DARK SECTION TEXT RULES ── */ .section-dark { background: var(--bg-dark); color: var(--fg-on-dark); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--fg-on-dark); } .section-dark p, .section-dark li, .section-dark span { font-weight: 400; /* 400 minimum on dark — 300 disappears */ } .section-dark-alt { background: var(--bg-dark-alt); color: var(--fg-on-dark); } .section-dark-alt h1, .section-dark-alt h2, .section-dark-alt h3, .section-dark-alt h4 { color: var(--fg-on-dark); } .section-dark-alt p, .section-dark-alt li, .section-dark-alt span { font-weight: 400; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: 72px 0; } .nav { padding: 0 16px; } .nav-links { display: none; } } /* ══════════════════════════════════════════════════════════════ SECTION RHYTHM RULE (design rule, not CSS enforcement) Every page alternates across 4 registers + 1 accent. Never two consecutive sections in the same register. Register 1: LIGHT — var(--bg) Register 2: ALT — var(--bg-alt) Register 3: DARK — var(--bg-dark) Register 4: DARK ALT — var(--bg-dark-alt) (brand purple/violet) ACCENT (max 1x/page) — var(--bg-accent) All register values are set per brand file. ══════════════════════════════════════════════════════════════ */