284 lines
8.2 KiB
CSS
284 lines
8.2 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 (default to dark) -------------------------------------- */
|
|
:root {
|
|
color-scheme: dark light;
|
|
--tp-accent: #b7410e;
|
|
--tp-accent-fg: #fff5f0;
|
|
--tp-grid-line: rgba(63, 63, 70, 0.35);
|
|
--tp-hero-from: #0b0b0f;
|
|
--tp-hero-to: #18181b;
|
|
--tp-hero-shade: rgba(9, 9, 11, 0.68);
|
|
--tp-text-outline: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
:root[data-theme="winter"] {
|
|
--tp-accent: #93330c;
|
|
--tp-accent-fg: #fff5f0;
|
|
--tp-grid-line: rgba(228, 228, 231, 0.7);
|
|
--tp-hero-from: #fafafa;
|
|
--tp-hero-to: #f4f4f5;
|
|
--tp-hero-shade: rgba(255, 255, 255, 0.78);
|
|
--tp-text-outline: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
/* ---------- Body --------------------------------------------------------- */
|
|
body {
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
font-feature-settings: 'cv11', 'ss01', 'ss03';
|
|
}
|
|
|
|
/* ---------- 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 .grid > div:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
.tp-hero .grid > div:first-child::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1.5rem;
|
|
z-index: -1;
|
|
border: 1px solid rgba(244, 244, 245, 0.08);
|
|
border-radius: 1rem;
|
|
background: var(--tp-hero-shade);
|
|
box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.85);
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.tp-hero h1,
|
|
.tp-hero p {
|
|
text-shadow:
|
|
-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(0, 0, 0, 0.75);
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
|
|
/* Subtle floating code lines 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%, rgba(183, 65, 14, 0.08), transparent 35%),
|
|
radial-gradient(circle at 85% 70%, rgba(126, 231, 135, 0.05), transparent 35%);
|
|
}
|
|
|
|
/* ---------- Glass nav ---------------------------------------------------- */
|
|
.tp-nav {
|
|
background: rgba(9, 9, 11, 0.65);
|
|
backdrop-filter: saturate(160%) blur(12px);
|
|
-webkit-backdrop-filter: saturate(160%) blur(12px);
|
|
border-bottom: 1px solid rgba(63, 63, 70, 0.4);
|
|
}
|
|
:root[data-theme="winter"] .tp-nav {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border-bottom-color: rgba(228, 228, 231, 0.7);
|
|
}
|
|
|
|
/* ---------- Feature cards ------------------------------------------------ */
|
|
.tp-card {
|
|
position: relative;
|
|
background: rgba(24, 24, 27, 0.5);
|
|
border: 1px solid rgba(63, 63, 70, 0.5);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
|
|
}
|
|
.tp-card:hover {
|
|
border-color: rgba(183, 65, 14, 0.6);
|
|
background: rgba(24, 24, 27, 0.75);
|
|
transform: translateY(-2px);
|
|
}
|
|
:root[data-theme="winter"] .tp-card {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
border-color: rgba(228, 228, 231, 0.8);
|
|
}
|
|
:root[data-theme="winter"] .tp-card:hover {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-color: rgba(183, 65, 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: rgba(183, 65, 14, 0.12);
|
|
color: var(--tp-accent);
|
|
border: 1px solid rgba(183, 65, 14, 0.25);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* ---------- 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: #0b0b0f;
|
|
border: 1px solid rgba(63, 63, 70, 0.5);
|
|
border-radius: 0.75rem;
|
|
padding: 1.25rem 1.5rem;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
.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 rgba(63, 63, 70, 0.7);
|
|
border-bottom-width: 2px;
|
|
border-radius: 0.375rem;
|
|
background: rgba(39, 39, 42, 0.6);
|
|
color: #f4f4f5;
|
|
line-height: 1;
|
|
}
|
|
:root[data-theme="winter"] .tp-kbd {
|
|
background: #fff;
|
|
color: #18181b;
|
|
border-color: #d4d4d8;
|
|
}
|
|
|
|
/* ---------- 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;
|
|
}
|
|
.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 */
|
|
}
|
|
|
|
/* ---------- 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: rgba(63, 63, 70, 0.6);
|
|
border-radius: 999px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover { background-color: rgba(82, 82, 91, 0.8); background-clip: padding-box; }
|
|
|
|
/* ---------- No-FOUC theme flash ----------------------------------------- */
|
|
html:not([data-theme]) body { background: #09090b; }
|
|
:root[data-theme="winter"] body { background: #fafafa; }
|
|
|
|
/* ---------- Alpine x-cloak (prevents flash of un-initialised content) --- */
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* ---------- DaisyUI overrides for our theme ----------------------------- */
|
|
/* Bring DaisyUI's primary to our accent so .btn-primary etc. look on-brand. */
|
|
[data-theme="night"] {
|
|
--p: 28 70% 36%;
|
|
--pc: 0 0% 100%;
|
|
--b1: 240 5% 8%;
|
|
--b2: 240 4% 12%;
|
|
--b3: 240 4% 16%;
|
|
--bc: 0 0% 96%;
|
|
}
|