/* ===================================================================== Pegalytics — Gold Fleet marketing stylesheet (Rev 7.120) Shared across pegalytics.com (/var/www/html) and the public pages of app.pegalytics.com (/var/www/pegalytics/frontend). Two byte-identical copies are deployed, one per host. Hash equality between them is asserted in the carrier and in the post-deploy gate. This file does NOT modify or extend theme-gold.css (the application overlay). The marketing site has no light theme, so no dual-scope compatibility tokens are needed here. Fonts are loaded by + preconnect in each page . No @import — see Rev 7.119 deferred note on the application overlay. ===================================================================== */ /* --------------------------------------------------------------------- 1. TOKENS Legacy names (--purple, --card, --sidebar, ...) are retained as aliases so existing page rules resolve to Gold without each rule having to be rewritten. New work should use the semantic names. --------------------------------------------------------------------- */ :root { /* -- surfaces -- */ --bg: #070A14; --bg2: #0E1425; --bg3: #121A30; --card: #121A30; /* alias of --bg3 (auth pages) */ --card2: #161E36; --sidebar: #0A0E1B; /* alias (auth pages) */ /* -- borders -- */ --border: rgba(233,185,76,0.12); --border2: rgba(233,185,76,0.22); /* -- gold accent -- */ --gold: #E9B94C; --gold-hi: #FFDC8F; --accent-rgb: 233,185,76; --accent-on: #1A1204; /* on solid gold: 10.16:1 (white would be 1.82) */ --on-green: #04201A; /* on solid green: 10.26:1 (white would be 1.67) */ /* -- legacy accent aliases, now Gold -- */ --purple: #E9B94C; --purple2: #FFDC8F; --purple3: rgba(233,185,76,0.12); --purple-bg: rgba(233,185,76,0.12); /* -- semantic status, preserved -- */ --green: #3EE2A0; --green2: rgba(62,226,160,0.12); --green-bg: rgba(62,226,160,0.12); --red: #FF5A6E; --red-bg: rgba(255,90,110,0.12); --yellow: #F2A33A; --blue: #38BDF8; --blue-bg: rgba(56,189,248,0.10); /* -- text ramp (all pass WCAG AA on every surface above) -- */ --text: #EEF1FA; /* 14.61 – 17.50 */ --text2: #A9B2CC; /* 7.80 – 9.34 */ --text3: #7C879F; /* 4.57 – 5.48 (was #50607c, 2.60–3.11, failing) */ /* -- type -- */ --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'Chakra Petch', ui-monospace, monospace; --display: 'Chakra Petch', system-ui, sans-serif; /* -- breakpoint scale (documented; media queries use the literals) -- sm 520px md 768px lg 900px xl 1100px */ } /* --------------------------------------------------------------------- 2. BASE --------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; } h1, h2, h3, h4, .display { font-family: var(--display); font-weight: 600; letter-spacing: 0.01em; } /* Skip link — first focusable element on every page */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--accent-on); padding: 10px 18px; border-radius: 0 0 8px 0; font-family: var(--display); font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* --------------------------------------------------------------------- 3. BACKGROUND EFFECTS --------------------------------------------------------------------- */ .bg-mesh { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 10% 0%, rgba(var(--accent-rgb),0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 90% 100%, rgba(62,226,160,0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 50% 50%, rgba(var(--accent-rgb),0.04) 0%, transparent 70%); } .bg-grid { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(var(--accent-rgb),0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),0.045) 1px, transparent 1px); background-size: 44px 44px; } /* --------------------------------------------------------------------- 4. NAV — shared across all pages --------------------------------------------------------------------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px; background: rgba(14,20,37,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border2); display: flex; align-items: center; padding: 0 5%; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); text-decoration: none; } .nav-logo-icon { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.08)); border: 1px solid var(--gold); box-shadow: 0 0 16px rgba(var(--accent-rgb),0.28); display: flex; align-items: center; justify-content: center; font-size: 18px; } .nav-links { display: flex; gap: 28px; margin-left: auto; list-style: none; align-items: center; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--text2); text-decoration: none; transition: color 0.15s; } .nav-links a:hover { color: var(--gold-hi); } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-back { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--text2); text-decoration: none; } .nav-back:hover { color: var(--gold-hi); } /* --------------------------------------------------------------------- 5. BUTTONS Every solid-gold surface uses --accent-on. White on gold is 1.82:1 and must never be used. --------------------------------------------------------------------- */ .btn-ghost-sm, .btn-primary-sm, .btn-hero, .btn-pricing { font-family: var(--display); cursor: pointer; text-decoration: none; transition: filter 0.15s, border-color 0.15s, background 0.15s, transform 0.15s; } .btn-ghost-sm { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; background: transparent; border: 1px solid var(--border2); color: var(--text2); } .btn-ghost-sm:hover { color: var(--gold-hi); border-color: var(--gold); } .btn-primary-sm { padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--accent-on); border: 1px solid var(--gold); box-shadow: 0 4px 16px rgba(var(--accent-rgb),0.28); } .btn-primary-sm:hover { filter: brightness(1.06); } .btn-hero { padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; border: none; display: inline-flex; align-items: center; gap: 8px; } .btn-hero-primary { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--accent-on); border: 1px solid var(--gold); box-shadow: 0 8px 32px rgba(var(--accent-rgb),0.30); } .btn-hero-primary:hover { filter: brightness(1.06); } .btn-hero-ghost { background: rgba(255,255,255,0.04); border: 1px solid var(--border2); color: var(--text2); } .btn-hero-ghost:hover { color: var(--gold-hi); border-color: var(--gold); } .btn-pricing { width: 100%; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-align: center; display: block; border: none; } .btn-pricing-outline { background: transparent; border: 1px solid var(--border2); color: var(--text2); } .btn-pricing-outline:hover { color: var(--gold-hi); border-color: var(--gold); } .btn-pricing-fill { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--accent-on); border: 1px solid var(--gold); box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.28); } .btn-pricing-fill:hover { filter: brightness(1.06); } /* --------------------------------------------------------------------- 6. SECTION RHYTHM --------------------------------------------------------------------- */ .section { position: relative; z-index: 1; padding: 100px 5%; max-width: 1200px; margin: 0 auto; } .section-label { font-family: var(--display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 14px; } .section-title { font-size: clamp(30px, 4vw, 48px); font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 16px; } .section-sub { font-size: 17px; color: var(--text2); max-width: 560px; line-height: 1.7; margin-bottom: 56px; } /* --------------------------------------------------------------------- 7. CARDS --------------------------------------------------------------------- */ .feature-card, .pricing-card, .auth-card, .panel { background: linear-gradient(180deg, var(--bg3), var(--bg2)); border: 1px solid var(--border2); border-radius: 14px; } .feature-card { padding: 28px; transition: border-color 0.2s, transform 0.2s; } .feature-card:hover { border-color: var(--gold); transform: translateY(-2px); } .feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.22); } .feature-title { font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: 8px; } .feature-desc { font-size: 14px; color: var(--text2); line-height: 1.7; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* --------------------------------------------------------------------- 8. PRICING --------------------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .pricing-card { padding: 32px; position: relative; border-radius: 16px; transition: transform 0.2s, border-color 0.2s; } .pricing-card:hover { border-color: var(--gold); transform: translateY(-2px); } .pricing-card.popular { border-color: var(--gold); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10) 0%, var(--bg3) 100%); } .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--accent-on); font-family: var(--display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 14px; border-radius: 20px; white-space: nowrap; } .pricing-name { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text2); margin-bottom: 12px; } .pricing-price { font-family: var(--display); font-size: 48px; font-weight: 700; letter-spacing: -1px; line-height: 1; margin-bottom: 4px; color: var(--gold-hi); } .pricing-price span { font-size: 24px; color: var(--text2); } .pricing-period { font-size: 13px; color: var(--text3); margin-bottom: 24px; } .pricing-features { list-style: none; margin-bottom: 24px; display: grid; gap: 9px; } .pricing-features li { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 8px; } .pricing-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; } .pricing-features li.no { color: var(--text3); } .pricing-features li.no::before { content: '·'; color: var(--text3); } /* --------------------------------------------------------------------- 9. FOOTER --------------------------------------------------------------------- */ footer { position: relative; z-index: 1; border-top: 1px solid var(--border2); padding: 40px 5%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-logo { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; } .footer-logo-icon { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(180deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.08)); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 14px; } .footer-links { display: flex; gap: 24px; flex-wrap: wrap; } .footer-links a { font-size: 13px; color: var(--text2); text-decoration: none; } .footer-links a:hover { color: var(--gold-hi); } .footer-copy { font-size: 13px; color: var(--text3); } /* --------------------------------------------------------------------- 10. AUTH PAGES — app chrome rather than marketing --------------------------------------------------------------------- */ .auth-card { padding: 32px; } .form-label { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; display: block; } .form-input { width: 100%; padding: 11px 14px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--border2); color: var(--text); font-family: var(--font); font-size: 14px; } .form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); } .form-input::placeholder { color: var(--text3); } /* --------------------------------------------------------------------- 11. RESPONSIVE — one scale Full-height rules declare 100vh then 100dvh so browsers without dvh support keep the first value (Rev 7.120 boundary §8.2.10). --------------------------------------------------------------------- */ .hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 5% 80px; } @media (max-width: 900px) { .features-grid, .pricing-grid { grid-template-columns: 1fr 1fr; } .section { padding: 72px 5%; } } @media (max-width: 768px) { .nav-links { gap: 18px; } footer { flex-direction: column; align-items: flex-start; } } @media (max-width: 520px) { .features-grid, .pricing-grid { grid-template-columns: 1fr; } nav { padding: 0 4%; gap: 14px; } .nav-links { display: none; } .section { padding: 56px 5%; } .hero { padding: 100px 5% 56px; } } @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; } }