11f1365f75
- Add .eslintrc.json so next lint doesn't prompt interactively in CI - Switch Google Fonts from <link> tags to next/font/google - Wrap "// SECURE_NODE_7" in JSX expression to avoid comment parse error
116 lines
3.1 KiB
CSS
116 lines
3.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Surface Architecture */
|
|
--color-background: #0b0f10;
|
|
--color-surface: #0b0f10;
|
|
--color-surface-dim: #0b0f10;
|
|
--color-surface-bright: #272d2f;
|
|
--color-surface-variant: #212728;
|
|
--color-surface-container-lowest: #000000;
|
|
--color-surface-container-low: #101415;
|
|
--color-surface-container: #151a1c;
|
|
--color-surface-container-high: #1b2022;
|
|
--color-surface-container-highest: #212728;
|
|
--color-surface-tint: #aaffdc;
|
|
|
|
/* Primary — Cyan */
|
|
--color-primary: #aaffdc;
|
|
--color-primary-dim: #00edb4;
|
|
--color-primary-container: #00fdc1;
|
|
--color-primary-fixed: #00fdc1;
|
|
--color-primary-fixed-dim: #00edb4;
|
|
--color-on-primary: #00654b;
|
|
--color-on-primary-container: #005c44;
|
|
--color-on-primary-fixed: #004734;
|
|
--color-on-primary-fixed-variant: #00664c;
|
|
--color-inverse-primary: #006c51;
|
|
|
|
/* Secondary — Magenta */
|
|
--color-secondary: #ff51fa;
|
|
--color-secondary-dim: #ff51fa;
|
|
--color-secondary-container: #a900a9;
|
|
--color-secondary-fixed: #ffbdf3;
|
|
--color-secondary-fixed-dim: #ffa6f3;
|
|
--color-on-secondary: #400040;
|
|
--color-on-secondary-container: #fff5f9;
|
|
--color-on-secondary-fixed: #620061;
|
|
--color-on-secondary-fixed-variant: #920091;
|
|
|
|
/* Tertiary — Lime */
|
|
--color-tertiary: #f3ffca;
|
|
--color-tertiary-dim: #beee00;
|
|
--color-tertiary-container: #cafd00;
|
|
--color-tertiary-fixed: #cafd00;
|
|
--color-tertiary-fixed-dim: #beee00;
|
|
--color-on-tertiary: #516700;
|
|
--color-on-tertiary-container: #4a5e00;
|
|
--color-on-tertiary-fixed: #3a4a00;
|
|
--color-on-tertiary-fixed-variant: #526900;
|
|
|
|
/* Error */
|
|
--color-error: #ff716c;
|
|
--color-error-dim: #d7383b;
|
|
--color-error-container: #9f0519;
|
|
--color-on-error: #490006;
|
|
--color-on-error-container: #ffa8a3;
|
|
|
|
/* On-surface */
|
|
--color-on-background: #fafdfe;
|
|
--color-on-surface: #fafdfe;
|
|
--color-on-surface-variant: #a8acad;
|
|
--color-inverse-surface: #f7fafb;
|
|
--color-inverse-on-surface: #525657;
|
|
|
|
/* Outline */
|
|
--color-outline: #727677;
|
|
--color-outline-variant: #44494a;
|
|
|
|
/* Typography — CSS variables set by next/font in layout.tsx */
|
|
--font-headline: var(--font-headline), "Space Grotesk", sans-serif;
|
|
--font-body: var(--font-body), "Inter", sans-serif;
|
|
--font-label: var(--font-headline), "Space Grotesk", sans-serif;
|
|
|
|
/* 0px border radius — enforced globally */
|
|
--radius: 0px;
|
|
--radius-lg: 0px;
|
|
--radius-xl: 0px;
|
|
}
|
|
|
|
/* Scanline CRT overlay */
|
|
.scanlines {
|
|
background: linear-gradient(
|
|
rgba(18, 16, 16, 0) 50%,
|
|
rgba(0, 0, 0, 0.2) 50%
|
|
),
|
|
linear-gradient(
|
|
90deg,
|
|
rgba(255, 0, 0, 0.03),
|
|
rgba(0, 255, 0, 0.01),
|
|
rgba(0, 0, 255, 0.03)
|
|
);
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Glitch hover effect */
|
|
.glitch-hover:hover {
|
|
text-shadow: 2px 0 #ff51fa, -2px 0 #00fdc1;
|
|
}
|
|
|
|
/* Ghost border — monolith inset shadow */
|
|
.monolith-border {
|
|
box-shadow: inset 0 0 0 1px rgba(170, 255, 220, 0.1);
|
|
}
|
|
|
|
/* Crosshair cursor */
|
|
body {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
/* Selection colors */
|
|
::selection {
|
|
background-color: var(--color-primary-container);
|
|
color: var(--color-on-primary-container);
|
|
}
|