Initial commit
This commit is contained in:
admin
+199
@@ -0,0 +1,199 @@
|
||||
@import "tailwindcss" source(none);
|
||||
|
||||
/* Tailwind v4's auto-content-discovery picks up files in .next/types,
|
||||
* which Next regenerates on every dev rebuild. That triggered a CSS
|
||||
* regen → HMR rebuild → routes regen → loop. Explicit @source decls
|
||||
* (with the `source(none)` modifier above to disable auto-discovery)
|
||||
* scope scanning to just our project source. */
|
||||
@source "../app/**/*.{ts,tsx,mdx}";
|
||||
@source "../components/**/*.{ts,tsx,mdx}";
|
||||
@source "../lib/**/*.{ts,tsx}";
|
||||
|
||||
@theme {
|
||||
--color-bg-0: oklch(0.13 0.025 280);
|
||||
--color-bg-1: oklch(0.17 0.04 285);
|
||||
--color-bg-2: oklch(0.22 0.05 290);
|
||||
--color-glass: color-mix(in oklch, white 6%, transparent);
|
||||
--color-glass-strong: color-mix(in oklch, white 10%, transparent);
|
||||
--color-glass-border: color-mix(in oklch, white 14%, transparent);
|
||||
--color-glass-border-strong: color-mix(in oklch, white 22%, transparent);
|
||||
--color-fg: oklch(0.97 0.01 280);
|
||||
--color-fg-dim: oklch(0.72 0.025 280);
|
||||
--color-fg-muted: oklch(0.55 0.02 280);
|
||||
--color-cyan: oklch(0.82 0.16 200);
|
||||
--color-cyan-glow: oklch(0.78 0.18 200);
|
||||
--color-accent-primary: var(--color-cyan);
|
||||
--color-accent-primary-glow: var(--color-cyan-glow);
|
||||
--color-violet: oklch(0.72 0.22 305);
|
||||
--color-violet-glow: oklch(0.68 0.24 305);
|
||||
--color-mint: oklch(0.80 0.16 155);
|
||||
--color-coral: oklch(0.72 0.20 25);
|
||||
|
||||
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;
|
||||
|
||||
--shadow-glow-cyan: 0 0 32px color-mix(in oklch, var(--color-cyan-glow) 35%, transparent);
|
||||
--shadow-glow-violet: 0 0 32px color-mix(in oklch, var(--color-violet-glow) 35%, transparent);
|
||||
|
||||
/* ---------------------------------------------------------------
|
||||
Detail / panel rhythm tokens — the "snug+1" system.
|
||||
Apply via Tailwind utilities: e.g. p-card, gap-card, gap-section,
|
||||
gap-chip, mb-label, gap-stat. Do NOT use raw px values for these
|
||||
concepts in app code — keep the source of truth here.
|
||||
--------------------------------------------------------------- */
|
||||
--spacing-card: 15px; /* card interior padding */
|
||||
--spacing-card-gap: 9px; /* gap between sibling cards */
|
||||
--spacing-section: 15px; /* gap between sections inside a card */
|
||||
--spacing-chip: 7px; /* gap inside chip clusters / pill grids / button bars */
|
||||
--spacing-label: 7px; /* gap from a label-mono header to its content */
|
||||
--spacing-stat: 5px; /* gap from a hero-stat label to its big number */
|
||||
--spacing-stat-gap: 13px; /* horizontal gap between hero-stat columns */
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html, body { height: 100%; }
|
||||
html { scrollbar-gutter: stable; }
|
||||
body {
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 20% 0%, color-mix(in oklch, var(--color-violet) 18%, transparent) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 70% 60% at 100% 30%, color-mix(in oklch, var(--color-cyan) 14%, transparent) 0%, transparent 55%),
|
||||
linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 100%);
|
||||
background-attachment: fixed;
|
||||
color: var(--color-fg);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in oklch, var(--color-cyan) 40%, transparent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
* { border-color: var(--color-glass-border); }
|
||||
|
||||
/* scrollbar — always visible thumb */
|
||||
html {
|
||||
scrollbar-color: color-mix(in oklch, var(--color-fg-dim) 70%, transparent) color-mix(in oklch, var(--color-fg-dim) 12%, transparent);
|
||||
}
|
||||
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
|
||||
::-webkit-scrollbar-track {
|
||||
background: color-mix(in oklch, var(--color-fg-dim) 12%, transparent);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: color-mix(in oklch, var(--color-fg-dim) 70%, transparent);
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background-color 200ms ease;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: color-mix(in oklch, var(--color-fg-dim) 90%, transparent);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes play-pulse {
|
||||
0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-cyan) 50%, transparent); }
|
||||
100% { box-shadow: 0 0 0 14px color-mix(in oklch, var(--color-cyan) 0%, transparent); }
|
||||
}
|
||||
|
||||
/* While the video player modal is open, kill native HTML5 drag site-wide.
|
||||
The native <video> controls' shadow-DOM sliders sometimes let the drag
|
||||
gesture escape onto whatever's beneath the cursor (usually a card
|
||||
image), which the browser then starts dragging out. The rule reverses
|
||||
when the modal unmounts and removes the class. */
|
||||
body.video-player-active * {
|
||||
-webkit-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.fade-in { animation: fade-in var(--fade-duration) ease both; }
|
||||
html[data-fade="off"] .fade-in { animation: none; }
|
||||
|
||||
.glass {
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(20px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(140%);
|
||||
border: 1px solid var(--color-glass-border);
|
||||
}
|
||||
.glass-strong {
|
||||
background: var(--color-glass-strong);
|
||||
backdrop-filter: blur(24px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(150%);
|
||||
border: 1px solid var(--color-glass-border-strong);
|
||||
}
|
||||
.glass-hover {
|
||||
transition: border-color 200ms ease, box-shadow 250ms ease, transform 200ms ease;
|
||||
}
|
||||
.glass-hover:hover {
|
||||
border-color: color-mix(in oklch, var(--color-cyan) 50%, var(--color-glass-border));
|
||||
box-shadow: var(--shadow-glow-cyan);
|
||||
}
|
||||
.text-gradient-accent {
|
||||
background: linear-gradient(120deg, var(--color-cyan) 0%, var(--color-violet) 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.grid-noise {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cover-hero-frame {
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
box-shadow 220ms ease;
|
||||
}
|
||||
|
||||
.cover-hero-hover {
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
transition:
|
||||
filter 220ms ease;
|
||||
}
|
||||
|
||||
.cover-hero-hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at center,
|
||||
transparent 30%,
|
||||
rgba(0, 0, 0, 0.34) 74%,
|
||||
rgba(0, 0, 0, 0.68) 100%
|
||||
);
|
||||
transition: opacity 180ms ease;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.cover-hero-frame:hover {
|
||||
border-color: color-mix(in oklch, var(--color-accent-primary) 76%, var(--color-glass-border));
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in oklch, var(--color-accent-primary) 34%, transparent),
|
||||
0 0 30px color-mix(in oklch, var(--color-accent-primary-glow) 40%, transparent);
|
||||
}
|
||||
|
||||
.group:hover .cover-hero-hover {
|
||||
filter: saturate(1.06);
|
||||
}
|
||||
|
||||
.group:hover .cover-hero-hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user