html, body {
margin: 0;
padding: 0;
}
/* Range slider polish (Tailwind accent-* handles the fill colour) */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 0.5rem;
border-radius: 9999px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.15rem;
height: 1.15rem;
border-radius: 9999px;
background: #ffffff;
border: 3px solid currentColor;
cursor: pointer;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
input[type="range"]::-moz-range-thumb {
width: 1.15rem;
height: 1.15rem;
border-radius: 9999px;
background: #ffffff;
border: 3px solid currentColor;
cursor: pointer;
}
/* Multi-line truncation helpers used on cards */
.line-clamp-1,
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-3 { -webkit-line-clamp: 3; }
/* HTMX request feedback */
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
/* Lock background scroll while a modal is mounted */
body:has(#modal-root .modal-overlay) {
overflow: hidden;
}
/* ============================================================
LIGHT MODE
The portal is dark by default. When carries the
`.light` class, the rules below remap the dark Tailwind
utility colours to a cohesive high-end light palette.
Selectors use html.light + utility so they out-specify the
single-class Tailwind utilities (no !important needed).
The colourful division accents / gradients are intentionally
left intact so each business unit keeps its identity.
============================================================ */
/* ---- Page + surface backgrounds ---- */
html.light .bg-slate-950 { background-color: #f1f5f9; }
html.light .bg-zinc-950 { background-color: #f4f4f5; }
html.light .bg-stone-950 { background-color: #f5f5f4; }
html.light .bg-slate-900 { background-color: #ffffff; }
html.light .bg-zinc-900 { background-color: #ffffff; }
html.light .bg-stone-900 { background-color: #ffffff; }
html.light .bg-slate-800 { background-color: #e2e8f0; }
html.light .bg-zinc-800 { background-color: #e4e4e7; }
html.light .bg-stone-800 { background-color: #e7e5e4; }
/* Translucent panels -> soft solid light surfaces */
html.light .bg-slate-900\/40 { background-color: #f8fafc; }
html.light .bg-slate-900\/60 { background-color: #f1f5f9; }
html.light .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.85); }
html.light .bg-slate-900\/90 { background-color: rgba(255, 255, 255, 0.92); }
html.light .bg-zinc-900\/60 { background-color: #f4f4f5; }
html.light .bg-stone-900\/60 { background-color: #f5f5f4; }
html.light .bg-stone-950\/80 { background-color: rgba(245, 245, 244, 0.9); }
/* Small accent badges */
html.light .bg-blue-900\/30 { background-color: #eff6ff; }
html.light .bg-cyan-950 { background-color: #ecfeff; }
html.light .bg-amber-950 { background-color: #fffbeb; }
/* ---- Borders ---- */
html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-800\/60 { border-color: #e2e8f0; }
html.light .border-zinc-800,
html.light .border-zinc-800\/60 { border-color: #e4e4e7; }
html.light .border-stone-800,
html.light .border-stone-800\/60 { border-color: #e7e5e4; }
html.light .border-slate-700 { border-color: #cbd5e1; }
html.light .border-slate-950 { border-color: #ffffff; }
html.light .hover\:border-slate-500:hover { border-color: #94a3b8; }
/* ---- Text ---- */
html.light .text-white,
html.light .text-slate-100 { color: #0f172a; }
html.light .text-slate-300 { color: #334155; }
html.light .text-slate-400 { color: #475569; }
html.light .text-slate-500,
html.light .text-zinc-500,
html.light .text-stone-500 { color: #64748b; }
html.light .hover\:text-white:hover,
html.light .hover\:text-slate-200:hover,
html.light .hover\:text-slate-300:hover { color: #0f172a; }
/* ---- Accent eyebrow / label text: deepen for contrast on white ---- */
html.light .text-blue-400 { color: #2563eb; }
html.light .text-cyan-400 { color: #0891b2; }
html.light .text-indigo-400 { color: #4f46e5; }
html.light .text-teal-400 { color: #0d9488; }
html.light .text-emerald-400 { color: #059669; }
html.light .text-amber-400 { color: #d97706; }
html.light .text-amber-500 { color: #d97706; }
/* ---- Hover surfaces ---- */
html.light .hover\:bg-slate-800:hover { background-color: #f1f5f9; }
/* ---- Hero + footer gradients (per active division via body bg class) ---- */
html.light #hero { background-image: linear-gradient(to bottom, #eff6ff, #f8fafc, #ffffff); }
html.light body.bg-zinc-950 #hero { background-image: linear-gradient(to bottom, #ecfeff, #fafafa, #eef2ff); }
html.light body.bg-stone-950 #hero { background-image: linear-gradient(to bottom, #fffbeb, #fafaf9, #ecfdf5); }
html.light #site-footer { background-image: linear-gradient(to bottom, #f8fafc, #ffffff); }
html.light body.bg-zinc-950 #site-footer { background-image: linear-gradient(to bottom, #fafafa, #ffffff); }
html.light body.bg-stone-950 #site-footer { background-image: linear-gradient(to bottom, #fafaf9, #ffffff); }
/* Soften the heavy dark drop-shadows used throughout */
html.light .shadow-2xl { box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.18); }
html.light .shadow-lg { box-shadow: 0 10px 25px -12px rgba(15, 23, 42, 0.18); }
/* Theme toggle icon visibility */
.axio-icon-moon { display: none; }
.axio-icon-sun { display: inline-block; }
html.light .axio-icon-sun { display: none; }
html.light .axio-icon-moon { display: inline-block; }