7fec93e05c
Some checks are pending
Build / build (push) Waiting to run
Deploy / deploy (push) Waiting to run
Lint & Type Check / lint (push) Waiting to run
Security Scan / dependency-check (push) Waiting to run
Security Scan / semgrep (push) Waiting to run
Test / test (18.x) (push) Waiting to run
Test / test (20.x) (push) Waiting to run
Auth & SSO - Wire Authentik (auth.aethex.tech) as OIDC PKCE SSO provider - Server-side only flow with HMAC-signed stateless state token - Account linking via authentik_sub in user metadata - AeThex ID connection card in Dashboard connections tab - Unlink endpoint POST /api/auth/authentik/unlink - Fix node:https helper to bypass undici DNS bug on Node 18 - Fix resolv.conf to use 1.1.1.1/8.8.8.8 in container Schema & types - Regenerate database.types.ts from live Supabase schema (23k lines) - Fix 511 TypeScript errors caused by stale 582-line types file - Fix UserProfile import in aethex-database-adapter.ts - Add notifications migration (title, message, read columns) Server fixes - Remove badge_color from achievements seed/upsert (column doesn't exist) - Rename name→title, add slug field in achievements seed - Remove email from all user_profiles select queries (column doesn't exist) - Fix email-based achievement target lookup via auth.admin.listUsers - Add GET /api/projects/:projectId endpoint - Fix import.meta.dirname → fileURLToPath for Node 18 compatibility - Expose VITE_APP_VERSION from package.json at build time Navigation systems - DevPlatformNav: reorganize into Learn/Build grouped dropdowns with descriptions - Migrate all 11 dev-platform pages from main Layout to DevPlatformLayout - Remove dead isDevMode context nav swap from main Layout - EthosLayout: purple-accented tab bar (Library, Artists, Licensing, Settings) with member-only gating and guest CTA — migrate 4 Ethos pages - GameForgeLayout: orange-branded sidebar with Studio section and lock icons for unauthenticated users — migrate GameForge + GameForgeDashboard - SysBar: live latency ping, status dot (green/yellow/red), real version Layout dropdown - Role-gate Admin (owner/admin/founder only) and Internal Docs (+ staff) - Add Internal section label with separator - Fix settings link from /dashboard?tab=profile#settings to /dashboard?tab=settings Project pages - Add ProjectDetail page at /projects/:projectId - Fix ProfilePassport "View mission" link from /projects/new to /projects/:id Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
471 lines
18 KiB
CSS
471 lines
18 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Electrolize&family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Source+Code+Pro:wght@300;400;500;600&family=VT323&family=Press+Start+2P&family=Merriweather:wght@400;700&display=swap");
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ── AeThex Cyberpunk Theme — copied verbatim from AeThex-Passport-Engine/client/src/index.css ── */
|
|
:root {
|
|
--button-outline: rgba(0, 255, 255, .15);
|
|
--badge-outline: rgba(0, 255, 255, .08);
|
|
--opaque-button-border-intensity: 8;
|
|
--elevate-1: rgba(0, 255, 255, .04);
|
|
--elevate-2: rgba(0, 255, 255, .08);
|
|
--background: 0 0% 2%;
|
|
--foreground: 0 0% 95%;
|
|
--border: 180 100% 50% / 0.2;
|
|
--card: 0 0% 5%;
|
|
--card-foreground: 0 0% 95%;
|
|
--card-border: 180 100% 50% / 0.15;
|
|
--sidebar: 0 0% 4%;
|
|
--sidebar-foreground: 0 0% 90%;
|
|
--sidebar-border: 180 100% 50% / 0.15;
|
|
--sidebar-primary: 180 100% 50%;
|
|
--sidebar-primary-foreground: 0 0% 0%;
|
|
--sidebar-accent: 0 0% 8%;
|
|
--sidebar-accent-foreground: 0 0% 90%;
|
|
--sidebar-ring: 180 100% 50%;
|
|
--popover: 0 0% 5%;
|
|
--popover-foreground: 0 0% 95%;
|
|
--popover-border: 180 100% 50% / 0.2;
|
|
--primary: 180 100% 50%;
|
|
--primary-foreground: 0 0% 0%;
|
|
--secondary: 0 0% 10%;
|
|
--secondary-foreground: 0 0% 85%;
|
|
--muted: 0 0% 8%;
|
|
--muted-foreground: 0 0% 55%;
|
|
--accent: 195 100% 45%;
|
|
--accent-foreground: 0 0% 0%;
|
|
--destructive: 340 100% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--input: 0 0% 12%;
|
|
--ring: 180 100% 50%;
|
|
--chart-1: 180 100% 50%;
|
|
--chart-2: 300 100% 50%;
|
|
--chart-3: 142 76% 45%;
|
|
--chart-4: 340 100% 50%;
|
|
--chart-5: 260 100% 65%;
|
|
--neon-purple: 270 100% 65%;
|
|
--neon-magenta: 300 100% 55%;
|
|
--neon-cyan: 180 100% 50%;
|
|
--gameforge-green: 142 76% 45%;
|
|
--gameforge-dark: 142 30% 6%;
|
|
--font-sans: 'Electrolize', 'Source Code Pro', monospace;
|
|
--font-serif: Georgia, serif;
|
|
--font-mono: 'Source Code Pro', 'JetBrains Mono', monospace;
|
|
--font-display: 'Electrolize', monospace;
|
|
--font-pixel: Oxanium, sans-serif;
|
|
--radius: 0rem;
|
|
--shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
|
--shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
|
--shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
|
--tracking-normal: 0em;
|
|
--spacing: 0.25rem;
|
|
|
|
/* AeThex Brand Colors — cyan palette */
|
|
--aethex-50: 180 100% 97%;
|
|
--aethex-100: 180 100% 92%;
|
|
--aethex-200: 180 100% 80%;
|
|
--aethex-300: 180 100% 70%;
|
|
--aethex-400: 180 100% 60%;
|
|
--aethex-500: 180 100% 50%;
|
|
--aethex-600: 180 100% 40%;
|
|
--aethex-700: 180 100% 30%;
|
|
--aethex-800: 180 100% 20%;
|
|
--aethex-900: 180 100% 12%;
|
|
--aethex-950: 180 100% 6%;
|
|
|
|
/* Neon accent palette */
|
|
--neon-green: 142 76% 45%;
|
|
--neon-yellow: 50 100% 65%;
|
|
|
|
/* Spacing tokens */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 24px;
|
|
--space-6: 32px;
|
|
--space-section-y: var(--space-6);
|
|
|
|
/* Fallback for older browsers */
|
|
--sidebar-primary-border: hsl(var(--sidebar-primary));
|
|
--sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--sidebar-accent-border: hsl(var(--sidebar-accent));
|
|
--sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--primary-border: hsl(var(--primary));
|
|
--primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--secondary-border: hsl(var(--secondary));
|
|
--secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--muted-border: hsl(var(--muted));
|
|
--muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--accent-border: hsl(var(--accent));
|
|
--accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--destructive-border: hsl(var(--destructive));
|
|
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
}
|
|
|
|
.dark {
|
|
--button-outline: rgba(0, 255, 255, .15);
|
|
--badge-outline: rgba(0, 255, 255, .08);
|
|
--opaque-button-border-intensity: 8;
|
|
--elevate-1: rgba(0, 255, 255, .04);
|
|
--elevate-2: rgba(0, 255, 255, .08);
|
|
--background: 0 0% 2%;
|
|
--foreground: 0 0% 95%;
|
|
--border: 180 100% 50% / 0.2;
|
|
--card: 0 0% 5%;
|
|
--card-foreground: 0 0% 95%;
|
|
--card-border: 180 100% 50% / 0.15;
|
|
--sidebar: 0 0% 4%;
|
|
--sidebar-foreground: 0 0% 90%;
|
|
--sidebar-border: 180 100% 50% / 0.15;
|
|
--sidebar-primary: 180 100% 50%;
|
|
--sidebar-primary-foreground: 0 0% 0%;
|
|
--sidebar-accent: 0 0% 8%;
|
|
--sidebar-accent-foreground: 0 0% 90%;
|
|
--sidebar-ring: 180 100% 50%;
|
|
--popover: 0 0% 5%;
|
|
--popover-foreground: 0 0% 95%;
|
|
--popover-border: 180 100% 50% / 0.2;
|
|
--primary: 180 100% 50%;
|
|
--primary-foreground: 0 0% 0%;
|
|
--secondary: 0 0% 10%;
|
|
--secondary-foreground: 0 0% 85%;
|
|
--muted: 0 0% 8%;
|
|
--muted-foreground: 0 0% 55%;
|
|
--accent: 195 100% 45%;
|
|
--accent-foreground: 0 0% 0%;
|
|
--destructive: 340 100% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--input: 0 0% 12%;
|
|
--ring: 180 100% 50%;
|
|
--chart-1: 180 100% 50%;
|
|
--chart-2: 300 100% 50%;
|
|
--chart-3: 142 76% 45%;
|
|
--chart-4: 340 100% 50%;
|
|
--chart-5: 260 100% 65%;
|
|
--neon-purple: 270 100% 65%;
|
|
--neon-magenta: 300 100% 55%;
|
|
--neon-cyan: 180 100% 50%;
|
|
--gameforge-green: 142 76% 45%;
|
|
--gameforge-dark: 142 30% 6%;
|
|
--shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
|
--shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
|
--shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
|
--shadow-2xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.00);
|
|
|
|
--sidebar-primary-border: hsl(var(--sidebar-primary));
|
|
--sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--sidebar-accent-border: hsl(var(--sidebar-accent));
|
|
--sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--primary-border: hsl(var(--primary));
|
|
--primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--secondary-border: hsl(var(--secondary));
|
|
--secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--muted-border: hsl(var(--muted));
|
|
--muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--accent-border: hsl(var(--accent));
|
|
--accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
--destructive-border: hsl(var(--destructive));
|
|
--destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans antialiased bg-background text-foreground;
|
|
}
|
|
|
|
/* Scanline overlay — from AeThex-Passport-Engine */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 1px,
|
|
rgba(0, 255, 255, 0.015) 1px,
|
|
rgba(0, 255, 255, 0.015) 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Grid background — from AeThex-Passport-Engine */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
html::-webkit-scrollbar { display: none; }
|
|
*::-webkit-scrollbar { display: none; }
|
|
* { scrollbar-width: none; }
|
|
|
|
.container {
|
|
@apply px-4 sm:px-6 lg:px-8;
|
|
}
|
|
}
|
|
|
|
/* ── Elevation system — from AeThex-Passport-Engine ── */
|
|
@layer utilities {
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
@apply hidden;
|
|
}
|
|
|
|
[contenteditable][data-placeholder]:empty::before {
|
|
content: attr(data-placeholder);
|
|
color: hsl(var(--muted-foreground));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.no-default-hover-elevate {}
|
|
.no-default-active-elevate {}
|
|
|
|
.toggle-elevate::before,
|
|
.toggle-elevate-2::before {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0px;
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
}
|
|
|
|
.toggle-elevate.toggle-elevated::before {
|
|
background-color: var(--elevate-2);
|
|
}
|
|
|
|
.border.toggle-elevate::before { inset: -1px; }
|
|
|
|
.hover-elevate:not(.no-default-hover-elevate),
|
|
.active-elevate:not(.no-default-active-elevate),
|
|
.hover-elevate-2:not(.no-default-hover-elevate),
|
|
.active-elevate-2:not(.no-default-active-elevate) {
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hover-elevate:not(.no-default-hover-elevate)::after,
|
|
.active-elevate:not(.no-default-active-elevate)::after,
|
|
.hover-elevate-2:not(.no-default-hover-elevate)::after,
|
|
.active-elevate-2:not(.no-default-active-elevate)::after {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0px;
|
|
border-radius: inherit;
|
|
z-index: 999;
|
|
}
|
|
|
|
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
|
|
.active-elevate:active:not(.no-default-active-elevate)::after {
|
|
background-color: var(--elevate-1);
|
|
}
|
|
|
|
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
|
|
.active-elevate-2:active:not(.no-default-active-elevate)::after {
|
|
background-color: var(--elevate-2);
|
|
}
|
|
|
|
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
|
|
.border.active-elevate:not(.no-active-interaction-elevate)::after,
|
|
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
|
|
.border.active-elevate-2:not(.no-active-interaction-elevate)::after {
|
|
inset: -1px;
|
|
}
|
|
}
|
|
|
|
/* ── AeThex OS brand utilities ── */
|
|
@layer utilities {
|
|
.ax-orbitron { font-family: "Orbitron", monospace !important; }
|
|
.ax-mono { font-family: "Share Tech Mono", monospace !important; }
|
|
.ax-electrolize { font-family: "Electrolize", monospace !important; }
|
|
|
|
.ax-corner-bracket { position: relative; }
|
|
.ax-corner-bracket::before,
|
|
.ax-corner-bracket::after {
|
|
content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
|
|
}
|
|
.ax-corner-bracket::before {
|
|
top: -1px; left: -1px;
|
|
border-top: 1px solid rgba(0,255,255,0.5);
|
|
border-left: 1px solid rgba(0,255,255,0.5);
|
|
}
|
|
.ax-corner-bracket::after {
|
|
bottom: -1px; right: -1px;
|
|
border-bottom: 1px solid rgba(0,255,255,0.5);
|
|
border-right: 1px solid rgba(0,255,255,0.5);
|
|
}
|
|
|
|
.ax-card-sweep { position: relative; overflow: hidden; }
|
|
.ax-card-sweep::after {
|
|
content: ""; position: absolute; top: 0; left: -100%;
|
|
width: 50%; height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(0,255,255,0.04), transparent);
|
|
animation: ax-sweep 6s infinite; pointer-events: none;
|
|
}
|
|
|
|
.ax-clip {
|
|
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
|
|
}
|
|
|
|
.ax-vignette::after {
|
|
content: ""; position: fixed; inset: 0;
|
|
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
|
|
pointer-events: none; z-index: 9989;
|
|
}
|
|
|
|
/* ── Arm wallpaper patterns ── */
|
|
.wallpaper-labs {
|
|
background-image: radial-gradient(circle, rgba(251,191,36,0.08) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-gameforge {
|
|
background-image:
|
|
linear-gradient(45deg, rgba(34,197,94,0.06) 25%, transparent 25%, transparent 75%, rgba(34,197,94,0.06) 75%),
|
|
linear-gradient(45deg, rgba(34,197,94,0.06) 25%, transparent 25%, transparent 75%, rgba(34,197,94,0.06) 75%);
|
|
background-size: 40px 40px;
|
|
background-position: 0 0, 20px 20px;
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-corp {
|
|
background-image:
|
|
linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px),
|
|
linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-foundation {
|
|
background-image: repeating-linear-gradient(0deg, rgba(239,68,68,0.04) 0px, rgba(239,68,68,0.04) 1px, transparent 1px, transparent 2px);
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-devlink {
|
|
background-image:
|
|
linear-gradient(0deg, transparent 24%, rgba(6,182,212,0.08) 25%, rgba(6,182,212,0.08) 26%, transparent 27%, transparent 74%, rgba(6,182,212,0.08) 75%, rgba(6,182,212,0.08) 76%, transparent 77%),
|
|
linear-gradient(90deg, transparent 24%, rgba(6,182,212,0.08) 25%, rgba(6,182,212,0.08) 26%, transparent 27%, transparent 74%, rgba(6,182,212,0.08) 75%, rgba(6,182,212,0.08) 76%, transparent 77%);
|
|
background-size: 50px 50px;
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-staff {
|
|
background-image: radial-gradient(circle, rgba(168,85,247,0.08) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-nexus {
|
|
background-image:
|
|
linear-gradient(45deg, rgba(236,72,153,0.06) 25%, transparent 25%, transparent 75%, rgba(236,72,153,0.06) 75%),
|
|
linear-gradient(45deg, rgba(236,72,153,0.06) 25%, transparent 25%, transparent 75%, rgba(236,72,153,0.06) 75%);
|
|
background-size: 40px 40px;
|
|
background-position: 0 0, 20px 20px;
|
|
background-attachment: fixed;
|
|
}
|
|
.wallpaper-default {
|
|
background-image: linear-gradient(135deg, rgba(0,255,255,0.03) 0%, rgba(0,255,255,0.01) 100%);
|
|
}
|
|
|
|
/* ── Font aliases (arm theming) ── */
|
|
.font-labs { font-family: "VT323", "Courier New", monospace; letter-spacing: 0.05em; }
|
|
.font-gameforge { font-family: "Press Start 2P", "Arial Black", sans-serif; letter-spacing: 0.1em; font-size: 0.875em; }
|
|
.font-corp { font-family: "Electrolize", "Source Code Pro", monospace; font-weight: 600; }
|
|
.font-foundation { font-family: "Merriweather", "Georgia", serif; font-weight: 700; letter-spacing: -0.02em; }
|
|
.font-devlink { font-family: "Source Code Pro", "Electrolize", monospace; font-weight: 400; letter-spacing: 0.02em; }
|
|
.font-staff { font-family: "Electrolize", "Source Code Pro", monospace; font-weight: 600; }
|
|
.font-nexus { font-family: "Electrolize", "Source Code Pro", monospace; font-weight: 600; }
|
|
.font-default { font-family: "Electrolize", "Source Code Pro", monospace; }
|
|
|
|
/* ── Text gradients ── */
|
|
.text-gradient {
|
|
@apply bg-gradient-to-r from-aethex-300 via-aethex-500 to-neon-purple bg-clip-text text-transparent;
|
|
}
|
|
.text-gradient-purple {
|
|
@apply bg-gradient-to-r from-neon-purple via-aethex-500 to-aethex-300 bg-clip-text text-transparent;
|
|
}
|
|
.bg-aethex-gradient {
|
|
@apply bg-gradient-to-br from-aethex-900 via-background to-aethex-800;
|
|
}
|
|
|
|
/* ── Interaction ── */
|
|
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
|
.hover-lift:hover { transform: translateY(-4px); }
|
|
.hover-glow { transition: all 0.3s ease; }
|
|
.hover-glow:hover { filter: brightness(1.1) drop-shadow(0 0 8px rgba(0,255,255,0.4)); }
|
|
.interactive-scale { transition: transform 0.2s ease; }
|
|
.interactive-scale:hover { transform: scale(1.03); }
|
|
.interactive-scale:active { transform: scale(0.98); }
|
|
|
|
/* ── Spacing helpers ── */
|
|
.section-cozy { padding-block: var(--space-section-y); }
|
|
.gap-cozy { gap: var(--space-5); }
|
|
.pad-cozy { padding: var(--space-5); }
|
|
|
|
/* ── Animations ── */
|
|
.animate-fade-in { animation: fade-in 0.6s ease-out; }
|
|
.animate-slide-up { animation: slide-up 0.6s ease-out; }
|
|
.animate-slide-down { animation: slide-down 0.6s ease-out; }
|
|
.animate-slide-left { animation: slide-left 0.6s ease-out; }
|
|
.animate-slide-right { animation: slide-right 0.6s ease-out; }
|
|
.animate-scale-in { animation: scale-in 0.4s ease-out; }
|
|
.animate-typing {
|
|
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
|
|
overflow: hidden;
|
|
border-right: 3px solid;
|
|
white-space: nowrap;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, transparent, rgba(0,255,255,0.06), transparent);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
}
|
|
}
|
|
|
|
/* ── Keyframes ── */
|
|
@keyframes ax-sweep { 0%{left:-100%} 100%{left:200%} }
|
|
@keyframes ax-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
|
|
@keyframes fade-in { from{opacity:0} to{opacity:1} }
|
|
@keyframes slide-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
|
|
@keyframes slide-down { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
|
|
@keyframes slide-left { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
|
|
@keyframes slide-right { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
|
|
@keyframes scale-in { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
|
|
@keyframes typing { from{width:0} to{width:100%} }
|
|
@keyframes blink-caret { from,to{border-color:transparent} 50%{border-color:currentColor} }
|
|
@keyframes skeleton-loading { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|