/* ── Verif-AI Shared Base ── Reset + CSS custom properties used across all pages. Include this BEFORE any page-specific stylesheet. ─────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* Backgrounds */ --bg:#0a1628; --card:#111d35; --card-hover:#162545; /* Brand colours */ --accent:#4FC3F7; --accent-dim:rgba(79,195,247,.15); --green:#66BB6A; --green-dim:rgba(102,187,106,.15); --purple:#AB47BC; --warm:#FF8A65; --warm-dim:rgba(255,138,101,.15); --red:#ef5350; --red-dim:rgba(239,83,80,.15); --amber:#FFD54F; --amber-dim:rgba(255,213,79,.15); --orange:#FF8A65; /* Text */ --text:#E0E6ED; --text-muted:#8899AA; --text-faint:#556677; /* Borders & radii */ --border:#1a2d4d; --border-light:#253d60; --radius:12px; --radius-sm:8px; /* ── Motion easing curves ──────────────────────────────────────── Replace plain `ease` / `ease-in-out` with these tuned cubic-bezier curves for UI transitions. Loaded on every page via base.css so any template can reference them via CSS var. Consumed primarily by marketing pages (splash, features, pricing, about, SEO landings) where the fluid motion pass is scoped to live. */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* Material "standard" — hover states, quick toggles */ --ease-smooth: cubic-bezier(.24, .43, .15, .97); /* Slow-out — section reveals, reassuring transitions */ --ease-out-soft: cubic-bezier(.65, .05, .36, 1); /* Slow-in / fast-out — menu slides */ --ease-overshoot: cubic-bezier(.54, -.07, .33, 1.31); /* Spring-back — delight moments (icon scale on hover) */ } /* ── Light theme overrides ──────────────────────────────────────── Activated when JS sets data-theme="light" on . Dark is the default (values in :root above). */ [data-theme="light"]{ --bg:#f0f2f6; --card:#ffffff; --card-hover:#f5f6f9; --accent:#1565C0; --accent-dim:rgba(21,101,192,.08); --green:#1B5E20; --green-dim:rgba(27,94,32,.08); --purple:#6A1B9A; --warm:#D84315; --warm-dim:rgba(216,67,21,.08); --red:#B71C1C; --red-dim:rgba(183,28,28,.08); --amber:#E65100; --amber-dim:rgba(230,81,0,.08); --orange:#D84315; --text:#000000; --text-muted:#1a2b3c; --text-faint:#4a5568; --border:#c8cfd8; --border-light:#dce1e8; } /* ── Light-mode overrides for hardcoded dark patterns ──────────── */ [data-theme="light"] .orbs-bg{background:#f5f7fa !important} [data-theme="light"] .orb{opacity:0.04 !important} [data-theme="light"] #cookie-banner{background:#fff !important;border-color:var(--border) !important;box-shadow:0 10px 30px rgba(0,0,0,0.08) !important} [data-theme="light"] #cookie-banner h3{color:var(--text) !important} [data-theme="light"] #cookie-banner p{color:var(--text-muted) !important} [data-theme="light"] #cookie-decline{border-color:var(--text-muted) !important;color:var(--text-muted) !important} [data-theme="light"] #cookie-accept{background:var(--accent) !important;color:#fff !important} [data-theme="light"] .gradient-flow{background:linear-gradient(135deg,var(--accent),var(--purple),var(--accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text} [data-theme="light"] .logo,[data-theme="light"] .dp-nav .logo{color:var(--text) !important} [data-theme="light"] .sidebar{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] .nav-link{border-color:rgba(0,0,0,.1) !important} [data-theme="light"] .nav-link:hover{color:var(--text) !important;border-color:rgba(0,0,0,.18) !important} [data-theme="light"] .nav-link.primary{color:#fff !important} /* ── Global light-mode text/bg catch-all ─────────────────────── Most page-specific CSS files hardcode color:#fff on headings, inputs, cards, etc. Instead of editing 100+ rules across 20 files, this block force-recolours everything in light mode. */ [data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3, [data-theme="light"] h4,[data-theme="light"] h5,[data-theme="light"] h6{color:var(--text) !important} [data-theme="light"] p,[data-theme="light"] li,[data-theme="light"] td, [data-theme="light"] th,[data-theme="light"] label,[data-theme="light"] span:not(.dp-status-badge):not(.dp-co-status){color:var(--text)} [data-theme="light"] a{color:var(--accent)} [data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select{ background:var(--card) !important;color:var(--text) !important; border-color:var(--border) !important} [data-theme="light"] input::placeholder{color:var(--text-faint) !important} [data-theme="light"] .signup-card,[data-theme="light"] .how-step, [data-theme="light"] .uc-card,[data-theme="light"] .feature-card, [data-theme="light"] .pkg,[data-theme="light"] .plan-card, [data-theme="light"] .acct-card,[data-theme="light"] .stat-card, [data-theme="light"] .rs-card,[data-theme="light"] .report-section, [data-theme="light"] .dp-card,[data-theme="light"] .dp-hero{ background:var(--card) !important;border-color:var(--border) !important; box-shadow:0 2px 8px rgba(0,0,0,0.06) !important} [data-theme="light"] .signup-card::before{opacity:0 !important} [data-theme="light"] .signup-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:#fff !important} [data-theme="light"] .signup-form input{background:#f5f7fa !important;border-color:var(--border) !important;color:var(--text) !important} [data-theme="light"] .signup-form input:focus{border-color:var(--accent) !important;background:#fff !important;box-shadow:0 0 0 4px rgba(25,118,210,0.1) !important} [data-theme="light"] .signup-form input::placeholder{color:var(--text-faint) !important} [data-theme="light"] .signup-trust .trust-item svg{stroke:var(--green) !important} [data-theme="light"] .how-step{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} [data-theme="light"] .uc-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} [data-theme="light"] .feature-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important} [data-theme="light"] .hero-badge{background:rgba(25,118,210,.1) !important;border-color:rgba(25,118,210,.2) !important;color:var(--accent) !important} [data-theme="light"] .tagline{color:var(--text-muted) !important} [data-theme="light"] .signup-trust .trust-item{color:var(--text-muted) !important} [data-theme="light"] .signup-form button{color:#fff !important} [data-theme="light"] .gradient{background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} [data-theme="light"] .ac-dropdown{background:var(--card) !important;border-color:var(--border) !important;box-shadow:0 8px 24px rgba(0,0,0,0.12) !important} [data-theme="light"] .ac-result:hover,[data-theme="light"] .ac-active{background:var(--card-hover) !important} [data-theme="light"] .ac-name{color:var(--text) !important} [data-theme="light"] .ac-meta{color:var(--text-muted) !important} [data-theme="light"] .search-toggle{background:rgba(0,0,0,0.04) !important;border-color:var(--border) !important} [data-theme="light"] .search-toggle-btn{color:var(--text-muted) !important} [data-theme="light"] .search-toggle-btn.active{background:rgba(25,118,210,.1) !important;color:var(--accent) !important;box-shadow:none !important;border-color:rgba(25,118,210,.2) !important} [data-theme="light"] .how-section,[data-theme="light"] .use-cases,[data-theme="light"] .features-section,[data-theme="light"] .accountability{background:transparent !important} [data-theme="light"] .rm-bar,[data-theme="light"] .report-mock{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] table{border-color:var(--border) !important} [data-theme="light"] tr{border-color:var(--border) !important} [data-theme="light"] th{background:var(--card-hover) !important;color:var(--text) !important;border-color:var(--border) !important} [data-theme="light"] td{border-color:var(--border) !important} [data-theme="light"] .nav-top,[data-theme="light"] nav{background:rgba(245,247,250,0.9) !important;backdrop-filter:blur(12px) !important;border-color:var(--border) !important} [data-theme="light"] .nav-link.ghost{color:var(--text-muted) !important} [data-theme="light"] footer,[data-theme="light"] .footer{background:var(--card) !important;color:var(--text-muted) !important;border-color:var(--border) !important} [data-theme="light"] .report-blur{background:linear-gradient(to bottom,transparent,var(--bg)) !important} [data-theme="light"] code,[data-theme="light"] pre{background:var(--card-hover) !important;color:var(--text) !important} [data-theme="light"] .btn-primary,[data-theme="light"] .cta-btn{color:#fff !important} [data-theme="light"] .sidebar .nav-item{color:var(--text-muted) !important} [data-theme="light"] .sidebar .nav-item:hover,[data-theme="light"] .sidebar .nav-item.active{color:var(--text) !important;background:var(--card-hover) !important} [data-theme="light"] .sidebar .credits{color:var(--text) !important} [data-theme="light"] .sidebar .user-email{color:var(--text-muted) !important} [data-theme="light"] .section-nav a{color:var(--text-muted) !important;border-color:var(--border) !important} [data-theme="light"] .section-nav a:hover,[data-theme="light"] .section-nav a.active{color:var(--accent) !important} [data-theme="light"] .company-header,[data-theme="light"] .cp-hero{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] .blurred-section{background:var(--card) !important} [data-theme="light"] .lookup-card{background:var(--card) !important;border-color:var(--border) !important;box-shadow:0 2px 8px rgba(0,0,0,0.06) !important} [data-theme="light"] .auth-card,[data-theme="light"] .auth-container{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] .auth-split-right{background:var(--bg) !important} /* Glass card backgrounds */ [data-theme="light"] .login-box,[data-theme="light"] .email-box, [data-theme="light"] .reg-card,[data-theme="light"] .success-card{ background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important; border-color:var(--border) !important;box-shadow:0 2px 12px rgba(0,0,0,0.08) !important} /* Autocomplete results */ [data-theme="light"] .ac-result{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] .ac-result:hover,[data-theme="light"] .ac-active{background:var(--card-hover) !important} /* Splash page specifics */ [data-theme="light"] .rs-score-num,[data-theme="light"] .rm-company, [data-theme="light"] .report-blur .cta-text,[data-theme="light"] .acct-text h2, [data-theme="light"] .acct-check h4,[data-theme="light"] .acct-stat .num, [data-theme="light"] .feat h3,[data-theme="light"] .pricing-inner h2{color:var(--text) !important} [data-theme="light"] .report-topbar,[data-theme="light"] .report-sidebar{background:var(--card) !important} [data-theme="light"] .rs-flag,[data-theme="light"] .acct-stat{background:rgba(0,0,0,0.04) !important} /* Report page */ [data-theme="light"] .kpi .kv,[data-theme="light"] .cw h3,[data-theme="light"] .co strong, [data-theme="light"] .mv-l,[data-theme="light"] .rc .rv,[data-theme="light"] .vl, [data-theme="light"] .explain strong,[data-theme="light"] .bench-val, [data-theme="light"] .bench-marker,[data-theme="light"] .di-card .di-name, [data-theme="light"] .tl-item .tl-head,[data-theme="light"] .str-card h4, [data-theme="light"] .banner h3,[data-theme="light"] .tree-node .nn, [data-theme="light"] .mrh-title,[data-theme="light"] .shared-banner .sb-logo{color:var(--text) !important} [data-theme="light"] nav.report-nav,[data-theme="light"] .report-nav{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] .hamburger-btn{color:var(--text) !important} [data-theme="light"] .section-nav a{color:var(--text-muted) !important} /* Company profile */ [data-theme="light"] .cp-name,[data-theme="light"] .cp-stat .num, [data-theme="light"] .cp-row .val,[data-theme="light"] .cp-dir .name, [data-theme="light"] .cp-cta h2,[data-theme="light"] .cp-teaser-overlay h3, [data-theme="light"] .cp-faq h2,[data-theme="light"] .cp-faq-q, [data-theme="light"] .cp-address .town,[data-theme="light"] .cp-fin-table .hl, [data-theme="light"] .cp-fin-kpi .v,[data-theme="light"] .cp-chain-node a, [data-theme="light"] .cp-net-item .name{color:var(--text) !important} [data-theme="light"] .cp-row{border-color:var(--border) !important} [data-theme="light"] .cp-dir{border-color:var(--border) !important} [data-theme="light"] .cp-fin-table td{border-color:var(--border) !important} [data-theme="light"] .cp-hero,[data-theme="light"] .company-header{background:var(--card) !important;border-color:var(--border) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} /* Lookup page */ [data-theme="light"] .company-name,[data-theme="light"] .detail-value, [data-theme="light"] .teaser-blur h4,[data-theme="light"] .teaser-overlay h3, [data-theme="light"] .cta-card h3,[data-theme="light"] .not-found h2{color:var(--text) !important} [data-theme="light"] .detail{background:rgba(0,0,0,0.03) !important;border-color:var(--border) !important} [data-theme="light"] .share-toolbar{background:rgba(0,0,0,0.03) !important;border-color:var(--border) !important} [data-theme="light"] .search-bar input{background:var(--card) !important;border-color:var(--border) !important;color:var(--text) !important} /* Dashboard/app */ [data-theme="light"] .tier-name,[data-theme="light"] .tier-price, [data-theme="light"] .credit-explainer h3,[data-theme="light"] .pkg-price, [data-theme="light"] .gp-title,[data-theme="light"] .mt-company, [data-theme="light"] .welcome-state h2{color:var(--text) !important} [data-theme="light"] .gp-step{background:rgba(0,0,0,0.03) !important} /* Buy credits */ [data-theme="light"] .compare-table th{background:var(--card-hover) !important;color:var(--text) !important} [data-theme="light"] .compare-table td{border-color:var(--border) !important} [data-theme="light"] .pkg-btn.secondary{background:rgba(0,0,0,0.05) !important;color:var(--text) !important;border-color:var(--border) !important} /* Auth split */ [data-theme="light"] .auth-form h1,[data-theme="light"] .auth-subtitle{color:var(--text) !important} [data-theme="light"] .auth-input{background:var(--card) !important;border-color:var(--border) !important;color:var(--text) !important} [data-theme="light"] .auth-remember{background:var(--card-hover) !important} [data-theme="light"] .social-btn{color:var(--text) !important} [data-theme="light"] .auth-split-left{background:var(--bg) !important;border-color:var(--border) !important} /* Director profile */ [data-theme="light"] .dp-stat-num,[data-theme="light"] .dp-section-title, [data-theme="light"] .cam-title,[data-theme="light"] .cam-option-title{color:var(--text) !important} [data-theme="light"] .dp-table thead th{background:var(--card-hover) !important;color:var(--text) !important} [data-theme="light"] .dp-table tbody td{border-color:var(--border) !important} [data-theme="light"] .cam-overlay{background:rgba(0,0,0,0.3) !important} [data-theme="light"] .cam-modal{background:var(--card) !important;border-color:var(--border) !important} [data-theme="light"] .cam-option{border-color:var(--border) !important} [data-theme="light"] .cam-option:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1) !important} /* Check email / payment success */ [data-theme="light"] .step{background:rgba(0,0,0,0.04) !important} [data-theme="light"] .credits-added .amount{color:var(--text) !important} [data-theme="light"] .divider{border-color:var(--border) !important} [data-theme="light"] .preview-link{border-color:var(--border) !important} /* Developer page */ [data-theme="light"] pre,[data-theme="light"] code{background:var(--card-hover) !important;color:var(--text) !important} /* Hero heading */ [data-theme="light"] .hero h1{color:#1a2332 !important} [data-theme="light"] .hero h1 .gradient{background:linear-gradient(135deg,#1565C0,#7B1FA2,#1565C0) !important;background-size:200% auto !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important} [data-theme="light"] .hero .tagline{color:#5f6d7e !important} /* Signup card — force white, kill glassmorphism completely */ [data-theme="light"] .signup-card{background:#ffffff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:0 4px 20px rgba(0,0,0,0.08) !important;border-color:var(--border) !important} [data-theme="light"] .signup-card h2{color:var(--text) !important} [data-theme="light"] .signup-card .signup-trust .trust-item{color:var(--text-muted) !important} /* Report mock */ [data-theme="light"] .report-mock{box-shadow:0 4px 20px rgba(0,0,0,0.1) !important} /* Pricing buttons */ [data-theme="light"] .pkg-btn.secondary{background:rgba(0,0,0,0.05) !important;color:var(--text) !important;border-color:var(--border) !important} [data-theme="light"] .pkg-btn.secondary:hover{background:rgba(0,0,0,0.08) !important;border-color:var(--text-faint) !important} [data-theme="light"] .pkg{border-color:var(--border) !important;background:var(--card) !important} [data-theme="light"] .pkg.popular{border-color:var(--green) !important} [data-theme="light"] .pkg-price{color:var(--text) !important} [data-theme="light"] .pkg-name{color:var(--text) !important} [data-theme="light"] .pkg li{color:var(--text-muted) !important} /* Director intelligence stats */ [data-theme="light"] .use-cases .uc-card{background:var(--card) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important} /* ── Light mode visual polish — gradients & depth ─────────────── */ [data-theme="light"] .signup-card{background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%) !important} [data-theme="light"] .how-step{background:linear-gradient(135deg,#ffffff 0%,#f5f0ff 100%) !important;border:1px solid var(--border) !important} [data-theme="light"] .uc-card{background:linear-gradient(135deg,#ffffff 0%,#fff8f0 100%) !important;border:1px solid var(--border) !important} [data-theme="light"] .feature-card{background:linear-gradient(135deg,#ffffff 0%,#f0f8ff 100%) !important;border:1px solid var(--border) !important} [data-theme="light"] .pkg{background:linear-gradient(135deg,#ffffff 0%,#f8f5ff 100%) !important} [data-theme="light"] .pkg.popular{background:linear-gradient(135deg,#ffffff 0%,#f0fff0 100%) !important;border-color:var(--green) !important} [data-theme="light"] .dp-card,[data-theme="light"] .dp-hero{background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%) !important} [data-theme="light"] .lookup-card{background:linear-gradient(135deg,#ffffff 0%,#f5f0ff 100%) !important} [data-theme="light"] .login-box,[data-theme="light"] .email-box, [data-theme="light"] .reg-card,[data-theme="light"] .success-card{background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%) !important} [data-theme="light"] .report-section{background:linear-gradient(135deg,#ffffff 0%,#fafbff 100%) !important} [data-theme="light"] .hero-badge{background:linear-gradient(135deg,rgba(21,101,192,.08),rgba(106,27,154,.08)) !important;border-color:rgba(21,101,192,.2) !important} [data-theme="light"] .rs-card{background:linear-gradient(135deg,#ffffff 0%,#f0fff4 100%) !important} [data-theme="light"] .acct-stat{background:linear-gradient(135deg,rgba(21,101,192,.04),rgba(106,27,154,.04)) !important} [data-theme="light"] .cam-modal{background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%) !important} [data-theme="light"] .cam-option:hover{background:linear-gradient(135deg,#f0f4ff,#f5f0ff) !important} [data-theme="light"] body{background:linear-gradient(180deg,#eef1f6 0%,#f5f7fa 50%,#eef1f6 100%) !important;background-attachment:fixed !important} /* ── Theme toggle FAB ──────────────────────────────────────────── */ .theme-toggle{ position:fixed; bottom:20px; right:20px; z-index:9999; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); color:#E0E6ED; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s,border-color .25s,color .25s,transform .15s; padding:0; outline:none; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover{ background:rgba(255,255,255,.18); transform:scale(1.08); } .theme-toggle svg{width:20px;height:20px} [data-theme="light"] .theme-toggle{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.1); color:#1a2332; } [data-theme="light"] .theme-toggle:hover{ background:rgba(0,0,0,.1); } html{background:var(--bg)} a{color:var(--accent);text-decoration:none} /* ── Scroll-reveal system ──────────────────────────────────────── Elements tagged with data-reveal are invisible until the IntersectionObserver in /static/js/motion.js adds .is-visible. The initial hidden state only applies when html.js-motion-ready is present — so if JS fails to load, elements fall back to the normal visible state and the page is never blank. */ html.js-motion-ready [data-reveal]{ opacity:0; transform:translateY(28px); transition: opacity .9s var(--ease-smooth), transform .9s var(--ease-smooth); will-change:opacity,transform; } html.js-motion-ready [data-reveal].is-visible{ opacity:1; transform:translateY(0); } /* Staggered reveals — add data-reveal-delay="100|200|300|400" in markup */ html.js-motion-ready [data-reveal][data-reveal-delay="100"]{transition-delay:.1s} html.js-motion-ready [data-reveal][data-reveal-delay="200"]{transition-delay:.2s} html.js-motion-ready [data-reveal][data-reveal-delay="300"]{transition-delay:.3s} html.js-motion-ready [data-reveal][data-reveal-delay="400"]{transition-delay:.4s} /* ── Animated gradient text ── Replaces a static gradient on hero headlines with a slow flow. Used by .gradient-flow (opt-in, so existing .gradient classes are unchanged). */ @keyframes gradient-flow{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } .gradient-flow{ background:linear-gradient(135deg,var(--accent),var(--purple),var(--accent)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:gradient-flow 8s linear infinite; } /* ── Accessibility: respect reduced motion ── Users with `prefers-reduced-motion: reduce` skip all reveal, Lenis smooth scroll, and gradient animations. */ @media (prefers-reduced-motion: reduce){ html.js-motion-ready [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } .gradient-flow{animation:none !important} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } [data-theme="light"] .ac-company-tag{background:rgba(21,101,192,0.08);color:var(--accent);border-color:rgba(21,101,192,0.15)}