239 lines
7.3 KiB
CSS
Executable File
239 lines
7.3 KiB
CSS
Executable File
/* @import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
} */
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* ==========================================================================
|
|
RAW TOKENS — single source of truth
|
|
⚠️ All hex values marked "verify" are best-guesses from the screenshot.
|
|
Confirm against Figma before shipping.
|
|
========================================================================== */
|
|
|
|
:root {
|
|
/* --- Fonts ---------------------------------------------------------------- */
|
|
--font-geist-sans: "Geist", sans-serif; /* injected by next/font or CDN */
|
|
--font-geist-mono: "Geist Mono", monospace;
|
|
|
|
/* --- Font weights --------------------------------------------------------- */
|
|
--font-weight-light: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* --- Type scale: Display (desktop) --------------------------------------- */
|
|
--text-display-1: 4.5rem; /* verify */
|
|
--leading-display-1: 1.1;
|
|
--text-display-2: 3.5rem; /* verify */
|
|
--leading-display-2: 1.1;
|
|
--text-display-3: 2.5rem; /* verify */
|
|
--leading-display-3: 1.15;
|
|
--text-display-4: 2rem; /* verify */
|
|
--leading-display-4: 1.2;
|
|
--text-display-5: 1.5rem; /* verify */
|
|
--leading-display-5: 1.25;
|
|
|
|
/* --- Type scale: Body ----------------------------------------------------- */
|
|
--text-body-18: 1.125rem;
|
|
--leading-body-18: 1.6;
|
|
--text-body-16: 1rem;
|
|
--leading-body-16: 1.6;
|
|
--text-body-14: 0.875rem;
|
|
--leading-body-14: 1.5;
|
|
|
|
/* --- Type scale: Label (Geist Mono) --------------------------------------- */
|
|
--text-label-32: 2rem;
|
|
--text-label-14: 0.875rem;
|
|
--leading-label: 1.4;
|
|
|
|
/* --- Surface / Neutral ---------------------------------------------------- */
|
|
--color-surface-primary: #7c3aed; /* brand purple — verify */
|
|
--color-surface-950: #0f0f0f;
|
|
--color-surface-900: #1c1c1c; /* verify */
|
|
--color-surface-800: #2c2c2c; /* verify */
|
|
--color-surface-600: #3f3f3f;
|
|
--color-surface-200: #d1d1d1; /* verify */
|
|
--color-surface-100: #ececec; /* verify */
|
|
|
|
/* --- Brand: Pink ---------------------------------------------------------- */
|
|
--color-pink-dark: #ec0267; /* verify */
|
|
--color-pink-base: #f60060; /* verify */
|
|
--color-pink-light: #f860c4; /* verify */
|
|
--color-pink-light-1: #fbc8e0; /* verify */
|
|
|
|
/* --- Brand: Blue ---------------------------------------------------------- */
|
|
--color-blue-dark: #3f0cf3; /* verify */
|
|
--color-blue-base: #4040f0; /* verify */
|
|
--color-blue-light: #8080f5; /* verify */
|
|
--color-blue-light-1: #b8b8ff; /* verify */
|
|
|
|
/* --- Brand: Purple -------------------------------------------------------- */
|
|
--color-purple-dark: #6f0cf8; /* verify */
|
|
--color-purple-base: #8f3cf8; /* verify */
|
|
--color-purple-light: #b040f8; /* verify */
|
|
--color-purple-light-1: #d4b0ff; /* verify */
|
|
|
|
/* --- Legacy Next.js scaffold (kept for compatibility) --------------------- */
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
--text-display-1: 3.5rem; /* verify */
|
|
--text-display-2: 2.5rem; /* verify */
|
|
--text-display-3: 2rem; /* verify */
|
|
--text-display-4: 1.5rem; /* verify */
|
|
--text-display-5: 1.25rem; /* verify */
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
TAILWIND v4 THEME — maps raw tokens → utility classes
|
|
Everything in @theme becomes a Tailwind utility automatically:
|
|
--color-* → bg-*, text-*, border-*, ring-*, fill-*, stroke-*
|
|
--font-* → font-*
|
|
--text-* → text-* (when paired with a size value)
|
|
--leading-* → leading-*
|
|
========================================================================== */
|
|
|
|
@theme inline {
|
|
/* Background & foreground (Next.js scaffold) */
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
|
|
/* Fonts */
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
|
|
/* Surface / Neutral */
|
|
--color-surface-primary: var(--color-surface-primary);
|
|
--color-surface-950: var(--color-surface-950);
|
|
--color-surface-900: var(--color-surface-900);
|
|
--color-surface-800: var(--color-surface-800);
|
|
--color-surface-600: var(--color-surface-600);
|
|
--color-surface-200: var(--color-surface-200);
|
|
--color-surface-100: var(--color-surface-100);
|
|
|
|
/* Brand: Pink */
|
|
--color-pink-dark: var(--color-pink-dark);
|
|
--color-pink-base: var(--color-pink-base);
|
|
--color-pink-light: var(--color-pink-light);
|
|
--color-pink-light-1: var(--color-pink-light-1);
|
|
|
|
/* Brand: Blue */
|
|
--color-blue-dark: var(--color-blue-dark);
|
|
--color-blue-base: var(--color-blue-base);
|
|
--color-blue-light: var(--color-blue-light);
|
|
--color-blue-light-1: var(--color-blue-light-1);
|
|
|
|
/* Brand: Purple */
|
|
--color-purple-dark: var(--color-purple-dark);
|
|
--color-purple-base: var(--color-purple-base);
|
|
--color-purple-light: var(--color-purple-light);
|
|
--color-purple-light-1: var(--color-purple-light-1);
|
|
|
|
/* Type scale — Display */
|
|
--text-display-1: var(--text-display-1);
|
|
--text-display-2: var(--text-display-2);
|
|
--text-display-3: var(--text-display-3);
|
|
--text-display-4: var(--text-display-4);
|
|
--text-display-5: var(--text-display-5);
|
|
|
|
/* Type scale — Body */
|
|
--text-body-18: var(--text-body-18);
|
|
--text-body-16: var(--text-body-16);
|
|
--text-body-14: var(--text-body-14);
|
|
|
|
/* Type scale — Label */
|
|
--text-label-32: var(--text-label-32);
|
|
--text-label-14: var(--text-label-14);
|
|
|
|
/* Leading */
|
|
--leading-display-1: var(--leading-display-1);
|
|
--leading-display-2: var(--leading-display-2);
|
|
--leading-display-3: var(--leading-display-3);
|
|
--leading-display-4: var(--leading-display-4);
|
|
--leading-display-5: var(--leading-display-5);
|
|
--leading-body-18: var(--leading-body-18);
|
|
--leading-body-16: var(--leading-body-16);
|
|
--leading-body-14: var(--leading-body-14);
|
|
--leading-label: var(--leading-label);
|
|
|
|
/* Font weights */
|
|
--font-weight-light: var(--font-weight-light);
|
|
--font-weight-regular: var(--font-weight-regular);
|
|
--font-weight-medium: var(--font-weight-medium);
|
|
--font-weight-semibold: var(--font-weight-semibold);
|
|
--font-weight-bold: var(--font-weight-bold);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
BASE STYLES
|
|
========================================================================== */
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-sans);
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
|
|
.grid-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
/* pointer-events: none; */
|
|
}
|
|
|
|
.grid-overlay::before,
|
|
.grid-overlay::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
/* left floating line */
|
|
.grid-overlay::before {
|
|
left: 3%;
|
|
}
|
|
|
|
/* right floating line */
|
|
.grid-overlay::after {
|
|
right: 20%;
|
|
}
|