/* ═══════════════════════════════════════════════════════════ BLASTYBIZ — GLOBAL STYLE SHEET Organized by component. Start here for all new styling. ═══════════════════════════════════════════════════════════ */ /* ── HELPERS ───────────────────────────────────────────────── */ img { margin: 0; } .hidden { display: none; } .center { text-align: center; margin-left: auto; margin-right: auto; } .img-fill { width: 100%; height: auto; display: block; object-fit: contain; } .text--green { color: var(--green); } .text--lime { color: var(--green-lime); } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── SPACING UTILITIES ────────────────────────────────────────── */ .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 4px; } .mb-5 { margin-bottom: 5px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mb-28 { margin-bottom: 28px; } .mt-2 { margin-top: 2px; } .mt-3 { margin-top: 3px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } /* ── TYPOGRAPHY UTILITIES ─────────────────────────────────────── */ .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .text-xs { font-size: 12px; } .text-sm { font-size: 13px; } .text-base { font-size: 14px; } .lh-14 { line-height: 1.4; } .lh-16 { line-height: 1.6; } .icon-md { font-size: 18px; } .icon-lg { font-size: 20px; } .text-center { text-align: center; } /* ── ROW / FLEX UTILITIES ─────────────────────────────────────── */ /* .row = section content wrapper (block). Use it to group a heading + body copy before a content grid. This is the only job .row does. For inline icon+text or input+button pairs, use .flex-row instead. */ .row { display: block; width: 100%; } .flex-row { display: flex; align-items: center; gap: 8px; } /* 2:1 column split — left col gets 2 parts, right col gets 1 part */ .col-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); align-items: stretch; } .col-2-1 > * { min-width: 0; } @media (max-width: 479px) { .col-2-1 { grid-template-columns: 1fr; } } .col-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); align-items: start; } .col-1-2 > * { min-width: 0; } @media (max-width: 479px) { .col-1-2 { grid-template-columns: 1fr; } } .col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: start; } .col-3 > * { min-width: 0; } @media (max-width: 479px) { .col-3 { grid-template-columns: repeat(3, 1fr); } } /* Named column helpers — used inside .col-2-1 and similar grid wrappers */ .col-left { min-width: 0; } .col-right { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .card-fill { flex: 1; display: flex; flex-direction: column; justify-content: center; } .card-title-btn { width: 100%; background: none; border: none; cursor: pointer; padding: 0; justify-content: space-between; margin-bottom: 8px; } /* Whole-card tap target — use alongside onclick on the card div */ .card-tap { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .card-tap:hover { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); } .card-tap:active { transform: scale(0.985); box-shadow: 0 0 0 2px var(--green); } .img-cover { width: 100%; border-radius: 12px; display: block; flex: 1; object-fit: cover; object-position: center; } /* 50/50 two-column grid */ .col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; } .col-2 > * { min-width: 0; } @media (max-width: 479px) { .col-2 { grid-template-columns: 1fr; } } /* Full-width single column */ .col-full { display: block; width: 100%; } /* Responsive visibility */ @media (max-width: 479px) { .hide-mobile { display: none !important; } } /* .row-sb has NO gap (space-between only) — used on Home page heading/CTA pairs where gap is unwanted. .flex-between (~line 458) adds gap:12px — prefer it when items need spacing in addition to space-between. */ .row-sb { display: flex; align-items: center; justify-content: space-between; } .row-base-sb { display: flex; align-items: baseline; justify-content: space-between; } .shrink-0 { flex-shrink: 0; } .wrap { flex-wrap: wrap; } .link-green { color: var(--green); } /* ── COLOUR UTILITIES ─────────────────────────────────────────── */ /* .text-* (verbose, self-documenting) */ .text-danger { color: var(--danger); } .text-light { color: var(--light); } .text-green { color: var(--green); } .text-silver { color: var(--silver); } .text-muted { color: var(--muted); } .text-blue { color: var(--blue); } /* Short aliases used across app/admin pages */ .accent { color: var(--green); } .danger { color: var(--danger); } .silver { color: var(--silver); } .blue { color: var(--blue); } .money { color: var(--green); } /* Link helpers */ .link-blue { color: var(--blue); font-weight: 600; } .regen-loading { opacity: 0.4; } /* ── LAYOUT HELPERS ───────────────────────────────────────────── */ .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; } .actions { display: flex; flex-wrap: wrap; gap: 6px; } /* ── BARE COLOUR ALIASES (used in admin table cells without text- prefix) ── */ .muted { color: var(--muted); } /* ── ADDITIONAL TEXT / DECORATION UTILITIES ──────────────────── */ .text-warn { color: var(--warn); } .no-underline { text-decoration: none; } .text-cap { text-transform: capitalize; } /* ── BREADCRUMB — public info pages (About, Contact, Privacy, Terms) ── */ .breadcrumb { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #999; margin-bottom: 12px; letter-spacing: 0; } .breadcrumb a { color: #999; text-decoration: none; transition: color 0.15s; } .breadcrumb a:hover { color: #ddd; } .breadcrumb .bc-sep { color: #666; margin: 0 1px; } .breadcrumb .bc-current { color: #7dde7d; font-weight: 500; } /* ── DESIGN TOKENS ─────────────────────────────────────────── */ :root { --bg: #000000; /* page background — change this one value */ --h1-color: #ffffff; --h2-color: #ffffff; --h3-color: #ffffff; --h4-color: #ffffff; --h5-color: #ffffff; --h6-color: #ffffff; --green: #00c853; --green-hover: #00e676; --green-rgb: 0, 200, 83; --green2: #00B04A; --green-lime: #AAFC08; --dark: #070D07; --light: #EEF7EE; --silver: #7AB87A; --muted: #587058; --card: #0D160D; --border: #1E2E1E; --gap-md: 12px; --gap-lg: 16px; --gutter: 1rem; --v-gutter: 8%; --section-v: 60px; --max-w: 1200px; /* Semantic colour tokens — referenced site-wide */ --danger: #ff4444; /* error / destructive */ --warn: #ffa726; /* warning / caution */ --blue: #54a8ff; /* info / link */ --panel: #0a1a0a; /* subtle surface, admin + app pages */ --soft: #0d160d; /* alias of --card, listing-preview */ /* Header clearance — single source of truth. All padding-top on .main AND sticky top values must use var(--main-offset). Mobile default: nav-row 4px+46px+4px = 54px + 1px border = 55px exactly. No breathing room built in — content pages add their own section padding. JS overrides this on load anyway. */ --main-offset: 55px; --badge-bar-h: 36px; /* home-page only badge bar height */ } @media (min-width: 600px) { :root { --gutter: 3rem; --section-v: 80px; } } @media (min-width: 768px) { :root { --main-offset: 77px; } } /* desktop: nav-row 76px + 1px border */ @media (min-width: 1100px) { :root { --section-v: 100px; } } html, body { background-color: var(--bg); color: var(--light); overflow-x: hidden; margin: 0; padding: 0; line-height: 1.6; letter-spacing: 0.015em; } html { scroll-behavior: smooth; color-scheme: dark; } main.home { max-width: 100vw; overflow-x: hidden; } /* Images never bust out of their containers */ .home img { max-width: 100%; height: auto; } /* Grid children always stay inside their tracks */ .home [class*="layout__"] > * { min-width: 0; } /* ── TYPOGRAPHY ────────────────────────────────────────────── */ .home h1 { font-family: 'Bebas Neue', sans-serif; margin: 0 0 0.6em; line-height: 1.15; color: var(--h1-color); } h2 { margin: 0.3rem 0; } .home h2 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 1.6; font-weight: 300; color: var(--h2-color); } .home h2 span { color: var(--green-lime); } .home h3 { margin: 1em 0 0.5em; line-height: 1.25; color: var(--h3-color); } .home h4 { margin: 0.85em 0 0.45em; line-height: 1.3; color: var(--h4-color); } .home h1:first-child, .home h2:first-child, .home h3:first-child, .home h4:first-child { margin-top: 0; } .home p { all: revert; color: var(--light); } /* ── FORM ELEMENT DEFAULTS ────────────────────────────────────── Bare element defaults so every page gets consistent form styling without repeating rules. Page-specific contexts can override. ─────────────────────────────────────────────────────────── */ label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--silver); margin-bottom: 7px; } input, textarea, select { width: 100%; min-width: 0; background: var(--dark); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; color: var(--light); font-family: 'DM Sans', sans-serif; font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; box-sizing: border-box; } @media (min-width: 600px) { input, textarea, select { max-width: 560px; min-width: 160px; } } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,200,83,0.1); } textarea { resize: vertical; min-height: 90px; } select option { background: var(--dark); } /* ═══════════════════════════════════════════════════════════ MENU / SITE NAVIGATION All header, nav bar, hamburger, mobile menu, badge bar, and auth-state visibility rules live here and nowhere else. ═══════════════════════════════════════════════════════════ */ /* Container */ .header { position: relative; z-index: 200; background: #000; display: flex; flex-direction: column; align-items: stretch; border-bottom: 1px solid rgba(var(--green-rgb), 0.18); } /* Nav row — one flex row, logo left, nav right */ .header__nav-row { display: flex; align-items: center; width: 100%; box-sizing: border-box; padding: 6px 40px; } /* Logo — anchor takes its natural width */ .header__logo { flex: 0 0 auto; display: flex; align-items: center; text-decoration: none; color: inherit; overflow: hidden; min-width: 0; } .header__logo-icon { height: 40px; width: 40px; flex-shrink: 0; object-fit: contain; object-position: left center; display: block; position: relative; z-index: 1; } .header__logo-brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; margin-left: 1px; min-width: 0; position: relative; z-index: 2; } .header__logo-wordmark { height: 18px; width: auto; display: block; } .header__logo-tagline { height: 10px; width: auto; display: block; margin-top: 2px; padding: 0; } /* Nav — pushed to the right via margin-left: auto */ .header__nav { margin-left: auto; display: flex; align-items: center; gap: 22px; } .header__nav-link { color: #b0b8c1; font-size: 13px; font-weight: 500; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; transition: color 0.18s; } .header__nav-link:hover { color: #fff; } .header__nav-cta { background: var(--green); color: #000; font-size: 13px; font-weight: 700; text-decoration: none; padding: 7px 16px; border-radius: 6px; white-space: nowrap; transition: background 0.18s; } .header__nav-cta:hover { background: var(--green-hover); } /* Hamburger — hidden on desktop, visible on mobile/tablet */ .header__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .header__hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; } /* Badge bar — home page only */ .header__badge-bar { height: 36px; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); border-top: 1px solid rgba(var(--green-rgb), 0.18); width: 100%; } body.home-page .header__badge-bar { display: flex; } .header__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--green-rgb), 0.12); border: 1px solid rgba(var(--green-rgb), 0.35); color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 20px; } /* ── STAGE BACKBONE ────────────────────────────────────────────────── body.stage : universal surface — vertical structure lives here. .row inside a stage page carries max-width + horizontal gutters. ─────────────────────────────────────────────────────────────────── */ .stage { width: 92%; margin-left: auto; margin-right: auto; } .stage .row { max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-top: 8px; padding-bottom: 8px; } /* Auth state — JS adds/removes body.logged-in */ #header__nav-logout { display: none; } #header__mobile-login { display: none; } #header__mobile-logout { display: none; background: none; border: none; color: #b0b8c1; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; width: 100%; padding: 0; } body.logged-in #header__nav-login { display: none; } @media (min-width: 768px) { body.logged-in #header__nav-logout { display: inline; } body.logged-in .header__nav-app { display: inline-flex; } } body.logged-in .header__mobile-menu .header__nav-app { display: block; } body.logged-in #header__mobile-logout { display: block; } .header__mobile-menu #header__mobile-login { display: block; } body.logged-in .header__mobile-menu #header__mobile-login { display: none; } /* Mobile slide-down menu */ .header__mobile-menu { display: none; position: fixed; top: var(--header-h, 56px); left: 0; right: 0; background: rgba(7,13,7,0.98); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(var(--green-rgb), 0.18); z-index: 99; padding: 16px 24px 24px; flex-direction: column; gap: 4px; } .header__mobile-menu.open { display: flex; } .header__mobile-link { display: block; padding: 14px 4px; font-size: 17px; font-weight: 500; color: #b0b8c1; text-decoration: none; border-bottom: 1px solid rgba(var(--green-rgb), 0.1); transition: color 0.2s; background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; text-align: left; width: 100%; } .header__mobile-link:last-child { border-bottom: none; } .header__mobile-link:hover { color: #fff; } /* App-only nav items: hidden by default, shown when logged in. MUST come after .header__mobile-link { display:block } or that rule wins. */ .header__nav-app { display: none; } /* ── HEADER — Mobile (≤767px) ───────────────────────────── */ @media (max-width: 767px) { .header__nav-row { padding: 4px 16px; } .header__logo-icon { height: 46px; width: 46px; } .header__logo-wordmark { height: 14px; } .header__logo-tagline { height: 8px; } .header__nav-link, .header__nav-cta { display: none; } .header__hamburger { display: flex; margin-right: 0; padding: 8px; } .header__badge-bar { display: none !important; } } /* ── HEADER — Desktop (768px+) ─────────────────────────── */ @media (min-width: 768px) { .header__hamburger { display: none; } } /* ── HEADER — Tablet (768px–1099px): shrink gap + font, stay desktop layout ── */ @media (min-width: 768px) and (max-width: 1099px) { .header__nav-row { padding: 6px 20px; } .header__nav { gap: 10px; } .header__nav-link { font-size: 11px; } .header__nav-cta { font-size: 11px; padding: 6px 12px; } } /* ── HEADER — "Learn" dropdown ─────────────────────────── */ .header__nav-dropdown { position: relative; } .header__nav-dropdown-btn { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .header__nav-dropdown-caret { font-size: 10px; transition: transform 0.2s; } .header__nav-dropdown:hover .header__nav-dropdown-caret, .header__nav-dropdown:focus-within .header__nav-dropdown-caret { transform: rotate(180deg); } .header__nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: rgba(7,13,7,0.98); border: 1px solid rgba(var(--green-rgb),0.2); border-radius: 10px; padding: 8px 0; min-width: 160px; backdrop-filter: blur(16px); z-index: 300; flex-direction: column; } .header__nav-dropdown:hover .header__nav-dropdown-menu, .header__nav-dropdown:focus-within .header__nav-dropdown-menu { display: flex; } .header__nav-dropdown-item { display: block; padding: 10px 18px; font-size: 13px; font-weight: 500; color: #b0b8c1; text-decoration: none; white-space: nowrap; transition: color 0.15s, background 0.15s; } .header__nav-dropdown-item:hover { color: #fff; background: rgba(var(--green-rgb),0.08); } /* ── HEADER — Connected platform bar ───────────────────── */ .header__platform-bar { display: none; align-items: center; gap: 8px; padding: 5px 40px; border-top: 1px solid rgba(var(--green-rgb), 0.1); flex-wrap: wrap; background: rgba(0,0,0,0.4); } .header__platform-bar.has-platforms { display: flex; } .header__platform-bar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); white-space: nowrap; margin-right: 4px; } .header__platform-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(var(--green-rgb), 0.08); border: 1px solid rgba(var(--green-rgb), 0.25); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: var(--green); white-space: nowrap; text-decoration: none; } .header__platform-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; } @media (max-width: 767px) { .header__platform-bar { padding: 5px 16px; } } /* ═══════════════════════════════════════════════════════════ END MENU / SITE NAVIGATION ═══════════════════════════════════════════════════════════ */ /* ── LAYOUT ────────────────────────────────────────────────── */ main.home { width: 100%; } @media (max-width: 599px) { .main-inner { padding-top: 5px; } } /* ── LAYOUT PRIMITIVES ─────────────────────────────────────────── Canonical grid utilities. Use .layout__split* in new markup. Old aliases (.split / .split-3 / .split-4 / .two-col) are kept until existing markup is migrated — values are tokenized to match. ─────────────────────────────────────────────────────────── */ .layout__split { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } @media (min-width: 600px) { .layout__split { grid-template-columns: 1fr 1fr; } } .layout__split-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } .layout__split-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); margin-bottom: var(--gap-lg); } .layout__split-wide{ display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } .layout__split-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } .layout__split-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } /* Grid items default to min-width:auto which lets content overflow its track */ .layout__split-3 > *, .layout__split-4 > *, .layout__split-wide > *, .layout__split-2-1 > *, .layout__split-1-2 > * { min-width: 0; } @media (max-width: 599px) { .layout__split-3, .layout__split-4, .layout__split-wide, .layout__split-2-1, .layout__split-1-2 { grid-template-columns: 1fr; } } /* Wide-page grid splits (1180px max-width context) */ .layout__split-lp-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; margin-bottom: 16px; } .layout__split-lp-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 16px; } @media (max-width: 900px) { .layout__split-lp-hero, .layout__split-lp-grid { grid-template-columns: 1fr; } } /* Flex helpers — replace one-off inline flex rules */ .flex-row { display: flex; align-items: center; gap: 12px; } .flex-col { display: flex; flex-direction: column; gap: 10px; } /* .flex-between includes gap:12px; .row-sb does not — see note above on .row-sb */ .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .flex-wrap { display: flex; flex-wrap: wrap; gap: 10px; } .flex-1 { flex: 1; min-width: 0; } /* Button flex helpers */ .btn-flex-130 { flex: 1; min-width: 130px; } .btn-flex-100 { flex: 1; min-width: 100px; } /* .section-mt — semantic alias for mt-16; kept so HTML needn't change */ .section-mt { margin-top: 16px; } /* Image column — hidden on mobile, two stacked rows on desktop */ .hero-img-col { display: none; } @media (min-width: 600px) { .hero-img-col { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 20px; } .hero-blast-img { width: 100%; height: auto; display: block; max-height: 280px; object-fit: contain; } } /* ── BUTTONS ───────────────────────────────────────────────── */ /* ── MARKETING BUTTONS — Home page hero ONLY ────────────────── Intentionally differ from the app button system (.btn / .btn--*): larger sizing, marketing-specific spacing, display-context aware. Do NOT use in app pages — use .btn.btn--primary there instead. ──────────────────────────────────────────────────────────── */ /* .btn.btn__primary has higher specificity to beat the .btn base (transparent bg) when both classes appear on the same element — e.g. class="btn btn__primary" */ .btn__primary, .btn.btn__primary { background: linear-gradient(135deg, var(--green) 0%, var(--green-lime) 100%); color: var(--dark); border-color: transparent; font-size: 16px; font-weight: 700; padding: 16px 36px; margin-top: 10px; margin-bottom: 10px; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s, filter 0.25s; box-shadow: 0 4px 20px rgba(var(--green-rgb),0.4); letter-spacing: 0.03em; } .btn__primary:hover, .btn.btn__primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--green-rgb),0.55); filter: brightness(1.07); } .btn__primary:active, .btn.btn__primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(var(--green-rgb),0.3); } /* Hero-specific: primary button constrained and centred */ .hero-actions .btn__primary { align-self: center; } /* Ghost/scroll-link variant — "How it works" on hero */ /* .btn.btn__ghost has higher specificity to beat .btn's color: var(--light) */ .btn__ghost, .btn.btn__ghost { color: var(--silver); font-size: 14px; font-weight: 500; gap: 6px; cursor: pointer; transition: color 0.2s; } .btn__ghost:hover, .btn.btn__ghost:hover { color: var(--light); } /* ── HOME ──────────────────────────────────────────────────── */ .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: fadeUp 0.6s 0.3s ease both; } @media (max-width: 767px) { .hero-actions { width: 100%; } .hero-actions .btn__primary, .hero-actions .btn.btn__primary, .hero-actions .btn__ghost, .hero-actions .btn.btn__ghost { width: 100%; justify-content: center; box-sizing: border-box; } } .home { } /* Hero text column — left grid cell, no styles yet */ .hero-text { min-width: 0; } /* Hero headline */ .hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 6vw, 62px); line-height: 0.95; letter-spacing: 2px; color: var(--light); margin: 0 0 1rem 0; text-align: center; animation: fadeUp 0.6s 0.1s ease both; } .hero h1 span { color: var(--green); display: block; } /* Hero — full-width centered section */ .hero-glow { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--green-rgb), 0.08) 0%, transparent 70%); pointer-events: none; } .hero { padding: 0 0 40px; position: relative; overflow: hidden; } /* ── PLATFORMS PAGE ────────────────────────────────────────── */ .plat-hero { padding: 52px 0 36px; } .plat-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px,5.5vw,66px); line-height: 1.05; color: #fff; margin: 0 0 10px; } .plat-hero h1 span { color: var(--green); } .plat-kw { font-size: 16px; color: var(--muted); margin: 0 0 18px; font-weight: 400; } .plat-lead { font-size: 18px; line-height: 1.75; color: var(--light); max-width: 680px; margin-bottom: 0; } .plat-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 22px; } .plat-badge.auto { background: rgba(57,255,20,.15); color: var(--green); border: 1px solid rgba(57,255,20,.3); } .plat-badge.manual { background: rgba(255,255,255,.07); color: #bbb; border: 1px solid rgba(255,255,255,.15); } .plat-body { max-width: 740px; margin: 0 auto; } .plat-section { padding: 4px 0; } .plat-body h2 { font-family: 'Bebas Neue', sans-serif; font-size: 34px; color: #fff; margin: 48px 0 16px; } .plat-body h2 span { color: var(--green); } .plat-body p { font-size: 16px; line-height: 1.8; color: var(--text, #ccc); margin: 0 0 16px; } .plat-snapshot { list-style: none; padding: 0; margin: 0 0 8px; } .plat-snapshot li { font-size: 15px; line-height: 1.7; color: var(--text, #ccc); padding: 10px 0 10px 20px; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; } .plat-snapshot li:last-child { border-bottom: none; } .plat-snapshot li::before { content: "→"; position: absolute; left: 0; color: var(--green); font-weight: 700; } .plat-look-list { list-style: none; padding: 0; margin: 0 0 8px; } .plat-look-list li { font-size: 15px; line-height: 1.7; color: var(--text, #ccc); padding: 8px 0 8px 24px; position: relative; } .plat-look-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; } .plat-sample { background: rgba(255,255,255,.04); border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; padding: 18px 20px; margin: 24px 0; font-size: 16px; font-style: italic; color: var(--light); line-height: 1.7; } .plat-sample-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .plat-workflow { background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.15); border-radius: 12px; padding: 20px 24px; margin: 32px 0; } .plat-workflow p { margin: 0; font-size: 15px; color: var(--light); } .plat-manual-steps { background: rgba(255,255,255,.04); border-radius: 10px; padding: 14px 18px; margin-top: 12px; font-size: 13px; color: var(--muted); } .plat-plan-close { font-size: 15px; color: var(--muted); margin-top: 20px; font-style: italic; } .plat-memory-box { background: rgba(57,255,20,.04); border: 1px solid rgba(57,255,20,.15); border-radius: 16px; padding: 32px; } .plat-memory-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--green); margin: 0 0 6px; } .plat-memory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } @media (max-width: 600px) { .plat-memory-grid { grid-template-columns: 1fr; } } .plat-memory-card { background: rgba(255,255,255,.04); border-radius: 12px; padding: 18px 20px; } .plat-memory-card-title { font-weight: 700; color: #fff; font-size: 14px; margin-bottom: 8px; } .plat-plan-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 24px; } @media (max-width: 640px) { .plat-plan-grid { grid-template-columns: 1fr; } } .plat-plan-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 20px; } .plat-plan-card--featured { background: rgba(57,255,20,.06); border-color: rgba(57,255,20,.3); } .plat-plan-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #fff; margin-bottom: 8px; } .plat-plan-card p { font-size: 14px; color: var(--text, #ccc); margin: 0 0 14px; } .plat-plan-link { font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none; } .plat-plan-link:hover { text-decoration: underline; } .plat-cta-box { background: rgba(57,255,20,.06); border: 1px solid rgba(57,255,20,.2); border-radius: 16px; padding: 40px 36px; margin: 48px 0 24px; text-align: center; } .plat-cta-box h2 { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: #fff; margin: 0 0 14px; } .plat-cta-box h2 span { color: var(--green); } .plat-cta-box p { font-size: 16px; color: var(--text, #ccc); margin: 0 0 24px; max-width: 560px; margin-left: auto; margin-right: auto; } .plat-hub-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; } .plat-hub-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.12); color: var(--light); background: rgba(255,255,255,.04); transition: border-color .15s; } .plat-hub-pill:hover { border-color: var(--green); color: #fff; } .plat-hub-pill.auto { border-color: rgba(57,255,20,.3); color: var(--green); } /* ── PLATFORMS HUB GRID (BlastyBiz-Platforms.html) ─────────── */ .plat-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; } .plat-hub-card { display: block; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 20px; text-decoration: none; color: inherit; transition: border-color .15s; } .plat-hub-card:hover { border-color: rgba(57,255,20,.4); } .plat-hub-card__icon { font-size: 24px; margin-bottom: 8px; } .plat-hub-card__name { font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 4px; } .plat-hub-badge--auto { font-size: 11px; font-weight: 700; color: var(--green); } .plat-hub-badge--copy { font-size: 11px; color: #888; } .plat-how-box { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; background: rgba(57,255,20,.04); border: 1px solid rgba(57,255,20,.15); border-radius: 14px; padding: 24px 28px; } .plat-how-item > span { font-size: 28px; display: block; margin-bottom: 4px; } .plat-how-item p { margin: 4px 0 0; font-size: 14px; color: var(--muted); } .plat-how-divider { width: 1px; height: 60px; background: rgba(255,255,255,.08); } /* ── PROBLEM SECTION ───────────────────────────────────────── */ /* .problem__lead { color: #000; font-weight: 700; } */ .problem__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; } .problem__list li { display: flex; align-items: baseline; gap: 12px; } .problem__list--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-left: var(--gutter); } @media (max-width: 599px) { .problem__list--grid { grid-template-columns: 1fr; } } .problem__list-icon { font-size: 24px; flex-shrink: 0; } /* ── HOW IT WORKS ──────────────────────────────────────────── */ .how__block { display: flex; align-items: flex-start; gap: 14px; } .how__step-num { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,200,83,0.1); border: 1px solid var(--green); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--green); flex-shrink: 0; } .how__step-content { padding-top: 4px; } .how__step-content strong { font-size: 16px; font-weight: 700; color: var(--light); margin-bottom: 6px; display: block; } .how__step-content p { font-size: 15px; color: var(--muted); line-height: 1.65; } /* ── FAQ ───────────────────────────────────────────────────── */ .faq__list { display: flex; flex-direction: column; gap: 2px; margin-top: 40px; } .faq__item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 8px; } .faq__q { width: 100%; background: var(--card); border: none; padding: 18px 20px; text-align: left; color: var(--light); font-size: 15px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; } .faq__q:hover { background: #111911; } .faq__arrow { color: var(--green); font-size: 18px; transition: transform 0.2s; } .faq__q.open .faq__arrow { transform: rotate(180deg); } .faq__a { display: none; padding: 0 20px 18px; background: var(--card); font-size: 15px; color: var(--muted); line-height: 1.7; } .faq__a.open { display: block; } /* ── REVIEWS ───────────────────────────────────────────────── */ .reviews__card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .reviews__quote { font-size: 15px; color: var(--light); line-height: 1.7; font-style: italic; margin-bottom: 16px; } .reviews__author { display: flex; align-items: center; gap: 12px; } .reviews__avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,200,83,0.1); border: 1px solid var(--green); display: flex; align-items: center; justify-content: center; font-size: 18px; } .reviews__name { font-size: 14px; font-weight: 600; color: var(--light); display: block; } .reviews__biz { font-size: 13px; color: var(--muted); margin-top: 2px; } /* ── PLATFORMS STRIP ───────────────────────────────────────── */ .platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 36px var(--gutter); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--card); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } .platforms__label { width: 100%; text-align: center; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .platforms__pill { display: inline-flex; align-items: center; gap: 6px; background: var(--dark); border: 1px solid var(--border); border-radius: 30px; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--silver); transition: border-color 0.2s, color 0.2s; } .platforms__pill:hover { border-color: var(--green); color: var(--light); } /* ── PRICING ───────────────────────────────────────────────── */ .pricing__card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; position: relative; transition: border-color 0.2s; display: flex; flex-direction: column; } .pricing__card--featured { border-color: var(--green); } .pricing__badge { position: absolute; top: -12px; left: 24px; background: var(--green); color: var(--dark); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; } .pricing__tier { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: var(--light); margin-bottom: 4px; } .pricing__amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 16px; } .pricing__num { font-family: 'Bebas Neue', sans-serif; font-size: 52px; color: var(--green); line-height: 1; } .pricing__per { font-size: 14px; color: var(--muted); } .pricing__features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; } .pricing__features li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--silver); } .pricing__features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; } .pricing__features li.off { color: var(--muted); text-decoration: line-through; } .pricing__features li.off::before { content: '✗'; color: var(--muted); } .pricing__btn { display: block; width: 100%; padding: 16px; border-radius: 12px; font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s; cursor: pointer; border: none; letter-spacing: 0.03em; box-sizing: border-box; } .pricing__btn--primary { background: linear-gradient(135deg, var(--green) 0%, var(--green-lime) 100%); color: var(--dark); box-shadow: 0 4px 20px rgba(var(--green-rgb),0.4); } .pricing__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--green-rgb),0.55); filter: brightness(1.07); } .pricing__btn--primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(var(--green-rgb),0.3); } .pricing__btn--outline { background: rgba(var(--green-rgb),0.07); border: 2px solid var(--green); color: var(--green); } .pricing__btn--outline:hover { background: rgba(var(--green-rgb),0.14); box-shadow: 0 4px 18px rgba(var(--green-rgb),0.22); transform: translateY(-1px); } .pricing__btn--outline:active { transform: translateY(0); } /* ── HERO STATS ────────────────────────────────────────────── */ .hero-stats { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; min-width: 0; } @media (min-width: 600px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } } .hero-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 12px; text-align: center; } .hero-stat-big { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--green); line-height: 1; } .hero-stat-unit { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 500; } .hero-stat-lbl { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; } /* ── FOOTER ────────────────────────────────────────────────── */ .footer { border-top: 1px solid rgba(var(--green-rgb), 0.18); padding: 40px 0; background: #000; } .footer__inner { max-width: 960px; margin: 0 auto; padding: 0 24px; text-align: center; } .footer__logo { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 2px; color: var(--green); margin-bottom: 8px; } .footer__tagline { font-size: 13px; color: #6b7a8d; margin-bottom: 20px; } .footer__links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .footer__link { font-size: 14px; color: #6b7a8d; text-decoration: none; transition: color 0.2s; } .footer__link:hover { color: #b0b8c1; } .footer__copy { font-size: 12px; color: #6b7a8d; margin-top: 4px; } .footer__powered { font-size: 12px; color: #6b7a8d; margin-top: 4px; } .footer__powered a { color: #6b7a8d; text-decoration: none; } .footer__powered a:hover { color: #b0b8c1; } /* ── CTA ────────────────────────────────────────────────────── */ .cta { background: var(--card); border-top: 1px solid var(--border); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: var(--v-gutter) var(--gutter); } .cta__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; } .cta__text { text-align: left; } .cta__text h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 8vw, 72px); line-height: 1; letter-spacing: 2px; color: var(--light); margin-bottom: 16px; } .cta__text h2 span { color: var(--green); } .cta__text > p { font-size: 16px; color: var(--light); margin-bottom: 36px; font-weight: 300; } .cta__img-wrap { display: flex; justify-content: center; align-items: center; padding: 15%; } .cta__img { width: 60%; max-width: 260px; height: auto; display: block; border-radius: 16px; } .hero-note { font-size: 13px; color: var(--muted); margin-top: 16px; } @media (max-width: 767px) { .cta__split { grid-template-columns: 1fr; } .cta__img-wrap { display: none; } .cta__text { text-align: center; } .cta__text > p { margin-bottom: 20px; } .cta__text .btn__primary, .cta__text .btn.btn__primary { display: block; width: 100%; padding: 16px 24px; box-sizing: border-box; } .hero-note { text-align: center; } } /* ── PUBLIC PAGES — UNIVERSAL (all has-site-header pages) ───── */ /* Outer wrapper — universal */ body.has-site-header .main { width: 100%; max-width: 100vw; overflow-x: hidden; } /* Inner container */ body.has-site-header .main-inner { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 1.2rem; width: 100%; box-sizing: border-box; } body.has-site-header .main-inner section { padding: 0; max-width: none; margin: 0; } /* Reveal animation */ body.has-site-header .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } body.has-site-header .reveal.visible { opacity: 1; transform: translateY(0); } /* Section / aside spacing + hr */ body.has-site-header section.reveal, body.has-site-header aside.reveal { margin-top: 2.5rem; } body.has-site-header hr.divider { display: none; } /* Images inside page body */ body.has-site-header .main img { max-width: 100%; height: auto; } /* Page hero — base; legal overrides padding below */ body.has-site-header .page-hero { position: relative; padding: 2rem 0 1rem; overflow: hidden; } body.has-site-header .page-hero .row { position: relative; z-index: 1; } /* Hero glow blob — dimensions differ per page, keep scoped */ .about__hero-glow, .contact__hero-glow { position: absolute; top: -40px; left: -5%; width: 70%; height: 320px; background: radial-gradient(ellipse at 20% 40%, rgba(0,200,83,0.18) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* Page hero headline — legal overrides font-size below */ body.has-site-header .page-hero h1 { font-size: clamp(52px, 14vw, 96px); line-height: 1; margin: 0 0 0.3em; } body.has-site-header .page-hero h1 span { color: var(--green-lime); display: block; } body.has-site-header .page-hero p { font-size: 1.05rem; color: var(--silver); max-width: 540px; } /* Accent label — HTML class names differ, comma-group is as far as we can go */ .about__label, .contact__label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--green-lime); font-weight: 600; margin: 0 0 0.4rem; } /* ── TYPOGRAPHY — universal across all public pages ─────────── */ body.has-site-header h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 8vw, 72px); line-height: 1.1; margin: 0 0 0.6em; color: var(--light); } body.has-site-header h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 6vw, 52px); line-height: 1.35; font-weight: 400; margin: 1.4rem 0 0.6rem; color: var(--h2-color); } body.has-site-header h2 span { color: var(--green-lime); } body.has-site-header h3 { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0 0 0.25em; color: var(--h3-color); } body.has-site-header h3 span { color: var(--green-lime); } body.has-site-header h4 { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0.85em 0 0.45em; color: var(--h4-color); } /* p stays page-scoped — all:revert is too aggressive to apply universally */ .about p, .contact p { all: revert; color: var(--light); } /* ── ABOUT PAGE — unique ────────────────────────────────────── */ /* Values list — card treatment */ .about ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .about ul li { display: flex; align-items: flex-start; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; } .about ul li > span { font-size: 24px; flex-shrink: 0; margin-top: 2px; } .about ul li div { color: var(--light); line-height: 1.6; } .about ul li strong { color: var(--light); display: block; margin-bottom: 2px; } /* Image column — hidden on mobile (≤599px), flex-centered on tablet/desktop (≥600px). Use .img-col on any grid column that holds a decorative image. */ .img-col { display: none; } @media (min-width: 600px) { .img-col { display: flex; align-items: center; } } .about-values-img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 2/3; display: block; } .contact-support-img { width: 100%; border-radius: 16px; object-fit: cover; aspect-ratio: 4/3; display: block; } @media (min-width: 600px) { .contact-support-img { padding-top: 10px; } } /* Team card */ .about__team-card { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 0; } .about__team-card img { width: 100px; height: 100px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid var(--green); box-shadow: 0 0 0 3px rgba(0,200,83,0.18); flex-shrink: 0; } .about__team-info { display: flex; flex-direction: column; } .about__team-info h3 { font-size: 18px; font-weight: 600; color: var(--light); margin: 0 0 2px; } .about__team-info em { font-size: 13px; color: var(--green); letter-spacing: 0.3px; font-style: normal; display: block; margin-bottom: 10px; } .about__team-info p { font-size: 15px; color: var(--silver); line-height: 1.65; margin: 0; } /* ── CONTACT PAGE — unique ──────────────────────────────────── */ .contact address { font-style: normal; } .contact address p { color: var(--silver); } /* Contact cards grid */ .contact .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; color: inherit; transition: border-color 0.2s; cursor: pointer; } .contact .contact-card:hover { border-color: var(--green); } .contact .contact-card.open { border-color: var(--green); } .contact .contact-card__header { display: flex; align-items: flex-start; gap: 14px; padding: 18px; } .contact .contact-card__header > span:first-child { font-size: 26px; flex-shrink: 0; } .contact .contact-card strong { display: block; font-size: 14px; font-weight: 600; color: var(--light); margin-bottom: 2px; } .contact .contact-card em { display: block; font-size: 13px; color: var(--green); font-style: normal; margin-bottom: 6px; } .contact .contact-card p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; } .contact .contact-card__chevron { margin-left: auto; font-size: 18px; color: var(--muted); flex-shrink: 0; transition: transform 0.3s ease; line-height: 1; align-self: center; } .contact .contact-card.open .contact-card__chevron { transform: rotate(90deg); color: var(--green); } .contact .contact-card__form { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .contact .contact-card.open .contact-card__form { max-height: 500px; } .contact .contact-card__form-inner { padding: 0 18px 18px; } .contact .contact-card__success { display: none; color: var(--green); font-size: 14px; font-weight: 600; padding-top: 10px; } .contact .contact-card.sent .contact-card__success { display: block; } .contact .contact-card.sent .contact-form { display: none; } /* ── LEGAL PAGES — unique (Privacy & Terms) ─────────────────── */ /* Inner container override — needs min 16px on small screens */ .legal .main-inner { padding-left: max(16px, var(--gutter)); padding-right: max(16px, var(--gutter)); padding-top: 10px; width: 100%; box-sizing: border-box; } /* Hero overrides — larger top gap, smaller h1 */ .legal .page-hero { position: relative; padding: var(--section-v) 0 1.5rem; overflow: hidden; } .legal__hero-glow { position: absolute; top: 0; left: -5%; width: 70%; height: 280px; background: radial-gradient(ellipse at 20% 40%, rgba(0,200,83,0.15) 0%, transparent 65%); pointer-events: none; z-index: 0; } .legal .page-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 8vw, 80px); line-height: 1; margin: 0 0 0.3em; color: var(--light); } .legal .page-hero p { font-size: 0.9rem; color: var(--muted); } /* Article — constrained readable width */ .legal article { max-width: 680px; margin: 2rem 0 3rem; } .legal article section { padding: 2rem 0 1.5rem !important; border-bottom: 1px solid var(--border); } .legal article section:last-child { border-bottom: none; } /* Article typography — overrides shared defaults */ .legal article h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--light); margin: 0 0 0.4rem; letter-spacing: 0.5px; } .legal article p { font-size: 15px; color: var(--silver); line-height: 1.75; margin: 0 0 0.75rem; } .legal article p:last-child { margin-bottom: 0; } .legal article strong { color: var(--light); } .legal article a { color: var(--green); text-decoration: none; } .legal article a:hover { color: var(--green-hover); text-decoration: underline; } .legal article ul { list-style: disc; padding-left: 1.4rem; margin: 0.5rem 0 0.75rem; display: flex; flex-direction: column; gap: 6px; } .legal article ul li { font-size: 15px; color: var(--silver); line-height: 1.65; } /* Pricing table (Terms page) */ .legal article table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 14px; } .legal article th { text-align: left; padding: 10px 12px; background: var(--card); color: var(--green-lime); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); } .legal article td { padding: 10px 12px; color: var(--silver); border-bottom: 1px solid var(--border); vertical-align: top; } .legal article tr:last-child td { border-bottom: none; } .legal article tr:nth-child(even) td { background: var(--card); } /* ── SHARED FORM ELEMENTS ────────────────────────────────────── Used on Login, Onboarding, Contact, and any page with forms. ─────────────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--silver); margin-bottom: 7px; } .field input, .field textarea, .field select { width: 100%; background: var(--dark); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; color: var(--light); font-family: 'DM Sans', sans-serif; font-size: 15px; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,200,83,0.1); } .field input.error, .field textarea.error { border-color: var(--danger); } .field-error { font-size: 11px; color: var(--danger); margin-top: 5px; display: none; } .field-error.visible { display: block; } .pw-wrap { position: relative; } .pw-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; transition: color 0.2s; } .pw-toggle:hover { color: var(--silver); } /* Primary CTA button (green) + shimmer — .btn-next is an alias */ .btn-submit, .btn-next { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--green) 0%, var(--green-lime) 100%); color: var(--dark); border: none; border-radius: 12px; font-size: 16px; font-weight: 700; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(var(--green-rgb),0.4); letter-spacing: 0.03em; } .btn-submit::after, .btn-next::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.45s; } .btn-submit:hover::after, .btn-next:hover::after { transform: translateX(100%); } .btn-submit:hover, .btn-next:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--green-rgb),0.55); filter: brightness(1.07); } .btn-submit:active, .btn-next:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(var(--green-rgb),0.3); } .btn-submit:disabled, .btn-next:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-submit.loading, .btn-next.loading { pointer-events: none; } /* Ghost/text back button */ .btn-back { width: 100%; padding: 13px; background: transparent; color: var(--muted); border: none; border-radius: 12px; font-size: 14px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: color 0.2s; } .btn-back:hover { color: var(--silver); } /* Spinner */ .spinner { width: 18px; height: 18px; border: 2px solid rgba(7,13,7,0.3); border-top-color: var(--dark); border-radius: 50%; animation: spin 0.7s linear infinite; display: none; } .btn-submit.loading .spinner { display: block; } .btn-submit.loading .btn-text{ display: none; } /* OR divider */ .or-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .or-line { flex: 1; height: 1px; background: var(--border); } .or-text { font-size: 12px; color: var(--muted); letter-spacing: 1px; } /* Toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--green); color: var(--dark); padding: 12px 24px; border-radius: 30px; font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 999; white-space: nowrap; } .toast.error-toast { background: var(--danger); color: #fff; } .toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Email verify box */ .email-verify-box { background: #f0faf4; border: 1px solid #b2dfdb; border-radius: 10px; padding: 14px 18px; text-align: center; color: #2e7d32; font-size: 14px; line-height: 1.5; } /* ── Plan picker (login/signup) ── */ .plan-picker { display: flex; gap: 6px; } .plan-pick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--dark); color: var(--muted); cursor: pointer; font-family: inherit; transition: border-color .2s, background .2s, color .2s; } .plan-pick-btn:hover:not(.active) { border-color: var(--silver); color: var(--silver); } .plan-pick-btn.active { border-width: 2px; border-color: var(--green); background: rgba(0,200,83,.18); color: var(--green); box-shadow: 0 0 0 2px rgba(0,200,83,.35), inset 0 0 8px rgba(0,200,83,.08); font-weight: 700; } .plan-selected-summary { margin: 6px 0 0; font-size: 12px; color: var(--green); text-align: center; min-height: 18px; } .plan-pick-name { font-size: 13px; font-weight: 700; line-height: 1.2; } .plan-pick-price { font-size: 12px; opacity: .85; } /* ── LOGIN PAGE ──────────────────────────────────────────────── Layout: .row > .layout__split-2-1 > form col + .hero-img-col Image column hidden on mobile via universal .hero-img-col rule. ─────────────────────────────────────────────────────────── */ @keyframes glowPulse { 0%, 100% { text-shadow: 0 0 40px rgba(0,200,83,0.3); } 50% { text-shadow: 0 0 60px rgba(0,200,83,0.6), 0 0 100px rgba(0,200,83,0.2); } } /* Form column — centers card vertically in the viewport */ .login-form-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: calc(100dvh - 80px); padding: 40px 24px; } /* Auth card */ .auth-card { width: 100%; max-width: 480px; animation: fadeUp 0.5s 0.1s ease both; } /* Tabs */ .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); border-radius: 10px; padding: 4px; margin-bottom: 32px; border: 1px solid var(--border); } .auth-tab { padding: 18px 20px; text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 8px; transition: color 0.2s, background-color 0.2s; border: none; background: transparent; font-family: 'DM Sans', sans-serif; } .auth-tab.active { background: var(--green); color: var(--dark); } /* Forms */ .auth-form { display: none; } .auth-form.active { display: block; } /* Password strength */ .strength-wrap { margin-top: 8px; display: none; } .strength-wrap.visible { display: block; } .strength-track { height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .strength-fill { height: 100%; border-radius: 3px; transition: width 0.3s, background 0.3s; } .strength-label { font-size: 12px; color: var(--muted); letter-spacing: 1px; } /* Forgot password */ .forgot { text-align: right; margin-top: -8px; margin-bottom: 16px; } .forgot a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; } .forgot a:hover { color: var(--silver); } /* Social buttons */ .social-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .btn-social { width: 100%; padding: 13px; background: var(--dark); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--light); font-family: 'DM Sans', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: border-color 0.2s, background-color 0.2s, opacity 0.2s; } .btn-social:hover { border-color: var(--green); } .btn-social-icon { font-size: 18px; } /* Terms note */ .terms-note { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; } .terms-note a { color: var(--silver); text-decoration: none; } .terms-note a:hover { color: var(--green); } /* Back to home */ .back-home { text-align: center; margin-top: 20px; animation: fadeUp 0.5s 0.2s ease both; } .back-home a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color 0.2s; } .back-home a:hover { color: var(--silver); } /* Reset password view */ .reset-view { display: none; animation: fadeUp 0.3s ease both; } .reset-view.visible { display: block; } .reset-back { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; margin-bottom: 20px; transition: color 0.2s; background: none; border: none; font-family: 'DM Sans', sans-serif; padding: 0; } .reset-back:hover { color: var(--silver); } /* Auth loading / card reveal */ #auth-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; } #auth-loading .ring { width: 44px; height: 44px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; } #auth-card-wrap { display: none; } #auth-card-wrap.ready { display: block; width: 100%; } /* Image column — desktop only via .hero-img-col, styled here */ .login-img-col { position: sticky; top: 80px; height: calc(100dvh - 80px); overflow: hidden; border-radius: 16px; align-self: flex-start; } .login-img-col img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .login-img-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,200,83,0.25) 0%, rgba(7,13,7,0.75) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 48px 40px; } .login-panel-logo { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 4px; color: #EEF7EE; line-height: 1; margin-bottom: 8px; display: block; } .login-panel-logo span { color: #00C853; } .login-panel-tag { font-size: 15px; color: rgba(238,247,238,0.75); font-weight: 300; letter-spacing: 0.5px; } .login-panel-quote { margin-top: 28px; font-size: 14px; color: rgba(238,247,238,0.6); font-style: italic; line-height: 1.6; max-width: 320px; border-left: 2px solid rgba(0,200,83,0.5); padding-left: 16px; } /* ── ONBOARDING WIZARD ────────────────────────────────────────── Full-viewport step wizard. body.onboarding-page overrides needed because of particle canvas (backdrop-blur on inputs) and the height:100%/overflow:hidden full-screen lock (html rule stays as a one-liner in the page