528 lines
20 KiB
CSS
528 lines
20 KiB
CSS
/* ==========================================================================
|
|
tui-pages website — custom layer on top of Tailwind + DaisyUI
|
|
Loaded AFTER Tailwind Play CDN compiles and DaisyUI prebuilt.
|
|
Keep this small. Tailwind utility classes do the heavy lifting.
|
|
========================================================================== */
|
|
|
|
/* ---------- Smooth scroll, native feel ----------------------------------- */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
|
|
/* ---------- Theme tokens -------------------------------------------------
|
|
Dark (night) is the default. The `[data-theme="winter"]` block redefines
|
|
the same tokens for the light theme. Everything below reads from these. */
|
|
:root {
|
|
color-scheme: dark light;
|
|
|
|
/* Brand (rust) */
|
|
--tp-accent: #b7410e; /* primary accent */
|
|
--tp-accent-strong: #d24e15; /* hover/active */
|
|
--tp-accent-fg: #fff5f0; /* text-on-accent */
|
|
--tp-accent-soft: rgba(183, 65, 14, 0.12);
|
|
--tp-accent-glow: rgba(183, 65, 14, 0.35);
|
|
|
|
/* Surfaces (dark) */
|
|
--tp-bg: #09090b; /* page bg */
|
|
--tp-bg-elev: #18181b; /* raised surface */
|
|
--tp-bg-soft: rgba(24, 24, 27, 0.5);
|
|
--tp-bg-card: rgba(24, 24, 27, 0.5);
|
|
--tp-bg-card-hover: rgba(24, 24, 27, 0.78);
|
|
--tp-bg-nav: rgba(9, 9, 11, 0.65);
|
|
--tp-bg-mobile: rgba(9, 9, 11, 0.95);
|
|
--tp-bg-section: rgba(24, 24, 27, 0.3); /* alt section tint */
|
|
--tp-bg-code: #0b0b0f;
|
|
|
|
/* Text (dark) */
|
|
--tp-fg: #fafafa; /* primary text */
|
|
--tp-fg-strong: #ffffff;
|
|
--tp-fg-secondary: #d4d4d8; /* body */
|
|
--tp-fg-muted: #a1a1aa;
|
|
--tp-fg-subtle: #71717a;
|
|
--tp-fg-code: #f4f4f5;
|
|
|
|
/* Borders (dark) */
|
|
--tp-border: rgba(63, 63, 70, 0.5);
|
|
--tp-border-strong: rgba(63, 63, 70, 0.7);
|
|
--tp-border-section:rgba(63, 63, 70, 0.4);
|
|
|
|
/* Hero / grid (dark) */
|
|
--tp-grid-line: rgba(63, 63, 70, 0.35);
|
|
--tp-hero-from: #0b0b0f;
|
|
--tp-hero-to: #18181b;
|
|
--tp-text-outline: rgba(0, 0, 0, 0.9);
|
|
--tp-hero-glow-a: rgba(183, 65, 14, 0.10);
|
|
--tp-hero-glow-b: rgba(126, 231, 135, 0.05);
|
|
|
|
/* Mountain background (dark — rust on black) */
|
|
--tp-mountain-color: #f4a26b;
|
|
--tp-mountain-glow: rgba(183, 65, 14, 0.35);
|
|
--tp-mountain-opacity:0.45;
|
|
|
|
/* Shadows (dark — soft + deep) */
|
|
--tp-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
|
|
0 12px 24px -16px rgba(0, 0, 0, 0.6);
|
|
--tp-card-shadow-hover:
|
|
0 1px 0 rgba(255, 255, 255, 0.04) inset,
|
|
0 18px 36px -18px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* Light theme — warm paper. We swap to a stone (warm-gray) palette so the
|
|
text and surfaces harmonize with the rust accent instead of fighting it. */
|
|
:root[data-theme="winter"] {
|
|
/* Brand — slightly darker rust so it has bite on a light bg */
|
|
--tp-accent: #9a3a0e;
|
|
--tp-accent-strong: #7f2f08;
|
|
--tp-accent-fg: #fff7ed;
|
|
--tp-accent-soft: rgba(154, 58, 14, 0.08);
|
|
--tp-accent-glow: rgba(154, 58, 14, 0.0);
|
|
|
|
/* Surfaces (warm off-white, not stark) */
|
|
--tp-bg: #fbfaf7; /* page bg, slight cream */
|
|
--tp-bg-elev: #ffffff; /* cards */
|
|
--tp-bg-soft: rgba(255, 255, 255, 0.7);
|
|
--tp-bg-card: #ffffff;
|
|
--tp-bg-card-hover: #ffffff;
|
|
--tp-bg-nav: rgba(255, 255, 255, 0.78);
|
|
--tp-bg-mobile: rgba(255, 255, 255, 0.97);
|
|
--tp-bg-section: #f3f1ec; /* warm section alt */
|
|
--tp-bg-code: #0b0b0f; /* keep code blocks dark in both themes */
|
|
|
|
/* Text (warm dark — stone, not zinc, so it doesn't look like a science lab) */
|
|
--tp-fg: #1c1917; /* primary (stone-900) */
|
|
--tp-fg-strong: #0c0a09; /* stone-950 */
|
|
--tp-fg-secondary: #44403c; /* stone-700 */
|
|
--tp-fg-muted: #57534e; /* stone-600 */
|
|
--tp-fg-subtle: #78716c; /* stone-500 */
|
|
--tp-fg-code: #f4f4f5;
|
|
|
|
/* Borders (warm taupe) */
|
|
--tp-border: rgba(214, 211, 209, 0.9); /* stone-300 */
|
|
--tp-border-strong: rgba(168, 162, 158, 0.8); /* stone-400 */
|
|
--tp-border-section:rgba(214, 211, 209, 0.65);
|
|
|
|
/* Hero / grid (warm, very subtle) */
|
|
--tp-grid-line: rgba(180, 130, 80, 0.14);
|
|
--tp-hero-from: #fbfaf7;
|
|
--tp-hero-to: #f5f3ee;
|
|
--tp-text-outline: rgba(255, 255, 255, 0.95);
|
|
--tp-hero-glow-a: rgba(154, 58, 14, 0.07);
|
|
--tp-hero-glow-b: rgba(120, 140, 90, 0.05);
|
|
|
|
/* Mountain — very subtle, like a faded ink wash on paper */
|
|
--tp-mountain-color: #8a6a44; /* warm sepia */
|
|
--tp-mountain-glow: rgba(138, 106, 68, 0);
|
|
--tp-mountain-opacity:0.10;
|
|
|
|
/* Shadows (soft, warm-tinted, like a printed page) */
|
|
--tp-card-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset,
|
|
0 1px 2px rgba(28, 25, 23, 0.04),
|
|
0 8px 24px -12px rgba(28, 25, 23, 0.10);
|
|
--tp-card-shadow-hover:
|
|
0 1px 0 rgba(255, 255, 255, 1) inset,
|
|
0 1px 2px rgba(28, 25, 23, 0.05),
|
|
0 14px 32px -14px rgba(154, 58, 14, 0.18);
|
|
}
|
|
|
|
/* ---------- Body --------------------------------------------------------- */
|
|
body {
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
font-feature-settings: 'cv11', 'ss01', 'ss03';
|
|
background-color: var(--tp-bg);
|
|
color: var(--tp-fg);
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
}
|
|
|
|
/* ---------- View Transitions (progressive enhancement) ------------------ */
|
|
@supports (view-transition-name: foo) {
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 220ms;
|
|
}
|
|
}
|
|
|
|
/* ---------- Hero --------------------------------------------------------- */
|
|
.tp-hero {
|
|
background: transparent; /* let the mountain ASCII show through */
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.tp-hero > .max-w-7xl {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tp-hero h1,
|
|
.tp-hero p {
|
|
text-shadow:
|
|
0 -1px 0 var(--tp-text-outline),
|
|
1px 0 0 var(--tp-text-outline),
|
|
0 1px 0 var(--tp-text-outline),
|
|
-1px 0 0 var(--tp-text-outline),
|
|
-1px -1px 0 var(--tp-text-outline),
|
|
1px -1px 0 var(--tp-text-outline),
|
|
-1px 1px 0 var(--tp-text-outline),
|
|
1px 1px 0 var(--tp-text-outline),
|
|
0 2px 16px rgba(0, 0, 0, 0.9);
|
|
}
|
|
:root[data-theme="winter"] .tp-hero h1,
|
|
:root[data-theme="winter"] .tp-hero p {
|
|
text-shadow:
|
|
0 -1px 0 var(--tp-text-outline),
|
|
1px 0 0 var(--tp-text-outline),
|
|
0 1px 0 var(--tp-text-outline),
|
|
-1px 0 0 var(--tp-text-outline),
|
|
-1px -1px 0 var(--tp-text-outline),
|
|
1px -1px 0 var(--tp-text-outline),
|
|
-1px 1px 0 var(--tp-text-outline),
|
|
1px 1px 0 var(--tp-text-outline),
|
|
0 2px 12px rgba(154, 58, 14, 0.10);
|
|
}
|
|
|
|
.tp-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--tp-grid-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--tp-grid-line) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
background-position: -1px -1px;
|
|
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%);
|
|
mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
opacity: 0.5; /* subtle grid, not a wall */
|
|
}
|
|
:root[data-theme="winter"] .tp-hero::before {
|
|
opacity: 0.7; /* show a touch more on paper */
|
|
}
|
|
|
|
/* Subtle floating glow in the hero, behind the content */
|
|
.tp-hero-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
opacity: 0.6;
|
|
background:
|
|
radial-gradient(circle at 15% 30%, var(--tp-hero-glow-a), transparent 35%),
|
|
radial-gradient(circle at 85% 70%, var(--tp-hero-glow-b), transparent 35%);
|
|
}
|
|
|
|
/* ---------- Glass nav ---------------------------------------------------- */
|
|
.tp-nav {
|
|
background: var(--tp-bg-nav);
|
|
backdrop-filter: saturate(160%) blur(12px);
|
|
-webkit-backdrop-filter: saturate(160%) blur(12px);
|
|
border-bottom: 1px solid var(--tp-border);
|
|
transition: background 200ms ease, border-color 200ms ease;
|
|
}
|
|
|
|
/* ---------- Feature cards ------------------------------------------------ */
|
|
.tp-card {
|
|
position: relative;
|
|
background: var(--tp-bg-card);
|
|
border: 1px solid var(--tp-border);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
box-shadow: var(--tp-card-shadow);
|
|
transition: border-color 200ms ease, transform 200ms ease,
|
|
background 200ms ease, box-shadow 200ms ease;
|
|
}
|
|
.tp-card:hover {
|
|
border-color: rgba(183, 65, 14, 0.6);
|
|
background: var(--tp-bg-card-hover);
|
|
box-shadow: var(--tp-card-shadow-hover);
|
|
}
|
|
:root[data-theme="winter"] .tp-card:hover {
|
|
border-color: rgba(154, 58, 14, 0.4);
|
|
}
|
|
|
|
.tp-card-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.75rem;
|
|
background: var(--tp-accent-soft);
|
|
color: var(--tp-accent);
|
|
border: 1px solid var(--tp-accent-glow);
|
|
margin-bottom: 1rem;
|
|
}
|
|
:root[data-theme="winter"] .tp-card-icon {
|
|
border-color: rgba(154, 58, 14, 0.18);
|
|
}
|
|
|
|
/* ---------- Code blocks (kitchen sink — hljs + custom) ------------------ */
|
|
.tp-code {
|
|
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
tab-size: 4;
|
|
}
|
|
.tp-code pre {
|
|
background: var(--tp-bg-code);
|
|
border: 1px solid var(--tp-border);
|
|
border-radius: 0.75rem;
|
|
padding: 1.25rem 1.5rem;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
:root[data-theme="winter"] .tp-code pre {
|
|
/* keep the code panel a little warmer on light pages, like a printed
|
|
code listing on cream paper */
|
|
border-color: rgba(0, 0, 0, 0.12);
|
|
box-shadow: 0 12px 28px -16px rgba(28, 25, 23, 0.35);
|
|
}
|
|
.tp-code pre code.hljs {
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ---------- Inline kbd --------------------------------------------------- */
|
|
.tp-kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.15rem 0.5rem;
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--tp-border-strong);
|
|
border-bottom-width: 2px;
|
|
border-radius: 0.375rem;
|
|
background: rgba(39, 39, 42, 0.6);
|
|
color: var(--tp-fg-code);
|
|
line-height: 1;
|
|
}
|
|
:root[data-theme="winter"] .tp-kbd {
|
|
background: #ffffff;
|
|
color: #1c1917;
|
|
border-color: #d6d3d1;
|
|
box-shadow: 0 1px 0 rgba(28, 25, 23, 0.04);
|
|
}
|
|
|
|
/* ---------- Terminal window wrapper -------------------------------------- */
|
|
.tp-terminal {
|
|
position: relative;
|
|
border-radius: 0.875rem;
|
|
background: transparent; /* let the body ASCII art show through */
|
|
box-shadow:
|
|
0 0 0 1px rgba(244, 162, 107, 0.18), /* rust-orange hairline, brand */
|
|
0 30px 60px -20px rgba(0, 0, 0, 0.55),
|
|
0 18px 36px -18px rgba(0, 0, 0, 0.45);
|
|
overflow: hidden;
|
|
}
|
|
:root[data-theme="winter"] .tp-terminal {
|
|
box-shadow:
|
|
0 0 0 1px rgba(154, 58, 14, 0.18),
|
|
0 24px 48px -20px rgba(154, 58, 14, 0.22),
|
|
0 12px 24px -16px rgba(28, 25, 23, 0.10);
|
|
}
|
|
.tp-terminal::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(11, 11, 15, 0.55) 0%,
|
|
rgba(11, 11, 15, 0) 18%,
|
|
rgba(11, 11, 15, 0) 82%,
|
|
rgba(11, 11, 15, 0.45) 100%
|
|
); /* darken only the top + bottom strips, leave the middle transparent
|
|
so the body ASCII art shows through the terminal content */
|
|
}
|
|
:root[data-theme="winter"] .tp-terminal::after {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(255, 255, 255, 0.10) 0%,
|
|
rgba(255, 255, 255, 0) 18%,
|
|
rgba(255, 255, 255, 0) 82%,
|
|
rgba(255, 255, 255, 0.10) 100%
|
|
);
|
|
}
|
|
|
|
/* ---------- Selection --------------------------------------------------- */
|
|
::selection {
|
|
background: var(--tp-accent);
|
|
color: var(--tp-accent-fg);
|
|
}
|
|
|
|
/* ---------- Focus ring -------------------------------------------------- */
|
|
:focus-visible {
|
|
outline: 2px solid var(--tp-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* ---------- Scrollbar (subtle) ----------------------------------------- */
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--tp-border-strong);
|
|
border-radius: 999px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--tp-fg-subtle);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
/* ---------- No-FOUC theme flash ----------------------------------------- */
|
|
html:not([data-theme]) body { background: #09090b; }
|
|
|
|
/* ---------- Alpine x-cloak (prevents flash of un-initialised content) --- */
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* ==========================================================================
|
|
THEME-AWARE TAILWIND OVERRIDES
|
|
--------------------------------------------------------------------------
|
|
The HTML uses hardcoded `text-zinc-*`, `bg-zinc-*`, `border-zinc-*` etc.
|
|
(so the source reads like a normal dark-mode-first site). In light mode
|
|
we transparently remap those zinc slots to our warm stone palette.
|
|
This block has higher selector specificity (`:root[data-theme=...] .foo`)
|
|
than the Tailwind utility class on its own, so it wins without `!important`.
|
|
========================================================================== */
|
|
:root[data-theme="winter"] {
|
|
|
|
/* ---- DaisyUI body tokens ----------------------------------------------
|
|
daisyUI 4 uses OKLCH under the hood (`oklch(var(--b1) / .N)`); our custom
|
|
HSL-flavoured values don't parse, so `bg-base-100` would resolve to
|
|
transparent. We override the class directly with our token-driven colour. */
|
|
.bg-base-100 { background-color: var(--tp-bg); }
|
|
.text-base-content { color: var(--tp-fg); }
|
|
|
|
/* ---- text ---- */
|
|
.text-zinc-50 { color: #0c0a09; }
|
|
.text-zinc-100 { color: #1c1917; }
|
|
.text-zinc-200 { color: #292524; }
|
|
.text-zinc-300 { color: #44403c; }
|
|
.text-zinc-400 { color: #57534e; }
|
|
.text-zinc-500 { color: #78716c; }
|
|
.text-zinc-600 { color: #57534e; }
|
|
.text-zinc-700 { color: #d6d3d1; } /* dividers + rare text */
|
|
.text-zinc-800 { color: #e7e5e4; }
|
|
.text-zinc-900 { color: #ffffff; }
|
|
.text-zinc-950 { color: #ffffff; }
|
|
.text-white { color: #1c1917; }
|
|
|
|
/* ---- backgrounds ---- */
|
|
.bg-zinc-50 { background-color: #fafaf9; }
|
|
.bg-zinc-100 { background-color: #f5f5f4; }
|
|
.bg-zinc-200 { background-color: #e7e5e4; }
|
|
.bg-zinc-300 { background-color: #d6d3d1; }
|
|
.bg-zinc-400 { background-color: #a8a29e; }
|
|
.bg-zinc-500 { background-color: #78716c; }
|
|
.bg-zinc-600 { background-color: #57534e; }
|
|
.bg-zinc-700 { background-color: #d6d3d1; }
|
|
.bg-zinc-800 { background-color: #e7e5e4; }
|
|
.bg-zinc-900 { background-color: #ffffff; }
|
|
.bg-zinc-900\/40 { background-color: rgba(255, 255, 255, 0.65); }
|
|
.bg-zinc-900\/50 { background-color: rgba(255, 255, 255, 0.75); }
|
|
.bg-zinc-900\/60 { background-color: rgba(255, 255, 255, 0.85); }
|
|
.bg-zinc-950 { background-color: #ffffff; }
|
|
.bg-zinc-950\/30 { background-color: #f3f1ec; } /* section alt */
|
|
.bg-zinc-950\/40 { background-color: #f5f3ee; } /* trust strip */
|
|
.bg-zinc-950\/50 { background-color: #ffffff; }
|
|
.bg-zinc-950\/60 { background-color: #ffffff; }
|
|
.bg-zinc-950\/80 { background-color: #ffffff; }
|
|
.bg-zinc-950\/95 { background-color: #ffffff; }
|
|
|
|
/* ---- borders ---- */
|
|
.border-zinc-700 { border-color: #d6d3d1; }
|
|
.border-zinc-800 { border-color: #e7e5e4; }
|
|
.border-zinc-800\/40 { border-color: rgba(214, 211, 209, 0.55); }
|
|
.border-zinc-800\/60 { border-color: rgba(214, 211, 209, 0.75); }
|
|
.border-zinc-900\/50 { border-color: rgba(214, 211, 209, 0.7); }
|
|
|
|
/* The decoration on links (ratatui etc) */
|
|
.decoration-zinc-700 { text-decoration-color: #d6d3d1; }
|
|
|
|
/* ---- hover states (mirror the text/bg map, with a touch more contrast) ---- */
|
|
.hover\:text-white:hover { color: #0c0a09; }
|
|
.hover\:text-zinc-100:hover { color: #0c0a09; }
|
|
.hover\:text-zinc-200:hover { color: #1c1917; }
|
|
.hover\:text-zinc-300:hover { color: #1c1917; }
|
|
.hover\:text-zinc-400:hover { color: #1c1917; }
|
|
.hover\:bg-zinc-800\/50:hover { background-color: rgba(231, 229, 228, 0.7); }
|
|
.hover\:bg-zinc-800\/60:hover { background-color: rgba(231, 229, 228, 0.85); }
|
|
.hover\:bg-zinc-900:hover { background-color: #f5f3ee; }
|
|
.hover\:border-zinc-500:hover { border-color: #a8a29e; }
|
|
.hover\:border-zinc-700:hover { border-color: #a8a29e; }
|
|
.hover\:decoration-accent:hover { text-decoration-color: var(--tp-accent); }
|
|
|
|
/* ---- accent (rust) — slightly darker on light for legibility ---- */
|
|
.text-accent { color: #9a3a0e; }
|
|
.bg-accent { background-color: #9a3a0e; }
|
|
.bg-accent\/5 { background-color: rgba(154, 58, 14, 0.05); }
|
|
.bg-accent\/10 { background-color: rgba(154, 58, 14, 0.08); }
|
|
.bg-accent\/15 { background-color: rgba(154, 58, 14, 0.12); }
|
|
.border-accent { border-color: #9a3a0e; }
|
|
.border-accent\/30 { border-color: rgba(154, 58, 14, 0.25); }
|
|
.border-accent\/40 { border-color: rgba(154, 58, 14, 0.35); }
|
|
.border-accent\/60 { border-color: rgba(154, 58, 14, 0.55); }
|
|
.hover\:bg-accent\/90:hover { background-color: #7f2f08; }
|
|
.hover\:border-accent\/60:hover { border-color: rgba(154, 58, 14, 0.55); }
|
|
.hover\:text-accent:hover { color: #9a3a0e; }
|
|
.from-accent\/15 { --tw-gradient-from: rgba(154, 58, 14, 0.18); --tw-gradient-to: rgba(154, 58, 14, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
|
|
.to-emerald-500\/5 { --tw-gradient-to: rgba(16, 185, 129, 0.06); }
|
|
|
|
/* ---- tab pill in code-example tab bar ---- */
|
|
.bg-zinc-800 { background-color: #e7e5e4; }
|
|
.bg-zinc-800.text-white { color: #1c1917; }
|
|
}
|
|
|
|
/* ==========================================================================
|
|
DaisyUI overrides for our theme
|
|
--------------------------------------------------------------------------
|
|
DaisyUI 4 ships a built-in `night` theme — we already use it for dark.
|
|
`winter` is our own theme, so we register its HSL tokens so things like
|
|
`.bg-base-100` and `.text-base-content` resolve correctly.
|
|
Format is "H S% L%" (no hsl() wrapper) — DaisyUI concatenates.
|
|
========================================================================== */
|
|
[data-theme="night"] {
|
|
--p: 20 75% 38%; /* primary — rust */
|
|
--pc: 20 100% 97%;
|
|
--b1: 240 6% 7%; /* base 100 */
|
|
--b2: 240 5% 11%;
|
|
--b3: 240 5% 14%;
|
|
--bc: 0 0% 96%; /* base content */
|
|
/* DaisyUI 4 expects OKLCH and ignores HSL on modern browsers. Provide
|
|
the fallback so the body has a real colour even if OKLCH parsing fails. */
|
|
--fallback-b1: #09090b;
|
|
--fallback-bc: #fafafa;
|
|
/* Make DaisyUI semantic tokens resolve to our rust accent. */
|
|
.bg-base-100 { background-color: var(--tp-bg); }
|
|
.text-base-content { color: var(--tp-fg); }
|
|
}
|
|
|
|
[data-theme="winter"] {
|
|
--p: 19 82% 32%; /* primary — darker rust, sits on cream */
|
|
--pc: 30 100% 97%;
|
|
--b1: 36 25% 97%; /* base 100 — warm paper */
|
|
--b2: 36 18% 94%;
|
|
--b3: 36 12% 89%;
|
|
--bc: 24 12% 12%; /* base content — warm near-black */
|
|
--n: 24 10% 18%; /* neutral */
|
|
--nc: 36 25% 97%;
|
|
--fallback-b1: #fbfaf7;
|
|
--fallback-bc: #1c1917;
|
|
}
|