291 lines
8.9 KiB
CSS
291 lines
8.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap');
|
|
|
|
@layer base {
|
|
:root {
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
|
|
|
|
/* Fibe dark tokens */
|
|
--background: #08080a;
|
|
--foreground: #fafafa;
|
|
--card: #121214;
|
|
--card-foreground: #fafafa;
|
|
--muted: #1c1c1f;
|
|
--muted-foreground: #a1a1aa;
|
|
--accent: #1a1525;
|
|
--accent-foreground: #c4b5fd;
|
|
--border: rgba(139, 92, 246, 0.15);
|
|
--border-subtle: rgba(139, 92, 246, 0.08);
|
|
--primary: #a78bfa;
|
|
--primary-dark: #8b5cf6;
|
|
--primary-light: #c4b5fd;
|
|
--ring: #8b5cf6;
|
|
--radius: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--shadow-glass: 0 8px 32px 0 rgb(139 92 246 / 0.12);
|
|
--shadow-elevated: 0 8px 30px -4px rgb(0 0 0 / 0.5), 0 4px 10px -4px rgb(0 0 0 / 0.4);
|
|
--transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Semantic text scale — dark defaults */
|
|
--ft-primary: rgba(250,250,250,0.92);
|
|
--ft-muted: rgba(161,161,170,0.75);
|
|
--ft-subtle: rgba(161,161,170,0.48);
|
|
--ft-dimmed: rgba(161,161,170,0.32);
|
|
--ft-ghost: rgba(161,161,170,0.2);
|
|
--ft-white: rgba(255,255,255,0.9);
|
|
|
|
/* Section / surface */
|
|
--section-alt: rgba(139,92,246,0.025);
|
|
}
|
|
|
|
/* ─── LIGHT THEME ─── */
|
|
[data-theme="light"] {
|
|
--background: #f8f8f6;
|
|
--foreground: #18181b;
|
|
--card: #ffffff;
|
|
--card-foreground: #18181b;
|
|
--muted: #f1f0ee;
|
|
--muted-foreground: #71717a;
|
|
--accent: #f5f3ff;
|
|
--accent-foreground: #7c3aed;
|
|
--border: rgba(124, 58, 237, 0.18);
|
|
--border-subtle: rgba(124, 58, 237, 0.09);
|
|
--primary: #7c3aed;
|
|
--primary-dark: #6d28d9;
|
|
--primary-light: #8b5cf6;
|
|
--ring: #7c3aed;
|
|
--shadow-glass: 0 2px 24px 0 rgb(124 58 237 / 0.08);
|
|
--shadow-elevated: 0 2px 16px -2px rgb(0 0 0 / 0.1);
|
|
|
|
/* Text scale — light */
|
|
--ft-primary: rgba(24,24,27,0.92);
|
|
--ft-muted: rgba(39,39,42,0.68);
|
|
--ft-subtle: rgba(39,39,42,0.48);
|
|
--ft-dimmed: rgba(39,39,42,0.35);
|
|
--ft-ghost: rgba(39,39,42,0.2);
|
|
--ft-white: rgba(24,24,27,0.9);
|
|
|
|
--section-alt: rgba(124,58,237,0.03);
|
|
}
|
|
|
|
/* Phoenix logo animation */
|
|
@keyframes header-flame-out {
|
|
0% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: brightness(1); }
|
|
8% { opacity: 0.98; filter: brightness(1.12); }
|
|
28% { transform: translate(-50%,-50%) scale(0.85); opacity: 0.95; }
|
|
42% { transform: translate(-50%,-50%) scale(0.3); opacity: 0.25; filter: brightness(1.3); }
|
|
48% { transform: translate(-50%,-50%) scale(0.12); opacity: 0; }
|
|
52% { transform: translate(-50%,-50%) scale(0.08); opacity: 0; }
|
|
68% { transform: translate(-50%,-50%) scale(0.55); opacity: 0.65; filter: brightness(1.15); }
|
|
82% { transform: translate(-50%,-50%) scale(0.92); opacity: 0.95; }
|
|
100% { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: brightness(1); }
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes floatUp {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% { box-shadow: 0 0 20px rgba(167,139,250,0.2); }
|
|
50% { box-shadow: 0 0 50px rgba(167,139,250,0.4), 0 0 80px rgba(139,92,246,0.2); }
|
|
}
|
|
|
|
@keyframes ticker {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-33.3333%); }
|
|
}
|
|
|
|
.animate-flame-out { animation: header-flame-out 3.2s cubic-bezier(0.4,0,0.2,1) infinite; }
|
|
.animate-float-up { animation: floatUp 0.6s ease-out forwards; }
|
|
.animate-pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }
|
|
.animate-ticker { animation: ticker 50s linear infinite; }
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
scroll-behavior: smooth;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
min-height: 100vh;
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Display font for headings */
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
/* ─── ANIMATED GRADIENT BACKGROUND ─── */
|
|
.bg-fibe {
|
|
background: linear-gradient(135deg, #0b0916 0%, #0f0c29 25%, #1a1540 50%, #261f5a 75%, #1e1a42 100%);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 18s ease infinite;
|
|
}
|
|
|
|
[data-theme="light"] .bg-fibe {
|
|
background: linear-gradient(135deg, #ffffff 0%, #fdf9ff 25%, #f5efff 50%, #fdf9ff 75%, #ffffff 100%);
|
|
background-size: 400% 400%;
|
|
animation: gradientShift 18s ease infinite;
|
|
}
|
|
|
|
/* ─── GRID OVERLAY ─── */
|
|
.grid-overlay {
|
|
background-image:
|
|
linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px);
|
|
background-size: 52px 52px;
|
|
}
|
|
|
|
[data-theme="light"] .grid-overlay {
|
|
background-image:
|
|
linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px);
|
|
}
|
|
|
|
/* ─── GLASS CARDS ─── */
|
|
.glass {
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid var(--border);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
[data-theme="light"] .glass {
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(124,58,237,0.14);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 4px 20px rgba(124,58,237,0.06);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(26,21,37,0.7);
|
|
border: 1px solid rgba(167,139,250,0.18);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
box-shadow: var(--shadow-glass);
|
|
}
|
|
|
|
[data-theme="light"] .glass-strong {
|
|
background: rgba(255,255,255,0.9);
|
|
border: 1px solid rgba(124,58,237,0.18);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
box-shadow: 0 2px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(124,58,237,0.08);
|
|
}
|
|
|
|
/* ─── GLOW ORBS ─── */
|
|
.glow-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
filter: blur(1px);
|
|
}
|
|
|
|
[data-theme="light"] .glow-orb {
|
|
opacity: 0.3;
|
|
filter: blur(2px);
|
|
}
|
|
|
|
/* ─── GRADIENT TEXT ─── */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 40%, #818cf8 80%, #93c5fd 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
[data-theme="light"] .gradient-text {
|
|
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #4f46e5 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ─── TAGS / PILLS ─── */
|
|
.tag {
|
|
background: rgba(139,92,246,0.1);
|
|
border: 1px solid rgba(139,92,246,0.2);
|
|
color: #c4b5fd;
|
|
font-size: 0.7rem;
|
|
font-family: var(--font-sans);
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
padding: 0.2rem 0.6rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
[data-theme="light"] .tag {
|
|
background: rgba(124,58,237,0.07);
|
|
border-color: rgba(124,58,237,0.18);
|
|
color: #7c3aed;
|
|
}
|
|
|
|
/* ─── text-white override in light mode ─── */
|
|
[data-theme="light"] .text-white {
|
|
color: #18181b !important;
|
|
}
|
|
|
|
/* ─── Terminal — always dark regardless of theme ─── */
|
|
.terminal-mockup {
|
|
background: rgba(15,12,26,0.95);
|
|
}
|
|
[data-theme="light"] .terminal-mockup {
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(124,58,237,0.15) !important;
|
|
}
|
|
[data-theme="light"] .terminal-mockup * {
|
|
/* Terminal internals stay dark — do NOT override */
|
|
}
|
|
|
|
/* ─── NAV border ─── */
|
|
[data-theme="light"] nav {
|
|
background: rgba(248,248,246,0.85) !important;
|
|
border-bottom-color: rgba(124,58,237,0.12) !important;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
|
|
}
|
|
|
|
/* ─── Section border dividers ─── */
|
|
[data-theme="light"] [style*="rgba(139,92,246,0.08)"] {
|
|
/* handled via CSS variable approach */
|
|
}
|
|
|
|
/* ─── Comparison table ─── */
|
|
[data-theme="light"] .comparison-row:nth-child(even) {
|
|
background: rgba(124,58,237,0.02);
|
|
}
|
|
|
|
/* ─── Pulse glow — light adaptation ─── */
|
|
[data-theme="light"] .animate-pulse-glow {
|
|
animation: none;
|
|
box-shadow: 0 4px 32px rgba(124,58,237,0.12);
|
|
}
|
|
|
|
/* ─── Scrollbar ─── */
|
|
::-webkit-scrollbar { width: 5px; }
|
|
::-webkit-scrollbar-track { background: var(--background); }
|
|
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.4); }
|