/* ========================================================================== TNAADO Tools Theme — Dark Billionaire-Luxe Apply on ALL tool/calculator/generator pages after main.css ========================================================================== */ /* -------------------------------------------------------------------------- Google Fonts — preloaded in via inject script; also declared here as fallback for pages loaded without the injector. -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600&family=Inter:wght@400;500&display=swap'); /* -------------------------------------------------------------------------- Design Tokens (local to tools-theme, aligned with variables.css) -------------------------------------------------------------------------- */ :root { --tt-bg: #0a0a0a; --tt-red: #c8102e; --tt-red-soft: rgba(200, 16, 46, 0.15); --tt-red-mist: rgba(200, 16, 46, 0.06); --tt-red-border: rgba(200, 16, 46, 0.28); --tt-on-black: #f5f1e8; --tt-on-black-mute:rgba(245, 241, 232, 0.65); --tt-rule: rgba(245, 241, 232, 0.10); --tt-surface: rgba(255, 255, 255, 0.03); --tt-surface-hover:rgba(200, 16, 46, 0.07); --tt-max-w: 900px; --tt-font-display: 'Fraunces', 'Times New Roman', serif; --tt-font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; --tt-font-body: 'Inter', 'IBM Plex Sans', system-ui, sans-serif; } /* -------------------------------------------------------------------------- Base — dark canvas -------------------------------------------------------------------------- */ html, body { background: var(--tt-bg) !important; color: var(--tt-on-black) !important; font-family: var(--tt-font-body) !important; } /* -------------------------------------------------------------------------- Tool Page Container -------------------------------------------------------------------------- */ .tool-page-wrapper, .tool-main-content, .calculator-container, .tool-main .container, .tool-content { max-width: var(--tt-max-w); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, .calculator-title, .tool-title { font-family: var(--tt-font-display) !important; font-style: italic; font-weight: 400; color: var(--tt-on-black) !important; letter-spacing: -0.02em; } h2 { font-family: var(--tt-font-display) !important; font-style: normal; font-weight: 600; color: var(--tt-on-black) !important; } h3, h4, h5, h6 { font-family: var(--tt-font-body) !important; font-weight: 500; color: var(--tt-on-black) !important; } p, li, label, .calculator-description, .tool-description { color: var(--tt-on-black-mute) !important; } strong, b { color: var(--tt-on-black) !important; } /* -------------------------------------------------------------------------- Links -------------------------------------------------------------------------- */ a { color: var(--tt-red); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Breadcrumb Bar -------------------------------------------------------------------------- */ .tool-breadcrumb, nav.tool-breadcrumb, nav.calculator-breadcrumb, .calculator-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: var(--tt-font-mono) !important; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-on-black-mute) !important; padding: 12px 0 20px; border-bottom: 1px solid var(--tt-rule); margin-bottom: 24px; } .tool-breadcrumb a, nav.tool-breadcrumb a, nav.calculator-breadcrumb a, .calculator-breadcrumb a { color: var(--tt-on-black-mute); text-decoration: none; } .tool-breadcrumb a:hover, nav.tool-breadcrumb a:hover, .calculator-breadcrumb a:hover { color: var(--tt-red); } .tool-breadcrumb span, .calculator-breadcrumb span { color: var(--tt-red); } /* Top injected breadcrumb nav */ nav.tnaado-breadcrumb-bar { background: rgba(200, 16, 46, 0.04); border-bottom: 1px solid var(--tt-red-border); padding: 10px 32px; font-family: var(--tt-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-on-black-mute); position: relative; z-index: 10; } nav.tnaado-breadcrumb-bar a { color: var(--tt-on-black-mute); } nav.tnaado-breadcrumb-bar a:hover { color: var(--tt-red); } /* -------------------------------------------------------------------------- Forms — dark inputs -------------------------------------------------------------------------- */ input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], textarea, select { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--tt-red-border) !important; color: var(--tt-on-black) !important; border-radius: 6px; font-family: var(--tt-font-body); font-size: 0.9375rem; padding: 10px 14px; transition: border-color 0.2s, box-shadow 0.2s; outline: none; width: 100%; box-sizing: border-box; } input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: var(--tt-red) !important; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18) !important; } select option { background: #1a1a1a; color: var(--tt-on-black); } input::placeholder, textarea::placeholder { color: var(--tt-on-black-mute) !important; opacity: 0.7; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .calculate-btn, .btn-generate, button[type="button"], button[type="submit"] { background: var(--tt-red) !important; color: #fff !important; border: none; border-radius: 6px; font-family: var(--tt-font-body); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em; padding: 12px 28px; cursor: pointer; transition: background 0.18s, transform 0.15s; } .calculate-btn:hover, .btn-generate:hover, button[type="button"]:hover, button[type="submit"]:hover { background: #a00d24 !important; transform: translateY(-1px); } /* Back button — keep consistent */ .back-btn, .browse-tools-btn { background: var(--tt-red) !important; color: #fff !important; border-radius: 6px; font-weight: 500; font-size: 0.875rem; } .back-btn:hover, .browse-tools-btn:hover { background: #a00d24 !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- Tool Card -------------------------------------------------------------------------- */ .tool-card { background: var(--tt-surface) !important; border: 1px solid var(--tt-rule) !important; border-radius: 8px; padding: 20px; color: var(--tt-on-black) !important; transition: border-color 0.2s, background 0.2s; } .tool-card:hover { border-color: var(--tt-red-border) !important; background: var(--tt-surface-hover) !important; } .tool-card h4, .tool-card-content h4 { color: var(--tt-on-black) !important; font-weight: 500; } .tool-card p { color: var(--tt-on-black-mute) !important; font-size: 0.875rem; } /* -------------------------------------------------------------------------- Calculator Section panels -------------------------------------------------------------------------- */ .calculator-section, .calculator-form, .calculator-results, .result, .output, .tool-section, .education-card, .calculator-info, .calculator-disclaimer, .slug-output { background: var(--tt-surface) !important; border: 1px solid var(--tt-rule) !important; border-radius: 8px; color: var(--tt-on-black) !important; } .calculator-form, .calculator-results { padding: 24px; } .result-item { border-bottom: 1px solid var(--tt-rule) !important; } .result-label { color: var(--tt-on-black-mute) !important; } .result-value { color: var(--tt-on-black) !important; } /* Results header main value */ .results-main-value { color: var(--tt-red) !important; font-family: var(--tt-font-display); font-style: italic; } /* -------------------------------------------------------------------------- Tables — dark theme -------------------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th { background: rgba(200, 16, 46, 0.08) !important; color: var(--tt-on-black) !important; border: 1px solid var(--tt-red-border) !important; padding: 10px 14px; font-family: var(--tt-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; } td { border: 1px solid var(--tt-rule) !important; color: var(--tt-on-black-mute) !important; padding: 10px 14px; } tr:hover td { background: var(--tt-surface-hover) !important; color: var(--tt-on-black) !important; } /* -------------------------------------------------------------------------- Ad Unit -------------------------------------------------------------------------- */ .ad-unit, .ad-container { min-height: 90px; background: rgba(200, 16, 46, 0.04) !important; border: 1px solid rgba(200, 16, 46, 0.12) !important; border-radius: 6px; margin: 32px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* -------------------------------------------------------------------------- Section headers (hero / tool-hero) -------------------------------------------------------------------------- */ .tool-hero, .tool-hero .container, .section-header-dark { background: var(--tt-bg) !important; color: var(--tt-on-black) !important; } .tool-hero h1, .hero-title { color: var(--tt-on-black) !important; } /* -------------------------------------------------------------------------- Related tools / sidebar -------------------------------------------------------------------------- */ .related-tools, .related-calculators { margin-top: 40px; } .related-tools h3, .related-calculators h3 { font-family: var(--tt-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-red) !important; margin-bottom: 16px; border-bottom: 1px solid var(--tt-rule); padding-bottom: 8px; } /* -------------------------------------------------------------------------- Form section title (inside calculator panels) -------------------------------------------------------------------------- */ .form-section-title { font-family: var(--tt-font-mono) !important; font-size: 0.6875rem !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tt-red) !important; } /* -------------------------------------------------------------------------- Misc utility overrides for dark canvas -------------------------------------------------------------------------- */ .calculator-nav-actions, .back-nav { padding: 0; margin-bottom: 16px; } .form-help { color: var(--tt-on-black-mute) !important; font-size: 0.8125rem; } /* Input prefix / suffix ($ sign etc.) */ .input-prefix, .input-suffix { color: var(--tt-on-black-mute); } /* Force any white or light background section dark */ section, .tool-education, .tool-main { background: var(--tt-bg) !important; } /* Tag / badge override */ .badge, .tag { background: rgba(200, 16, 46, 0.12) !important; color: var(--tt-red) !important; border: 1px solid var(--tt-red-border); } /* Dividers */ hr { border: none; border-top: 1px solid var(--tt-rule); margin: 24px 0; } /* Code blocks (relevant for dev tools) */ code, pre { font-family: var(--tt-font-mono); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tt-rule); border-radius: 4px; color: var(--tt-on-black); font-size: 0.875rem; } code { padding: 2px 6px; } pre { padding: 16px; overflow-x: auto; } /* Scrollbar (webkit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #111; } ::-webkit-scrollbar-thumb { background: rgba(200,16,46,0.4); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--tt-red); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 768px) { .tool-page-wrapper, .tool-main-content, .calculator-container, .tool-main .container, .tool-content { padding-left: 16px; padding-right: 16px; } nav.tnaado-breadcrumb-bar { padding: 8px 16px; font-size: 0.625rem; } } /* ========================================================================== FINAL OVERRIDES — force dark canvas on common tool-page containers that are NOT in the brand library but appear in legacy inline