/* === Font Faces (bundled locally — no CDN) === */ @font-face { font-family: 'Bricolage Grotesque'; src: url('assets/fonts/BricolageGrotesque-Variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('assets/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* === Design Tokens (varunnidhi.com design language) === :root holds the DARK theme (default). [data-theme="light"] overrides every themed value. Components reference tokens only — never raw hex. The active theme is set on (Phase 2 wires the toggle). */ :root { color-scheme: dark; /* Surfaces (darkest → lightest) */ --canvas: #0a0b0d; --surface: #131419; --surface-2: #1b1c22; /* Lines / borders */ --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); /* Ink (text, three weights of presence) */ --ink: #f4f4f5; --ink-muted: #9b9da6; --ink-faint: #61636c; /* Accent (the one spark) */ --accent: #ff5d2e; --accent-soft: #ff8b66; /* Atmosphere */ --grid-line: rgba(255, 255, 255, 0.035); --grain-opacity: 0.35; --grain-blend: overlay; /* Utility surfaces (themed) */ --hover-bg: rgba(255, 255, 255, 0.055); --shadow-color: rgba(0, 0, 0, 0.45); --scrollbar-thumb: #2c2d34; --scrollbar-thumb-hover: #3c3d45; /* Derived from accent (auto-theme via --accent) */ --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 30%, transparent); /* Status hues (constant — read acceptably in both themes) */ --ok: #1f9d57; --warn: #c98a1e; --danger: #ef4444; /* On dark media / gradients (constant — hero art & lock glass) */ --on-media: #ffffff; --media-shadow: rgba(0, 0, 0, 0.25); --lock-base: #000000; --lock-scrim: rgba(0, 0, 0, 0.55); --glass-1: rgba(255, 255, 255, 0.12); --glass-2: rgba(255, 255, 255, 0.15); --glass-3: rgba(255, 255, 255, 0.25); --glass-4: rgba(255, 255, 255, 0.35); --glass-border: rgba(255, 255, 255, 0.18); --on-dark-dim: rgba(255, 255, 255, 0.7); --on-dark-faint: rgba(255, 255, 255, 0.6); /* Type families */ --font-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, sans-serif; --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* Motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.2s; --dur-mid: 0.3s; --dur-reveal: 0.8s; /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ---- Legacy semantic aliases → new tokens (migration bridge) ---- These let the existing component rules theme correctly with zero churn; each resolves through the active theme's tokens. Phases 2–4 progressively replace call-sites with the canonical tokens above. */ --color-primary: var(--accent); --color-primary-hover: var(--accent-soft); --color-primary-light: var(--accent-wash); --color-primary-subtle: var(--accent); --color-secondary: var(--ink-muted); --color-secondary-light: color-mix(in srgb, var(--ink-muted) 16%, transparent); --color-accent: var(--accent); --color-accent-light: var(--accent-wash); --color-bg-page: var(--canvas); --color-bg-surface: var(--surface); --color-bg-sidebar: var(--surface-2); --color-text-primary: var(--ink); --color-text-secondary: var(--ink-muted); --color-text-tertiary: var(--ink-faint); --color-border: var(--line); } [data-theme="light"] { color-scheme: light; --canvas: #f4f3ef; /* warm cream, not white */ --surface: #ffffff; --surface-2: #eceae3; --line: rgba(20, 21, 24, 0.1); --line-strong: rgba(20, 21, 24, 0.2); --ink: #16171a; --ink-muted: #565860; --ink-faint: #8b8d95; --accent: #e8460f; /* deeper for AA contrast on cream */ --accent-soft: #c93c0d; --grid-line: rgba(20, 21, 24, 0.055); --grain-opacity: 0.22; --grain-blend: multiply; --hover-bg: rgba(20, 21, 24, 0.05); --shadow-color: rgba(20, 21, 24, 0.1); --scrollbar-thumb: #cdccc4; --scrollbar-thumb-hover: #b6b4aa; } /* === Reset & Base === */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--canvas); scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--ink); background: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--canvas); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* === Atmosphere — fixed decorative layers (behind all content) === */ .bg-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 74px 74px; -webkit-mask-image: radial-gradient(ellipse 78% 56% at 50% -6%, #000 8%, transparent 80%); mask-image: radial-gradient(ellipse 78% 56% at 50% -6%, #000 8%, transparent 80%); } .bg-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* === Motion primitives === */ @keyframes fade-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .rise { opacity: 0; animation: fade-rise 0.9s var(--ease-out-expo) both; } /* Scroll-reveal for grid/path cards — JS adds .reveal-init then .is-visible as each card enters the viewport (IntersectionObserver, threshold 0.12), staggered via inline transition-delay. If JS never runs, cards stay visible. */ .reveal-init { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); will-change: opacity, transform; } .reveal-init.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rise { animation: none; opacity: 1; } .reveal-init { opacity: 1; transform: none; transition: none; } } /* === Scrollbar === */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--canvas); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid var(--canvas); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* === Header === */ .app-header { height: 56px; position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 20px; padding: 0 24px; background: color-mix(in srgb, var(--canvas) 85%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } /* Brand lockup — accent logo tile + wordmark */ .brand-lockup { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: inherit; } .logo-tile { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--canvas); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; transition: transform var(--dur-mid) var(--ease-out-expo); } .brand-lockup:hover .logo-tile { transform: rotate(-10deg); } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; } .brand-sub { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); white-space: nowrap; } .header-search { position: relative; flex: 1; max-width: 400px; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; } /* Search adopts the spec .field: recessed on --canvas, accent focus border */ .search-input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; font-family: inherit; background: var(--canvas); color: var(--ink); outline: none; transition: border-color var(--dur-fast); } .search-input:focus { border-color: var(--accent); } .search-input::placeholder { color: var(--ink-faint); } .header-actions { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; } .resource-count { font-size: 12px; font-weight: 500; color: var(--ink-faint); white-space: nowrap; } /* Icon button — round hairline chrome control (theme toggle, lock) */ .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); } .icon-btn:hover { border-color: var(--line-strong); color: var(--ink); } .theme-icon-moon { display: none; } [data-theme="light"] .theme-icon-sun { display: none; } [data-theme="light"] .theme-icon-moon { display: inline; } /* === Layout === */ .app-body { display: flex; min-height: calc(100vh - 56px); } .app-sidebar { width: 260px; flex-shrink: 0; background: var(--color-bg-sidebar); border-right: 1px solid var(--color-border); padding: 20px 0; overflow-y: auto; position: sticky; top: 56px; height: calc(100vh - 56px); } .app-main { flex: 1; min-width: 0; padding: 24px; } /* === Portfolio footer (§4.8) — the visible thread to varunnidhi.com === */ .app-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding: 24px 4px 8px; border-top: 1px solid var(--line); } .footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .footer-logo-tile { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--canvas); font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; transition: transform var(--dur-mid) var(--ease-out-expo); } .footer-brand:hover .footer-logo-tile { transform: rotate(-10deg); } .footer-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .footer-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); } .footer-brand-sub { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); } .footer-right { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .footer-social { display: flex; align-items: center; gap: 8px; } .footer-social-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo); } .footer-social-link svg { display: block; transition: color var(--dur-fast) var(--ease-out-expo); } .footer-social-link:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); } .footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .footer-link { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-expo); } .footer-link:hover { color: var(--accent); } /* === Sidebar === */ .sidebar-section { margin-bottom: 28px; } .sidebar-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); padding: 0 22px; margin-bottom: 10px; } .type-filters { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; } /* Sidebar entries — mono uppercase micro-labels; accent marker when active */ .type-btn, .category-item { display: flex; align-items: center; gap: 8px; background: none; border: none; border-left: 2px solid transparent; padding: 7px 12px 7px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer; text-align: left; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); } .category-item { justify-content: space-between; } .type-btn:hover, .category-item:hover { background: var(--hover-bg); color: var(--ink); } .type-btn--active, .category-item--active { color: var(--accent); border-left-color: var(--accent); } .category-list { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; } .category-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .category-count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); min-width: 18px; text-align: right; flex-shrink: 0; } .category-item--active .category-count { color: var(--accent); } /* === Grid === */ .grid-view { /* container for grid + results bar */ } .results-bar { margin-bottom: 16px; font-size: 13px; color: var(--color-text-secondary); min-height: 20px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } /* === Card (spec .card-lg: --surface, hairline border, media well, no shadow) === */ .card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out-expo); } .card:hover { border-color: var(--line-strong); } .card:hover .card-title { color: var(--accent); } /* Media well — 16:10, tool logo centered on a subtle category-gradient tint */ .card-thumbnail { aspect-ratio: 16 / 10; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); } .card-thumbnail[data-category] { background: radial-gradient(ellipse at 68% 58%, color-mix(in srgb, var(--grad-2) 24%, transparent) 0%, transparent 62%), linear-gradient(140deg, color-mix(in srgb, var(--grad-1) 18%, var(--surface-2)) 0%, var(--surface-2) 78%); } .card-logo { max-width: 60px; max-height: 60px; object-fit: contain; filter: drop-shadow(0 2px 8px var(--media-shadow)); } .card-thumbnail-icon { display: flex; align-items: center; justify-content: center; opacity: 0.55; position: relative; z-index: 2; } .card-thumbnail-icon svg { width: 48px; height: 48px; } /* Card Body — mono eyebrow, display name, muted description, mono meta */ .card-body { padding: 16px; } .card-eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 4px; white-space: nowrap; } .card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); transition: color var(--dur-fast); } .card-description { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); } .card-subcategory { font-size: 11px; color: var(--ink-faint); } /* === Category Gradient Custom Properties === */ .card-thumbnail[data-category="3d-animation"], .detail-hero[data-category="3d-animation"] { --grad-1: #4A5EC8; --grad-2: #5A3580; } .card-thumbnail[data-category="game-development"], .detail-hero[data-category="game-development"] { --grad-1: #C86AD8; --grad-2: #CC3A50; } .card-thumbnail[data-category="digital-art"], .detail-hero[data-category="digital-art"] { --grad-1: #2D7BCC; --grad-2: #0AA8B5; } .card-thumbnail[data-category="video-editing"], .detail-hero[data-category="video-editing"] { --grad-1: #1E9E55; --grad-2: #1EB89E; } .card-thumbnail[data-category="audio-production"], .detail-hero[data-category="audio-production"] { --grad-1: #D94A78; --grad-2: #C8A820; } .card-thumbnail[data-category="local-ai"], .detail-hero[data-category="local-ai"] { --grad-1: #7B5EA7; --grad-2: #C06AAE; } .card-thumbnail[data-category="3d-assets"], .detail-hero[data-category="3d-assets"] { --grad-1: #CC9B3A; --grad-2: #3A9EA8; } .card-thumbnail[data-category="programming"], .detail-hero[data-category="programming"] { --grad-1: #3AA0C8; --grad-2: #4472CC; } .card-thumbnail[data-category="productivity"], .detail-hero[data-category="productivity"] { --grad-1: #2EA87A; --grad-2: #A09828; } .card-thumbnail[data-category="web-development"], .detail-hero[data-category="web-development"] { --grad-1: #CC8A40; --grad-2: #A850CC; } .card-thumbnail[data-category="creative-design"], .detail-hero[data-category="creative-design"] { --grad-1: #9A6AD4; --grad-2: #4A90D4; } .card-thumbnail[data-category="learning"], .detail-hero[data-category="learning"] { --grad-1: #6A7FA0; --grad-2: #4A6888; } .card-thumbnail[data-category="asset-libraries"], .detail-hero[data-category="asset-libraries"] { --grad-1: #CC8A50; --grad-2: #C86040; } .card-thumbnail[data-category="collaboration"], .detail-hero[data-category="collaboration"] { --grad-1: #5A7FC8; --grad-2: #3A8AB8; } .card-thumbnail[data-category="publishing"], .detail-hero[data-category="publishing"] { --grad-1: #6AB830; --grad-2: #2EA86A; } /* === Shared Textured Gradient Structure (detail heroes + path covers only) === */ .detail-hero[data-category], .path-card-header, .path-detail-hero { background: radial-gradient(ellipse at 70% 60%, var(--grad-2) 0%, transparent 55%), linear-gradient(135deg, #111118 0%, #111118 15%, var(--grad-1) 55%, var(--grad-2) 100%); } /* === Grain Noise Overlay === */ .path-card-header::after, .detail-hero::after, .path-detail-hero::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.15; mix-blend-mode: overlay; pointer-events: none; z-index: 1; } /* === Detail View === */ .detail-view { /* rendered dynamically */ } .back-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); padding: 8px 16px; border-radius: var(--r-md); cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-muted); margin-bottom: 24px; transition: border-color var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo); } .back-btn:hover { border-color: var(--line-strong); color: var(--ink); } .detail-hero { height: 200px; border-radius: var(--r-lg); overflow: hidden; position: relative; display: flex; align-items: center; padding: 0 40px; margin-bottom: 36px; } .detail-hero-content { display: flex; align-items: center; gap: 24px; position: relative; z-index: 2; } .detail-logo-box { width: 84px; height: 84px; border-radius: var(--r-lg); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; border: 1px solid var(--glass-border); background: radial-gradient(ellipse at 68% 58%, color-mix(in srgb, var(--grad-2) 30%, transparent) 0%, transparent 62%), linear-gradient(140deg, color-mix(in srgb, var(--grad-1) 24%, var(--surface-2)) 0%, var(--surface-2) 80%); } .detail-logo-box img { max-width: 52px; max-height: 52px; object-fit: contain; } .detail-logo-box svg { width: 40px; height: 40px; opacity: 0.6; } .detail-hero-text { color: var(--on-media); } .detail-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; text-shadow: 0 2px 8px var(--media-shadow); } .detail-breadcrumb { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--on-dark-dim); } .detail-content { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; } /* Section anatomy: eyebrow (mono index + rule) → labeled blocks */ .detail-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-faint); margin: 0 0 24px; } .detail-eyebrow .idx { color: var(--accent); } .detail-eyebrow .rule { height: 1px; width: 40px; background: var(--line-strong); } .detail-block { margin-bottom: 28px; } .detail-block:last-child { margin-bottom: 0; } .detail-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin: 0 0 8px; } .detail-body { font-size: 14px; line-height: 1.75; color: var(--ink-muted); margin: 0; } .detail-section-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 16px; color: var(--ink); } .detail-info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; margin-bottom: 20px; } .detail-info-card:last-child { margin-bottom: 0; } /* Stat row — mono accent keys over ink values */ .detail-stats { display: flex; flex-direction: column; gap: 18px; } .detail-stat-key { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .detail-stat-val { margin-top: 6px; font-size: 13.5px; color: var(--ink); line-height: 1.5; } .detail-stat-val a { color: var(--ink); text-decoration: none; word-break: break-all; border-bottom: 1px solid var(--line-strong); transition: color var(--dur-fast), border-color var(--dur-fast); } .detail-stat-val a:hover { color: var(--accent); border-color: var(--accent); } .detail-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; text-decoration: none; border: 1px solid var(--line); color: var(--ink-muted); font-family: inherit; transition: border-color var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo), background var(--dur-fast) var(--ease-out-expo); } .action-btn:hover { border-color: var(--line-strong); color: var(--ink); } .action-btn--primary { background: var(--accent); color: var(--on-media); border-color: var(--accent); } .action-btn--primary:hover { background: var(--accent-soft); color: var(--on-media); border-color: var(--accent-soft); } /* === Related Resources === */ .detail-related { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; } .related-card .card-logo { max-width: 44px; max-height: 44px; } .related-card .card-thumbnail-icon svg { width: 36px; height: 36px; } /* === Empty State === */ .empty-state { text-align: center; padding: 80px 20px; } .empty-state-icon { font-size: 48px; margin-bottom: 16px; } .empty-state-title { font-size: 18px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; } .empty-state-text { font-size: 14px; color: var(--color-text-tertiary); } /* === View Transitions === */ .grid-view, .detail-view { animation: fadeIn 0.15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* === Lock Screen === */ .lock-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--lock-base); overflow: hidden; animation: fadeIn 0.3s ease; } .lock-screen-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .lock-screen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--lock-scrim); } .lock-screen--exit { animation: lockExit 0.3s ease forwards; } @keyframes lockExit { to { opacity: 0; transform: scale(1.02); } } .lock-screen-content { position: relative; z-index: 1; background: var(--glass-1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--r-xl); padding: 48px 40px 40px; display: flex; flex-direction: column; align-items: center; min-width: 320px; border: 1px solid var(--glass-border); box-shadow: 0 8px 32px var(--media-shadow); } .lock-screen-logo { margin-bottom: 12px; } .lock-screen-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--on-media); margin-bottom: 4px; } .lock-screen-prompt { font-size: 14px; color: var(--on-dark-dim); margin-bottom: 24px; } .lock-screen-hint { margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-dim); opacity: 0.85; } .lock-screen-hint strong { color: var(--on-media); font-weight: 600; } .lock-dots { display: flex; gap: 16px; margin-bottom: 8px; } .lock-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--on-dark-faint); background: transparent; transition: background 0.15s, border-color 0.15s; } .lock-dot--filled { background: var(--accent); border-color: var(--accent); } .lock-dots--shake { animation: shake 0.4s ease; } .lock-dots--shake .lock-dot { border-color: var(--accent); } .lock-dots--shake .lock-dot--filled { background: var(--accent); border-color: var(--accent); } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(6px); } } .lock-error { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); min-height: 20px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; } /* Wrong-PIN alert → spec accent-wash style (only when populated) */ .lock-error:not(:empty) { min-height: 0; padding: 8px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .lock-keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; } .keypad-btn { width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--glass-2); color: var(--on-media); font-size: 24px; font-family: var(--font-display); font-weight: 500; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); display: flex; align-items: center; justify-content: center; } .keypad-btn:hover { background: var(--glass-3); } .keypad-btn:active { background: color-mix(in srgb, var(--accent) 32%, var(--glass-2)); color: var(--on-media); } .keypad-btn--delete { font-size: 20px; } .keypad-spacer { width: 72px; height: 72px; } /* === Explore Nav (header navlinks) === */ .explore-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .explore-nav-btn { background: none; border: none; padding: 0.5rem 0.75rem; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); cursor: pointer; white-space: nowrap; transition: color var(--dur-fast); } .explore-nav-btn:hover { color: var(--ink); } .explore-nav-btn--active { color: var(--accent); } /* === Paths View === */ .paths-view { animation: fadeIn 0.15s ease; } .paths-header { margin-bottom: 24px; } .paths-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--color-text-primary); } .paths-subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0; } .paths-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } /* === Path Card === */ .path-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out-expo); } .path-card:hover { border-color: var(--line-strong); } .path-card:hover .path-card-title { color: var(--accent); } .path-card-header { height: 120px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .path-card-icon { opacity: 0.5; position: relative; z-index: 2; } .path-card-icon svg { width: 48px; height: 48px; } .path-card-body { padding: 16px; } .path-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .path-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); transition: color var(--dur-fast); } .path-card-description { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .path-card-footer { display: flex; align-items: center; justify-content: space-between; } .path-card-logos { display: flex; align-items: center; } .path-card-logo { width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-sidebar); border: 2px solid var(--color-bg-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-right: -8px; position: relative; } .path-card-logo img { max-width: 18px; max-height: 18px; object-fit: contain; } .path-card-steps { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); } /* === Difficulty Badges === */ .badge--path-beginner, .badge--path-intermediate, .badge--path-advanced { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .badge--path-beginner { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .badge--path-intermediate { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge--path-advanced { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } .badge--path-duration { background: var(--surface-2); color: var(--ink-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .badge--path-hero-meta { background: var(--glass-3); color: var(--on-media); } /* === Path Detail Hero === */ .path-detail-hero { border-radius: 12px; overflow: hidden; padding: 40px; margin-bottom: 32px; position: relative; } .path-detail-hero-content { position: relative; z-index: 2; color: var(--on-media); } .path-detail-icon { opacity: 0.7; margin-bottom: 16px; } .path-detail-icon svg { width: 48px; height: 48px; } .path-detail-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; text-shadow: 0 2px 8px var(--media-shadow); } .path-detail-description { font-size: 14px; line-height: 1.6; margin: 0 0 16px; opacity: 0.9; max-width: 640px; } .path-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; } /* === Path Detail Content === */ .path-detail-content { display: grid; grid-template-columns: 1fr 300px; gap: 32px; } .path-detail-main { } .path-detail-sidebar { } /* === Path Timeline === */ .path-timeline { margin-top: 16px; } .path-step { display: flex; gap: 16px; } .path-step-indicator { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .path-step-number { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--accent); letter-spacing: 0.02em; line-height: 1; padding-top: 3px; min-width: 26px; text-align: center; flex-shrink: 0; } .path-step-connector { width: 1px; flex: 1; background: var(--line); min-height: 24px; margin-top: 10px; } .path-step-content { flex: 1; padding-bottom: 28px; min-width: 0; } .path-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .path-step-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .path-step-header-text { flex: 1; min-width: 0; } .path-step-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0; color: var(--ink); } .path-step-tool { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); } .path-step-time { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); white-space: nowrap; flex-shrink: 0; } .path-step-description { font-size: 13.5px; color: var(--ink-muted); line-height: 1.65; margin: 0 0 10px; } .path-step-link { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--accent); text-decoration: none; transition: opacity var(--dur-fast); } .path-step-link:hover { opacity: 0.7; } /* === Path Detail Sidebar Tools === */ .path-tools-list { display: flex; flex-direction: column; gap: 4px; } .path-tool-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; text-decoration: none; color: inherit; transition: background 0.1s; } .path-tool-item:hover { background: var(--hover-bg); } .path-tool-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .path-tool-icon img { max-width: 28px; max-height: 28px; object-fit: contain; } .path-tool-name { font-size: 13px; font-weight: 500; color: var(--ink); } .path-tool-type { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); } /* === Path Mention Cards (on resource detail) === */ .path-mention-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .path-mention-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-out-expo); } .path-mention-card:hover { border-color: var(--line-strong); } .path-mention-gradient { width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0; } .path-mention-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; transition: color var(--dur-fast); } .path-mention-card:hover .path-mention-title { color: var(--accent); } .path-mention-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }