/* ============================================================ CloviTrade marketing site — token-driven stylesheet TOKEN BLOCK: the ONLY place raw color values are allowed. Source of truth: CloviDOS GET /api/v1/context/clovitrade (light + dark, fetched 2026-07-23). Do NOT hardcode colors anywhere else — reference var(--ct-*) tokens. ============================================================ */ :root { /* DARK is the site default (set via + FOUC gate). This :root block is the LIGHT parity theme, applied only when the user explicitly switches to light (gate removes data-theme/dark). */ --ct-primary: #0E7490; /* text-safe cyan on white */ --ct-primary-hover: #155E75; --ct-primary-active: #164E63; --ct-on-primary: #FFFFFF; --ct-accent: #00D4FF; /* electric cyan — vivid accent only */ --ct-ai: #6366F1; /* indigo — AI features */ --ct-gold: #FFD700; --ct-bg: #FFFFFF; --ct-surface: #FFFFFF; --ct-surface-2: #F8FAFC; --ct-surface-3: #F1F5F9; --ct-border: #E2E8F0; --ct-border-strong: #CBD5E1; --ct-text: #0F172A; --ct-text-muted: #64748B; --ct-text-subtle: #94A3B8; --ct-success: #10B981; /* P&L green — data only, never brand */ --ct-warning: #F59E0B; --ct-danger: #EF4444; /* P&L red — data only, never brand */ /* terminal mockup panels — always deep-navy, both themes */ --ct-panel-bg: #0B0F1A; --ct-panel-surface: #131A2A; --ct-panel-surface-2: #1A2332; --ct-panel-border: #1E293B; --ct-panel-border-strong: #334155; --ct-panel-text: #F1F5F9; --ct-panel-muted: #94A3B8; --ct-panel-subtle: #64748B; --ct-panel-accent: #22D3EE; /* type */ --ct-font: Inter, system-ui, -apple-system, sans-serif; --ct-mono: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, monospace; /* geometry / motion (CloviDOS) */ --ct-r-sm: 4px; --ct-r-md: 8px; --ct-r-lg: 12px; --ct-r-xl: 16px; --ct-r-2xl: 24px; --ct-r-full: 9999px; --ct-shadow-md: 0 2px 6px oklch(0.2 0.01 80 / 0.08), 0 1px 2px oklch(0.2 0.01 80 / 0.06); --ct-shadow-lg: 0 8px 24px oklch(0.2 0.01 80 / 0.10), 0 2px 6px oklch(0.2 0.01 80 / 0.06); --ct-shadow-xl: 0 16px 48px oklch(0.2 0.01 80 / 0.14), 0 4px 12px oklch(0.2 0.01 80 / 0.08); --ct-focus: 0 0 0 3px oklch(0.5 0.08 195 / 0.45); --ct-ease: cubic-bezier(0.2, 0, 0, 1); --ct-dur: 250ms; --ct-max: 1200px; color-scheme: light; } :root[data-theme="dark"], :root.dark { /* dark parity — CloviDOS mode=dark */ --ct-primary: #22D3EE; --ct-primary-hover: #00D4FF; --ct-primary-active: #00B8D9; --ct-on-primary: #0B0F1A; --ct-bg: #0B0F1A; --ct-surface: #131A2A; --ct-surface-2: #1A2332; --ct-surface-3: #212B3D; --ct-border: #1E293B; --ct-border-strong: #334155; --ct-text: #F1F5F9; --ct-text-muted: #94A3B8; --ct-text-subtle: #64748B; --ct-success: #34d399; --ct-warning: #fbbf24; --ct-danger: #f87171; color-scheme: dark; } /* ==================== end token block ==================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ct-font); background: var(--ct-bg); color: var(--ct-text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease); } img, svg { max-width: 100%; } a { color: var(--ct-primary); text-decoration: none; } a:hover { color: var(--ct-primary-hover); } :focus-visible { outline: none; box-shadow: var(--ct-focus); border-radius: var(--ct-r-sm); } .mono, .num { font-family: var(--ct-mono); font-variant-numeric: tabular-nums; } .wrap { max-width: var(--ct-max); margin: 0 auto; padding: 0 24px; } .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- nav ---------- */ .ct-nav { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--ct-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ct-border); } .ct-nav-inner { max-width: var(--ct-max); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; height: 64px; } .ct-logo { display:flex; align-items:center; gap:10px; font-weight: 800; font-size: 1.15rem; color: var(--ct-text); letter-spacing: -0.02em; } .ct-logo:hover { color: var(--ct-text); } .ct-logo .lg-trade { color: var(--ct-primary); } .ct-links { display: flex; gap: 22px; margin-left: auto; align-items: center; } .ct-links a { color: var(--ct-text-muted); font-size: .92rem; font-weight: 500; } .ct-links a:hover, .ct-links a[aria-current="page"] { color: var(--ct-text); } .ct-links a[aria-current="page"] { color: var(--ct-primary); font-weight: 600; } .ct-nav .btn { margin-left: 4px; } .ct-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--ct-border); border-radius: var(--ct-r-md); padding: 8px 10px; cursor: pointer; color: var(--ct-text); } @media (max-width: 900px) { .ct-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--ct-bg); border-bottom: 1px solid var(--ct-border); flex-direction: column; padding: 16px 24px 20px; gap: 14px; align-items: flex-start; box-shadow: var(--ct-shadow-lg); } .ct-links.open { display: flex; } .ct-burger { display: block; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .95rem; padding: 11px 22px; border-radius: var(--ct-r-md); border: 1px solid transparent; cursor: pointer; transition: all var(--ct-dur) var(--ct-ease); font-family: var(--ct-font); } .btn-primary { background: var(--ct-primary); color: var(--ct-on-primary); } .btn-primary:hover { background: var(--ct-primary-hover); color: var(--ct-on-primary); transform: translateY(-1px); box-shadow: var(--ct-shadow-md); } .btn-ghost { background: transparent; color: var(--ct-text); border-color: var(--ct-border-strong); } .btn-ghost:hover { border-color: var(--ct-primary); color: var(--ct-primary); } .btn-lg { padding: 14px 30px; font-size: 1.05rem; border-radius: var(--ct-r-lg); } /* ---------- hero ---------- */ .hero { padding: 72px 0 40px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-primary); background: color-mix(in srgb, var(--ct-accent) 12%, var(--ct-surface-2)); border: 1px solid color-mix(in srgb, var(--ct-accent) 35%, var(--ct-border)); padding: 5px 14px; border-radius: var(--ct-r-full); } .eyebrow.ai { color: var(--ct-ai); background: color-mix(in srgb, var(--ct-ai) 10%, var(--ct-surface-2)); border-color: color-mix(in srgb, var(--ct-ai) 30%, var(--ct-border)); } h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; margin: 18px 0 16px; font-weight: 800; } .grad { background: linear-gradient(100deg, var(--ct-primary), var(--ct-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { font-size: 1.15rem; color: var(--ct-text-muted); max-width: 560px; margin: 0 0 28px; } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 12px; font-weight: 750; } h3 { font-size: 1.15rem; margin: 0 0 8px; font-weight: 700; } .section { padding: 72px 0; } .section-alt { background: var(--ct-surface-2); } .section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; } .section-head p { color: var(--ct-text-muted); font-size: 1.05rem; } /* ---------- terminal mockup panels (always dark) ---------- */ .term { background: var(--ct-panel-bg); border: 1px solid var(--ct-panel-border-strong); border-radius: var(--ct-r-xl); overflow: hidden; box-shadow: var(--ct-shadow-xl); color: var(--ct-panel-text); font-size: .8rem; } .term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--ct-panel-surface); border-bottom: 1px solid var(--ct-panel-border); } .term-dot { width: 10px; height: 10px; border-radius: var(--ct-r-full); background: var(--ct-panel-border-strong); } .term-dot:first-child { background: var(--ct-danger); } .term-dot:nth-child(2) { background: var(--ct-warning); } .term-dot:nth-child(3) { background: var(--ct-success); } .term-title { margin-left: 8px; color: var(--ct-panel-muted); font-family: var(--ct-mono); font-size: .72rem; } .term-body { padding: 16px; } .term .lbl { color: var(--ct-panel-subtle); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; } .term .val { font-family: var(--ct-mono); font-weight: 600; } .term .up { color: var(--ct-success); } .term .down { color: var(--ct-danger); } .term .cy { color: var(--ct-panel-accent); } .term .gd { color: var(--ct-gold); } .term .aiC { color: var(--ct-ai); } .term-card { background: var(--ct-panel-surface); border: 1px solid var(--ct-panel-border); border-radius: var(--ct-r-lg); padding: 12px 14px; } .term-grid { display: grid; gap: 10px; } /* ---------- cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .card { background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-r-xl); padding: 26px; transition: all var(--ct-dur) var(--ct-ease); position: relative; } .card:hover { border-color: color-mix(in srgb, var(--ct-accent) 45%, var(--ct-border)); box-shadow: var(--ct-shadow-lg); transform: translateY(-2px); } .card p { color: var(--ct-text-muted); font-size: .93rem; margin: 0; } .card .icon { width: 42px; height: 42px; border-radius: var(--ct-r-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: color-mix(in srgb, var(--ct-accent) 12%, var(--ct-surface-2)); color: var(--ct-primary); } .card .icon.ai { background: color-mix(in srgb, var(--ct-ai) 12%, var(--ct-surface-2)); color: var(--ct-ai); } .badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--ct-r-full); } .badge-live { background: color-mix(in srgb, var(--ct-success) 14%, var(--ct-surface-2)); color: var(--ct-success); } .badge-soon { background: color-mix(in srgb, var(--ct-gold) 22%, var(--ct-surface-2)); color: color-mix(in srgb, var(--ct-gold) 30%, var(--ct-text)); } .badge-ai { background: color-mix(in srgb, var(--ct-ai) 12%, var(--ct-surface-2)); color: var(--ct-ai); } /* ---------- stat strip ---------- */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-top: 42px; } .stat { text-align: center; padding: 18px 10px; border: 1px solid var(--ct-border); border-radius: var(--ct-r-lg); background: var(--ct-surface); } .stat b { display: block; font-family: var(--ct-mono); font-size: 1.6rem; color: var(--ct-primary); letter-spacing: -0.02em; } .stat span { font-size: .8rem; color: var(--ct-text-muted); } /* ---------- pricing ---------- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; align-items: stretch; } .plan { background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-r-xl); padding: 28px 24px; display: flex; flex-direction: column; } .plan.hot { border-color: var(--ct-primary); box-shadow: 0 0 0 1px var(--ct-primary), var(--ct-shadow-lg); } .plan .price { font-family: var(--ct-mono); font-size: 2.3rem; font-weight: 700; letter-spacing: -0.03em; margin: 8px 0 2px; } .plan .per { color: var(--ct-text-subtle); font-size: .85rem; } .plan ul { list-style: none; margin: 18px 0 22px; padding: 0; flex: 1; } .plan li { padding: 6px 0 6px 26px; font-size: .9rem; color: var(--ct-text-muted); position: relative; } .plan li::before { content: "✓"; position: absolute; left: 2px; color: var(--ct-success); font-weight: 700; } .plan li.no::before { content: "—"; color: var(--ct-text-subtle); } .bill-toggle { display: inline-flex; border: 1px solid var(--ct-border-strong); border-radius: var(--ct-r-full); padding: 4px; gap: 4px; background: var(--ct-surface); } .bill-toggle button { border: 0; background: transparent; padding: 8px 20px; border-radius: var(--ct-r-full); font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--ct-text-muted); font-family: var(--ct-font); } .bill-toggle button[aria-pressed="true"] { background: var(--ct-primary); color: var(--ct-on-primary); } /* ---------- tables ---------- */ .tbl-scroll { overflow-x: auto; border: 1px solid var(--ct-border); border-radius: var(--ct-r-lg); } table.ct { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; } table.ct th { text-align: left; padding: 12px 16px; background: var(--ct-surface-2); border-bottom: 1px solid var(--ct-border); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ct-text-muted); } table.ct td { padding: 12px 16px; border-bottom: 1px solid var(--ct-border); color: var(--ct-text-muted); } table.ct td:first-child { color: var(--ct-text); font-weight: 600; } table.ct tr:last-child td { border-bottom: 0; } table.ct .price-cell { font-family: var(--ct-mono); } /* ---------- FAQ ---------- */ details.faq { border: 1px solid var(--ct-border); border-radius: var(--ct-r-lg); margin-bottom: 12px; background: var(--ct-surface); } details.faq summary { cursor: pointer; padding: 18px 22px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--ct-primary); font-family: var(--ct-mono); } details.faq[open] summary::after { content: "–"; } details.faq .a { padding: 0 22px 18px; color: var(--ct-text-muted); font-size: .93rem; } /* ---------- forms ---------- */ .field { display: block; margin-bottom: 14px; } .field span { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; } .field input { width: 100%; padding: 11px 14px; border: 1px solid var(--ct-border-strong); border-radius: var(--ct-r-md); background: var(--ct-surface); color: var(--ct-text); font-family: var(--ct-font); font-size: .95rem; } .field input:focus { outline: none; border-color: var(--ct-primary); box-shadow: var(--ct-focus); } /* ---------- footer ---------- */ .ct-footer { border-top: 1px solid var(--ct-border); background: var(--ct-surface-2); padding: 48px 0 32px; margin-top: 40px; font-size: .88rem; } .ct-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; max-width: var(--ct-max); margin: 0 auto; padding: 0 24px; } @media (max-width: 760px) { .ct-footer-grid { grid-template-columns: 1fr 1fr; } } .ct-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ct-text-subtle); margin: 0 0 12px; } .ct-footer a { display: block; color: var(--ct-text-muted); padding: 3px 0; } .ct-footer a:hover { color: var(--ct-primary); } .ct-footer .legal { max-width: var(--ct-max); margin: 32px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--ct-border); color: var(--ct-text-subtle); font-size: .78rem; } .ct-footer .disclaimer { margin-top: 10px; line-height: 1.5; } /* ---------- misc ---------- */ .cta-band { background: var(--ct-panel-bg); color: var(--ct-panel-text); border-radius: var(--ct-r-2xl); padding: 56px 40px; text-align: center; position: relative; overflow: hidden; } .cta-band h2 { color: var(--ct-panel-text); } .cta-band p { color: var(--ct-panel-muted); } .cta-band::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--ct-accent) 18%, transparent), transparent 55%), radial-gradient(ellipse at 75% 80%, color-mix(in srgb, var(--ct-ai) 16%, transparent), transparent 55%); pointer-events: none; } .cta-band > * { position: relative; } .notice { border-left: 3px solid var(--ct-gold); background: color-mix(in srgb, var(--ct-gold) 8%, var(--ct-surface-2)); padding: 14px 18px; border-radius: 0 var(--ct-r-md) var(--ct-r-md) 0; font-size: .9rem; color: var(--ct-text-muted); } .steps { counter-reset: s; display: grid; gap: 20px; } .step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; } .step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--ct-mono); font-weight: 700; color: var(--ct-primary); font-size: 1.3rem; border: 1px solid var(--ct-border); border-radius: var(--ct-r-lg); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--ct-surface); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }