/* Theme Name: Voice Biometrics (Light + Dark Toggle) Theme URI: https://vsabiometrics.com/ Author: Voice Biometrics, LLC Author URI: https://vsabiometrics.com/ Description: Light theme by default, dark mode toggle via `.dark` class on or . Version: 1.2.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: voice-biometrics Tags: one-column, accessibility-ready, custom-logo, custom-menu, footer-widgets, blog, light, dark */ /* ---------- LIGHT MODE (default) ---------- */ :root { --vb-bg: #f6f8fc; --vb-bg-2: #e9eef7; --vb-surface: #ffffff; --vb-card: #ffffff; --vb-text: #0f172a; --vb-muted: #475569; --vb-primary: #1e40af; --vb-link: #1e40af; --vb-accent: #3b82f6; --vb-accent-2: #10b981; --vb-border: #e2e8f0; --vb-border-strong: #cbd5e1; --vb-focus: #f59e0b; --vb-danger: #ef4444; --vb-radius: 16px; --vb-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06); } /* ---------- BASE STYLES ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: linear-gradient(180deg, var(--vb-bg), var(--vb-bg-2)); color: var(--vb-text); line-height: 1.6; } a { color: var(--vb-link); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; } /* ---------- HEADER ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(var(--vb-surface-rgb, 255,255,255), .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vb-border-strong); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; gap: 1rem; } .site-branding a { color: var(--vb-text); font-weight: 700; font-size: 1.1rem; letter-spacing: .3px; } .site-description { color: var(--vb-muted); font-size: .9rem; margin: 0; } .menu-toggle { display: none; background: var(--vb-surface); border: 1px solid var(--vb-border); color: var(--vb-text); padding: .5rem .75rem; border-radius: 10px; } .primary-nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; } .primary-nav a { display: block; padding: .5rem .75rem; border-radius: 10px; color: var(--vb-text); } .primary-nav a:hover { background: rgba(59,130,246,.08); text-decoration: none; } .primary-nav a:focus-visible { outline: 3px solid var(--vb-focus); outline-offset: 3px; } .primary-nav .current-menu-item > a { background: rgba(59,130,246,.08); border: 1px solid var(--vb-border); } /* ---------- HERO ---------- */ .hero { padding: 6rem 0 3rem; background: radial-gradient(1200px 500px at 50% -10%, rgba(59,130,246,.12), transparent), var(--vb-bg); border-bottom: 1px solid var(--vb-border-strong); } .hero h1 { color: var(--vb-primary); font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; line-height: 1.15; } .hero p.lead { color: var(--vb-muted); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 70ch; } .hero .badges { display:flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .badge { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--vb-border); padding:.35rem .6rem; border-radius: 999px; font-size:.85rem; color: var(--vb-muted); background: var(--vb-surface); } /* ---------- SECTIONS ---------- */ .section { padding: 3rem 0; border-bottom: 1px solid var(--vb-border); background: transparent; } .section h2 { color: var(--vb-primary); font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 0; } .grid { display: grid; gap: 1rem; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } /* ---------- CARDS ---------- */ .card { background: var(--vb-card); border: 1px solid var(--vb-border); border-radius: var(--vb-radius); padding: 1rem; box-shadow: var(--vb-shadow); color: var(--vb-text); } .card h3 { margin-top: 0; font-size: 1.1rem; color: var(--vb-primary); } /* ---------- CALLOUT ---------- */ .callout { background: linear-gradient(180deg, rgba(16,185,129,.08), var(--vb-surface)); border: 1px solid var(--vb-border); padding: 1rem; border-radius: var(--vb-radius); box-shadow: var(--vb-shadow); color: var(--vb-text); } /* ---------- CONTACT ---------- */ .contact { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0,1fr)); } .contact .method { background: var(--vb-surface); border: 1px solid var(--vb-border); border-radius: var(--vb-radius); padding: 1rem; box-shadow: var(--vb-shadow); } .contact .method a { word-break: break-word; } /* ---------- FOOTER ---------- */ .site-footer { text-align: center; background: var(--vb-surface); border-top: 1px solid var(--vb-border); } .footer-inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* ---------- MISC ---------- */ .notice { color: var(--vb-muted); font-style: italic; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 900px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .contact { grid-template-columns: 1fr; } .primary-nav ul { display: none; } .menu-toggle { display: inline-block; } .primary-nav.open ul { display: flex; flex-direction: column; gap: 0; } .primary-nav.open a { padding: .75rem 0; } } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }