/* ============================================================ BEEPXTRA V2 — DESIGN SYSTEM Single stylesheet. Per-floor accents via [data-floor] on . ============================================================ */ /* ── 1. Design Tokens ───────────────────────────────────────── */ :root { --primary: #1B3A56; --accent: #00C896; --secondary: #294F6E; --hero-bg: #0D2035; --card-dark: #1E3D5C; --card-border-dark: #294F6E; --section-light: #EDF4FB; --card-border-light:#BDDDFA; --text-dark: #FFFFFF; --text-light: #294F6E; --text-muted: #7A9DB8; --danger: #C0392B; --floor-color: #00C896; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --r-card: 12px; --r-btn: 8px; --container: 1200px; --nav-h: 68px; /* ── Surface tokens ── */ --surface: #13131F; --surface-2: #1A1A2E; --surface-dark: #0D0D1A; --surface-light: #F5F9FE; --surface-light-2: #f0f4f8; /* ── Nav ── */ --nav-bg: rgba(13,32,53,0.92); /* ── On-accent text ── */ --on-accent: #0D2035; /* ── Accent alpha ── */ --accent-dim: rgba(0,200,150,0.12); --accent-glow: rgba(0,200,150,0.35); /* ── Gold ── */ --gold: #F0A500; --gold-dim: rgba(240,165,0,0.12); --gold-light: #FFD166; /* ── Danger ── */ --danger: #C0392B; --danger-dim: rgba(255,77,109,0.12); /* ── Extended text ── */ --text: #E8E8F0; --text-dim: #5A5A6E; --text-signout: #FF5B5B; /* ── Border tokens ── */ --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.12); /* ── Overlay / shadow ── */ --overlay: rgba(0,0,0,0.75); --shadow-dark: 0 8px 24px rgba(0,0,0,0.4); /* ── Logo ── */ --logo-h: 56px; /* ── Radius aliases ── */ --radius: 12px; --radius-sm: 8px; /* ── Alias tokens for old-page compat ── */ --nav-height: var(--nav-h); --radius-card: var(--r-card); --border-dark: var(--card-border-dark); --border-light: var(--card-border-light); /* ── Status colours ── */ --status-open: #00C896; --status-await: #F0A500; --status-resolved: #8B8B9E; --status-closed: #5A5A6E; /* ── Priority colours ── */ --priority-low: #059669; --priority-normal: #d97706; --priority-urgent: #dc2626; /* ── Floor accent tokens ── */ --floor-merchants: #00C896; --floor-cardholders: #2E75B6; --floor-investors: #F0A500; --floor-developers: #7C3AED; --floor-network: #00B8D9; --floor-agents: #E85D4A; } [data-floor="cardholders"] { --floor-color: #2E75B6; } [data-floor="investors"] { --floor-color: #F0A500; } [data-floor="developers"] { --floor-color: #7C3AED; } [data-floor="network"] { --floor-color: #00B8D9; } /* ── 2. Reset & Base ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 16px; line-height: 1.75; color: var(--text-dark); background: var(--hero-bg); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } input, select, textarea { font: inherit; } /* ── 3. Layout ──────────────────────────────────────────────── */ .bx-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .bx-section { padding: 96px 0; } .bx-section--light { background: var(--section-light); color: var(--text-light); } .bx-section--dark { background: var(--primary); } .bx-section--hero-bg { background: var(--hero-bg); } .bx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .bx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .bx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .bx-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .bx-flex { display: flex; align-items: center; } .bx-center { text-align: center; } /* ── 4. Typography ──────────────────────────────────────────── */ h1 { font-size: clamp(38px, 5vw, 56px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } h2 { font-size: clamp(28px, 3.5vw, 36px); font-weight: 700; line-height: 1.25; } h3 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 600; line-height: 1.35; } h4 { font-size: 18px; font-weight: 600; } p { line-height: 1.75; } .text-accent { color: var(--accent); } .text-floor { color: var(--floor-color); } .text-muted { color: var(--text-muted); } .text-sm { font-size: 14px; } .text-lg { font-size: 18px; } .text-bold { font-weight: 700; } .section-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--floor-color); margin-bottom: 12px; } /* ── 5. Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-btn); font-size: 15px; font-weight: 700; line-height: 1; transition: opacity .15s, transform .15s, box-shadow .15s; white-space: nowrap; text-decoration: none; cursor: pointer; border: none; font-family: var(--font); } .btn:hover { opacity: .88; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { box-shadow: 0 4px 20px rgba(0,200,150,.35); } .btn-floor { background: var(--floor-color); color: var(--on-accent); } .btn-secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); } .btn-floor-outline { background: transparent; color: var(--floor-color); border: 2px solid var(--floor-color); } .btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); } .btn-ghost:hover { border-color: #fff; opacity: 1; } .btn-lg { padding: 15px 32px; font-size: 16px; } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* ── 6. Cards ───────────────────────────────────────────────── */ .card { border-radius: var(--r-card); padding: 32px; border: 1px solid var(--card-border-dark); background: var(--card-dark); transition: border-color .2s, transform .2s; } .card:hover { border-color: var(--floor-color); transform: translateY(-2px); } .card--light { background: #fff; border-color: var(--card-border-light); color: var(--text-light); } .card--flat { transition: none; } .card--flat:hover { transform: none; } .card-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--accent-dim); margin-bottom: 20px; } [data-floor="cardholders"] .card-icon { background: rgba(46,117,182,.12); } [data-floor="investors"] .card-icon { background: rgba(240,165,0,.12); } [data-floor="developers"] .card-icon { background: rgba(124,58,237,.12); } [data-floor="network"] .card-icon { background: rgba(0,184,217,.12); } /* ── 7. Badges ──────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: .04em; } .badge-accent { background: rgba(0,200,150,.15); color: var(--accent); border: 1px solid rgba(0,200,150,.3); } .badge-floor { background: rgba(0,200,150,.12); color: var(--floor-color); border: 1px solid rgba(0,200,150,.25); } .badge-popular { background: var(--floor-color); color: var(--on-accent); } /* ── 8. Forms ───────────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #ccc; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; background: rgba(255,255,255,.06); border: 1px solid var(--card-border-dark); border-radius: var(--r-btn); color: #fff; font-size: 15px; transition: border-color .15s; outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--floor-color); } .form-input::placeholder { color: var(--text-muted); } .form-select option { background: var(--primary); } .form-textarea { resize: vertical; min-height: 120px; } .form-msg { font-size: 14px; margin-top: 8px; min-height: 20px; } .form-msg.error { color: var(--danger); } .form-msg.success { color: var(--accent); } /* ── 9. Pulse dots ──────────────────────────────────────────── */ .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; } .pulse-dot.stale { background: var(--text-muted); animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,200,150,.6); } 50% { opacity: .7; box-shadow: 0 0 0 5px rgba(0,200,150,0); } } /* ── 10. Navigation ─────────────────────────────────────────── */ .bx-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000; display: flex; align-items: center; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-border-dark); } .bx-nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .bx-nav__logo img { height: var(--logo-h); width: auto; display: block; } .bx-nav__links { display: flex; align-items: center; gap: 4px; } .bx-nav__link { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); padding: 7px 12px; border-radius: 6px; transition: color .15s, background .15s; white-space: nowrap; } .bx-nav__link:hover { color: #fff; background: rgba(255,255,255,.06); } .bx-nav__link.active { color: var(--floor-color); } .bx-nav__ctas { display: flex; align-items: center; gap: 10px; } .bx-nav__login { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); padding: 8px 16px; border-radius: var(--r-btn); border: 1px solid var(--card-border-dark); transition: border-color .15s, color .15s; cursor: pointer; background: none; } .bx-nav__login:hover { border-color: rgba(255,255,255,.4); color: #fff; } /* Mobile */ .bx-nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; } .bx-nav__hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; } .bx-nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bx-nav__hamburger.open span:nth-child(2) { opacity: 0; } .bx-nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .bx-nav__mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--primary); border-bottom: 1px solid var(--card-border-dark); padding: 16px 24px 24px; z-index: 999; flex-direction: column; gap: 2px; } .bx-nav__mobile.open { display: flex; } .bx-nav__mobile .bx-nav__link { display: block; padding: 10px 12px; } .bx-nav__mobile .btn { margin-top: 12px; justify-content: center; width: 100%; } /* ── Shared avatar dropdown (public nav + homepage) ── */ .bx-nav__avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-dim); border: 2px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; flex-shrink: 0; user-select: none; } .bx-nav__avatar-menu { position: absolute; top: calc(100% + 10px); right: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; min-width: 190px; box-shadow: var(--shadow-dark); display: none; z-index: 300; } .bx-nav__avatar-menu.open { display: block; } .bx-nav__avatar-email { display: block; padding: 10px 16px; font-size: 11px; color: var(--text-dim); border-bottom: 1px solid var(--border); cursor: default; word-break: break-all; } .bx-nav__avatar-menu a { display: block; padding: 10px 16px; font-size: 14px; color: var(--text-muted); border-bottom: 1px solid var(--border); text-decoration: none; } .bx-nav__avatar-menu a:last-child { border-bottom: none; } .bx-nav__avatar-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); } .bx-nav__avatar-menu a.bx-danger, .bx-nav__avatar-menu a.hp-danger { color: var(--text-signout); } /* ── Support status badges ── */ .sup-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; } .sup-badge--open { color: var(--status-open); background: rgba(0,200,150,.1); border: 1px solid rgba(0,200,150,.25); } .sup-badge--await { color: var(--status-await); background: rgba(240,165,0,.1); border: 1px solid rgba(240,165,0,.25); } .sup-badge--resolved { color: var(--status-resolved); background: rgba(139,139,158,.1); border: 1px solid rgba(139,139,158,.25); } .sup-badge--closed { color: var(--status-closed); background: rgba(90,90,110,.1); border: 1px solid rgba(90,90,110,.2); } /* ── Priority dots ── */ .priority-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .priority-dot--low { background: var(--priority-low); } .priority-dot--normal { background: var(--priority-normal); } .priority-dot--urgent { background: var(--priority-urgent); } /* ── Utility aliases for old pages ── */ .bx-section-sm { padding: 48px 0; } .theme-dark { background: var(--primary); color: var(--text-dark); } .theme-darker { background: var(--hero-bg); color: var(--text-dark); } .bx-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .btn-green { background: var(--accent); color: var(--on-accent); } .btn-outline-accent { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-btn); padding: 8px 20px; } span.accent { color: var(--accent); } /* ── Dashboard nav badge ── */ .db-nav__badge { position: absolute; top: -5px; right: -8px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 8px; line-height: 1.4; min-width: 14px; text-align: center; } /* ── Agents page ── */ .agents-wrap { background: var(--section-light); min-height: 100vh; } .agents-hero { text-align: center; padding: calc(var(--nav-h) + 72px) 24px 56px; background: var(--section-light); } .agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: var(--container); margin: 0 auto; padding: 0 24px 40px; } @media(max-width: 600px) { .agents-grid { grid-template-columns: 1fr; } } .agents-grid--bottom { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: var(--container); margin: 0 auto; padding: 0 24px 80px; } .agent-box { background: #ffffff; border: 1px solid var(--card-border-light); border-radius: var(--r-card); padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; transition: border-color .2s, box-shadow .2s, transform .2s; text-decoration: none; } .agent-box:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.1); } .agent-box--pro:hover { border-color: var(--floor-merchants); } .agent-box--ss1:hover { border-color: var(--floor-investors); } .agent-box--soon { opacity: 0.7; cursor: default; } .agent-box--soon:hover { transform: none; box-shadow: none; } .agent-box__badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 20px; margin-bottom: 20px; } .agent-box--pro .agent-box__badge { background: rgba(0,200,150,.1); color: var(--floor-merchants); border: 1px solid rgba(0,200,150,.2); } .agent-box--ss1 .agent-box__badge { background: rgba(240,165,0,.1); color: var(--floor-investors); border: 1px solid rgba(240,165,0,.2); } .agent-box__icon { margin-bottom: 20px; } .agent-box--pro .agent-box__icon svg { color: var(--floor-merchants); } .agent-box--ss1 .agent-box__icon svg { color: var(--floor-investors); } .agent-box__title { font-size: 22px; font-weight: 700; color: var(--primary); margin-bottom: 12px; } .agent-box__desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 28px; flex: 1; } .agent-box__cta { font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 8px; } .agent-box--pro .agent-box__cta { background: var(--floor-merchants); color: var(--on-accent); } .agent-box--ss1 .agent-box__cta { background: var(--floor-investors); color: var(--on-accent); } .agent-box__soon-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 20px; background: rgba(100,116,139,.12); color: #64748b; border: 1px solid rgba(100,116,139,.25); } .agents-hero h1 { color: var(--primary); font-size: clamp(28px,5vw,42px); font-weight: 800; margin-bottom: 16px; } .agents-hero p { color: var(--text-muted); font-size: 16px; max-width: 600px; margin: 0 auto; } .agents-hero-eyebrow { color: var(--text-muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } /* ── MNS background helpers ── */ .mns-bg-deep { background: #080810; } .mns-bg-mid { background: #0E0E1A; } .mns-bg-deeper { background: #0A0A14; } /* ── 11. Homepage ────────────────────────────────────────────── */ .home-wrap { min-height: 100vh; display: flex; flex-direction: column; background: var(--hero-bg); } .home-topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 40px; flex-shrink: 0; } .home-topbar__logo img { height: 36px; } .home-topbar__ctas { display: flex; align-items: center; gap: 12px; } .home-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px 32px; text-align: center; } .home-headline { font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; line-height: 1.2; color: #fff; margin-bottom: 4px; } .home-subline { font-size: clamp(20px, 2.5vw, 28px); font-weight: 400; color: var(--text-muted); margin-bottom: 0; } .portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; max-width: 780px; margin: 48px auto 0; } .portal-card { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 28px 24px; text-align: left; transition: border-color .2s, transform .2s, box-shadow .2s; text-decoration: none; display: block; color: inherit; } .portal-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.4); border-color: var(--pc-color, var(--accent)); } .portal-card__icon { font-size: 28px; margin-bottom: 14px; display: block; } .portal-card__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; } .portal-card__sub { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .portal-card__arrow { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--pc-color, var(--accent)); display: flex; align-items: center; gap: 5px; } .portal-card:nth-child(5) { grid-column: 1 / -1; max-width: calc(50% - 10px); margin: 0 auto; } .home-datastrip { background: rgba(13,32,53,.85); border-top: 1px solid var(--card-border-dark); padding: 18px 24px; width: 100%; } .home-datastrip__inner { display: flex; align-items: center; justify-content: center; gap: 40px; max-width: var(--container); margin: 0 auto; flex-wrap: wrap; } .home-stat { display: flex; align-items: center; gap: 8px; } .home-stat__label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .home-stat__value { font-size: 15px; font-weight: 700; color: #fff; } .home-stat__value.accent { color: var(--accent); } .home-datastrip__explore { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 5px; } .home-datastrip__explore:hover { text-decoration: underline; } .home-footer { padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--card-border-dark); flex-wrap: wrap; gap: 8px; } .home-footer a:hover { color: #fff; } .home-footer__links { display: flex; gap: 16px; } /* ── 12. Floor Hero ─────────────────────────────────────────── */ .floor-hero { position: relative; background: var(--hero-bg); padding: 88px 0 88px; overflow: hidden; } .floor-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(30deg, rgba(41,79,110,.5) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.5) 87.5%), linear-gradient(150deg, rgba(41,79,110,.5) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.5) 87.5%), linear-gradient(30deg, rgba(41,79,110,.5) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.5) 87.5%), linear-gradient(150deg, rgba(41,79,110,.5) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.5) 87.5%), linear-gradient(60deg, rgba(41,79,110,.5) 25%, transparent 25.5%, transparent 75%, rgba(41,79,110,.5) 75%), linear-gradient(60deg, rgba(41,79,110,.5) 25%, transparent 25.5%, transparent 75%, rgba(41,79,110,.5) 75%); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; pointer-events: none; opacity: .5; } .floor-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--hero-bg)); pointer-events: none; } .floor-hero__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .floor-hero__tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--floor-color); background: rgba(0,200,150,.1); border: 1px solid rgba(0,200,150,.2); padding: 6px 14px; border-radius: 100px; margin-bottom: 24px; } .floor-hero h1 { margin-bottom: 20px; } .floor-hero__sub { font-size: 18px; color: rgba(255,255,255,.75); max-width: 620px; line-height: 1.7; margin-bottom: 36px; } .floor-hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .floor-hero__trust { margin-top: 40px; display: flex; gap: 24px; flex-wrap: wrap; } .floor-hero__trust-item { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .floor-hero__trust-item::before { content: '✓'; color: var(--floor-color); font-weight: 700; font-size: 11px; } /* ── 13. Section headers ────────────────────────────────────── */ .section-header { margin-bottom: 56px; } .section-header.center { text-align: center; } .section-header h2 { margin-top: 8px; } .section-header p { margin-top: 16px; font-size: 17px; color: rgba(255,255,255,.7); max-width: 600px; } .section-header.center p { margin: 16px auto 0; } .bx-section--light .section-header p { color: rgba(41,79,110,.65); } /* ── 14. Feature tiles ──────────────────────────────────────── */ .feature-tile { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 28px; transition: border-color .2s, transform .2s; } .feature-tile:hover { border-color: var(--floor-color); transform: translateY(-2px); } .feature-tile__num { font-size: 13px; font-weight: 700; color: var(--floor-color); margin-bottom: 10px; letter-spacing: .06em; } .feature-tile h3 { font-size: 16px; margin-bottom: 8px; } .feature-tile p { font-size: 14px; color: var(--text-muted); } /* ── 15. Steps ──────────────────────────────────────────────── */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 28px; left: calc(16.66% + 28px); right: calc(16.66% + 28px); height: 2px; background: linear-gradient(to right, var(--floor-color), rgba(0,200,150,.2)); z-index: 0; } .step { text-align: center; position: relative; z-index: 1; } .step__num { width: 56px; height: 56px; border-radius: 50%; background: rgba(0,200,150,.12); border: 2px solid var(--floor-color); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--floor-color); margin: 0 auto 20px; } .step h3 { margin-bottom: 8px; } .step p { font-size: 15px; color: rgba(255,255,255,.7); } .bx-section--light .step p { color: rgba(41,79,110,.65); } /* ── 16. Pricing ────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .pricing-card { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 36px 28px; position: relative; } .pricing-card--featured { border-color: var(--floor-color); box-shadow: 0 0 0 1px var(--floor-color), 0 16px 48px rgba(0,0,0,.4); } .pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--floor-color); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; border-radius: 100px; white-space: nowrap; } .pricing-card__name { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .pricing-card__price { font-size: 42px; font-weight: 800; line-height: 1; margin-bottom: 4px; } .pricing-card__price sup { font-size: 22px; font-weight: 700; vertical-align: super; } .pricing-card__price span { font-size: 16px; font-weight: 400; color: var(--text-muted); } .pricing-card__setup { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; min-height: 20px; } .pricing-card__features { list-style: none; margin-bottom: 32px; } .pricing-card__features li { font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--card-border-dark); color: rgba(255,255,255,.8); display: flex; align-items: flex-start; gap: 8px; } .pricing-card__features li::before { content: '✓'; color: var(--floor-color); font-weight: 700; flex-shrink: 0; margin-top: 2px; } /* ── 17. FAQ ────────────────────────────────────────────────── */ .faq-tabs { display: flex; gap: 4px; margin-bottom: 40px; background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 4px; width: fit-content; } .faq-tab { padding: 9px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s; } .faq-tab.active { background: var(--floor-color); color: var(--on-accent); } .faq-panel { display: none; } .faq-panel.active { display: block; } .faq-list { max-width: 780px; } .faq-item { border-bottom: 1px solid var(--card-border-dark); } .bx-section--light .faq-item { border-color: var(--card-border-light); } .faq-question { width: 100%; text-align: left; padding: 20px 0; font-size: 16px; font-weight: 600; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; cursor: pointer; } .bx-section--light .faq-question { color: var(--text-light); } .faq-question svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--floor-color); transition: transform .25s; } .faq-item.open .faq-question svg { transform: rotate(45deg); } .faq-answer { display: none; padding-bottom: 20px; font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.75; } .bx-section--light .faq-answer { color: rgba(41,79,110,.7); } .faq-item.open .faq-answer { display: block; } /* ── 18. Business type grid ─────────────────────────────────── */ .business-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .business-tile { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 20px; transition: border-color .2s; } .business-tile:hover { border-color: var(--floor-color); } .business-tile__type { font-size: 13px; font-weight: 700; color: var(--floor-color); margin-bottom: 6px; } .business-tile p { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; } /* ── 19. Network / data tables ──────────────────────────────── */ .data-panel { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); overflow: hidden; } .data-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--card-border-dark); } .data-panel__header h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; } .data-panel__header a { font-size: 13px; font-weight: 600; color: var(--floor-color); white-space: nowrap; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 10px 20px; text-align: left; background: rgba(0,0,0,.2); border-bottom: 1px solid var(--card-border-dark); } .data-table td { padding: 12px 20px; font-size: 13px; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(42,42,69,.5); font-variant-numeric: tabular-nums; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: rgba(255,255,255,.02); } .data-table .tx-hash { font-family: 'Courier New', monospace; color: var(--floor-color); font-size: 12px; } .data-table .tx-hash:hover { text-decoration: underline; } .net-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .net-stat-card { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 24px; } .net-stat-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .net-stat-card__value { font-size: 28px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .net-stat-card__value.glow { text-shadow: 0 0 24px rgba(0,184,217,.5); color: var(--floor-color); } /* ── 20. Specs table ────────────────────────────────────────── */ .specs-table { width: 100%; border-collapse: collapse; } .specs-table tr { border-bottom: 1px solid var(--card-border-dark); } .specs-table tr:last-child { border-bottom: none; } .specs-table td { padding: 14px 0; font-size: 14px; } .specs-table td:first-child { color: var(--text-muted); width: 45%; } .specs-table td:last-child { color: #fff; font-weight: 500; } .specs-table code { background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 4px; font-size: 13px; } /* Light-section overrides — prevent white-on-white */ .bx-section--light .specs-table tr { border-bottom-color: rgba(41,79,110,.12); } .bx-section--light .specs-table th { color: rgba(41,79,110,.55); } .bx-section--light .specs-table td:first-child { color: rgba(41,79,110,.55); } .bx-section--light .specs-table td:last-child { color: var(--text-light); } .bx-section--light .specs-table code { background: rgba(41,79,110,.06); } /* ── 21. Tokenomics CSS pie ─────────────────────────────────── */ .token-chart-wrap { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; } .token-pie { width: 200px; height: 200px; border-radius: 50%; flex-shrink: 0; background: conic-gradient( #00C896 0deg 36deg, #2E75B6 36deg 216deg, #F0A500 216deg 234deg, #7C3AED 234deg 252deg, #00B8D9 252deg 288deg, #C0392B 288deg 360deg ); } .token-legend { flex: 1; min-width: 220px; } .token-legend-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; } .token-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .token-legend-label { color: rgba(255,255,255,.75); flex: 1; } .token-legend-pct { font-weight: 700; color: #fff; } /* ── 22. Invest cards ───────────────────────────────────────── */ .invest-card { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 32px; display: flex; flex-direction: column; gap: 16px; transition: border-color .2s, transform .2s; } .invest-card:hover { border-color: var(--floor-color); transform: translateY(-2px); } .invest-card__icon { font-size: 32px; } .invest-card__title { font-size: 20px; font-weight: 700; } .invest-card__desc { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.7; flex: 1; } /* ── 23. Live data widget (Investor floor) ──────────────────── */ .live-widget { background: var(--card-dark); border: 1px solid var(--floor-color); border-radius: var(--r-card); padding: 28px; box-shadow: 0 0 32px rgba(240,165,0,.08); } .live-widget__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* 2-top / 3-bottom layout: 6 equal columns, first two span 3 each, last three span 2 each */ .live-widget__grid--2-3 { grid-template-columns: repeat(6, 1fr); } .live-widget__grid--2-3 .live-widget__stat:nth-child(1), .live-widget__grid--2-3 .live-widget__stat:nth-child(2) { grid-column: span 3; } .live-widget__grid--2-3 .live-widget__stat:nth-child(3), .live-widget__grid--2-3 .live-widget__stat:nth-child(4), .live-widget__grid--2-3 .live-widget__stat:nth-child(5) { grid-column: span 2; } @media (max-width: 768px) { .live-widget__grid { grid-template-columns: repeat(2, 1fr); } .live-widget__grid--2-3 { grid-template-columns: repeat(2, 1fr); } .live-widget__grid--2-3 .live-widget__stat:nth-child(n) { grid-column: span 1; } } .live-widget__item { } .live-widget__label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .live-widget__val { font-size: 22px; font-weight: 800; color: #fff; } .live-widget__val.highlight { color: var(--floor-color); } /* ── 24. Team cards ─────────────────────────────────────────── */ .team-card { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 28px; text-align: center; } .team-card__avatar { width: 72px; height: 72px; border-radius: 50%; background: rgba(0,200,150,.12); border: 2px solid var(--card-border-dark); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; } .team-card__name { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .team-card__role { font-size: 13px; color: var(--floor-color); margin-bottom: 8px; } .team-card__loc { font-size: 12px; color: var(--text-muted); } /* ── 25. Footer ─────────────────────────────────────────────── */ .site-footer { background: var(--primary); border-top: 1px solid var(--card-border-dark); padding: 64px 0 32px; color: rgba(255,255,255,.7); font-size: 14px; } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px; } .footer-brand img { height: 32px; margin-bottom: 16px; } .footer-brand p { font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 260px; } .footer-socials { display: flex; gap: 10px; margin-top: 20px; } .footer-social { width: 34px; height: 34px; border-radius: 8px; background: var(--card-dark); border: 1px solid var(--card-border-dark); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color .15s, border-color .15s; } .footer-social:hover { color: #fff; border-color: rgba(255,255,255,.3); } .footer-social svg { width: 14px; height: 14px; } .footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 16px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: rgba(255,255,255,.6); font-size: 14px; transition: color .15s; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--card-border-dark); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; gap: 8px; } .footer-back { font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; transition: color .15s; } .footer-back:hover { color: #fff; } /* ── 26. Modal ──────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-box { background: var(--primary); border: 1px solid var(--card-border-dark); border-radius: 16px; padding: 40px; width: 100%; max-width: 440px; position: relative; } .modal-close-btn { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color .15s; } .modal-close-btn:hover { color: #fff; } .modal-close-btn svg { width: 16px; height: 16px; } .modal-box h3 { font-size: 22px; margin-bottom: 4px; } .modal-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; } .forgot-link { display: block; font-size: 13px; color: var(--text-muted); margin-top: 6px; } .forgot-link:hover { color: #fff; } .otp-group { display: none; } .otp-group.visible { display: block; } .modal-submit { width: 100%; padding: 14px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-btn); font-size: 15px; font-weight: 700; margin-top: 8px; } .modal-submit:hover { opacity: .88; } .modal-submit:disabled { opacity: .5; cursor: not-allowed; } .modal-divider { height: 1px; background: var(--card-border-dark); margin: 20px 0; } .modal-footer { font-size: 14px; color: var(--text-muted); text-align: center; } .modal-footer a { color: var(--accent); font-weight: 600; } /* ── 27. Animations ─────────────────────────────────────────── */ /* fade-up: content always visible — no opacity tricks */ .fade-up, .fade-up-d1, .fade-up-d2, .fade-up-d3, .fade-up-d4, .fade-up-d5 { opacity: 1; } @keyframes countUp { from { opacity: 0; } to { opacity: 1; } } .count-anim { animation: countUp .4s ease forwards; } /* ── 28. Utilities ──────────────────────────────────────────── */ .mt-sm { margin-top: 12px; } .mt { margin-top: 24px; } .mt-lg { margin-top: 48px; } .mb-sm { margin-bottom: 12px; } .mb { margin-bottom: 24px; } .mb-lg { margin-bottom: 48px; } .divider { height: 1px; background: var(--card-border-dark); } .back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); margin-bottom: 32px; transition: color .15s; } .back-link:hover { color: #fff; } /* Fixed nav offset for floor pages */ [data-floor]:not([data-floor="home"]) { padding-top: var(--nav-h); } /* ── 29a. Component Extensions ──────────────────────────────── */ /* Container variants */ .bx-container--narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; } /* Generic card (light + dark variants) */ .bx-card { background: #fff; border: 1px solid var(--card-border-light); border-radius: var(--r-card); padding: 28px; transition: border-color .2s, transform .2s, box-shadow .2s; } .bx-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); /* light card hover; use --shadow-dark for dark cards */ } .bx-card--dark { background: var(--card-dark); border-color: var(--card-border-dark); color: rgba(255,255,255,.85); } .bx-card--dark:hover { box-shadow: 0 8px 32px rgba(0,0,0,.3); } .bx-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .bx-card p { font-size: 14px; line-height: 1.65; color: rgba(41,79,110,.7); } .bx-card--dark p { color: rgba(255,255,255,.65); } .bx-card__icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(41,79,110,.07); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--primary); } .bx-card__icon svg { width: 22px; height: 22px; } .bx-card--dark .bx-card__icon { background: rgba(255,255,255,.07); color: var(--text-muted); } .bx-card__icon--floor { color: var(--floor-color) !important; background: rgba(0,0,0,.12) !important; } .bx-card__link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--floor-color); } .bx-card__link:hover { text-decoration: underline; } /* Floor hero aliases / extensions */ .floor-hero__content { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .floor-hero__title { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.15; margin-bottom: 20px; } .floor-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--floor-color); margin-bottom: 16px; } .floor-hero__note { font-size: 13px; color: var(--text-muted); margin-top: 16px; } /* Per-floor hex overlay tint */ .floor-hero__hex { position: absolute; inset: 0; pointer-events: none; opacity: .06; background-image: linear-gradient(60deg, rgba(255,255,255,.1) 25%, transparent 25%), linear-gradient(120deg, rgba(255,255,255,.1) 25%, transparent 25%), linear-gradient(60deg, transparent 75%, rgba(255,255,255,.1) 75%), linear-gradient(120deg, transparent 75%, rgba(255,255,255,.1) 75%); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px; } /* Section header light variant */ .section-header--light p { color: rgba(41,79,110,.65) !important; } .section-header--light h2 { color: var(--text-light); } /* How-it-works / hiw-step */ .how-it-works { display: flex; flex-direction: column; gap: 40px; max-width: 760px; } .hiw-step { display: flex; gap: 24px; align-items: flex-start; } .hiw-step__number { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: rgba(0,0,0,.15); border: 2px solid var(--floor-color); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--floor-color); } .hiw-step__content h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .hiw-step__content p { font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.7; } .hiw-step__content a { color: var(--floor-color); } .bx-section--light .hiw-step__content p { color: rgba(41,79,110,.7); } .hiw-step--large .hiw-step__number { width: 52px; height: 52px; font-size: 20px; } .hiw-step--large .hiw-step__content h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; } .hiw-step--large .hiw-step__content p { font-size: 15px; } .hiw-step--large { margin-bottom: 48px; } /* How-it-works diagram */ .hiw-diagram { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; max-width: 480px; } .hiw-diagram__box { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 14px 20px; font-size: 14px; color: rgba(255,255,255,.8); width: 100%; } .hiw-diagram__box--accent { border-color: var(--floor-color); color: #fff; } .hiw-diagram__arrow { font-size: 18px; color: var(--floor-color); padding: 4px 24px; } /* CTA section */ .bx-cta-section { padding: 80px 0; background: var(--hero-bg); } .bx-cta-section.bx-section--light { background: var(--section-light); } .bx-cta-section.bx-section--light .bx-cta-box { background: #fff; border-color: rgba(0,200,150,.25); } .bx-cta-section.bx-section--light .bx-cta-box h2 { color: var(--text-light); } .bx-cta-section.bx-section--light .bx-cta-box p { color: rgba(41,79,110,.7); } .bx-cta-section.bx-section--light .btn-ghost { color: var(--text-light); border-color: rgba(41,79,110,.3); } .bx-cta-section.bx-section--light .btn-ghost:hover { background: rgba(41,79,110,.08); } .bx-cta-box { background: linear-gradient(135deg, rgba(0,200,150,.08), rgba(0,184,217,.06)); border: 1px solid rgba(0,200,150,.2); border-radius: 16px; padding: 64px; text-align: center; max-width: 760px; margin: 0 auto; } .bx-cta-box h2 { font-size: 32px; margin-bottom: 12px; } .bx-cta-box p { font-size: 17px; color: rgba(255,255,255,.7); margin-bottom: 32px; } .bx-cta-box__actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } /* Section CTA link */ .section-cta { margin-top: 48px; text-align: center; } /* Pricing toggle */ .pricing-toggle { display: flex; justify-content: center; margin: 0 auto 2.5rem; background: rgba(255,255,255,.07); border-radius: 10px; padding: 5px; width: fit-content; } .pricing-toggle__btn { background: transparent; border: none; color: rgba(255,255,255,.55); padding: .55rem 1.75rem; border-radius: 7px; cursor: pointer; font-size: .95rem; font-family: inherit; font-weight: 500; transition: background .2s, color .2s; display: flex; align-items: center; gap: .5rem; white-space: nowrap; } .pricing-toggle__btn--active { background: var(--floor-color, #00C896); color: #0F0F1A; } .pricing-toggle__save { background: rgba(0,0,0,.18); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 4px; } /* Pricing card class extensions */ .pricing-single { max-width: 460px; margin: 0 auto 2rem; } .pricing-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 0 auto 2rem; align-items: start; } .pricing-card--enterprise { display: flex; flex-direction: column; justify-content: center; } .pricing-card__enterprise-desc { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.65; margin: 12px 0 28px; } .btn-block { width: 100%; text-align: center; } .pricing-card__header { margin-bottom: 28px; } .pricing-card__plan { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 8px; } .pricing-card__amount { font-size: 36px !important; font-weight: 800; color: #fff !important; display: block; line-height: 1.1; } .pricing-card__period { font-size: 14px; color: var(--text-muted); display: block; margin-top: 4px; } .pricing-card__tagline { font-size: 13px; color: var(--text-muted); margin-top: 6px; display: block; } .pricing-card--light { background: #fff; border-color: rgba(0,200,150,.35); } .pricing-card--light .pricing-card__plan { color: rgba(41,79,110,.6); } .pricing-card--light .pricing-card__amount { color: var(--text-light) !important; } .pricing-card--light .pricing-card__period { color: rgba(41,79,110,.55); } .pricing-card--light .pricing-card__tagline { color: rgba(41,79,110,.55); } @media (max-width: 640px) { .pricing-duo { grid-template-columns: 1fr; } } .pricing-card__feature--na { color: var(--text-muted) !important; opacity: .5; } .pricing-card__feature--na::before { content: '✗' !important; color: var(--text-muted) !important; } .pricing-note { margin-top: 32px; text-align: center; font-size: 14px; color: var(--text-muted); max-width: 640px; margin-left: auto; margin-right: auto; } .section-note { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-muted); } /* Invest card class extensions */ .invest-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .invest-card__header h3 { font-size: 20px; font-weight: 700; margin: 0; } .invest-card__header--bpc h3 { color: #00C896; } .invest-card__header--blp h3 { color: #F0A500; } .invest-card__header--mining h3 { color: #00B8D9; } .invest-card__header--masternodes h3 { color: #7C3AED; } .invest-card__header--mns h3 { color: #F0A500; } .invest-card--featured { border-color: rgba(240,165,0,0.35); } .btn-floor--gold { background: #F0A500; color: #000; } .btn-floor--gold:hover { background: #FFB800; } .invest-card > p { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.65; margin-bottom: 16px; } .invest-card__points { list-style: none; margin-bottom: 24px; } .invest-card__points li { font-size: 13px; color: rgba(255,255,255,.7); padding: 5px 0; } .invest-card__points li::before { content: '✓ '; color: var(--floor-color); font-weight: 700; } /* Live widget class extensions */ .live-widget__stat { display: flex; flex-direction: column; gap: 4px; position: relative; } .live-widget__value { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .live-widget__footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-border-dark); font-size: 13px; text-align: right; } /* Badges */ .badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; } .badge--invest { background: rgba(255,255,255,.08); color: var(--text-muted); } /* Developer resource cards */ .dev-resource-card { text-decoration: none; display: block; } .dev-resource-card h3 { margin-bottom: 8px; } .dev-resource-card p { font-size: 14px; color: rgba(255,255,255,.6); } .bx-section--light .dev-resource-card p { color: rgba(41,79,110,.65); } .dev-note { margin-top: 32px; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2); border-radius: var(--r-card); padding: 18px 24px; font-size: 14px; color: rgba(255,255,255,.75); } .bx-section--light .dev-note { color: rgba(41,79,110,.75); } /* Token swatch (pie legend) */ .token-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; margin-right: 6px; vertical-align: middle; } /* Business type (used in grid) */ .business-type { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 14px 16px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); transition: border-color .2s; } .business-type:hover { border-color: var(--floor-color); } /* Specs table th support */ .specs-table th { text-align: left; padding: 14px 0; font-size: 14px; color: var(--text-muted); width: 45%; font-weight: 600; } /* Data table wrap + loading */ .data-table-wrap { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); overflow: hidden; } .data-table__loading { text-align: center; color: var(--text-muted); padding: 32px; font-size: 14px; } /* Text utilities */ .text-mono { font-family: 'Courier New', monospace; font-size: 12px; } /* Legal page content */ .legal-content { max-width: 720px; } .legal-placeholder { background: #f0f0f5; border: 1px dashed #ccc; border-radius: var(--r-card); padding: 40px; text-align: center; color: rgba(41,79,110,.5); font-size: 15px; line-height: 1.75; } .legal-placeholder a { color: var(--floor-color); } /* ── 29. Responsive ─────────────────────────────────────────── */ @media (max-width: 1024px) { .bx-grid-4 { grid-template-columns: repeat(2, 1fr); } .bx-grid-6 { grid-template-columns: repeat(3, 1fr); } .business-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: repeat(2, 1fr); } .pricing-card--featured { transform: none; } .net-stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .bx-section { padding: 64px 0; } .bx-grid-2, .bx-grid-3 { grid-template-columns: 1fr; } .bx-grid-4 { grid-template-columns: 1fr; } .bx-grid-6 { grid-template-columns: repeat(2, 1fr); } .business-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: 1fr; } .steps-grid::before { display: none; } .pricing-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .token-chart-wrap { flex-direction: column; } .live-widget__grid { grid-template-columns: repeat(2, 1fr); } .bx-nav__links, .bx-nav__ctas .btn-primary { display: none; } .bx-nav__hamburger { display: flex; } .portal-grid { grid-template-columns: 1fr; } .portal-card:nth-child(5) { grid-column: 1; max-width: 100%; } .home-topbar { padding: 20px 24px; } .home-datastrip__explore { display: none; } .home-datastrip__inner { gap: 20px; justify-content: flex-start; } .floor-hero { padding: calc(var(--nav-h) + 48px) 0 48px; } .floor-hero__sub { font-size: 16px; } .faq-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; } .net-stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .bx-grid-6 { grid-template-columns: 1fr; } .business-grid { grid-template-columns: 1fr; } h1 { font-size: 32px; } .net-stat-card__value { font-size: 22px; } .home-stat__label { display: none; } } /* ── Homepage (data-floor="home") ───────────────────────────── */ body[data-floor="home"] { display: flex; flex-direction: column; min-height: 100vh; background: #EDF4FB; } .hp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(189,221,250,.08); } .hp-header__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .hp-header__ctas { display: flex; align-items: center; gap: 10px; } .hp-header__logo img { height: var(--logo-h); width: auto; } .hp-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: var(--nav-h); } .hp-hero { position: relative; width: 100%; display: flex; justify-content: center; padding: 72px 24px 40px; overflow: hidden; text-align: center; } .hp-hero__hex { position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: linear-gradient(60deg, rgba(189,221,250,.12) 25%, transparent 25%), linear-gradient(120deg, rgba(189,221,250,.12) 25%, transparent 25%), linear-gradient(60deg, transparent 75%, rgba(189,221,250,.12) 75%), linear-gradient(120deg, transparent 75%, rgba(189,221,250,.12) 75%); background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px; } .hp-hero__content { position: relative; z-index: 1; max-width: 620px; } .hp-hero__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .hp-hero__title { font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.15; color: #294F6E; margin-bottom: 16px; } .hp-hero__sub { font-size: 17px; color: rgba(41,79,110,.6); line-height: 1.65; } /* Portal grid */ .hp-portals { width: 100%; padding: 0 24px 64px; } .hp-portals__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: var(--container); margin: 0 auto; } /* Primary row: Shopper + Store Owner — taller, more prominent */ .hp-portal--primary { padding: 40px 32px; } .hp-portal--primary .hp-portal__icon svg { width: 32px; height: 32px; } .hp-portal--primary .hp-portal__title { font-size: 22px; } .hp-portal--primary .hp-portal__desc { font-size: 14px; } /* Secondary 2×2 grid sits below, smaller cards */ .hp-portals__secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: var(--container); margin: 16px auto 0; } .hp-portal--secondary { padding: 18px 20px; background: #ffffff !important; border-color: #d0dce8 !important; } .hp-portal--secondary .hp-portal__title { font-size: 14px; font-weight: 700; color: #1a2e42 !important; } .hp-portal--secondary .hp-portal__desc { font-size: 12px; margin-bottom: 14px; color: #5a7a96 !important; } .hp-portal--secondary .hp-portal__icon { margin-bottom: 10px; } .hp-portal--secondary .hp-portal__icon svg { width: 18px; height: 18px; } .hp-portal--secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); border-color: #a0bcd4 !important; } .hp-portal { background: var(--card-dark); border: 1px solid var(--card-border-dark); border-radius: var(--r-card); padding: 28px 24px; display: block; transition: transform .2s, border-color .2s, box-shadow .2s; box-shadow: 0 2px 12px rgba(0,0,0,.18); } .hp-portal:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.28); } .hp-portal--merchants:hover { border-color: #00C896; } .hp-portal--cardholders:hover{ border-color: #2E75B6; } .hp-portal--investors:hover { border-color: #F0A500; } .hp-portal--developers:hover { border-color: #7C3AED; } .hp-portal--network:hover { border-color: #00B8D9; } .hp-portal--agents:hover { border-color: #E85D4A; } .hp-portal__icon { width: 48px; height: 48px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); } .hp-portal__icon svg { width: 24px; height: 24px; } .hp-portal--merchants .hp-portal__icon { color: #00C896; } .hp-portal--cardholders .hp-portal__icon{ color: #2E75B6; } .hp-portal--investors .hp-portal__icon { color: #F0A500; } .hp-portal--developers .hp-portal__icon { color: #7C3AED; } .hp-portal--network .hp-portal__icon { color: #00B8D9; } .hp-portal--agents .hp-portal__icon { color: #E85D4A; } .hp-portal__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; } .hp-portal__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; flex: 1; } /* CTA button — primary cards: solid filled */ .hp-portal__cta-btn { display: inline-block; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; transition: opacity .15s, transform .15s; } .hp-portal:hover .hp-portal__cta-btn { transform: translateX(2px); } .hp-portal--merchants .hp-portal__cta-btn { background: var(--floor-merchants); color: var(--on-accent); } .hp-portal--cardholders .hp-portal__cta-btn { background: var(--floor-cardholders); color: #fff; } .hp-portal--investors .hp-portal__cta-btn { background: var(--floor-investors); color: var(--on-accent); } .hp-portal--developers .hp-portal__cta-btn { background: var(--floor-developers); color: #fff; } .hp-portal--network .hp-portal__cta-btn { background: var(--floor-network); color: var(--on-accent); } .hp-portal--agents .hp-portal__cta-btn { background: var(--floor-agents); color: #fff; } /* Secondary cards: plain text link */ .hp-portal--secondary .hp-portal__cta-btn { background: none; padding: 0; font-size: 12px; font-weight: 600; border: none; border-radius: 0; } .hp-portal--secondary.hp-portal--investors .hp-portal__cta-btn { color: #F0A500; } .hp-portal--secondary.hp-portal--developers .hp-portal__cta-btn { color: #7C3AED; } .hp-portal--secondary.hp-portal--network .hp-portal__cta-btn { color: #00B8D9; } .hp-portal--secondary.hp-portal--agents .hp-portal__cta-btn { color: #E85D4A; } /* Live stats strip — stays dark as deliberate accent at page bottom */ .hp-stats { width: 100%; margin-top: auto; background: #0D2035; border-top: 1px solid rgba(189,221,250,.08); padding: 18px 40px; } .hp-stats__inner { display: flex; align-items: center; justify-content: center; gap: 48px; max-width: var(--container); margin: 0 auto; flex-wrap: wrap; } .hp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; } .hp-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .hp-stat__value { font-size: 20px; font-weight: 700; color: #fff; } .hp-stat__value--static { color: var(--accent); } .hp-stat .pulse-dot { position: absolute; top: 0; right: -14px; } .stat-skeleton { display: inline-block; width: 80px; height: 20px; background: linear-gradient(90deg, rgba(255,255,255,.12) 25%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 75%); background-size: 200% 100%; animation: skeleton-sweep 1.4s infinite; border-radius: 4px; } @keyframes skeleton-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Global App CTA strip */ .bx-app-cta { background:var(--primary); border-top:1px solid var(--card-border-dark); padding:32px 0; } .bx-app-cta__grid { display:flex; align-items:stretch; gap:0; } .bx-app-cta__panel { display:flex; align-items:center; gap:20px; flex:1; padding:8px 24px; } .bx-app-cta__panel--merchant .bx-app-cta__icon { color:var(--accent); } .bx-app-cta__panel--client .bx-app-cta__icon { color:var(--accent); } .bx-app-cta__icon { flex-shrink:0; width:52px; height:52px; border-radius:14px; background:rgba(0,200,150,0.1); border:1px solid rgba(0,200,150,0.2); display:flex; align-items:center; justify-content:center; } .bx-app-cta__text { flex:1; } .bx-app-cta__label { font-size:11px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:2px; } .bx-app-cta__title { font-size:16px; font-weight:700; color:#fff; margin-bottom:4px; } .bx-app-cta__sub { font-size:13px; color:rgba(255,255,255,0.5); line-height:1.5; } .bx-app-cta__btn { flex-shrink:0; padding:10px 20px; background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:700; border-radius:8px; text-decoration:none; white-space:nowrap; transition:opacity .2s; } .bx-app-cta__btn:hover { opacity:0.85; } .bx-app-cta__divider { width:1px; background:var(--card-border-dark); margin:0 8px; } @media (max-width:768px) { .bx-app-cta__grid { flex-direction:column; gap:20px; } .bx-app-cta__divider { width:100%; height:1px; margin:0; } .bx-app-cta__panel { padding:8px 0; flex-wrap:wrap; } .bx-app-cta__btn { width:100%; text-align:center; margin-top:8px; } } /* Homepage footer */ .hp-footer { background: transparent; border-top: 1px solid rgba(41,79,110,.15); padding: 16px 40px; } .hp-footer__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: var(--container); margin: 0 auto; font-size: 12px; color: rgba(41,79,110,.5); text-align: center; gap: 8px; } .hp-footer__links { display: flex; gap: 20px; } .hp-footer__links a:hover { color: #294F6E; } /* Homepage responsive */ @media (max-width: 640px) { .hp-header__inner { padding: 0 20px; } .hp-portals__grid { grid-template-columns: 1fr; } .hp-portals__secondary { grid-template-columns: 1fr; gap: 10px; } .hp-stats { padding: 18px 20px; } .hp-stats__inner { gap: 24px; justify-content: flex-start; } .hp-footer { padding: 16px 20px; } .hp-footer__links { display: none; } } /* ── 30. Light Floor Theme (merchants, cardholders) ─────────────── */ /* * Applied via data-theme="light" on for consumer-facing floors. * Nav stays dark on all floors (logo is opaque JPEG — white nav would clash). * Dark sections within light pages keep their own backgrounds — alternating * light/dark sections are a deliberate design feature, not a bug. */ body[data-theme="light"] { background: #EDF4FB; color: var(--text-light); } /* ── Light floor hero ───────────────────────────────────────────── */ body[data-theme="light"] .floor-hero { background: #F5F9FE; } /* Gradient fade at bottom of hero matches light bg */ body[data-theme="light"] .floor-hero::after { background: linear-gradient(to bottom, transparent, #F5F9FE); } /* Hex grid pattern — brand navy tint on light bg */ body[data-theme="light"] .floor-hero::before { background-image: linear-gradient(30deg, rgba(41,79,110,.05) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.05) 87.5%), linear-gradient(150deg, rgba(41,79,110,.05) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.05) 87.5%), linear-gradient(30deg, rgba(41,79,110,.05) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.05) 87.5%), linear-gradient(150deg, rgba(41,79,110,.05) 12%, transparent 12.5%, transparent 87%, rgba(41,79,110,.05) 87.5%), linear-gradient(60deg, rgba(41,79,110,.04) 25%, transparent 25.5%, transparent 75%, rgba(41,79,110,.04) 75%), linear-gradient(60deg, rgba(41,79,110,.04) 25%, transparent 25.5%, transparent 75%, rgba(41,79,110,.04) 75%); opacity: 1; } /* Hex dot overlay — reduce to near-invisible on white */ body[data-theme="light"] .floor-hero__hex { opacity: .03; } /* Hero headline + body text → dark on white */ body[data-theme="light"] .floor-hero__title, body[data-theme="light"] .floor-hero h1 { color: var(--text-light); } body[data-theme="light"] .floor-hero__sub { color: rgba(41,79,110,.65); } body[data-theme="light"] .floor-hero__note { color: rgba(41,79,110,.45); } /* Ghost button inside light hero — invert from white-outline to navy-outline */ body[data-theme="light"] .floor-hero .btn-ghost { color: rgba(41,79,110,.8); border-color: rgba(41,79,110,.25); background: transparent; } body[data-theme="light"] .floor-hero .btn-ghost:hover { color: var(--text-light); border-color: rgba(41,79,110,.6); opacity: 1; } /* back-link text on light pages */ body[data-theme="light"] .back-link { color: rgba(41,79,110,.5); } body[data-theme="light"] .back-link:hover { color: var(--text-light); } /* bx-section--dark stays dark even on light-theme pages (deliberate contrast) */ body[data-theme="light"] .bx-section--dark { background: var(--primary); color: var(--text-dark); } /* site-footer stays dark on all floors — no override needed */ /* ═══════════════════════════════════════════════════════════════════ PLATFORM UPDATES — /en/updates ═══════════════════════════════════════════════════════════════════ */ /* ── Hero ── */ .floor-hero--updates { background: var(--primary); } /* ── Filter bar ── */ .upd-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .upd-filter { padding: .35rem .9rem; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--text-muted); font-size: .82rem; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .upd-filter:hover { border-color: var(--accent); color: var(--accent); } .upd-filter.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; } /* ── Grid ── */ .upd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .upd-empty { color: var(--text-muted); } /* ── Card ── */ .upd-card { background: #fff; border: 1px solid rgba(41,79,110,.1); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; box-shadow: 0 1px 4px rgba(41,79,110,.06); } .upd-card:hover { border-color: rgba(0,200,150,.3); transform: translateY(-2px); } .upd-card__img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255,255,255,.06); } .upd-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .upd-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .upd-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; } .upd-card__date { font-size: .78rem; color: var(--text-muted); } .upd-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; } .upd-card__title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; margin: 0 0 .6rem; color: var(--text-light); } .upd-card__title a { color: inherit; text-decoration: none; } .upd-card__title a:hover { color: var(--accent); } .upd-card__countries { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; margin: 0 0 .6rem; } .upd-card__countries svg { flex-shrink: 0; opacity: .6; } .upd-card__summary { font-size: .88rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 1rem; flex: 1; } .upd-card__more { font-size: .85rem; color: var(--accent); text-decoration: none; font-weight: 500; margin-top: auto; } .upd-card__more:hover { text-decoration: underline; } /* ── Tags (pills) ── */ .upd-tag { font-size: .7rem; font-weight: 600; padding: .2rem .55rem; border-radius: 20px; white-space: nowrap; background: rgba(255,255,255,.08); color: var(--text-muted); } .upd-tag--all { background: rgba(0,200,150,.15); color: #00c896; } .upd-tag--merchants { background: rgba(99,179,237,.15); color: #63b3ed; } .upd-tag--investors { background: rgba(246,173,85,.15); color: #f6ad55; } .upd-tag--developers { background: rgba(154,230,180,.15);color: #68d391; } .upd-tag--cardholders { background: rgba(197,153,255,.15);color: #c59fff; } .upd-tag--steroid { background: rgba(255,121,97,.15); color: #ff7961; } .upd-tag--club-owners { background: rgba(237,100,166,.15);color: #ed64a6; } .upd-tag--partners { background: rgba(90,200,250,.15); color: #5ac8fa; } .upd-tag--node-operators { background: rgba(251,211,141,.15);color: #fbd38d; } /* ── Detail page ── */ .upd-breadcrumb { margin-bottom: 1.5rem; } .upd-breadcrumb a { font-size: .85rem; color: var(--text-muted); text-decoration: none; } .upd-breadcrumb a:hover { color: var(--accent); } .upd-detail__hero-img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; margin-bottom: 1.5rem; background: rgba(255,255,255,.06); } .upd-detail__hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .upd-detail__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; } .upd-detail__title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.25; margin: 0 0 .75rem; } .upd-detail__summary { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 2rem; } /* ── Prose (full HTML content) ── */ .prose { font-size: .97rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 2.5rem; } .prose h2, .prose h3, .prose h4 { color: var(--text-dark); margin: 1.5rem 0 .6rem; font-weight: 600; } .prose h2 { font-size: 1.3rem; } .prose h3 { font-size: 1.1rem; } .prose p { margin: 0 0 1rem; } .prose a { color: var(--accent); } .prose ul, .prose ol { padding-left: 1.5rem; margin: 0 0 1rem; } .prose li { margin-bottom: .35rem; } .prose code { background: rgba(255,255,255,.07); padding: .1rem .35rem; border-radius: 4px; font-size: .88em; } .prose pre { background: rgba(255,255,255,.06); padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 0 0 1rem; } .prose pre code { background: none; padding: 0; } .prose blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1rem 0; color: var(--text-muted); } .prose hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 1.5rem 0; } .prose img { max-width: 100%; border-radius: 8px; } .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; } .prose th, .prose td { padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.1); font-size: .88rem; } .prose th { background: rgba(255,255,255,.05); color: var(--text-dark); } .upd-detail__back { margin-top: 2rem; } /* ── Updates light-section overrides (always light, no data-theme needed) ── */ .bx-section--light .upd-filter { border-color: rgba(41,79,110,.2); color: rgba(41,79,110,.7); } .bx-section--light .upd-filter:hover { border-color: var(--accent); color: var(--accent); } .bx-section--light .upd-card__summary { color: rgba(41,79,110,.65); } .bx-section--light .upd-card__date { color: rgba(41,79,110,.5); } .bx-section--light .upd-card__countries { color: rgba(41,79,110,.55); } .bx-section--light .upd-detail__title { color: var(--text-light); } .bx-section--light .prose { color: rgba(41,79,110,.75); } .bx-section--light .prose h2, .bx-section--light .prose h3, .bx-section--light .prose h4 { color: var(--text-light); } .bx-section--light .prose code { background: rgba(41,79,110,.07); } .bx-section--light .prose pre { background: rgba(41,79,110,.05); } .bx-section--light .prose th { background: rgba(41,79,110,.04); color: var(--text-light); } .bx-section--light .prose th, .bx-section--light .prose td { border-color: rgba(41,79,110,.1); } .bx-section--light .prose hr { border-color: rgba(41,79,110,.1); } .bx-section--light .upd-breadcrumb a { color: rgba(41,79,110,.5); } /* ── Admin updates subpage ── */ .upd-admin-wrap { padding: 0 0 2rem; } .upd-admin-wrap h4 { margin-bottom: 1rem; } .upd-admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; } .upd-admin-table th, .upd-admin-table td { padding: .6rem .8rem; border-bottom: 1px solid #dee2e6; vertical-align: middle; } .upd-admin-table th { background: #f8f9fa; font-weight: 600; } .upd-admin-table .upd-adm-title { font-weight: 500; max-width: 240px; } .upd-admin-table .upd-adm-actions { white-space: nowrap; } #upd-form-wrap { display: none; margin-top: 1.5rem; } /* ── Facebook share buttons — updates ── */ .upd-fb-share { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; background: #1877F2; color: #fff; border-radius: 6px; font-size: .82rem; font-weight: 600; text-decoration: none; transition: opacity .15s; white-space: nowrap; } .upd-fb-share:hover { opacity: .88; color: #fff; } /* Detail page footer row */ .upd-detail__footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; } /* Card actions row */ .upd-card__actions { display: flex; align-items: center; gap: .75rem; margin-top: auto; flex-wrap: wrap; } .upd-fb-share--sm { padding: .35rem .75rem; font-size: .75rem; } /* ═══════════════════════════════════════════════════════════════════ HOMEPAGE — Latest Updates strip ═══════════════════════════════════════════════════════════════════ */ .hp-updates { background: var(--section-light); padding: 60px 0; } .hp-updates__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .hp-updates__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 32px; flex-wrap: wrap; } .hp-updates__title { font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 700; color: var(--text-light); margin: 0; } .hp-updates__all { font-size: .88rem; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; } .hp-updates__all:hover { text-decoration: underline; } .hp-updates__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .hp-upd-card { background: #fff; border: 1px solid rgba(41,79,110,.1); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; box-shadow: 0 1px 4px rgba(41,79,110,.06); } .hp-upd-card:hover { border-color: rgba(0,200,150,.35); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,200,150,.1); } .hp-upd-card__img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-light-2); } .hp-upd-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .hp-upd-card__body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .hp-upd-card__date { font-size: .75rem; color: rgba(41,79,110,.5); margin-bottom: .4rem; display: block; } .hp-upd-card__title { font-size: .97rem; font-weight: 700; color: var(--text-light); line-height: 1.35; margin: 0 0 .5rem; } .hp-upd-card__summary { font-size: .83rem; color: rgba(41,79,110,.65); line-height: 1.5; margin: 0; flex: 1; } @media (max-width: 640px) { .hp-updates__grid { grid-template-columns: 1fr; } .hp-updates__header { flex-direction: column; align-items: flex-start; } }