/* === AWebTol INPUT VISIBILITY HOTFIX (place at TOP of style.css) === */
/* Inputs/selects/textareas: use Pico vars *with* hard fallbacks */
body.tools-skin input,
body.tools-skin select,
body.tools-skin textarea {
background: var(--pico-form-element-background-color, #ffffff) !important;
color: var(--pico-color, #0b0d0e) !important;
border: 1px solid var(--pico-muted-border-color, #d0d7de) !important;
border-radius: 8px;
padding: .55rem .6rem;
}
/* Make placeholders readable in light mode */
html[data-theme="light"] .tools-skin ::placeholder { color: #5b6672; }
/* Select dropdown lists readable in both themes */
body.tools-skin select { color-scheme: light dark; }
/* Checkboxes & radios: make them clearly visible everywhere */
body.tools-skin input[type="checkbox"],
body.tools-skin input[type="radio"]{
appearance: auto;
-webkit-appearance: auto;
accent-color: var(--pico-primary, #0a66c2); /* nice blue fallback */
width: 1.05rem;
height: 1.05rem;
inline-size: 1.05rem; /* Firefox */
}
/* In dark mode, ensure border/contrast */
html[data-theme="dark"] .tools-skin input,
html[data-theme="dark"] .tools-skin select,
html[data-theme="dark"] .tools-skin textarea {
background: var(--pico-form-element-background-color, rgba(255,255,255,0.06)) !important;
color: var(--pico-color, #e6edf3) !important;
border: 1px solid var(--pico-muted-border-color, rgba(255,255,255,0.25)) !important;
}
/* ======================================================================
AWebTol — Unified Styles (production ready)
- Smooth theme transitions
- Clean tool card layout (less scrolling)
- Consistent inputs/buttons
- Heading above card (.awt-page-title)
- Date picker colorful icon
- BMI result readable in light & dark
- No duplicate/conflicting rules
====================================================================== */
/* Base */
body {
transition: background 0.3s, color 0.3s;
line-height: 1.6;
}
.hero { text-align: center; margin: 4rem 0; }
h1, h2, h3 { margin-top: 1.2rem; }
textarea { width: 100%; }
/* Dark palette when data-theme="dark" on (keeps non-tool pages safe) */
html[data-theme="dark"] body {
background-color: #0d1117;
color: #e6edf3;
}
/* ======================================================================
Tool pages only (scoped by body.tools-skin)
====================================================================== */
/* Page background follows current theme (overrides any per-page gradient) */
body.tools-skin {
background: var(--pico-background-color) !important;
color: var(--pico-color, inherit) !important;
}
/* Tool “card” container (compact to reduce scrolling) */
body.tools-skin main.container {
max-width: 520px;
margin: 1.25rem auto;
padding: 1rem 1rem;
border-radius: 12px;
background: var(--pico-card-background-color, rgba(255,255,255,0.05));
box-shadow: 0 0 16px rgba(0,0,0,0.28);
backdrop-filter: blur(6px);
}
/* Tool titles inside card */
body.tools-skin main.container h1,
body.tools-skin main.container h2 {
text-align: center;
margin: 0 0 .75rem 0;
line-height: 1.25;
}
body.tools-skin main.container h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; }
body.tools-skin main.container h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; }
/* Single page heading OUTSIDE the card (inserted by footer.js) */
body.tools-skin .awt-page-title{
font-size: clamp(22px, 3vw, 30px);
line-height: 1.2;
font-weight: 800;
text-align: center;
margin: 1rem 0 .75rem;
opacity: .95;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* one line */
}
/* Back to All Tools link centered */
body.tools-skin .back-wrap,
body.tools-skin main.container p:last-child {
text-align: center !important;
margin-top: 1rem !important;
}
body.tools-skin .back-wrap a,
body.tools-skin main.container p:last-child a {
color: #6edff3;
text-decoration: none;
}
body.tools-skin .back-wrap a:hover,
body.tools-skin main.container p:last-child a:hover {
text-decoration: underline;
}
/* Inputs / selects / textareas on tools (theme-aware using Pico variables) */
body.tools-skin input,
body.tools-skin select,
body.tools-skin textarea {
background: var(--pico-form-element-background-color) !important;
color: var(--pico-color) !important;
border: 1px solid var(--pico-muted-border-color) !important;
border-radius: 8px;
padding: .55rem .6rem;
}
body.tools-skin select { color-scheme: light dark; } /* readable popup lists */
/* Light mode card should look truly light */
html[data-theme="light"] body.tools-skin main.container {
background: #ffffff;
color: #0b0d0e;
box-shadow: 0 0 20px rgba(0,0,0,.10);
}
html[data-theme="light"] body.tools-skin h1,
html[data-theme="light"] body.tools-skin h2,
html[data-theme="light"] body.tools-skin h3 { color: #0b0d0e; }
/* Dark mode selects/options readable */
html[data-theme="dark"] body.tools-skin select {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.25);
color: #e6edf3;
}
html[data-theme="dark"] body.tools-skin option {
background: #161b22;
color: #e6edf3;
}
/* Buttons — compact but accessible */
body.tools-skin button {
border-radius: 10px;
padding: .55rem .7rem;
line-height: 1.2;
cursor: pointer;
transition: transform .06s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
}
body.tools-skin button:active { transform: translateY(1px) scale(0.995); }
/* Calculator-style keys (optional helper) */
body.tools-skin .key {
min-height: 40px;
padding: .7rem .55rem;
border: none;
border-radius: 12px;
background: #222;
color: #fff;
font-size: .95rem;
box-shadow: 0 2px 0 #0ff4;
user-select: none;
}
body.tools-skin .key:hover { background:#0ff2; color:#0ff; }
body.tools-skin .key:active { transform: translateY(2px); box-shadow: 0 1px 0 #0ff8 inset; }
body.tools-skin .key[data-variant="op"] { background:#111; }
body.tools-skin .key[data-variant="equals"] { background:#053d57; }
body.tools-skin .key[data-variant="danger"] { background:#3a0a0a; }
/* Keys / grid spacing (keeps cards short) */
body.tools-skin .grid,
body.tools-skin .keys { gap: .4rem !important; }
body.tools-skin .grid button,
body.tools-skin .keys button {
min-height: 40px;
font-size: .95rem;
box-shadow: 0 1px 0 var(--pico-muted-border-color);
}
/* Tiny sound toggle used across tools */
body.tools-skin .switch{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;opacity:.9;user-select:none}
body.tools-skin .switch input{display:none}
body.tools-skin .switch .slider{width:34px;height:18px;background:#333;border-radius:999px;position:relative;box-shadow:inset 0 0 0 1px #0ff4}
body.tools-skin .switch .slider::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#9eeaf9;transition:left .15s ease}
body.tools-skin .switch input:checked + .slider{background:#0a2730}
body.tools-skin .switch input:checked + .slider::after{left:18px}
/* Date input — space & icon */
body.tools-skin input[type="date"] { padding-right: 2.2rem; background-clip: padding-box; }
body.tools-skin input[type="date"]::-webkit-calendar-picker-indicator{
background: url('data:image/svg+xml;utf8,\
') no-repeat center center;
color: transparent;
opacity: 1;
width: 1.25rem; height: 1.25rem;
cursor: pointer;
}
html[data-theme="dark"] .tools-skin input[type="date"]::-webkit-calendar-picker-indicator{
filter: saturate(1.1) drop-shadow(0 0 2px rgba(0,0,0,.6));
}
/* Firefox fallback */
@-moz-document url-prefix() {
.tools-skin input[type="date"]{
background-image: url('data:image/svg+xml;utf8,\
');
background-repeat: no-repeat;
background-position: right .6rem center;
background-size: 1.1rem 1.1rem;
}
}
/* Placeholders a bit darker in light mode for readability */
html[data-theme="light"] ::placeholder { color: #5b6672; }
/* Keep headings from hiding under sticky nav when using #anchors */
body.tools-skin :is(h1,h2,h3){ scroll-margin-top: 72px; }
/* Extra-tight on small phones */
@media (max-width: 420px) {
body.tools-skin main.container { padding: .85rem .75rem; }
body.tools-skin .grid button,
body.tools-skin .keys button { min-height: 38px; font-size: .92rem; }
}
/* ======================================================================
Page-specific tiny polish
====================================================================== */
/* BMI result visibility (works regardless of how it's injected) */
html[data-theme="light"] #res,
html[data-theme="light"] #res strong { color: #000 !important; opacity: 1 !important; }
html[data-theme="dark"] #res,
html[data-theme="dark"] #res strong { color: #e6edf3 !important; opacity: 1 !important; }
/* (If category line exists) */
html[data-theme="light"] #category { color: #0a66c2; font-weight: 700; }
html[data-theme="dark"] #category { color: #6edff3; font-weight: 700; }
/* ── AWebTol: timezone converter picker icon fixes (drop at END of style.css) ── */
/* Give room for the indicator + keep native theming */
.tools-skin input[type="date"],
.tools-skin input[type="datetime-local"],
.tools-skin input[type="month"],
.tools-skin input[type="week"],
.tools-skin input[type="time"] {
padding-right: 2.2rem;
color-scheme: light dark;
background-clip: padding-box;
}
/* Chromium/WebKit calendar/clock indicator – colorful & always visible */
.tools-skin input[type="date"]::-webkit-calendar-picker-indicator,
.tools-skin input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.tools-skin input[type="month"]::-webkit-calendar-picker-indicator,
.tools-skin input[type="week"]::-webkit-calendar-picker-indicator,
.tools-skin input[type="time"]::-webkit-calendar-picker-indicator {
background: url('data:image/svg+xml;utf8,\
') no-repeat center center;
color: transparent; /* hide default glyph */
opacity: 1;
width: 1.25rem;
height: 1.25rem;
cursor: pointer;
}
/* Boost contrast on dark backgrounds */
html[data-theme="dark"] .tools-skin input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .tools-skin input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .tools-skin input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .tools-skin input[type="week"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .tools-skin input[type="time"]::-webkit-calendar-picker-indicator {
filter: saturate(1.1) drop-shadow(0 0 2px rgba(0,0,0,.6));
}
/* Hide extra affordances some browsers show */
.tools-skin input[type="date"]::-webkit-inner-spin-button,
.tools-skin input[type="datetime-local"]::-webkit-inner-spin-button,
.tools-skin input[type="time"]::-webkit-inner-spin-button,
.tools-skin input[type="date"]::-webkit-clear-button,
.tools-skin input[type="datetime-local"]::-webkit-clear-button,
.tools-skin input[type="time"]::-webkit-clear-button {
display: none;
}
/* Firefox fallback: draw the same colorful icon as a background */
@-moz-document url-prefix() {
.tools-skin input[type="date"],
.tools-skin input[type="datetime-local"],
.tools-skin input[type="month"],
.tools-skin input[type="week"],
.tools-skin input[type="time"] {
background-image: url('data:image/svg+xml;utf8,\
');
background-repeat: no-repeat;
background-position: right .6rem center;
background-size: 1.1rem 1.1rem;
}
}
/* === AWebTol: visible inputs in LIGHT mode (scoped to tool pages) === */
html[data-theme="light"] body.tools-skin input,
html[data-theme="light"] body.tools-skin select,
html[data-theme="light"] body.tools-skin textarea {
background: #ffffff !important;
border: 1px solid #d0d7de !important;
color: #0b0d0e !important;
box-shadow: none !important;
}
html[data-theme="light"] body.tools-skin input:focus,
html[data-theme="light"] body.tools-skin select:focus,
html[data-theme="light"] body.tools-skin textarea:focus {
outline: none;
border-color: #80b3ff; /* gentle blue focus */
box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15);
}
/* Keep checkboxes/radios consistent in light mode */
html[data-theme="light"] body.tools-skin input[type="checkbox"],
html[data-theme="light"] body.tools-skin input[type="radio"] {
accent-color: #0a66c2;
}
/* Fix: display text invisible in LIGHT mode */
html[data-theme="light"] .display {
color: #0b0d0e !important; /* dark text */
background: #f6f8fa; /* light, solid display */
border: 1px solid #d0d7de; /* subtle border */
}
/* (keep dark mode looking the same, optional but explicit) */
html[data-theme="dark"] .display {
color: #ffffff;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
}
/* === AWebTol: Global input/output readability fix (append at END of style.css) === */
/* Light mode — solid backgrounds, dark text */
html[data-theme="light"] body.tools-skin input,
html[data-theme="light"] body.tools-skin select,
html[data-theme="light"] body.tools-skin textarea,
html[data-theme="light"] body.tools-skin output,
html[data-theme="light"] body.tools-skin .display {
background: #ffffff !important;
color: #0b0d0e !important;
border: 1px solid #d0d7de !important;
box-shadow: none !important;
}
/* Dark mode — semi-transparent backgrounds, light text */
html[data-theme="dark"] body.tools-skin input,
html[data-theme="dark"] body.tools-skin select,
html[data-theme="dark"] body.tools-skin textarea,
html[data-theme="dark"] body.tools-skin output,
html[data-theme="dark"] body.tools-skin .display {
background: rgba(255, 255, 255, 0.10) !important;
color: #e6edf3 !important;
border: 1px solid rgba(255, 255, 255, 0.20) !important;
box-shadow: none !important;
}
/* Optional: make placeholders visible and elegant */
html[data-theme="light"] ::placeholder {
color: #555 !important;
}
html[data-theme="dark"] ::placeholder {
color: rgba(230, 237, 243, 0.7) !important;
}
/* === FIX: Tool-page heading is being ellipsized/truncated === */
/* Remove any truncate utilities on tool pages */
body.tools-skin .truncate,
body.tools-skin .text-ellipsis,
body.tools-skin .clip,
body.tools-skin h1.truncate,
body.tools-skin h2.truncate {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Make sure the main heading on tool pages can wrap and never get cut */
body.tools-skin h1,
body.tools-skin h2,
body.tools-skin .page-title,
body.tools-skin .tool-title {
display: block;
max-width: 100%;
white-space: normal !important;
overflow-wrap: anywhere;
word-break: normal;
line-height: 1.25;
margin: 0 0 0.75rem 0;
}
/* Slight downscale on small screens so long titles feel comfortable */
@media (max-width: 480px) {
body.tools-skin h1,
body.tools-skin .page-title,
body.tools-skin .tool-title { font-size: 1.3rem; }
body.tools-skin h2 { font-size: 1.15rem; }
}
/* ---- AWebTols: logo sizing (global) ---- */
img[src*="assets/images/logo"]{
width: clamp(140px, 28vw, 220px);
max-height: 64px;
height: auto;
object-fit: contain;
}
/* --- AWebTols: adaptive logo visibility fix --- */
.logo img {
width: clamp(160px, 30vw, 240px);
height: auto;
object-fit: contain;
transition: opacity 0.3s ease-in-out;
}
/* Default (light mode) */
body.light-mode .logo img {
content: url("assets/images/logo-dark.png");
}
/* Dark mode */
body.dark-mode .logo img {
content: url("assets/images/logo-light.png");
}
/* ---- AWebTols: responsive logo & dark/light version ---- */
.logo img {
width: clamp(160px, 28vw, 240px);
height: auto;
object-fit: contain;
vertical-align: middle;
transition: all 0.3s ease-in-out;
}
/* Light mode: show dark logo */
body.light-mode .logo img {
content: url("assets/images/logo-dark.png");
}
/* Dark mode: show light logo */
body.dark-mode .logo img {
content: url("assets/images/logo-light.png");
}
/* === Logo Theme Switching === */
nav .brand .logo {
height: 38px;
width: auto;
display: none;
vertical-align: middle;
}
nav .brand .logo--dark {
display: block; /* default for light mode */
}
/* When dark mode is active */
:root[data-theme="dark"] nav .brand .logo--dark {
display: none;
}
:root[data-theme="dark"] nav .brand .logo--light {
display: block;
}
/* Optional: If your site supports OS auto theme, uncomment:
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) nav .brand .logo--dark { display: none; }
:root:not([data-theme]) nav .brand .logo--light { display: block; }
}
*/
/* ===================== AWebTols Navigation v3 ===================== */
.site-nav{
display:grid; grid-template-columns:auto 1fr auto; align-items:center;
gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid rgba(0,0,0,.08);
}
/* Background per theme (no black bar in light mode) */
html[data-theme="light"] .site-nav{ background:#ffffff; }
html[data-theme="dark"] .site-nav{ background:#0b1220; }
.site-nav .brand img{ height:28px; }
.site-nav .menu{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; justify-self:center; }
.site-nav .menu a{ text-decoration:none; }
.nav-actions{ justify-self:end; display:flex; align-items:center; gap:.5rem; }
/* Theme-based logo swap */
.logo--light{ display:none; }
html[data-theme="dark"] .logo--dark{ display:none; }
html[data-theme="dark"] .logo--light{ display:inline; }
html[data-theme="light"] .logo--dark{ display:inline; }
html[data-theme="light"] .logo--light{ display:none; }
/* Hamburger + icon */
.hamburger{
display:none;
background:transparent; border:1px solid rgba(255,140,43,.35); border-radius:12px;
padding:.35rem .5rem; line-height:1; font-size:1.15rem;
color:#ff8c2b; box-shadow:0 0 0 2px rgba(255,140,43,.08);
}
.theme-icon{
background:transparent; border:1px solid rgba(127,127,127,.35);
width:32px; height:32px; border-radius:999px; padding:0; line-height:1;
display:inline-flex; align-items:center; justify-content:center; font-size:16px;
}
html[data-theme="dark"] .theme-icon{ border-color:rgba(255,255,255,.25); }
html[data-theme="dark"] .hamburger{ border-color:rgba(255,140,43,.45); color:#ff9d4c; }
/* Mobile */
@media (max-width: 768px){
.hamburger{ display:inline-block; }
.site-nav .menu{ display:none !important; }
.site-nav .menu.open{ display:block !important; background:inherit; padding:.5rem 1rem;
border:1px solid rgba(127,127,127,.2); border-radius:12px; margin-top:.5rem; grid-column:1/-1; }
.site-nav .menu.open li{ padding:.35rem 0; }
.nav-actions{ order:4; } /* stays at right */
}
/* ===================== AWebTols Navigation v4 (grid areas) ===================== */
.site-nav{
display:grid;
grid-template-columns: auto 1fr auto auto;
grid-template-areas: "brand spacer theme burger";
align-items:center; gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid rgba(0,0,0,.08);
}
.site-nav .brand{ grid-area: brand; }
.site-nav .menu{ grid-area: spacer; justify-self:center; display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.site-nav .nav-actions{ grid-area: theme; display:flex; justify-self:end; }
.site-nav .hamburger{ grid-area: burger; justify-self:end; }
/* Background per theme */
html[data-theme="light"] .site-nav{ background:#ffffff; }
html[data-theme="dark"] .site-nav{ background:#0b1220; }
/* Buttons */
.site-nav .hamburger,
.site-nav .theme-icon{ appearance:none; -webkit-appearance:none; }
.hamburger{
background:transparent; border:1px solid rgba(255,140,43,.45); border-radius:10px;
padding:.3rem .5rem; line-height:1; font-size:1.15rem; color:#ff9d4c;
box-shadow:none;
}
.theme-icon{
background:transparent; border:1px solid rgba(127,127,127,.35);
width:32px; height:32px; border-radius:999px; padding:0; line-height:1;
display:inline-flex; align-items:center; justify-content:center; font-size:16px;
}
html[data-theme="dark"] .theme-icon{ border-color:rgba(255,255,255,.25); }
html[data-theme="dark"] .hamburger{ border-color:rgba(255,140,43,.55); color:#ffb073; }
/* Logo swap */
.logo--light{ display:none; }
html[data-theme="dark"] .logo--dark{ display:none; }
html[data-theme="dark"] .logo--light{ display:inline; }
html[data-theme="light"] .logo--dark{ display:inline; }
html[data-theme="light"] .logo--light{ display:none; }
/* Mobile dropdown */
@media (max-width: 768px){
.site-nav{
grid-template-columns: auto 1fr auto auto;
grid-template-areas:
"brand spacer theme burger"
"menu menu menu menu";
}
.site-nav .menu{ grid-area: menu; display:none !important; justify-self:stretch; }
.site-nav .menu.open{ display:block !important; background:inherit; padding:.5rem 1rem;
border:1px solid rgba(127,127,127,.2); border-radius:12px; margin-top:.5rem; }
.site-nav .menu.open li{ padding:.35rem 0; }
}
/* v5: robust mobile dropdown */
.site-nav{ position: relative; }
@media (max-width: 768px){
.site-nav .menu.open{
position: absolute; left: .75rem; right: .75rem; top: calc(100% + .4rem);
z-index: 999; background: inherit; border:1px solid rgba(127,127,127,.25); border-radius: 12px;
padding: .5rem .9rem;
}
}
.hamburger:focus, .theme-icon:focus{ outline: none; box-shadow: none; }
/* v6: vertical transparent dropdown and comfy spacing */
@media (max-width: 768px){
.site-nav .menu.open{
display: block !important;
background: rgba(15, 23, 42, 0.88); /* subtle translucent */
color: #e6edf3;
border-color: rgba(255,255,255,.15);
backdrop-filter: blur(4px);
}
html[data-theme="light"] .site-nav .menu.open{
background: rgba(255, 255, 255, 0.92);
color: #0b0d0e;
border-color: rgba(0,0,0,.1);
}
.site-nav .menu.open li{
display: block;
padding: .55rem 0;
}
.site-nav .menu.open a{
display: block;
padding: .2rem .1rem;
}
}
/* AdSense placeholders */
.ad-slot { display:block; margin:1.25rem auto; text-align:center; }
/* Home Page FAQ – Clean & Compact */
.home-faq {
margin-top: 3rem;
padding: 2.5rem 1.5rem;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.03),
rgba(255, 255, 255, 0.01)
);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.home-faq .container {
max-width: 800px;
}
.home-faq h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 1.6rem;
opacity: 0.95;
}
.home-faq h3 {
margin-top: 1.1rem;
margin-bottom: 0.3rem;
font-size: 1.05rem;
}
.home-faq p {
margin-top: 0;
margin-bottom: 0.8rem;
line-height: 1.55;
opacity: 0.9;
}
.home-trust {
max-width: 900px;
margin: 2rem auto 2rem;
padding: 1.25rem 1.5rem;
border-radius: 10px;
background: rgba(255,255,255,0.02);
}
.home-trust h2 {
text-align: center;
margin-bottom: 1rem;
}
.home-trust ul {
list-style: none;
padding: 0;
margin: 0;
}
.home-trust li {
margin-bottom: 0.75rem; /* 🔽 reduced gap */
line-height: 1.5;
}
.home-trust strong {
display: block;
margin-bottom: 0.15rem; /* 🔽 tighter title gap */
}
/* ================================
FAQ spacing fix (Pico override)
================================ */
.faq-section {
margin-top: 3rem;
}
.faq-section h2 {
margin-bottom: 1.5rem;
}
.faq-section h3 {
margin-top: 1rem !important;
margin-bottom: 0.25rem !important;
font-size: 1.05rem;
}
.faq-section p {
margin-top: 0 !important;
margin-bottom: 0.9rem !important;
line-height: 1.6;
color: #cbd5e1;
}
/* FAQ readable text colors */
.faq-section p {
color: #334155; /* light mode */
}
[data-theme="dark"] .faq-section p {
color: #cbd5e1; /* dark mode */
}
/* Dark mode override */
[data-theme="dark"] .category-intro,
.dark .category-intro {
color: #cbd5e1; /* soft but readable */
}
.category-intro {
grid-column: 1 / -1;
max-width: 520px;
font-size: 0.95rem;
line-height: 1.6;
margin: 0.75rem 0 1.25rem;
color: #334155; /* light mode */
}
[data-theme="dark"] .category-intro {
color: #cbd5e1; /* dark mode */
}
/* Tool FAQ – wider than calculator */
.tool-faq {
display: flex;
justify-content: center;
margin: 3rem 1rem 4rem;
}
.tool-faq-card {
width: 100%;
max-width: 920px;
padding: 2rem 2.25rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
[data-theme="dark"] .tool-faq-card {
background: rgba(255, 255, 255, 0.04);
}
.tool-faq-card h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.tool-faq-card h3 {
margin-top: 1.2rem;
margin-bottom: 0.3rem;
font-size: 1.05rem;
}
.tool-faq-card p {
margin: 0;
line-height: 1.6;
}
/* 🔕 Disable sound toggle UI inside FAQ sections */
.no-sound .switch,
.no-sound .slider {
display: none !important;
}