/* ============================================================
PureTools — brand overlay
Load LAST on every page.
Performance / SEO:
- Geist + Geist Mono loaded via in each page's
(NOT @import) for parallel loading → better LCP.
- font-display: swap (Google Fonts URL) prevents FOIT.
- background-attachment: fixed disabled below 768px (iOS jank).
- backdrop-filter disabled below 768px (mobile CPU cost).
Accessibility:
- Color tokens are theme-aware. Light-mode cyan darkened to
#0e7490 (5.04:1 on #fff ✓ AA). Dark-mode cyan #06b6d4
(6.93:1 on #06090F ✓ AA).
- :focus-visible rings on every interactive element.
- prefers-reduced-motion disables non-essential animations.
============================================================ */
/* Fonts are loaded via +
in each page's for parallel loading (better LCP).
See DEPLOY.md · Performance section. */
/* ============================================================
1. ROOT — deepen dark surfaces, add layered tokens
============================================================ */
:root {
/* Type stacks */
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
/* Claude brand tokens */
--brand-ink: #06090F;
--brand-surface: #0D1220;
--brand-surface-2: #131A2E;
--brand-text: #E8ECF5;
--brand-muted: #7C86A3;
--brand-dim: #4A536F;
--brand-border-dark: rgba(180, 200, 255, 0.10);
--brand-border-strong-dark: rgba(180, 200, 255, 0.20);
/* Brand cyan token — WCAG-safe per theme.
Light mode uses a deepened cyan that passes AA on white surfaces. */
--brand-cyan: #0e7490; /* light: 5.04:1 on #fff ✓ AA */
--brand-cyan-bg: rgba(14, 116, 144, 0.09);
--brand-cyan-border: rgba(14, 116, 144, 0.26);
--brand-violet: #6d28d9; /* light: 4.81:1 on #fff ✓ AA */
--brand-violet-bg: rgba(109, 40, 217, 0.10);
/* Map legacy PureTools accent tokens to the new brand system.
Dedicated hero/buttons still use --brand-gradient where violet is wanted. */
--bg: #f7f9fc;
--surface: #ffffff;
--text: #111827;
--text-muted: #536179;
--text-muted-rgb: 83, 97, 121;
--border: rgba(15, 23, 42, 0.12);
--border-soft: rgba(15, 23, 42, 0.06);
--primary: var(--brand-cyan);
--primary-dark: #155e75;
--primary-rgb: 14, 116, 144;
--primary-dark-rgb: 21, 94, 117;
--secondary: #06b6d4;
--secondary-rgb: 6, 182, 212;
--brand-grid-color: rgba(15, 23, 42, 0.055);
--brand-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
--surface-2: #f1f5f9;
--border-strong: rgba(15, 23, 42, 0.18);
--header-bg: rgba(255, 255, 255, 0.92);
--card-glow: rgba(14, 116, 144, 0.10);
--shadow-color-rgb: 15, 23, 42;
color-scheme: light;
}
[data-theme="dark"],
:root[data-theme="dark"] {
color-scheme: dark;
--bg: var(--brand-ink);
--surface: var(--brand-surface);
--surface-2: var(--brand-surface-2);
--border: var(--brand-border-dark);
--border-strong: var(--brand-border-strong-dark);
--text: var(--brand-text);
--text-muted: var(--brand-muted);
--text-muted-rgb: 124, 134, 163;
--text-dim: var(--brand-dim);
--header-bg: rgba(6, 9, 15, 0.85);
--card-glow: rgba(6, 182, 212, 0.16);
--shadow-color-rgb: 0, 0, 0;
--brand-cyan: #06b6d4; /* dark: 6.93:1 on #06090F ✓ AA */
--brand-cyan-bg: rgba(6, 182, 212, 0.12);
--brand-cyan-border: rgba(6, 182, 212, 0.30);
--brand-violet: #a78bfa; /* dark: 7.1:1 ✓ AA */
--brand-violet-bg: rgba(167, 139, 250, 0.12);
--primary: var(--brand-cyan);
--primary-dark: #0891b2;
--primary-rgb: 6, 182, 212;
--primary-dark-rgb: 8, 145, 178;
--secondary: #06b6d4;
--secondary-rgb: 6, 182, 212;
--brand-grid-color: rgba(180, 200, 255, 0.08);
}
/* ============================================================
2. TYPOGRAPHY — Geist everywhere
============================================================ */
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Soft dot grid (overrides the linear-gradient grid in core.css) */
background-image:
radial-gradient(circle, var(--brand-grid-color) 1px, transparent 1px);
background-size: 28px 28px;
}
[data-theme="dark"] body {
background-color: var(--bg);
background-image:
radial-gradient(ellipse at top, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 10%, rgba(124, 58, 237, 0.05) 0%, transparent 55%),
radial-gradient(circle, var(--brand-grid-color) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 28px 28px;
}
/* background-attachment: fixed is fine on desktop, janky on iOS Safari.
Restrict to ≥ 769px. */
@media (min-width: 769px) {
body { background-attachment: fixed; }
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
letter-spacing: -0.02em;
font-weight: 800;
}
code, kbd, samp, pre,
.mono, [class*="-mono"] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* Make numeric output mono + tabular wherever it shows up */
.result-box,
.tool-hero-card,
.tool-card .stat,
.hero-stats span,
output,
.tool-page [class*="-value"],
.tool-page [class*="-amount"],
.tool-page [class*="-result-value"],
.tool-page [class*="-stat-value"],
.tool-page [class*="-total"],
.tool-page [class*="-count"],
.tool-page [class*="-size"] {
font-variant-numeric: tabular-nums;
}
/* ============================================================
2b. ACCESSIBILITY — focus rings + reduced motion
============================================================ */
*:focus-visible {
outline: 2px solid var(--brand-cyan);
outline-offset: 2px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
outline: 2px solid var(--brand-cyan);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero-badge-dot { animation: none !important; }
}
/* ============================================================
3. HEADER — translucent, mono micro-label, refined logo
============================================================ */
.site-header {
background: var(--header-bg, var(--bg));
border-bottom: 1px solid var(--border);
}
/* backdrop-filter only on desktop (mobile CPU cost) */
@media (min-width: 769px) {
.site-header {
-webkit-backdrop-filter: blur(10px) saturate(120%);
backdrop-filter: blur(10px) saturate(120%);
}
}
[data-theme="dark"] .site-header {
background: rgba(6, 9, 15, 0.85);
}
.logo {
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: -0.02em;
gap: 0.55rem;
color: var(--text);
}
.logo::after {
/* "tools" gets the cyan accent */
/* fallback: do this via brand wordmark trick — the existing markup
just writes "PureTools" as one node, so we tint the whole thing dark
and rely on the logo-mark for color. */
}
.logo-mark {
width: 26px;
height: 26px;
filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.35));
}
.theme-toggle {
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.theme-toggle:hover {
border-color: rgba(6, 182, 212, 0.45);
background: var(--surface-2);
transform: none;
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.08);
}
/* ============================================================
3b. LANGUAGE SWITCHER
============================================================ */
.header-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.lang-switcher {
position: relative;
}
.lang-btn {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0 0.625rem;
height: 42px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
color: var(--text);
transition: border-color .15s ease, background .15s ease;
white-space: nowrap;
}
.lang-btn:hover {
border-color: rgba(6, 182, 212, 0.45);
background: var(--surface-2);
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.08);
}
.lang-flag {
display: block;
width: 20px;
height: 15px;
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
}
.lang-code {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
}
.lang-chevron {
opacity: 0.5;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.lang-switcher.open .lang-chevron {
transform: rotate(180deg);
}
.lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 152px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 4px 0;
list-style: none;
margin: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
z-index: 300;
}
.lang-switcher.open .lang-dropdown {
display: block;
}
.lang-dropdown li a {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.45rem 0.875rem;
color: var(--text);
text-decoration: none;
font-size: 0.85rem;
transition: background 0.12s;
border-radius: 8px;
margin: 0 4px;
}
.lang-dropdown li a:hover {
background: var(--surface-2);
}
.lang-dropdown li.lang-current a {
color: rgb(6, 182, 212);
font-weight: 700;
}
.lang-name {
line-height: 1;
}
@media (max-width: 520px) {
.lang-code {
display: none;
}
.lang-btn {
padding: 0 0.5rem;
gap: 0.25rem;
}
}
/* ============================================================
4. HERO — display type, gradient line 2, mono status pill
============================================================ */
.hero {
position: relative;
padding: 5.5rem 0 3rem;
background: transparent;
color: var(--text);
overflow: hidden;
}
.hero::before {
/* Cyan ambient glow behind hero */
content: "";
position: absolute;
top: -240px;
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 600px;
background: radial-gradient(ellipse, rgba(6, 182, 212, 0.18) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero::after {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 460px;
height: 460px;
background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.36rem 0.8rem 0.36rem 0.7rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.hero-badge-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #10B981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
animation: ptDot 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ptDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.hero h1 {
font-family: var(--font-sans);
font-weight: 800;
font-size: clamp(2.25rem, 6.5vw, 5.25rem);
line-height: 0.98;
letter-spacing: -0.045em;
margin: 1.4rem auto 1rem;
max-width: 880px;
color: var(--text);
text-wrap: balance;
}
.hero h1 .gradient-text,
.gradient-text {
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-family: var(--font-sans);
font-size: clamp(1rem, 1.5vw, 1.18rem);
color: var(--text-muted);
max-width: 540px;
line-height: 1.55;
margin: 0 auto 1.75rem;
opacity: 1;
text-wrap: pretty;
}
.mobile-break {
display: none;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 0.55rem;
flex-wrap: wrap;
margin-top: 1.1rem;
}
.hero-stats span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
padding: 0.4rem 0.85rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
min-height: 30px;
}
.hero-stats span::before {
content: "";
width: 5px;
height: 5px;
border-radius: 999px;
background: #10B981;
flex: 0 0 auto;
display: inline-block;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
/* ============================================================
5. SEARCH BAR — quiet command field
============================================================ */
.search-section { background: transparent; padding: 0 0 1.75rem; border: 0; }
.search-inner {
max-width: 620px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--brand-cyan-border);
border-radius: 16px;
box-shadow:
0 14px 30px rgba(var(--primary-rgb), 0.08),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
transition: box-shadow .2s ease, border-color .2s ease;
}
[data-theme="dark"] .search-inner {
background: #0D1220;
box-shadow:
0 14px 30px rgba(var(--primary-rgb), 0.12),
0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.search-inner:focus-within {
border-color: var(--brand-cyan);
box-shadow:
0 0 0 3px var(--brand-cyan-bg),
0 18px 38px rgba(var(--primary-rgb), 0.12);
}
.search-icon-fixed {
color: var(--text-muted);
font-size: 1rem;
left: 1.1rem;
}
#toolSearch {
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: -0.01em;
height: 60px;
padding-left: 24px;
padding-right: 66px;
text-align: left;
color: var(--text);
caret-color: var(--brand-cyan);
background: transparent;
border-radius: 16px;
}
#toolSearch::placeholder {
color: var(--text-muted);
opacity: 0.85;
}
.main-search-btn {
width: 42px;
height: 42px;
right: 9px;
border-radius: 11px;
background: var(--brand-gradient);
color: var(--brand-ink);
border: 0;
box-shadow:
0 8px 18px rgba(var(--primary-rgb), 0.18),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.main-search-btn:hover {
color: var(--brand-ink);
box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.22);
}
/* ============================================================
6. CATEGORY CHIPS — refined, mono count, gradient active
============================================================ */
.categories-section { padding: 0.25rem 0 0; }
.categories-scroll {
gap: 0.35rem;
justify-content: center;
}
.categories-more {
margin-top: 0.55rem;
}
.cat-btn {
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: -0.005em;
padding: 0.36rem 0.72rem;
min-height: 34px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
gap: 0.35rem;
transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
box-shadow: none;
}
.cat-btn:hover {
background: var(--brand-cyan-bg);
color: var(--brand-cyan);
border-color: var(--brand-cyan-border);
box-shadow: none;
}
.cat-btn.active {
background: var(--brand-cyan-bg);
color: var(--brand-cyan);
border-color: var(--brand-cyan-border);
box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.04);
}
[data-theme="dark"] .cat-btn.active {
color: var(--brand-cyan);
}
[data-theme="dark"] .cat-btn {
background: transparent;
border-color: transparent;
color: var(--text-muted);
}
[data-theme="dark"] .cat-btn:hover {
background: var(--brand-cyan-bg);
border-color: var(--brand-cyan-border);
color: var(--brand-cyan);
}
[data-theme="dark"] .cat-btn.active {
background: var(--brand-cyan-bg);
border-color: var(--brand-cyan-border);
color: var(--brand-cyan);
}
.cat-count {
font-family: var(--font-mono);
font-size: 0.64rem;
font-weight: 500;
letter-spacing: 0;
padding: 0;
background: transparent !important;
color: var(--text-muted) !important;
min-width: 1.2rem;
border-radius: 0;
}
.cat-btn.active .cat-count {
background: transparent !important;
color: inherit !important;
}
/* ============================================================
7. RESULTS BAR — mono micro-label
============================================================ */
.results-bar {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.06em;
color: var(--text-muted);
border-bottom: 0;
padding: 1.35rem 0 0.55rem;
}
.results-count strong,
.results-visible {
font-family: var(--font-mono);
}
.results-count .gradient-text,
.results-count strong:first-child {
color: var(--brand-cyan);
}
.category-page-link {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-cyan);
}
/* ============================================================
8. TOOL CARDS — bordered icon, mono category, hover glow
============================================================ */
.tools-grid {
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tool-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.25rem;
overflow: hidden;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.tool-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.08), transparent 60%);
opacity: 0;
transition: opacity .2s ease;
pointer-events: none;
}
.tool-card:hover {
border-color: rgba(var(--primary-rgb), 0.42);
box-shadow:
0 0 0 1px rgba(var(--primary-rgb), 0.08),
0 20px 40px rgba(var(--primary-rgb), 0.09);
transform: translateY(-3px);
}
.tool-card:hover::before { opacity: 1; }
.tool-card > * { position: relative; }
.tool-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 1.3rem;
margin-bottom: 0;
line-height: 1;
}
.tool-card h2,
.tool-card .tool-title {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.tool-card p,
.tool-card .tool-desc {
font-size: 0.82rem;
line-height: 1.55;
color: var(--text-muted);
}
.tool-cta {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 0.5rem;
transition: color .2s ease, gap .2s ease;
}
.tool-cta::after { content: ""; }
.tool-card:hover .tool-cta { color: var(--brand-cyan); gap: 0.45rem; }
/* Badges — mono, bordered */
.badge {
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.18rem 0.5rem;
border-radius: 5px;
border: 1px solid transparent;
line-height: 1.4;
}
.badge-popular {
background: rgba(245, 158, 11, 0.12);
color: #F59E0B;
border-color: rgba(245, 158, 11, 0.3);
}
.badge-new {
background: rgba(6, 182, 212, 0.12);
color: var(--brand-cyan);
border-color: rgba(6, 182, 212, 0.3);
}
.badge-category {
background: var(--brand-cyan-bg);
color: var(--brand-cyan);
border-color: var(--brand-cyan-border);
}
.category-badge-link::before {
content: '';
position: absolute;
inset: -10px -6px;
}
[data-theme="dark"] .badge-popular { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
[data-theme="dark"] .badge-new { background: rgba(6, 182, 212, 0.12); color: var(--brand-cyan); }
[data-theme="dark"] .badge-category { border-color: var(--brand-cyan-border); }
/* ============================================================
9. BUTTONS — gradient + inset highlight
============================================================ */
.btn {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.005em;
border-radius: 11px;
}
.btn-primary {
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
color: var(--brand-ink);
border: 0;
box-shadow:
0 10px 28px rgba(6, 182, 212, 0.28),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.btn-primary:hover {
box-shadow:
0 14px 34px rgba(6, 182, 212, 0.36),
0 1px 0 rgba(255, 255, 255, 0.3) inset;
transform: translateY(-1px);
color: var(--brand-ink);
}
.tool-page .calc-btn {
background: var(--brand-gradient) !important;
border: 0 !important;
color: var(--brand-ink) !important;
box-shadow:
0 10px 28px rgba(6, 182, 212, 0.28),
0 1px 0 rgba(255, 255, 255, 0.3) inset !important;
}
.tool-page .calc-btn:hover {
color: var(--brand-ink) !important;
box-shadow:
0 14px 34px rgba(6, 182, 212, 0.36),
0 1px 0 rgba(255, 255, 255, 0.3) inset !important;
}
.btn-secondary,
.back-btn {
background: var(--surface);
border: 1px solid var(--brand-cyan-border);
color: var(--brand-cyan);
box-shadow: none;
}
.btn-secondary:hover,
.back-btn:hover {
border-color: var(--brand-cyan);
background: var(--brand-cyan-bg);
color: var(--brand-cyan);
box-shadow: 0 0 0 4px var(--brand-cyan-bg);
}
/* ============================================================
10. TOOL HERO CARD — standard class for every tool's primary result
Add class="tool-hero-card" to the main result element in every tool.
============================================================ */
.tool-hero-card {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(6, 182, 212, 0.12), transparent 58%),
var(--surface);
border: 1px solid var(--brand-cyan-border);
border-radius: 14px;
color: var(--text);
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.06),
0 18px 40px rgba(0, 0, 0, 0.12);
}
.tool-hero-card > * { position: relative; }
.tool-hero-card :is(h2, h3, strong, output, [class*="-value"], [class*="-amount"], [class*="-result"]) {
color: var(--text);
font-variant-numeric: tabular-nums;
}
.tool-hero-card :is(p, span, small, [class*="-label"], [class*="-meta"]) {
color: var(--text-muted);
}
[data-theme="dark"] .tool-hero-card {
background:
radial-gradient(circle at top right, rgba(6, 182, 212, 0.14), transparent 58%),
var(--surface);
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.08),
0 18px 40px rgba(0, 0, 0, 0.30);
}
/* ============================================================
10b. RESULT BOX — gradient text, mono tabular, dark surface
============================================================ */
.result-box {
background: var(--surface);
border: 1px solid rgba(6, 182, 212, 0.35);
border-radius: 14px;
color: var(--text);
padding: 1.5rem;
position: relative;
overflow: hidden;
font-family: var(--font-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.result-box::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.10), transparent 60%);
pointer-events: none;
}
.result-box > * { position: relative; }
/* Inputs — mono numeric */
.input-field {
font-family: var(--font-sans);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
}
.input-field:focus {
outline: 0;
border-color: rgba(6, 182, 212, 0.55);
box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.14);
}
input[type="number"].input-field,
input[inputmode="decimal"].input-field,
input[inputmode="numeric"].input-field {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
select.input-field,
select.control-input,
.tool-page select:not([multiple]) {
-webkit-appearance: none;
appearance: none;
padding-right: 2.75rem;
color-scheme: light;
background-color: var(--bg);
background-image:
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position:
calc(100% - 1.1rem) 50%,
calc(100% - 0.78rem) 50%;
background-repeat: no-repeat;
background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
}
[data-theme="dark"] select.input-field,
[data-theme="dark"] select.control-input,
[data-theme="dark"] .tool-page select:not([multiple]) {
color-scheme: dark;
}
input[type="number"].input-field,
input[type="number"].control-input,
.tool-page input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"].input-field::-webkit-outer-spin-button,
input[type="number"].input-field::-webkit-inner-spin-button,
input[type="number"].control-input::-webkit-outer-spin-button,
input[type="number"].control-input::-webkit-inner-spin-button,
.tool-page input[type="number"]::-webkit-outer-spin-button,
.tool-page input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ============================================================
11. TOOL PAGES — breadcrumb mono, headings
============================================================ */
.breadcrumb {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.breadcrumb a { color: var(--brand-cyan); }
.tool-page h1 {
font-family: var(--font-sans);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
}
.tool-description {
font-family: var(--font-sans);
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.55;
}
.tool-info,
.tool-faq {
border-top-color: var(--border);
}
.tool-info h2,
.tool-info h3,
.tool-faq h2 {
color: var(--text);
font-weight: 800;
letter-spacing: -0.02em;
}
.tool-info p,
.tool-info li,
.tool-faq p {
color: var(--text-muted);
}
.tool-info p strong,
.tool-info li strong,
.tool-faq p strong,
.faq-item p strong,
.prose-page strong {
color: var(--text);
font-weight: 800;
}
.tool-info a,
.tool-faq a,
.faq-item a,
.prose-page a {
color: var(--brand-cyan);
text-decoration-color: var(--brand-cyan-border);
}
.tool-info a:hover,
.tool-faq a:hover,
.faq-item a:hover,
.prose-page a:hover {
color: var(--primary-dark);
text-decoration-color: currentColor;
}
/* FAQ — refined chevron, mono */
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
}
.faq-item summary {
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.95rem;
color: var(--text);
}
.faq-item summary::after { color: var(--brand-cyan); }
.faq-item[open] { border-color: rgba(6, 182, 212, 0.35); }
.faq-item p {
font-family: var(--font-sans);
color: var(--text-muted);
line-height: 1.65;
}
/* Related tools — match card grid */
.related-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text);
}
.related-card:hover {
border-color: rgba(6, 182, 212, 0.45);
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.10),
0 18px 36px rgba(6, 182, 212, 0.08);
}
.related-card span:first-child {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 1.1rem;
}
.related-card strong { font-weight: 700; }
.related-card span:last-child {
font-family: var(--font-sans);
color: var(--text-muted);
}
/* ============================================================
11b. STATIC AND CONTACT PAGES — same brand language
============================================================ */
.prose-page,
.contact-page {
color: var(--text);
}
.prose-page h1,
.contact-hero h1 {
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: -0.035em;
color: var(--text);
}
.prose-page h2,
.contact-form h2,
.contact-note h2,
.contact-faq h2 {
color: var(--text);
font-weight: 800;
letter-spacing: -0.02em;
}
.prose-page .lead,
.prose-page .meta,
.prose-page p,
.prose-page li,
.contact-lead,
.contact-form p,
.contact-note p,
.contact-note li,
.contact-faq p {
color: var(--text-muted);
}
.prose-page a,
.contact-direct a,
.contact-faq a {
color: var(--brand-cyan);
}
.contact-kicker {
font-family: var(--font-mono);
color: var(--brand-cyan);
letter-spacing: 0.08em;
}
.contact-direct,
.contact-form,
.contact-note,
.contact-faq {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(var(--on-primary-rgb), 0.03) inset;
}
/* Category pages — same density, surfaces and accents as the home grid */
.category-page {
color: var(--text);
}
.category-hero {
max-width: 880px;
}
.category-kicker {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
background: var(--surface);
border-color: var(--border);
color: var(--brand-cyan);
}
.category-hero h1 {
font-family: var(--font-sans);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.02;
}
.category-hero > p:not(.category-kicker),
.category-content p,
.category-use-cases li {
color: var(--text-muted);
}
.category-card,
.category-tool-card {
background: var(--surface);
border-color: var(--border);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.category-card::before,
.category-tool-card::before {
background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.08), transparent 60%);
}
.category-card:hover,
.category-tool-card:hover {
border-color: rgba(6, 182, 212, 0.45);
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.10),
0 18px 36px rgba(6, 182, 212, 0.08);
}
.category-card-icon,
.category-tool-icon {
background: var(--surface-2);
border-color: var(--border);
border-radius: 11px;
}
.category-card-body strong,
.category-tool-body strong,
.category-content h2,
.category-content h3,
.category-use-cases strong {
color: var(--text);
}
.category-card-body span,
.category-tool-body span {
color: var(--text-muted);
}
.category-card-meta {
font-family: var(--font-mono);
color: var(--brand-cyan);
}
.category-content {
border-top-color: var(--border);
}
.static-back,
.back-to-tools {
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* Static prose pages and 404 - mobile parity with tool pages */
.prose-page {
width: min(100%, 760px);
padding-top: clamp(1.5rem, 4vw, 2.5rem);
padding-bottom: clamp(3rem, 7vw, 4rem);
}
.prose-page .breadcrumb {
margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
overflow-wrap: anywhere;
}
.prose-page h1 {
font-size: clamp(2rem, 7vw, 2.9rem);
margin-bottom: 0.45rem;
}
.prose-page .lead {
font-size: clamp(1rem, 3.7vw, 1.12rem);
line-height: 1.65;
}
.prose-page h2 {
font-size: clamp(1.18rem, 4.4vw, 1.42rem);
line-height: 1.25;
}
.prose-page p,
.prose-page li,
.prose-page a {
overflow-wrap: anywhere;
}
.not-found-hero {
background: transparent;
color: var(--text);
}
.not-found-kicker {
font-family: var(--font-mono);
border-color: var(--border);
background: var(--surface);
color: var(--brand-cyan);
}
.not-found-hero h1 {
color: var(--text);
font-weight: 800;
letter-spacing: -0.035em;
}
.not-found-copy,
.not-found-section-head p {
color: var(--text-muted);
}
.not-found-actions .btn-secondary {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
.not-found-actions .btn-secondary:hover {
background: var(--surface-2);
color: var(--text);
border-color: rgba(var(--primary-rgb), 0.48);
box-shadow: 0 14px 34px rgba(var(--primary-rgb), 0.18);
}
.not-found-card {
background: var(--surface);
border-color: var(--border);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(var(--on-primary-rgb), 0.03) inset;
}
.not-found-card:hover {
border-color: rgba(var(--primary-rgb), 0.48);
box-shadow:
0 0 0 1px rgba(var(--primary-rgb), 0.08),
0 18px 36px rgba(var(--primary-rgb), 0.10);
}
.not-found-card-body span {
color: var(--text-muted);
}
/* ============================================================
11c. TOOL COLOR NORMALIZATION — remove legacy purple blocks
============================================================ */
.tool-page :is(
.b64-hero,
.budget-hero-card,
.ci-summary-hero,
.cc-mc-hero,
.cc-pl-hero,
.cc-pl-hero-profit,
.cc-pl-hero-loss,
.hero-result,
.dca-avg-result,
.ddc-hero-card,
.exif-summary-card,
.jf-hero-card,
.loan-hero,
.mort-hero-result,
.ov-hero-card,
.percentage-result,
.roi-hero-card,
.uts-live-bar,
.time-result-card.active-unit,
.uc-card.active-unit,
.vat-result-card-primary,
.wc-stat-highlight
) {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top right, rgba(6, 182, 212, 0.12), transparent 58%),
var(--surface) !important;
border: 1px solid var(--border-strong, var(--border)) !important;
color: var(--text) !important;
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.06),
0 18px 40px rgba(0, 0, 0, 0.20) !important;
}
.tool-page :is(
.b64-hero,
.budget-hero-card,
.ci-summary-hero,
.cc-mc-hero,
.cc-pl-hero,
.cc-pl-hero-profit,
.cc-pl-hero-loss,
.hero-result,
.dca-avg-result,
.ddc-hero-card,
.exif-summary-card,
.jf-hero-card,
.loan-hero,
.mort-hero-result,
.ov-hero-card,
.percentage-result,
.roi-hero-card,
.uts-live-bar,
.time-result-card.active-unit,
.uc-card.active-unit,
.vat-result-card-primary,
.wc-stat-highlight
) :is(h2, h3, strong, output, .loan-monthly-amount, .loan-stat-value, .mort-hero-result strong, .percentage-result-value, .vat-result-value, .time-result-value, .uc-value) {
color: var(--text) !important;
}
.tool-page :is(
.b64-hero,
.budget-hero-card,
.ci-summary-hero,
.cc-mc-hero,
.cc-pl-hero,
.cc-pl-hero-profit,
.cc-pl-hero-loss,
.hero-result,
.dca-avg-result,
.ddc-hero-card,
.exif-summary-card,
.jf-hero-card,
.loan-hero,
.mort-hero-result,
.ov-hero-card,
.percentage-result,
.roi-hero-card,
.uts-live-bar,
.time-result-card.active-unit,
.uc-card.active-unit,
.vat-result-card-primary,
.wc-stat-highlight
) :is(p, span, small, .loan-hero-label, .loan-stat-label, .loan-bar-labels, .mort-kicker, .percentage-result-label, .vat-result-label, .time-result-label, .uc-label) {
color: var(--text-muted) !important;
}
.tool-page .pomo-clock {
background:
radial-gradient(circle, rgba(6, 182, 212, 0.10), transparent 58%),
var(--surface) !important;
border-color: var(--border-strong, var(--border)) !important;
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.06),
0 18px 40px rgba(0, 0, 0, 0.20) !important;
}
.tool-page :is(.loan-stat, .mort-extra-line, .exif-stat-chip, .vat-result-card, .result-card, .dca-stat, .cc-result-card) {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
/* Finance/result modules: keep KPI panels aligned with the home branding. */
.tool-page :is(
.ifc-result-card,
.ifc-insight,
.cc-mc-card,
.cc-pl-card,
.cc-computed,
.roi-metric-card,
.roi-summary-card,
.ci-summary-card,
.rc-result-card,
.mort-stat,
.budget-metric,
.vat-bulk-totals,
.vat-reverse-result,
.pct-result
),
.tool-page .ifc-flow > div,
.tool-page .mort-breakdown-grid > div {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
box-shadow: none !important;
}
.tool-page .ifc-result-primary.ifc-result-card,
.tool-page .ifc-insight-primary.ifc-insight,
.tool-page .cc-computed.cc-computed,
.tool-page .roi-summary-card.roi-summary-card,
.tool-page .ci-summary-card-success.ci-summary-card,
.tool-page .vat-reverse-result.vat-reverse-result {
background-color: var(--surface) !important;
background-image: radial-gradient(circle at top right, rgba(6, 182, 212, 0.10), transparent 58%) !important;
border-color: var(--brand-cyan-border) !important;
}
.tool-page .ifc-result-card::before {
background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.12), transparent 60%) !important;
}
.tool-page :is(
.ifc-result-card strong,
.ifc-insight strong,
.ifc-flow strong,
.loan-monthly-amount,
.loan-stat-value,
.mort-hero-result strong,
.mort-breakdown-grid strong,
.cc-mc-hero-value,
.cc-pl-hero-value,
.cc-pl-hero-pct,
.cc-card-value,
.cc-computed-value,
.roi-hero-num,
.roi-metric-val,
.roi-summary-val,
.ci-summary-value,
.ci-summary-real,
.ci-card-value,
.rc-readiness-pct,
.rc-metric-value,
.budget-metric-value,
.vat-bulk-total-value,
.vat-rev-rate-value,
.vat-rev-tax-value,
.pct-result-value
) {
color: var(--text) !important;
}
.tool-page .loan-hero .loan-monthly-amount.loan-monthly-amount,
.tool-page .roi-hero-card .roi-hero-num.roi-hero-num,
.tool-page .ci-summary-hero .ci-summary-value.ci-summary-value,
.tool-page .cc-mc-hero .cc-mc-hero-value.cc-mc-hero-value,
.tool-page .cc-pl-hero .cc-pl-hero-value.cc-pl-hero-value,
.tool-page .cc-pl-hero .cc-pl-hero-pct.cc-pl-hero-pct {
color: var(--text) !important;
}
.tool-page :is(
.ifc-money-field span,
.ifc-percent-field span,
.ifc-days-field span,
.ifc-flow span,
.cc-supply-bar-header strong,
.cc-prefix,
.cc-suffix,
.roi-prefix,
.ci-input-prefix span,
.vat-input-prefix,
.vat-input-suffix,
.pct-input-prefix,
.pct-input-suffix
) {
color: var(--brand-cyan) !important;
}
.tool-page .ifc-flow span {
background: var(--brand-cyan-bg) !important;
}
.tool-page .ifc-status:is(.is-success, .is-warning, .is-danger) {
color: var(--text-muted) !important;
}
.tool-page :is(.roi-positive, .pct-result-success) {
color: var(--brand-cyan) !important;
}
.tool-page :is(.roi-negative, .pct-result-danger) {
color: var(--text) !important;
}
.tool-page :is(
.rc-metric-value.rc-highlight,
.rc-metric-value.rc-surplus,
.cc-target-result strong,
.b64-file-label
) {
color: var(--brand-cyan) !important;
}
.tool-page :is(
.rc-status-badge--on-track,
.rc-status-badge--sustainable,
.rc-status-badge--close,
.rc-status-badge--monitor,
.rc-status-badge--behind,
.rc-status-badge--risk,
.pwd-tip--ok,
.pwd-tip--warn,
.pwd-tip--error
) {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
}
/* Upload, import and file-drop surfaces still had old indigo hover states. */
.tool-page :is(
.b64-dropzone,
.img-drop,
[class*="drop-zone"],
[class*="dropzone"],
[class*="upload-zone"],
[class*="file-drop"]
) {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text-muted) !important;
}
.tool-page :is(
.b64-dropzone,
.img-drop,
[class*="drop-zone"],
[class*="dropzone"],
[class*="upload-zone"],
[class*="file-drop"]
):is(:hover, .is-dragover, .dragover, .drag-over, .is-active, .active) {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan) !important;
color: var(--text) !important;
box-shadow: 0 0 0 4px var(--brand-cyan-bg) !important;
}
.tool-page :is([class*="status-info"], [class*="notice-info"], [class*="info-box"], .b64-status) {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
}
/* Media previews should keep the original rectangular format, not rounded UI corners. */
.tool-page :is(
.img-card-side img,
.img-side img,
.crop-canvas-wrap,
.crop-result-preview,
.crop-result-preview img,
.blur-canvas-wrap,
.blur-result-preview,
.blur-result-preview img,
.wm-canvas-wrap,
.exif-preview-wrap,
.exif-preview-img,
.jpdf-thumb,
.ps-thumb,
.ps-thumb canvas,
.vt-player,
.vt-filmstrip,
.vt-track,
.vt-thumb,
.acut-canvas,
.acut-track
) {
border-radius: 0 !important;
}
.tool-page [class*="format-pill"] {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
}
.tool-page :is(input[type="range"], input[type="checkbox"], input[type="radio"]) {
accent-color: var(--brand-cyan) !important;
}
.tool-page input[type="range"]::-webkit-slider-thumb {
background: var(--brand-gradient) !important;
border-color: var(--surface) !important;
}
.tool-page input[type="range"]::-moz-range-thumb {
background: var(--brand-gradient) !important;
border-color: var(--surface) !important;
}
.tool-page :is(.roi-export-btn, .roi-reset-btn, .roi-stress-btn, .rc-copy-btn) {
min-height: 44px !important;
background: var(--surface) !important;
border: 1px solid var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
box-shadow: none !important;
}
.tool-page :is(.roi-export-btn, .roi-reset-btn, .roi-stress-btn, .rc-copy-btn):hover {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan) !important;
color: var(--brand-cyan) !important;
}
.not-found-hero {
background:
radial-gradient(circle at top right, rgba(6, 182, 212, 0.10), transparent 58%),
var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
.not-found-code,
.not-found-badge {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
}
.contact-direct,
.contact-form,
.contact-note,
.contact-faq {
border-radius: var(--radius) !important;
}
.tool-page :is(
.loan-term-btn.is-active,
.mort-term-btn.active,
.mort-term-btn.is-active,
.size-tab.is-active,
.qr-tab.active,
.calc-tab.active,
.bmi-unit-btn.active,
.sc-option-btn.active,
.vat-mode-btn.active,
.cc-tab.active,
.dca-tab.active,
.time-result-card.active-unit,
.uc-card.active-unit
) {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
box-shadow: 0 0 0 3px var(--brand-cyan-bg) !important;
}
.tool-page :is(
.loan-input-wrap:focus-within,
.mort-money-field:focus-within,
.mort-percent-field:focus-within,
.ci-input-prefix:focus-within,
.input-field:focus,
input:focus,
select:focus,
textarea:focus
) {
border-color: var(--brand-cyan) !important;
box-shadow: 0 0 0 4px var(--brand-cyan-bg) !important;
}
.tool-page :is(
.loan-bar,
.mort-breakdown-bar,
.progress-bar,
.ac-progress-track,
.acut-progress-track,
.ddc-progress-track,
.hg-progress-track,
.jpdf-progress-track,
.mc-progress-track,
.pc-progress-track,
.pm-progress-track,
.pp-progress-track,
.pp-strength-track,
.ps-progress-track,
.vc-progress-track,
.vconv-progress-track,
.vm-progress-track,
.vt-progress-track,
.vtm-progress-track,
.wc-bar-track,
.pct-bar-track,
.cc-supply-bar-track,
.pwd-entropy-track
) {
background: var(--surface-2) !important;
}
.tool-page :is(
.loan-bar-fill,
.loan-bar-dot-p,
.mort-breakdown-bar span:nth-child(1),
[class$="-progress-bar"],
[class$="-progress-fill"]
) {
background: var(--brand-gradient) !important;
}
/* -bar-fill excluded from wildcard: some tools (crypto-dca benchmark bars)
set per-bar custom colors via inline style — !important would override them */
.tool-page [class$="-bar-fill"]:not([style*="background"]) {
background: var(--brand-gradient) !important;
}
.tool-page :is(
.loan-bar-dot-i,
.mort-breakdown-bar span:nth-child(n+2)
) {
background: rgba(var(--text-muted-rgb), 0.45) !important;
}
.tool-page .loan-bar-labels .loan-bar-dot.loan-bar-dot-p.loan-bar-dot-p {
background-color: var(--brand-cyan) !important;
background-image: none !important;
}
.tool-page :is(
.loan-td-principal,
.mort-breakdown-grid strong,
.pct-result-value,
.recovery-result-value,
.hg-rating-hmac,
.hg-dot-hmac
) {
color: var(--brand-cyan) !important;
}
/* Active tool controls: tabs, segmented buttons, chips and mode switches */
.tool-page :is(
button.active,
button.is-active,
button[class*="-active"],
button[aria-selected="true"],
[role="tab"][aria-selected="true"]
):not(.btn-primary):not(.main-search-btn) {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
box-shadow: 0 0 0 3px var(--brand-cyan-bg) !important;
}
.tool-page :is(
button.active,
button.is-active,
button[class*="-active"],
button[aria-selected="true"],
[role="tab"][aria-selected="true"]
):not(.btn-primary):not(.main-search-btn) * {
color: inherit !important;
}
/* Upload/browse actions are secondary controls, not legacy primary CTAs. */
.tool-page :is(
button[class*="browse"],
a[class*="browse"],
button[class*="upload"],
a[class*="upload"]
) {
background: transparent !important;
border-color: var(--brand-cyan-border) !important;
color: var(--brand-cyan) !important;
box-shadow: none !important;
}
.tool-page :is(
button[class*="browse"],
a[class*="browse"],
button[class*="upload"],
a[class*="upload"]
):hover {
background: var(--brand-cyan-bg) !important;
border-color: var(--brand-cyan) !important;
color: var(--brand-cyan) !important;
}
.contact-field label {
color: var(--text);
}
.contact-direct span,
.contact-field span {
color: var(--text-muted);
}
/* ============================================================
12. FOOTER — minimal, mono links
============================================================ */
.site-footer {
background: transparent;
border-top: 1px solid var(--border);
margin-top: 4rem;
padding: 2rem 0;
}
.footer-copy {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.footer-links a {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.04em;
}
.footer-links a:hover { color: var(--brand-cyan); }
/* ============================================================
13. LOAD MORE — outlined ghost button
============================================================ */
.load-more-tools {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid rgba(6, 182, 212, 0.40);
background: rgba(6, 182, 212, 0.08);
color: var(--brand-cyan);
border-radius: 999px;
}
.load-more-tools:hover {
background: rgba(6, 182, 212, 0.14);
border-color: rgba(6, 182, 212, 0.60);
}
/* ============================================================
14. HIGHLIGHT — search match
============================================================ */
.highlight {
background: rgba(6, 182, 212, 0.20);
color: var(--brand-cyan);
border-radius: 3px;
padding: 0 3px;
font-weight: 600;
}
[data-theme="dark"] .highlight {
background: rgba(6, 182, 212, 0.22);
color: #67e8f9;
}
/* ============================================================
15. SHARE BUTTON, BACK BUTTON — refined pills
============================================================ */
.share-title-btn {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 44px;
padding: 0.45rem 0.95rem;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
}
.share-title-btn:hover {
color: var(--brand-cyan);
border-color: rgba(6, 182, 212, 0.45);
background: var(--surface-2);
}
/* ============================================================
16. RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.hero { padding: 4rem 0 2.25rem; }
.hero h1 {
font-size: clamp(2.4rem, 10.8vw, 3.35rem);
line-height: 0.96;
margin-bottom: 1.05rem;
}
.hero-subtitle {
font-family: var(--font-sans);
font-size: clamp(0.95rem, 3.7vw, 1.05rem);
letter-spacing: -0.01em;
line-height: 1.45;
max-width: 18rem;
margin: 0 auto 1.9rem;
text-align: center;
}
.mobile-break {
display: initial;
}
.hero::before { width: 600px; height: 400px; top: -160px; }
.search-inner { box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.08), 0 14px 28px rgba(0, 0, 0, 0.35); }
.categories-section {
overflow: visible;
}
.categories-scroll {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
max-width: none;
margin-inline: -1.5rem;
padding-inline: 1.5rem;
padding-bottom: 0.25rem;
scroll-padding-left: 1.5rem;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.categories-scroll::-webkit-scrollbar {
display: none;
}
.cat-btn {
flex: 0 0 auto;
scroll-snap-align: start;
}
.prose-page {
padding-inline: 1.25rem;
}
.prose-page ul,
.prose-page ol {
padding-left: 1.15rem;
}
.prose-page .static-back,
.contact-page .static-back {
margin-top: 2rem;
}
.not-found-hero {
padding: 3.25rem 0 2.25rem;
}
.not-found-hero h1 {
font-size: clamp(2rem, 9vw, 2.45rem);
}
.not-found-copy {
max-width: 32rem;
font-size: 1rem;
line-height: 1.6;
}
.not-found-actions .btn {
width: 100%;
justify-content: center;
}
.not-found-suggestions {
padding: 2rem 0 3rem;
}
.not-found-grid {
gap: 0.75rem;
}
.not-found-card {
min-height: auto;
align-items: flex-start;
}
.tool-card:hover { transform: none; }
}
/* ============================================================
16b. I18N MOBILE — compensate for longer translated labels
============================================================
Translated labels (DE/NL/RU) can be 30-60% longer than EN.
At ≤640px we tighten letter-spacing and shrink label font
so text fits without wrapping or overflowing.
============================================================ */
@media (max-width: 640px) {
/* All tool uppercase micro-labels */
[class*="-label"]:not(.lang-code):not(.tool-link):not(.related-card) {
letter-spacing: 0.015em;
font-size: 0.71rem;
}
/* Toolbar buttons — allow wrap, never overflow */
.btn {
word-break: break-word;
hyphens: auto;
min-width: 0;
}
/* Term/preset quick-select buttons */
[class*="-term-btn"],
[class*="-preset-btn"],
[class*="-quick-btn"],
[class*="-tab"],
[class*="-mode-btn"],
[class*="-seg"] {
font-size: 0.75rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
letter-spacing: 0;
}
/* Stat/result label boxes */
[class*="-stat-label"],
[class*="-result-label"],
[class*="-hero-label"] {
font-size: 0.68rem;
letter-spacing: 0.01em;
}
}
@media (max-width: 400px) {
/* Very small screens — tighten further */
[class*="-label"]:not(.lang-code):not(.tool-link) {
font-size: 0.67rem;
letter-spacing: 0;
}
[class*="-term-btn"],
[class*="-preset-btn"],
[class*="-tab"],
[class*="-mode-btn"] {
font-size: 0.7rem;
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
/* ============================================================
17. PRINT — keep readable, drop the dark theme
============================================================ */
@media print {
body {
background: white !important;
color: black !important;
background-image: none !important;
}
.hero::before, .hero::after,
.tool-card::before, .result-box::before { display: none !important; }
.gradient-text {
-webkit-text-fill-color: initial !important;
color: black !important;
background: none !important;
}
.site-header, .site-footer, .ads, .search-section { display: none !important; }
a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}