/* ============================== Theme tokens (Light default) ============================== */ :root{ --bg: #f8fafc; --panel: #ffffff; --panel-2: #f1f5f9; --border: rgba(15, 23, 42, 0.08); --shadow: 0 10px 30px rgba(15, 23, 42, 0.06); --text: #0f172a; --muted: #64748b; --brand: #2563eb; --brand-soft: rgba(37, 99, 235, 0.12); --brand-soft-2: rgba(37, 99, 235, 0.08); --accent: #ff3b5c; --accent2: #ff6a3d; --accentGlow: rgba(255, 59, 92, 0.25); --good: #16a34a; --bad: #dc2626; --warn: #d97706; --btn-bg: #ffffff; --btn-border: rgba(15, 23, 42, 0.12); --table-head: #f8fafc; /* Public hero background */ --hero-bg: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); } /* ============================== Dark theme Toggle by: ============================== */ html[data-theme="dark"]{ --bg: #0b1220; --panel: #0f172a; --panel-2: #111c33; --border: rgba(148, 163, 184, 0.14); --shadow: 0 18px 60px rgba(0, 0, 0, 0.35); --text: #e5e7eb; --muted: #94a3b8; --brand: #60a5fa; --brand-soft: rgba(96, 165, 250, 0.18); --brand-soft-2: rgba(96, 165, 250, 0.12); --accent: #ff3b5c; --accent2: #ff6a3d; --accentGlow: rgba(255, 59, 92, 0.25); --good: #22c55e; --bad: #ef4444; --warn: #f59e0b; --btn-bg: rgba(255, 255, 255, 0.06); --btn-border: rgba(148, 163, 184, 0.18); --table-head: rgba(255, 255, 255, 0.04); --hero-bg: radial-gradient(1200px 700px at 20% 10%, rgba(96,165,250,0.18), transparent 60%), radial-gradient(900px 600px at 80% 30%, rgba(34,197,94,0.10), transparent 55%), linear-gradient(180deg, #07101f 0%, #0b1220 70%); } /* ============================== Global page surface ============================== */ html, body{ height: 100%; } body{ margin: 0; background: var(--bg); color: var(--text); } /* Smooth-ish transitions (not on EVERYTHING) */ body, .nav, .card, .btn, .pill, .footer, .hero-card, .hiw-card, .hiw-steps, .hiw-stepbtn{ transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } body.has-sticky-header{ padding-top: var(--header-offset, 0px); } /* Layout helpers */ .container{ max-width: 1200px; margin: 0 auto; padding: 0 22px; } a{ color: inherit; } /* ============================== Global top promo banner ============================== */ .promo-top-banner{ width: 100%; min-height: 40px; position: fixed; top: 0; left: 0; z-index: 10000; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(7, 16, 31, 0.98), rgba(11, 18, 32, 0.98) 55%, rgba(9, 31, 56, 0.95)), radial-gradient(1000px 220px at 50% 50%, rgba(255, 59, 92, 0.12), rgba(255, 59, 92, 0.04) 55%, transparent 72%), radial-gradient(500px 180px at 80% 0%, rgba(96, 165, 250, 0.16), transparent 65%); } .promo-top-banner__inner{ min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; } .promo-top-banner__inner::before{ content: ""; position: absolute; inset: 0; border-radius: 999px; background: radial-gradient(70% 160% at 50% 50%, rgba(255, 59, 92, 0.16), rgba(255, 59, 92, 0.06) 50%, transparent 72%); filter: blur(14px); pointer-events: none; z-index: 0; } .promo-top-banner__pill{ display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #ffe4e7; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 1px solid rgba(255, 59, 92, 0.5); box-shadow: 0 0 18px var(--accentGlow); white-space: nowrap; } .promo-top-banner__text{ margin: 0; flex: 0 1 auto; min-width: 0; font-size: 14px; color: rgba(255, 255, 255, 0.88); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 12px rgba(255, 59, 92, 0.18); position: relative; z-index: 1; } .promo-top-banner__pill, .promo-top-banner__cta{ position: relative; z-index: 1; } .promo-top-banner__highlight{ color: #ff5a6d; text-shadow: 0 0 12px rgba(255, 59, 92, 0.35); } .promo-top-banner__cta{ font-size: 14px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; transition: color 180ms ease, text-decoration-color 180ms ease; } .promo-top-banner__cta:hover{ text-decoration: underline; color: var(--accent); text-decoration-color: var(--accent); } @media (max-width: 760px){ .promo-top-banner__pill{ display: none; } .promo-top-banner__text, .promo-top-banner__cta{ font-size: 13px; } .promo-top-banner__inner{ gap: 10px; } } /* ============================== Buttons (shared) ============================== */ .btn{ border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .btn:hover{ box-shadow: var(--shadow); } .btn.primary{ background: var(--brand); border-color: var(--brand); color: #fff; } /* Theme toggle icon button */ #themeToggle{ min-width: 44px; } .theme-icon-toggle{ --toggle-width: 62px; --toggle-height: 36px; --thumb-size: 28px; width: var(--toggle-width); min-width: var(--toggle-width) !important; height: var(--toggle-height); padding: 0 !important; border-radius: 999px !important; overflow: hidden; position: relative; } .theme-icon-toggle .theme-toggle-track{ position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #f59e0b, #fbbf24); } .theme-icon-toggle .theme-toggle-thumb{ position: absolute; top: 4px; left: 4px; width: var(--thumb-size); height: var(--thumb-size); border-radius: 999px; background: rgba(255,255,255,.92); display: block; transform: translateX(0); transition: transform 260ms cubic-bezier(.22,.61,.36,1), background-color 200ms ease; } .theme-icon-toggle.is-dark .theme-toggle-track{ background: linear-gradient(135deg, #0f172a, #1d4ed8); } .theme-icon-toggle.is-dark .theme-toggle-thumb{ transform: translateX(26px); background: rgba(15,23,42,.92); } .theme-icon-toggle .theme-toggle-icon{ position: absolute; inset: 7px; width: 14px; height: 14px; transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,.61,.36,1), color 180ms ease; } .theme-icon-toggle .theme-toggle-icon.sun{ color: #f59e0b; opacity: 1; transform: scale(1) rotate(0deg); } .theme-icon-toggle .theme-toggle-icon.moon{ color: #93c5fd; opacity: 0; transform: scale(.75) rotate(-25deg); } .theme-icon-toggle.is-dark .theme-toggle-icon.sun{ opacity: 0; transform: scale(.75) rotate(25deg); } .theme-icon-toggle.is-dark .theme-toggle-icon.moon{ opacity: 1; transform: scale(1) rotate(0deg); } /* ============================== Simple NAV (legacy pages) ============================== */ .nav{ position: fixed; top: var(--promo-h, 0px); left: 0; width: 100%; z-index: 60; background: rgba(248, 250, 252, 0.86); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html[data-theme="dark"] .nav{ background: rgba(11, 18, 32, 0.72); } .nav-inner{ display: flex; align-items: center; justify-content: space-between; padding: 14px 0; } .brand strong{ display:block; font-size:14px; color: var(--text); } .brand span{ display:block; font-size:12px; color: var(--muted); } .nav-links{ display:flex; align-items:center; gap:10px; } .nav-links a{ font-size: 13px; color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 12px; } .nav-links a:hover{ background: var(--brand-soft-2); color: var(--text); } /* ============================== HERO (legacy pages) ============================== */ .hero{ background: var(--hero-bg); padding: 48px 0 30px; } .hero-grid{ display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 18px; align-items: start; } @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } } .h-title{ font-size: 54px; line-height: 1.02; margin: 0 0 12px 0; color: var(--text); } .h-sub{ margin: 0 0 18px 0; color: var(--muted); font-size: 15px; max-width: 52ch; } .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; } .hero-card{ background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 16px 16px; box-shadow: var(--shadow); } .hero-card h3{ margin:0 0 10px 0; font-size:14px; color: var(--text); } .pills{ display:flex; flex-wrap:wrap; gap:10px; } .pill{ border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 12px; padding: 8px 12px; border-radius: 999px; } /* ============================== SECTIONS / CARDS ============================== */ .section{ padding: 34px 0; } .section-title{ font-size: 14px; font-weight: 800; letter-spacing: 0.2px; color: var(--text); display: inline-flex; align-items: center; gap: 10px; } .section-title::before{ content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent, #ff3b5c); box-shadow: 0 0 14px var(--accentGlow, rgba(255, 59, 92, 0.25)); } .section-sub{ margin-top: 6px; font-size: 13px; color: var(--muted); } .grid-3{ margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr; } } .card{ background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px; box-shadow: var(--shadow); color: var(--text); } .card strong{ color: var(--text); } /* Challenge cards grid */ .cards-4{ margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1100px){ .cards-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 740px){ .cards-4{ grid-template-columns: 1fr; } } .challenge-card .challenge-top{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .challenge-size{ font-size: 20px; font-weight: 900; color: var(--text); } .price{ font-size: 13px; color: var(--muted); font-weight: 700; } /* Shared “rule list” rows */ .rule-list{ display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; } .rule{ display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; } .rule:first-child{ border-top: none; padding-top: 0; } .rule span:last-child{ color: var(--text); font-weight: 700; } /* Make primary actions fill cards */ .challenge-card .btn.primary{ width: 100%; } /* ============================== CHECKOUT / FORMS ============================== */ .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 14px; margin-top:12px; } @media (max-width: 920px){ .form-grid{ grid-template-columns:1fr; } } .field label{ display:block; font-size:12px; color: var(--muted); margin-bottom:6px; } .field input, .field select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--btn-border); background: var(--panel); color: var(--text); outline:none; } .field input:focus, .field select:focus{ border-color: rgba(59,130,246,.55); box-shadow: 0 0 0 3px rgba(59,130,246,.18); } /* Terms box follows theme */ .terms-box{ margin-top:12px; height:260px; overflow:auto; border-radius:14px; border:1px solid var(--btn-border); background: var(--panel); } .terms-inner{ padding:14px 14px 18px; color: var(--text); font-size:13px; line-height:1.55; } .terms-inner h4{ margin:10px 0 6px; color: var(--text); font-size:13px; } .terms-hint{ margin-top:10px; font-size:12px; color: var(--warn); opacity:.9; } /* Checkbox helpers */ .checkout-wrap{ overflow: visible; } label{ cursor:pointer; } .real-check{ position:absolute; opacity:0; width:1px; height:1px; } .check{ pointer-events:none; } label:has(.real-check:disabled){ opacity:.65; } label:has(.real-check:focus-visible) .check{ box-shadow: 0 0 0 3px rgba(59,130,246,.18); } .real-check:checked + .check{ background: rgba(59,130,246,0.35); border-color: rgba(59,130,246,0.9); box-shadow: inset 0 0 0 2px rgba(59,130,246,0.9); } .trial-blocker{ padding:10px 12px; border:1px dashed rgba(239,68,68,0.35); border-radius:12px; background: rgba(254,242,242,0.6); } .btn.disabled, .btn[disabled]{ opacity:.6; cursor:not-allowed; } /* ============================== FOOTER ============================== */ .footer{ border-top: 1px solid var(--border); color: var(--muted); padding: 22px 0; } .footer a{ color: var(--muted); text-decoration:none; } .footer a:hover{ color: var(--text); } /* ========================================================= HOW IT WORKS (HIW) — tokens-based styling Supports the newer .hiw-* page markup ========================================================= */ .hiw-hero, .hiw-section{ color: var(--text); } .hiw-sub, .hiw-desc{ color: var(--muted); } .hiw-hero-grid{ display:grid; grid-template-columns: 1.25fr 0.9fr; gap: 18px; align-items: start; } @media (max-width: 980px){ .hiw-hero-grid{ grid-template-columns: 1fr; } } .hiw-title{ font-size: 54px; line-height: 1.02; margin: 0 0 12px 0; color: var(--text); } .hiw-card, .hiw-pillbox, .hiw-cta, .hiw-tablewrap{ background: var(--panel); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); border-radius: 18px; } .hiw-pills{ display:flex; flex-wrap:wrap; gap:10px; } .hiw-pill{ background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 12px; padding: 8px 12px; border-radius: 999px; } .hiw-stepsbar{ margin-top: 16px; } .hiw-steps{ display:flex; gap:10px; padding: 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); } .hiw-stepbtn{ flex: 1 1 auto; display:flex; gap:10px; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 999px; color: var(--text); text-decoration:none; border: 1px solid transparent; } .hiw-stepbtn:hover{ border-color: var(--border); background: var(--panel-2); } .hiw-stepbtn.active{ background: var(--brand-soft); border-color: rgba(37,99,235,0.25); } .hiw-table{ width:100%; border-collapse: collapse; color: var(--text); } .hiw-table th, .hiw-table td{ border-bottom: 1px solid var(--border); padding: 10px 10px; } .hiw-table th{ color: var(--muted); font-weight: 700; text-align:left; } .hiw-faq .q{ width: 100%; text-align: left; padding: 12px 12px; font-weight: 700; color: var(--text); background: transparent; border: none; cursor: pointer; } .hiw-faq .a{ padding: 0 12px 12px; color: var(--muted); } /* Public image lightbox */ .media-lightbox{ position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 0s linear 260ms; } .media-lightbox.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 260ms ease; } .media-lightbox-image{ max-width: min(96vw, 1800px); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 14px; border: 1px solid rgba(148,163,184,0.3); box-shadow: 0 24px 80px rgba(0,0,0,0.5); background: rgba(2, 6, 23, 0.98); opacity: 0; transform: translateY(8px) scale(0.965); transition: opacity 240ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } .media-lightbox.is-open .media-lightbox-image{ opacity: 1; transform: translateY(0) scale(1); } .media-lightbox-close{ position: absolute; top: 16px; right: 16px; min-width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.36); background: rgba(2, 6, 23, 0.88); color: #e5e7eb; font-weight: 800; cursor: pointer; opacity: 0; transform: translateY(-4px) scale(0.92); transition: opacity 220ms ease, transform 260ms ease, background 160ms ease; } .media-lightbox.is-open .media-lightbox-close{ opacity: 1; transform: translateY(0) scale(1); } .media-lightbox-close:hover{ background: rgba(15, 23, 42, 0.96); } body.media-lightbox-open{ overflow: hidden; }