/* =========================== THEME VARIABLES Toggle via: or =========================== */ :root, [data-theme="dark"] { /* base */ --secondary-color: #0D0C0C; /* page background */ --primary-color: #FEFFFE; /* headings / high-emphasis text */ --primary-text: #DADBDA; --border-color: #4D4C4C; --border-button: #6E6E6E; --available: #2fd6a0; /* body copy grays (from lightest to darkest use) */ --text-muted-1: #b8b8b8; /* hero-description, work-desc, collab-description */ --text-muted-2: #8d8d8d; /* hero-label, collab-label */ --text-muted-3: #6a6a6a; /* index numbers, footer text */ --text-muted-4: #7d7d7d; /* collab-role */ --text-muted-5: #b0b0b0; /* pillar-text */ --text-muted-6: #d4d4d4; /* work-desc alt */ --text-muted-7: #e0e0e0; /* work-tags text */ --text-muted-8: #9a9a9a; /* closing-link */ --text-link-hover: #cfe0ff; /* closing-email hover */ /* accents */ --accent-blue: #8d97ff; /* philosophy em / closing em */ --accent-indigo: #5964ff; /* sidebar accent / collab dot */ --accent-blue-2: #5757ff; /* work-panel-axora orb-1 */ --accent-indigo-2: #ffffff; --accent-insight: #2fd6a0; /* work-panel-axora orb-2 */ --accent-teal: #3d3dff; /* work-panel-shadow orb-3 */ --accent-teal-2: #ffffff; /* work-panel-shadow orb-4 */ /* status badge (availability = busy/red in dark theme default) */ --status-text: #ff8080; --status-dot: #ff3b3b; --status-border: rgba(255, 82, 82, 0.35); --status-border-hover: rgba(255, 82, 82, 0.55); --status-bg: rgba(255, 60, 60, 0.08); --status-bg-hover: rgba(255, 60, 60, 0.13); --status-dot-ring: rgba(255, 59, 59, 0.65); --status-dot-glow: rgba(255, 59, 59, 0.75); /* surfaces */ --panel-visual-bg: #0a0a0a; /* work-visual background */ /* line / border opacities (white-based in dark theme) */ --line-color-005: rgba(255, 255, 255, 0.04); --line-color-007: rgba(255, 255, 255, 0.05); --line-color-01: rgba(255, 255, 255, 0.07); --line-color-015: rgba(255, 255, 255, 0.08); --line-color-02: rgba(255, 255, 255, 0.1); --line-color-025: rgba(255, 255, 255, 0.15); --line-color-03: rgba(255, 255, 255, 0.16); --line-color-035: rgba(255, 255, 255, 0.18); --line-color-04: rgba(255, 255, 255, 0.2); --line-color-045: rgba(255, 255, 255, 0.25); --line-color-05: rgba(255, 255, 255, 0.28); --line-color-055: rgba(255, 255, 255, 0.3); --line-color-06: rgba(255, 255, 255, 0.35); --line-color-07: rgba(255, 255, 255, 0.4); --hover-overlay: rgba(255, 255, 255, 0.07); --hover-overlay-strong: rgba(255, 255, 255, 0.07); /* gradients */ --grid-glow: rgba(255, 255, 255, 0.05); --scrim-strong: rgba(0, 0, 0, 0.65); --scrim-transparent: transparent; /* misc borders */ --border-faint: rgba(255, 255, 255, 0.1); /* navbar */ --navbar-bg: rgba(13, 12, 12, 0.72); /* sidebar links */ --sidebar-w: 220px; --sidebar-w-collapsed: 68px; --sidebar-accent: #5964ff; --sidebar-link-color: #a0a0a0; --sidebar-active-color: #cfe0ff; --sidebar-active-bg: rgba(59, 130, 246, 0.16); --sidebar-hover-white: #ffffff; /* =========================== CASE FILE PROJECT PALETTES =========================== */ /* --- Axora --- */ --ax-bg: #0a0e14; --ax-panel: #10151d; --ax-panel-2: #141a23; --ax-blue: #7aa2ff; --ax-indigo: #6c7bff; --ax-cream: #e7ecf5; --ax-muted: #7c8494; --ax-danger: #ff8b7a; --ax-line: rgba(122, 162, 255, 0.14); /* --- Curvya --- */ --cv-bg: #0f0b0c; --cv-panel: #171113; --cv-panel-2: #1c1517; --cv-rose: #e6a8b4; --cv-rose-deep: #c97f91; --cv-gold: #c9a05a; --cv-cream: #f3e7e1; --cv-muted: #a6928e; --cv-line: rgba(230, 168, 180, 0.16); /* --- Insight --- */ --in-bg: #0d1210; --in-panel: #141b17; --in-panel-2: #182019; --in-green: #2fd6a0; --in-green-deep: #1fa37a; --in-paper: #f3f1e9; --in-ink: #1b1f1a; --in-cream: #eaf2ec; --in-muted: #7c9088; --in-line: rgba(47, 214, 160, 0.14); /* --- Neurix (deliberately monochrome) --- --nx-bg: #0e0e0f; --nx-panel: #161616; --nx-panel-2: #1c1c1c; --nx-chalk: #f2f2f0; --nx-ink: #d8d8d8; --nx-muted: #8a8a8a; --nx-line: rgba(255, 255, 255, 0.1); /* --- Shadow --- --sh-bg: #0b0d12; --sh-panel: #12151c; --sh-panel-2: #161a22; --sh-indigo: #5964ff; --sh-indigo-deep: #4650cc; --sh-cream: #e8eaf2; --sh-muted: #7c8695; --sh-line: rgba(89, 100, 255, 0.14); */ } [data-theme="light"] { /* base */ --secondary-color: #FFFFFF; --primary-color: #0D0C0C; --primary-text: #2A2A2A; --border-color: #D0D0D0; --border-button: #B5B5B5; --available: #1fae8a; /* body copy grays */ --text-muted-1: #4a4a4a; --text-muted-2: #6b6b6b; --text-muted-3: #8a8a8a; --text-muted-4: #5f5f5f; --text-muted-5: #565656; --text-muted-6: #3c3c3c; --text-muted-7: #333333; --text-muted-8: #6f6f6f; --text-link-hover: #2a4fbf; /* accents */ --accent-blue: #4453d6; --accent-indigo: #4453d6; --accent-blue-2: #ccccff; /* work-panel-axora orb-1 */ --accent-indigo-2: #ffffff; /* work-panel-axora orb-2 */ --accent-insight: #2fd6a0; --accent-teal: #0000ff; /* work-panel-shadow orb-3 */ --accent-teal-2: #ffffff; /* work-panel-shadow orb-4 */ /* status badge */ --status-text: #c23030; --status-dot: #e03b3b; --status-border: rgba(200, 40, 40, 0.3); --status-border-hover: rgba(200, 40, 40, 0.5); --status-bg: rgba(200, 40, 40, 0.06); --status-bg-hover: rgba(200, 40, 40, 0.1); --status-dot-ring: rgba(200, 40, 40, 0.55); --status-dot-glow: rgba(200, 40, 40, 0.65); /* surfaces */ --panel-visual-bg: #f2f2f2; /* line / border opacities (black-based in light theme) */ --line-color-005: rgba(0, 0, 0, 0.04); --line-color-007: rgba(0, 0, 0, 0.05); --line-color-01: rgba(0, 0, 0, 0.06); --line-color-015: rgba(0, 0, 0, 0.08); --line-color-02: rgba(0, 0, 0, 0.1); --line-color-025: rgba(0, 0, 0, 0.14); --line-color-03: rgba(0, 0, 0, 0.16); --line-color-035: rgba(0, 0, 0, 0.18); --line-color-04: rgba(0, 0, 0, 0.2); --line-color-045: rgba(0, 0, 0, 0.22); --line-color-05: rgba(0, 0, 0, 0.24); --line-color-055: rgba(0, 0, 0, 0.26); --line-color-06: rgba(0, 0, 0, 0.3); --line-color-07: rgba(0, 0, 0, 0.35); --hover-overlay: rgba(0, 0, 0, 0.05); --hover-overlay-strong: rgba(0, 0, 0, 0.05); /* gradients */ --grid-glow: rgba(0, 0, 0, 0.04); --scrim-strong: rgba(255, 255, 255, 0.7); --scrim-transparent: transparent; /* misc borders */ --border-faint: rgba(0, 0, 0, 0.1); /* navbar */ --navbar-bg: rgba(255, 255, 255, 0.72); /* sidebar links */ --sidebar-accent: #4453d6; --sidebar-link-color: #7a7a7a; --sidebar-active-color: #2a4fbf; --sidebar-active-bg: rgba(68, 83, 214, 0.1); --sidebar-hover-white: #0D0C0C; /* =========================== CASE FILE PROJECT PALETTES (light equivalents — bg/panels lighten, the former "cream" text roles invert to dark ink, and saturated accents deepen slightly so they hold contrast on white) =========================== */ /* --- Axora --- */ --ax-bg: #f5f7fc; --ax-panel: #ffffff; --ax-panel-2: #eef1f8; --ax-blue: #3a5bd9; --ax-indigo: #4a55d6; --ax-cream: #171a22; --ax-muted: #6b7280; --ax-danger: #d94f3e; --ax-line: rgba(58, 91, 217, 0.14); /* --- Curvya --- */ --cv-bg: #fbf6f4; --cv-panel: #ffffff; --cv-panel-2: #f5ece9; --cv-rose: #c9758a; --cv-rose-deep: #b35f74; --cv-gold: #a67c3d; --cv-cream: #241a1a; --cv-muted: #7d6d68; --cv-line: rgba(201, 117, 138, 0.16); /* --- Insight --- */ --in-bg: #f4faf7; --in-panel: #ffffff; --in-panel-2: #eaf3ee; --in-green: #1a9d76; --in-green-deep: #147d5e; --in-paper: #f3f1e9; --in-ink: #1b1f1a; --in-cream: #16211a; --in-muted: #5c7268; --in-line: rgba(26, 157, 118, 0.14); /* --- Neurix (deliberately monochrome) --- --nx-bg: #f7f7f6; --nx-panel: #ffffff; --nx-panel-2: #efefee; --nx-chalk: #171717; --nx-ink: #333333; --nx-muted: #6e6e6e; --nx-line: rgba(0, 0, 0, 0.1); /* --- Shadow --- --sh-bg: #f5f6fb; --sh-panel: #ffffff; --sh-panel-2: #eceefa; --sh-indigo: #4650cc; --sh-indigo-deep: #3a42a8; --sh-cream: #171a24; --sh-muted: #6b7280; --sh-line: rgba(70, 80, 204, 0.14); */ } .fonts { font-family: "Roobert Medium"; font-family: "Playfair Display", serif; font-family: "PP Neue Montreal", sans-serif; font-family: "Inter", sans-serif; font-family: "JetBrains Mono", monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--secondary-color); } :root { --sidebar-w: 220px; --sidebar-w-collapsed: 68px; --navbar-h: 56px; --transition-scale: 1; /* 1 = fast, ~2.2 = slow, 0 = none */ } @media (max-width: 1024px) { :root { --navbar-h: 54px; } } :root { --transition-scale: 0.5; /* default, JS overwrites this on load */ --bg-transition-duration: 400ms; /* base duration for bg fade */ } html, body, nav { transition: all calc(var(--bg-transition-duration) * var(--transition-scale)) !important; } aside { transition: background-color calc(var(--bg-transition-duration) * var(--transition-scale)), color calc(var(--bg-transition-duration) * var(--transition-scale)), transform calc(.35s * var(--transition-scale)) cubic-bezier(.19, 1, .22, 1), width calc(.7s * var(--transition-scale)) cubic-bezier(.19, 1, .22, 1) !important; } /* =========================== STAGGERED REVEAL ANIMATION (with blur) Usage: add style="--i:1" (2, 3, 4...) to any element =========================== */ [style*="--i"] { opacity: 0; transform: translateY(14px); filter: blur(8px); animation: staggerRise calc(.7s * var(--transition-scale, 1)) cubic-bezier(.19, 1, .22, 1) forwards; animation-delay: calc(var(--i, 0) * 0.12s * var(--transition-scale, 1)); } @keyframes staggerRise { to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* =========================== SCROLL-TRIGGERED FADE Usage: add style="--fade:1" (2, 3, 4...) to any element JS adds .in-view when the element enters the viewport =========================== */ [style*="--fade"] { opacity: 0; transform: translateY(24px); filter: blur(8px); transition: opacity calc(.8s * var(--transition-scale, 1)) cubic-bezier(.19, 1, .22, 1), transform calc(.8s * var(--transition-scale, 1)) cubic-bezier(.19, 1, .22, 1), filter calc(.8s * var(--transition-scale, 1)) cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--fade, 0) * 0.12s * var(--transition-scale, 1)); } [style*="--fade"].in-view { opacity: 1; transform: translateY(0); filter: blur(0); }