/* ============================================================= WebDriverUniversity — Shared Subpage Theme (subpage.css) Single source of truth for all subpage cosmetics. Replaces subpage-theme.css. Loads LAST in . Uses !important where needed to beat Bootstrap 3 and per-page style.css. Never touches IDs, name attrs, event handlers, or HTML structure. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* --- Design tokens --- */ :root { --bg: #0f0f0f; --surface: #181818; --surface-2: #1f1f1f; --border: #2a2a2a; --accent: #f45950; --accent-glow: rgba(244, 89, 80, 0.35); --text: #ededed; --text-dim: #9a9a9a; } /* ============================================= 1. RESET & BASE ============================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { background-color: var(--bg) !important; color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { padding-top: 84px; } /* Pages without a fixed navbar (Login-Portal, contact-form-thank-you) */ body.no-navbar { padding-top: 0 !important; } /* ============================================= 2. NAVBAR html body prefix beats Bootstrap 3 specificity ============================================= */ html body .navbar, html body .navbar.navbar-inverse, html body .navbar.navbar-inverse.navbar-fixed-top, html body nav.navbar { background-color: rgba(15, 15, 15, 0.92) !important; background-image: none !important; border: none !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-height: 84px !important; margin-bottom: 0 !important; } html body .navbar .container, html body .navbar .container-fluid { height: 84px; display: flex; align-items: center; padding: 0 32px; } html body .navbar-header { display: flex !important; align-items: center; float: none !important; } html body #nav-title, html body .navbar-brand { color: #ededed !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.01em; height: auto !important; padding: 4px 0 !important; display: inline-flex !important; align-items: center; gap: 10px; text-shadow: none; line-height: 1; } html body #nav-title::before, html body .navbar-brand::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent-glow); flex-shrink: 0; } html body #nav-title:hover, html body .navbar-brand:hover, html body .navbar-brand:focus { color: var(--accent) !important; } html body .navbar-toggle { border-color: var(--border) !important; background-color: transparent !important; margin-top: 22px; } html body .navbar-toggle:hover, html body .navbar-toggle:focus { background-color: var(--surface) !important; } html body .navbar-toggle .icon-bar { background-color: var(--text) !important; } /* ============================================= 3. HEADINGS ============================================= */ #main-header, h1, h2, h3, h4 { color: var(--text); } h2 { font-size: 26px; } /* ============================================= 4. FOOTER ============================================= */ /*