/* ================================================================ SPLURJJ DESIGN SYSTEM v7.0 — OBSIDIAN EDITION Pure Black · Futuristic · Premium · Immersive "Turn inspiration into structure." ================================================================ */ /* Google Fonts loaded via tags in each HTML for S3/CDN compatibility */ /* ── RESET ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── TOKENS ─────────────────────────────────────────────────────── */ :root { /* ── Core Palette ── */ --black: #000000; --white: #ffffff; /* ── Grey Scale (pure) ── */ --g-50: #f8f8f8; --g-100: #ebebeb; --g-200: #d6d6d6; --g-300: #b0b0b0; --g-400: #808080; --g-500: #555555; --g-600: #333333; --g-700: #1e1e1e; --g-800: #121212; --g-900: #080808; /* ── Surface Stack ── */ --s-0: #000000; --s-1: #050505; --s-2: #0a0a0a; --s-3: #0f0f0f; --s-4: #141414; --s-5: #1a1a1a; --s-6: #202020; /* ── Accent — Crimson ── */ --red: #e8183a; --red-bright: #ff1f44; --red-soft: #ff6680; --red-dim: #6b0c1c; --red-glow: rgba(232, 24, 58, 0.22); --red-glow-sm: rgba(232, 24, 58, 0.10); /* ── Dashboard Neon Accents ── */ --neon-purple: #8b5cf6; --neon-sky: #38bdf8; --neon-green: #22c55e; --neon-amber: #fbbf24; --neon-pink: #f472b6; --neon-teal: #2dd4bf; --neon-orange: #fb923c; /* ── Border Alpha ── */ --b-1: rgba(255,255,255,0.04); --b-2: rgba(255,255,255,0.08); --b-3: rgba(255,255,255,0.14); --b-4: rgba(255,255,255,0.24); --b-5: rgba(255,255,255,0.40); /* ── Text ── */ --t-1: #ffffff; --t-2: #c0c0c0; --t-3: #808080; --t-4: #404040; /* ── Typography ── */ --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'DM Mono', 'Fira Code', monospace; /* ── Spacing ── */ --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;--sp-24: 24px; --sp-32: 32px; --sp-40: 40px;--sp-48: 48px; --sp-64: 64px; --sp-80: 80px;--sp-96: 96px; --sp-128: 128px; /* ── Layout ── */ --nav-h: 60px; --max-w: 1360px; --max-txt: 740px; --dash-sb: 224px; /* ── Radius ── */ --r-0: 0px; --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px; /* ── Motion ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-io: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 120ms; --t-mid: 280ms; --t-slow: 500ms; --t-xslow: 900ms; /* Legacy compat aliases */ --border: var(--b-2); --border-2: var(--b-3); --border-3: var(--b-4); --bg: var(--s-1); --bg-1: var(--s-2); --bg-2: var(--s-3); --bg-3: var(--s-4); --bg-4: var(--s-5); --card: var(--s-2); --card-hover: var(--s-3); --text-1: var(--t-1); --text-2: var(--t-2); --text-3: var(--t-3); --text-4: var(--t-4); --grey-400: var(--g-400); --grey-500: var(--g-500); --grey-600: var(--g-600); --grey-700: var(--g-700); --grey-800: var(--g-800); --grey-900: var(--g-900); --font-head: var(--font); --fast: var(--t-fast); --mid: var(--t-mid); --slow: var(--t-slow); --ease: var(--ease-out); } /* ── BASE ───────────────────────────────────────────────────────── */ body { font-family: var(--font); font-size: 16px; line-height: 1.6; background: var(--black); color: var(--white); overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: var(--font); cursor: pointer; border: none; background: none; } input, textarea, select { font-family: var(--font); } ul, ol { list-style: none; } ::selection { background: var(--white); color: var(--black); } /* ── LAYOUT ─────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; } .container--narrow{ max-width: 860px; margin: 0 auto; padding: 0 32px; } .container--wide { max-width: 1560px; margin: 0 auto; padding: 0 32px; } .container--full { width: 100%; padding: 0; } .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; } /* ── ───────────────────────────────────────────────────────────── NAV ──────────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 900; background: rgba(0,0,0,0.96); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-bottom: 1px solid var(--b-2); display: flex; align-items: center; overflow: visible; } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; margin: 0; padding: 0 20px; gap: 0; overflow: visible; } .nav__logo { font-size: 1rem; font-weight: 900; letter-spacing: -0.05em; color: #ffffff !important; text-transform: uppercase; flex: 0 0 auto; /* never shrink, never grow */ display: flex; align-items: baseline; gap: 1px; white-space: nowrap; text-decoration: none; visibility: visible !important; opacity: 1 !important; margin-right: 14px; } .nav__logo-dot { color: var(--red) !important; font-size: 1.3rem; line-height: 0; position: relative; top: 3px; } .nav__links { display: flex; align-items: center; gap: 0; list-style: none; flex: 1 1 auto; /* take up available middle space */ overflow: hidden; /* don't let it push siblings off */ min-width: 0; } .nav__links a { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-3); transition: color var(--t-fast) var(--ease-out); position: relative; white-space: nowrap; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--white); transition: width var(--t-mid) var(--ease-out); } .nav__links a:hover, .nav__links a.active { color: var(--white); } .nav__links a:hover::after, .nav__links a.active::after { width: 100%; } .nav__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; /* never shrink */ margin-left: 14px; } .nav__icon-btn { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--b-3); display: flex; align-items: center; justify-content: center; color: var(--t-3); font-size: 0.7rem; transition: all var(--t-fast) var(--ease-out); background: transparent; cursor: pointer; } .nav__icon-btn:hover { color: var(--white); border-color: var(--b-4); background: var(--b-1); } .nav__cta { height: 32px; padding: 0 16px; background: var(--white); color: var(--black); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--r-sm); display: flex; align-items: center; gap: 6px; transition: all var(--t-fast) var(--ease-out); cursor: pointer; border: none; } .nav__cta:hover { background: var(--g-100); } .nav__mobile-toggle { display:none; } /* ── NAV EXTENSIONS — avatar, dropdown, mobile, search ─────────── */ /* Scrolled state */ .nav--scrolled { border-bottom-color:rgba(255,255,255,.1); } /* Icon button with notification dot */ .nav-notif-btn { position:relative; } .nav-notif-dot { position:absolute; top:5px; right:5px; width:6px; height:6px; background:var(--red); border-radius:50%; border:1px solid #000; } /* User avatar button */ .nav-user { position:relative; } .nav-avatar-btn { display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:0; } .nav-avatar { width:30px; height:30px; background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:800; letter-spacing:.04em; color:#fff; flex-shrink:0; } .nav-avatar--lg { width:40px; height:40px; font-size:.68rem; } .nav-chevron { font-size:.5rem; color:rgba(255,255,255,.4); transition:transform .2s; display:block; } .nav-avatar-btn:hover .nav-chevron { color:#fff; } /* Role badges inside dropdown */ .nav-role-badge { display:inline-block; font-size:.44rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; margin-left:6px; } .nav-role-badge--admin { background:rgba(232,24,58,.15); color:#e8183a; } .nav-role-badge--editor { background:rgba(251,191,36,.15); color:#fbbf24; } .nav-role-badge--writer { background:rgba(96,165,250,.15); color:#60a5fa; } .nav-role-badge--user { background:rgba(74,222,128,.15); color:#4ade80; } /* Dropdown menu */ .nav-dropdown { position:absolute; top:calc(100% + 10px); right:0; width:240px; background:#0d0d0d; border:1px solid rgba(255,255,255,.1); box-shadow:0 16px 48px rgba(0,0,0,.8); opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .18s,transform .18s; z-index:200; } .nav-dropdown.open { opacity:1; pointer-events:auto; transform:translateY(0); } .nav-dropdown__header { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07); } .nav-dropdown__name { font-size:.74rem; font-weight:700; color:#fff; display:flex; align-items:center; flex-wrap:wrap; } .nav-dropdown__email { font-size:.6rem; color:rgba(255,255,255,.3); margin-top:2px; } .nav-dropdown__divider { height:1px; background:rgba(255,255,255,.07); margin:4px 0; } .nav-dropdown__item { display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:.7rem; color:rgba(255,255,255,.55); text-decoration:none; transition:all .14s; cursor:pointer; width:100%; text-align:left; background:none; border:none; font-family:var(--font); } .nav-dropdown__item i { width:14px; text-align:center; font-size:.65rem; flex-shrink:0; } .nav-dropdown__item:hover { background:rgba(255,255,255,.04); color:#fff; } .nav-dropdown__item--danger { color:rgba(232,24,58,.7); } .nav-dropdown__item--danger:hover { color:#e8183a; background:rgba(232,24,58,.06); } /* Burger button */ .nav__burger { display:none; flex-direction:column; gap:5px; width:30px; cursor:pointer; background:none; border:none; padding:2px; } .nav__burger span { display:block; height:2px; background:#fff; border-radius:1px; transition:transform .25s,opacity .25s,width .25s; } .nav__burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .nav__burger.open span:nth-child(2) { opacity:0; width:0; } .nav__burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .nav-mobile { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:#0a0a0a; border-bottom:1px solid rgba(255,255,255,.08); padding:16px 24px; z-index:850; transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform .22s,opacity .22s; } .nav-mobile.open { transform:translateY(0); opacity:1; pointer-events:auto; } .nav-mobile__links { display:flex; flex-direction:column; gap:2px; } .nav-mobile__links li a { display:flex; align-items:center; gap:10px; padding:11px 12px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); text-decoration:none; transition:color .14s; } .nav-mobile__links li a:hover { color:#fff; } .nav-mobile__links li a i { width:16px; font-size:.7rem; } .nav-mobile__cta { background:var(--red) !important; color:#fff !important; margin-top:8px; border-radius:2px; justify-content:center !important; } /* Search overlay */ .nav-search-overlay { position:fixed; inset:0; z-index:950; background:rgba(0,0,0,.92); backdrop-filter:blur(16px); display:flex; flex-direction:column; align-items:center; padding-top:120px; padding-inline:24px; opacity:0; pointer-events:none; transition:opacity .22s; } .nav-search-overlay.open { opacity:1; pointer-events:auto; } .nav-search-box { display:flex; align-items:center; gap:14px; width:100%; max-width:640px; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:14px; } .nav-search-icon { font-size:1.1rem; color:rgba(255,255,255,.3); flex-shrink:0; } #navSearchInput { flex:1; background:none; border:none; outline:none; font-size:1.4rem; font-weight:600; color:#fff; font-family:var(--font); } #navSearchInput::placeholder { color:rgba(255,255,255,.2); } .nav-search-close { width:32px; height:32px; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.4); font-size:.65rem; display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; flex-shrink:0; transition:all .15s; } .nav-search-close:hover { color:#fff; border-color:rgba(255,255,255,.4); } .nav-search-results { width:100%; max-width:640px; margin-top:20px; display:flex; flex-direction:column; gap:2px; } .nav-search-item { display:flex; flex-direction:column; gap:3px; padding:12px 14px; border:1px solid rgba(255,255,255,.07); text-decoration:none; transition:background .14s; background:#0d0d0d; } .nav-search-item:hover { background:rgba(255,255,255,.05); } .nav-search-item__cat { font-size:.5rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); } .nav-search-item__title { font-size:.82rem; font-weight:600; color:#fff; } .nav-search-loading,.nav-search-empty { padding:16px; text-align:center; font-size:.78rem; color:rgba(255,255,255,.35); } /* ── PAGE GUARD overlay (shown briefly while checking auth) ──── */ .auth-guard-overlay { position:fixed; inset:0; z-index:9999; background:#000; display:flex; align-items:center; justify-content:center; opacity:1; transition:opacity .3s; } .auth-guard-overlay.hide { opacity:0; pointer-events:none; } .auth-guard-spinner { width:32px; height:32px; border:2px solid rgba(255,255,255,.1); border-top-color:var(--red); border-radius:50%; animation:guardSpin .7s linear infinite; } @keyframes guardSpin { to { transform:rotate(360deg); } } /* ── RESPONSIVE NAV ──────────────────────────────────────────── */ @media(max-width:1100px) { /* Removed: old rule that hid links 4+ was written for 5-link nav. With 8 categories from nav.js the burger takes over at 820px. */ .nav-cat-link { padding: 0 6px !important; font-size: 9.5px !important; } } @media(max-width:900px) { .nav-cat-link { padding: 0 5px !important; font-size: 9px !important; } } @media(max-width:820px) { .nav__links { display:none; } .nav__burger { display:flex; } .nav-mobile { display:block; } } /* ── TICKER ─────────────────────────────────────────────────────── */ .ticker { height: 30px; background: var(--white); color: var(--black); display: flex; align-items: center; overflow: hidden; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .ticker__label { flex-shrink: 0; padding: 0 18px; border-right: 1px solid rgba(0,0,0,0.1); white-space: nowrap; background: var(--black); color: var(--white); } .ticker__track { flex: 1; overflow: hidden; } .ticker__inner { display: flex; gap: 56px; white-space: nowrap; animation: ticker 30s linear infinite; } .ticker__item { display: flex; align-items: center; gap: 10px; } .ticker__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,0.2); flex-shrink: 0; } @keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* ── SECTION HEADER ─────────────────────────────────────────────── */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--b-2); margin-bottom: 28px; } .sec-head__left { display: flex; flex-direction: column; gap: 4px; } .sec-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-4); } .sec-title { font-size: clamp(1.1rem,2vw,1.65rem); font-weight: 800; letter-spacing: -0.04em; color: var(--white); line-height: 1.1; } .sec-link { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3); display: flex; align-items: center; gap: 6px; transition: color var(--t-fast) var(--ease-out); } .sec-link i { font-size: 0.55rem; transition: transform var(--t-fast) var(--ease-out); } .sec-link:hover { color: var(--white); } .sec-link:hover i { transform: translateX(3px); } /* Legacy aliases */ .section-header { display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--b-2);margin-bottom:28px; } .section-label { font-size:0.6rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--t-4); } .section-title { font-size:clamp(1.1rem,2vw,1.65rem);font-weight:800;letter-spacing:-0.04em;color:var(--white);line-height:1.1; } .section-link { font-size:0.64rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--t-3);display:flex;align-items:center;gap:6px;transition:color var(--t-fast) var(--ease-out); } .section-link i { font-size:0.55rem;transition:transform var(--t-fast) var(--ease-out); } .section-link:hover { color:var(--white); } .section-link:hover i { transform:translateX(3px); } /* ── ───────────────────────────────────────────────────────────── CARDS ──────────────────────────────────────────────────────────────── */ /* Standard grid card */ .card { display: flex; flex-direction: column; border: 1px solid var(--b-2); overflow: hidden; cursor: pointer; transition: border-color var(--t-mid) var(--ease-out), background var(--t-mid); } .card:hover { border-color: var(--b-4); } .card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 3/2; background: var(--s-4); } .card__img { width:100%;height:100%;object-fit:cover;filter:brightness(.88);transition:transform var(--t-slow) var(--ease-out),filter var(--t-mid); } .card:hover .card__img { transform:scale(1.05);filter:brightness(.65); } .card__body { padding: 20px; flex:1; display:flex; flex-direction:column; gap:6px; } .card__cat { font-size:0.56rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--t-4); } .card__title { font-size:0.95rem;font-weight:800;letter-spacing:-0.025em;color:var(--white);line-height:1.28;flex:1; } .card__excerpt { font-size:0.8rem;color:var(--t-3);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .card__meta { font-size:0.6rem;color:var(--t-4);font-weight:500;display:flex;align-items:center;gap:8px;border-top:1px solid var(--b-2);padding-top:12px;margin-top:4px; } /* Hero overlay card */ .card-hero { position:relative;overflow:hidden;cursor:pointer;display:block;background:var(--s-4); } .card-hero__img { width:100%;height:100%;object-fit:cover;filter:brightness(.45);transition:transform var(--t-xslow) var(--ease-out),filter var(--t-mid); } .card-hero:hover .card-hero__img { transform:scale(1.05);filter:brightness(.3); } .card-hero__body { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.32) 55%,transparent 100%); } .card-hero__cat { font-size:0.56rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px; } .card-hero__title{ font-size:clamp(1rem,2.2vw,1.9rem);font-weight:900;letter-spacing:-0.04em;color:#fff;line-height:1.1; } .card-hero__meta { font-size:0.62rem;color:rgba(255,255,255,.38);margin-top:10px; } /* Horizontal list card */ .card-list { display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--b-2);cursor:pointer;transition:opacity var(--t-fast); } .card-list:hover { opacity:.6; } .card-list:last-child { border-bottom:none; } .card-list__img { aspect-ratio:4/3;object-fit:cover;background:var(--s-4);width:100%; } .card-list__cat { font-size:0.54rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--t-4);margin-bottom:4px; } .card-list__title{ font-size:0.84rem;font-weight:700;letter-spacing:-0.02em;color:var(--white);line-height:1.28; } .card-list__meta { font-size:0.58rem;color:var(--t-4);margin-top:4px; } /* Podcast card */ .card-podcast { display:flex;flex-direction:column;border:1px solid var(--b-2);overflow:hidden;cursor:pointer;transition:border-color var(--t-mid),background var(--t-mid); } .card-podcast:hover { border-color:var(--b-4); } .card-podcast__cover { position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--s-4); } .card-podcast__cover img { width:100%;height:100%;object-fit:cover;transition:transform var(--t-mid) var(--ease-out); } .card-podcast:hover .card-podcast__cover img { transform:scale(1.06); } .card-podcast__play { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);opacity:0;transition:opacity var(--t-fast); } .card-podcast:hover .card-podcast__play { opacity:1; } .card-podcast__play-btn { width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#000;font-size:.9rem; } .card-podcast__body { padding:16px; } .card-podcast__show { font-size:0.56rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--t-4);margin-bottom:6px; } .card-podcast__title { font-size:0.9rem;font-weight:700;letter-spacing:-0.02em;color:var(--white);line-height:1.3;margin-bottom:8px; } .card-podcast__meta { font-size:0.6rem;color:var(--t-3); } /* Video card */ .card-video { position:relative;overflow:hidden;cursor:pointer;display:block;aspect-ratio:16/9;background:var(--s-4); } .card-video__img { width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:transform var(--t-mid) var(--ease-out),filter var(--t-mid); } .card-video:hover .card-video__img { transform:scale(1.05);filter:brightness(.42); } .card-video__play { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; } .card-video__play-btn { width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:#000;font-size:.95rem;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast); } .card-video:hover .card-video__play-btn { transform:scale(1.1);background:#fff; } .card-video__body { position:absolute;bottom:0;left:0;right:0;padding:14px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%); } .card-video__cat { font-size:0.55rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:4px; } .card-video__title { font-size:0.88rem;font-weight:700;color:#fff;line-height:1.28;letter-spacing:-0.02em; } .card-video__dur { position:absolute;top:10px;right:10px;background:rgba(0,0,0,.8);color:#fff;font-size:0.6rem;font-weight:700;padding:2px 8px;letter-spacing:.04em; } /* Author card */ .card-author { display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px;border:1px solid var(--b-2);cursor:pointer;transition:border-color var(--t-mid),background var(--t-mid); } .card-author:hover { border-color:var(--b-4);background:var(--b-1); } .card-author__avatar { width:60px;height:60px;border-radius:50%;object-fit:cover;border:1px solid var(--b-3);margin-bottom:12px;background:var(--s-5); } .card-author__name { font-size:0.85rem;font-weight:800;letter-spacing:-0.03em;color:#fff;margin-bottom:2px; } .card-author__role { font-size:0.56rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--t-4);margin-bottom:8px; } .card-author__count{ font-size:0.7rem;color:var(--t-3); } /* Ad card */ .card-ad { border:1px solid var(--b-2);overflow:hidden;position:relative; } .card-ad__label { position:absolute;top:8px;right:8px;font-size:0.52rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--t-4);background:rgba(0,0,0,.65);padding:2px 8px;border:1px solid var(--b-2); } /* ── ───────────────────────────────────────────────────────────── BADGES ──────────────────────────────────────────────────────────────── */ .badge { display:inline-flex;align-items:center;height:20px;padding:0 9px;font-size:0.55rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap; } .badge--white { background:var(--white);color:var(--black); } .badge--black { background:rgba(0,0,0,.85);color:var(--white);border:1px solid var(--b-3); } .badge--red { background:var(--red);color:var(--white); } .badge--outline { background:transparent;color:var(--t-2);border:1px solid var(--b-3); } .badge--green { background:var(--neon-green);color:#000; } .badge--purple { background:var(--neon-purple);color:#fff; } .badge--amber { background:var(--neon-amber);color:#000; } .badge--live { background:var(--red);color:#fff;animation:pulse-badge 1.8s ease-in-out infinite; } @keyframes pulse-badge { 0%,100%{opacity:1}50%{opacity:.65} } /* ── ───────────────────────────────────────────────────────────── BUTTONS ──────────────────────────────────────────────────────────────── */ .btn { display:inline-flex;align-items:center;justify-content:center;gap:7px; height:40px;padding:0 20px; font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase; transition:all var(--t-fast) var(--ease-out);white-space:nowrap;cursor:pointer;border:none; font-family:var(--font); } .btn--white { background:var(--white);color:var(--black); } .btn--white:hover { background:var(--g-100); } .btn--black { background:var(--black);color:var(--white);border:1px solid var(--b-3); } .btn--black:hover { border-color:var(--b-4);background:var(--s-2); } .btn--ghost { background:transparent;color:var(--white);border:1px solid var(--b-3); } .btn--ghost:hover { border-color:var(--b-4);background:var(--b-1); } .btn--red { background:var(--red);color:var(--white); } .btn--red:hover { background:var(--red-bright); } .btn--sm { height:30px;padding:0 12px;font-size:0.62rem; } .btn--lg { height:48px;padding:0 28px;font-size:0.74rem; } .btn--xl { height:56px;padding:0 36px;font-size:0.78rem; } .btn--pill { border-radius:var(--r-full); } .btn--full { width:100%; } .btn--icon { width:40px;padding:0; } .btn--icon.btn--sm { width:30px; } /* ── TAGS ───────────────────────────────────────────────────────── */ .tag { display:inline-flex;align-items:center;height:28px;padding:0 12px;font-size:0.6rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;border:1px solid var(--b-3);color:var(--t-2);cursor:pointer;transition:all var(--t-fast) var(--ease-out);white-space:nowrap; } .tag:hover,.tag.active { background:var(--white);color:var(--black);border-color:var(--white); } /* ── INPUTS ─────────────────────────────────────────────────────── */ .input { width:100%;height:44px;background:rgba(255,255,255,.03); border:1px solid var(--b-2);color:var(--white); font-size:0.88rem;padding:0 14px;outline:none; transition:border-color var(--t-fast) var(--ease-out);font-family:var(--font); } .input::placeholder { color:var(--t-4); } .input:focus { border-color:var(--b-4);background:rgba(255,255,255,.04); } .input--sm { height:34px;font-size:0.8rem;padding:0 10px; } .input--lg { height:52px;font-size:0.95rem; } .textarea { width:100%;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--b-2);color:var(--white);font-size:0.88rem;outline:none;resize:vertical;min-height:120px;transition:border-color var(--t-fast) var(--ease-out);font-family:var(--font); } .textarea:focus { border-color:var(--b-4); } .select { width:100%;height:44px;background:rgba(255,255,255,.03);border:1px solid var(--b-2);color:var(--white);font-size:0.85rem;padding:0 14px;outline:none;appearance:none;cursor:pointer;font-family:var(--font); } .select:focus { border-color:var(--b-4); } .input-label { font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--t-3);margin-bottom:6px;display:block; } .input-group { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; } .input-hint { font-size:0.68rem;color:var(--t-4);margin-top:4px; } .input-error { font-size:0.68rem;color:var(--red-soft);margin-top:4px; } .input.error { border-color:var(--red); } /* ── ───────────────────────────────────────────────────────────── SEARCH OVERLAY ──────────────────────────────────────────────────────────────── */ .search-overlay { position:fixed;inset:0;z-index:2000; background:rgba(0,0,0,.98);backdrop-filter:blur(28px); display:flex;flex-direction:column;align-items:center;justify-content:flex-start; padding-top:120px;opacity:0;pointer-events:none; transition:opacity var(--t-mid) var(--ease-out); } .search-overlay.open { opacity:1;pointer-events:all; } .search-overlay__inner { width:100%;max-width:620px;padding:0 24px; } .search-overlay__input { width:100%;background:transparent;border:none; border-bottom:1px solid var(--b-3); color:var(--white);font-size:2rem;font-weight:800;letter-spacing:-0.04em; padding:8px 0;outline:none;font-family:var(--font); } .search-overlay__input::placeholder { color:var(--b-4); } .search-overlay__close { position:absolute;top:20px;right:28px;width:36px;height:36px; background:var(--b-1);border:1px solid var(--b-2); display:flex;align-items:center;justify-content:center; color:var(--t-3);font-size:0.8rem;cursor:pointer; transition:all var(--t-fast) var(--ease-out); } .search-overlay__close:hover { color:var(--white);border-color:var(--b-4); } /* ── ───────────────────────────────────────────────────────────── MEDIA PLAYER BAR ──────────────────────────────────────────────────────────────── */ .media-bar { position:fixed;bottom:0;left:0;right:0;height:60px; background:rgba(0,0,0,.98);border-top:1px solid var(--b-2); backdrop-filter:blur(24px);z-index:800; display:flex;align-items:center;padding:0 20px;gap:14px; transform:translateY(100%);transition:transform var(--t-slow) var(--ease-out); } .media-bar.visible { transform:translateY(0); } .media-bar__thumb { width:38px;height:38px;object-fit:cover;flex-shrink:0;background:var(--s-5); } .media-bar__info { flex:1;min-width:0; } .media-bar__title { font-size:0.76rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .media-bar__show { font-size:0.6rem;color:var(--t-4); } .media-bar__controls { display:flex;align-items:center;gap:2px; } .media-bar__btn { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t-3);font-size:0.78rem;transition:all var(--t-fast) var(--ease-out);background:none;border:none;cursor:pointer; } .media-bar__btn:hover { color:#fff;background:var(--b-1); } .media-bar__btn--play { background:#fff;color:#000;width:36px;height:36px; } .media-bar__btn--play:hover { background:var(--g-100); } .media-bar__progress { position:absolute;top:0;left:0;right:0;height:1px;background:var(--b-2); } .media-bar__progress-fill { height:100%;background:#fff;width:35%;transition:width .5s linear; } /* ── ───────────────────────────────────────────────────────────── GOALS INTEGRATION BOX ──────────────────────────────────────────────────────────────── */ .goals-box { border:1px solid var(--b-3);padding:22px;position:relative;overflow:hidden; } .goals-box::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-glow),transparent); } .goals-box__label { font-size:0.54rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--t-4);margin-bottom:10px; } .goals-box__title { font-size:1rem;font-weight:900;letter-spacing:-0.04em;color:#fff;line-height:1.2;margin-bottom:8px; } .goals-box__text { font-size:0.76rem;color:var(--t-3);line-height:1.65;margin-bottom:14px; } .goals-box__app-row { display:flex;gap:6px;margin-top:12px; } /* ── ───────────────────────────────────────────────────────────── AD UNIT ──────────────────────────────────────────────────────────────── */ .ad-unit { background:var(--s-2);border:1px solid var(--b-2);overflow:hidden;position:relative; } .ad-unit__label { position:absolute;top:8px;left:8px;font-size:0.5rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--t-4);background:rgba(0,0,0,.6);padding:2px 7px; } /* ── ───────────────────────────────────────────────────────────── ARTICLE PROSE ──────────────────────────────────────────────────────────────── */ .prose h2 { font-size:1.55rem;font-weight:900;letter-spacing:-0.04em;margin:44px 0 16px;color:var(--white);line-height:1.15; } .prose h3 { font-size:1.2rem;font-weight:800;letter-spacing:-0.03em;margin:32px 0 12px;color:var(--white); } .prose p { font-size:1.02rem;color:var(--g-300);line-height:1.85;margin-bottom:22px; } .prose strong { color:var(--white);font-weight:700; } .prose em { color:var(--g-200);font-style:italic; } .prose blockquote { border-left:2px solid var(--white);padding:6px 0 6px 24px; margin:36px 0;font-size:1.18rem;font-weight:700;letter-spacing:-0.03em; color:var(--white);line-height:1.45; } .prose ul,.prose ol { padding-left:20px;margin-bottom:22px; } .prose ul { list-style:disc; } .prose ol { list-style:decimal; } .prose li { font-size:1rem;color:var(--g-300);line-height:1.8;margin-bottom:6px; } .prose a { color:var(--white);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px; } .prose figure { margin:40px 0; } .prose figure img { width:100%; } .prose figcaption { font-size:0.7rem;color:var(--t-3);margin-top:10px;text-align:center;letter-spacing:0.04em; } .prose hr { border:none;border-top:1px solid var(--b-2);margin:40px 0; } .prose code { font-family:var(--font-mono);font-size:0.85em;background:var(--s-3);padding:2px 6px;border:1px solid var(--b-2); } .prose pre { background:var(--s-2);border:1px solid var(--b-2);padding:20px;margin:28px 0;overflow-x:auto; } .prose pre code { background:none;border:none;padding:0;font-size:0.88rem; } /* ── ───────────────────────────────────────────────────────────── DASHBOARD — BASE LAYOUT ──────────────────────────────────────────────────────────────── */ .dash-layout { display: grid; grid-template-columns: var(--dash-sb) 1fr; min-height: 100vh; background: var(--s-1); } .dash-sidebar { background: var(--s-0); border-right: 1px solid var(--b-2); padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--b-3) transparent; } .dash-content { padding: 28px; overflow-y: auto; } .dash-sidebar__logo { padding: 18px 18px 16px; border-bottom: 1px solid var(--b-2); font-size: 1rem; font-weight: 900; letter-spacing: -0.06em; color: var(--t-1); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; } .dash-sidebar__logo-role { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-4); background: var(--b-2); padding: 3px 8px; } .dash-nav { flex: 1; padding: 10px 10px; } .dash-nav__section { margin-bottom: 22px; } .dash-nav__label { font-size: 0.54rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-4); padding: 0 8px 8px; display: block; } .dash-nav__item { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px; font-size: 0.76rem; font-weight: 500; color: var(--t-3); cursor: pointer; transition: all var(--t-fast) var(--ease-out); text-decoration: none; margin-bottom: 1px; } .dash-nav__item:hover { background: var(--b-1); color: var(--t-1); } .dash-nav__item.active { background: var(--b-2); color: var(--t-1); } .dash-nav__item i { width: 14px; text-align: center; font-size: 0.72rem; opacity: .65; } .dash-nav__item.active i { opacity: 1; } .dash-nav__badge { margin-left: auto; background: var(--red); color: #fff; font-size: 0.52rem; font-weight: 700; height: 15px; min-width: 15px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; } .dash-sidebar__footer { padding: 14px; border-top: 1px solid var(--b-2); flex-shrink: 0; } .dash-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--b-2); } .dash-header__title { font-size:1.3rem;font-weight:900;letter-spacing:-0.04em;color:var(--t-1); } .dash-header__sub { font-size:0.72rem;color:var(--t-4);margin-top:2px; } /* Stat cards */ .stat-card { background: var(--s-2); border: 1px solid var(--b-2); padding: 20px; position: relative; overflow: hidden; transition: border-color var(--t-mid) var(--ease-out); } .stat-card:hover { border-color: var(--b-3); } .stat-card__label { font-size:0.58rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--t-4);margin-bottom:10px; } .stat-card__value { font-size:1.9rem;font-weight:900;letter-spacing:-0.05em;color:var(--t-1);line-height:1; } .stat-card__delta { font-size:0.68rem;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:4px; } .stat-card__delta.up { color:var(--neon-green); } .stat-card__delta.down { color:var(--red); } .stat-card__icon { position:absolute;top:16px;right:16px;width:32px;height:32px; display:flex;align-items:center;justify-content:center;font-size:0.82rem; } /* Chart card */ .chart-card { background:var(--s-2);border:1px solid var(--b-2);padding:22px; } .chart-card__header { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; } .chart-card__title { font-size:0.8rem;font-weight:700;color:var(--t-1); } .chart-card__sub { font-size:0.66rem;color:var(--t-4);margin-top:2px; } /* Data table */ .dash-table { width:100%;border-collapse:collapse; } .dash-table th { font-size:0.56rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--t-4);padding:10px 14px;text-align:left;border-bottom:1px solid var(--b-2); } .dash-table td { font-size:0.8rem;color:var(--t-2);padding:12px 14px;border-bottom:1px solid var(--b-2);vertical-align:middle; } .dash-table tr:hover td { background:var(--b-1); } .dash-table td:first-child { color:var(--t-1); } /* Grid utilities for dashboards */ .grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; } .grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; } .grid-2 { display:grid;grid-template-columns:repeat(2,1fr);gap:12px; } /* ── ───────────────────────────────────────────────────────────── FOOTER ──────────────────────────────────────────────────────────────── */ .footer { border-top:1px solid var(--b-2);padding:56px 0 36px; } .footer__grid { display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px; } .footer__brand-name { font-size:1.2rem;font-weight:900;letter-spacing:-0.06em;margin-bottom:10px; } .footer__brand-desc { font-size:0.76rem;color:var(--t-3);line-height:1.75;max-width:240px;margin-bottom:16px; } .footer__brand-tag { font-size:0.66rem;font-weight:600;font-style:italic;color:var(--t-4); } .footer__col-title { font-size:0.58rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--t-4);margin-bottom:14px; } .footer__links { list-style:none;display:flex;flex-direction:column;gap:9px; } .footer__links a { font-size:0.78rem;color:var(--t-3);transition:color var(--t-fast) var(--ease-out); } .footer__links a:hover { color:var(--white); } .footer__bottom { margin-top:40px;padding-top:24px;border-top:1px solid var(--b-2);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; } .footer__copy { font-size:0.66rem;color:var(--t-4); } .footer__bottom-links { display:flex;gap:18px; } .footer__bottom-links a { font-size:0.62rem;color:var(--t-4);transition:color var(--t-fast) var(--ease-out); } .footer__bottom-links a:hover { color:var(--white); } /* ── ───────────────────────────────────────────────────────────── UTILITY ──────────────────────────────────────────────────────────────── */ .divider { border:none;border-top:1px solid var(--b-2);margin:0; } .mono { font-family:var(--font-mono); } .text-red { color:var(--red); } .text-muted { color:var(--t-3); } .text-xs { font-size:0.72rem; } .text-sm { font-size:0.85rem; } .gap-4 { gap:4px; } .gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; } .gap-24 { gap:24px; } .flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } .mt-8 { margin-top:8px; } .mt-16 { margin-top:16px; } .mt-24 { margin-top:24px; } .mt-32 { margin-top:32px; } .mb-8 { margin-bottom:8px; } .mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; } .hidden { display:none!important; } .w-full { width:100%; } /* Scrollbar */ ::-webkit-scrollbar { width:4px;height:4px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--b-3);border-radius:2px; } ::-webkit-scrollbar-thumb:hover { background:var(--b-4); } /* Focus */ :focus-visible { outline:1px solid var(--b-4);outline-offset:2px; } /* ── ───────────────────────────────────────────────────────────── RESPONSIVE ──────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 768px) { :root { --nav-h: 56px; } .container, .container--narrow, .container--wide { padding: 0 20px; } .nav__links { display: none; } .nav__mobile-toggle { display:flex; } .dash-layout { grid-template-columns: 1fr; } .dash-sidebar { display: none; } .footer__grid { grid-template-columns: 1fr; gap: 32px; } .grid-3 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } .stat-card__value { font-size:1.5rem; } } @media (max-width: 480px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .sec-head { flex-direction:column;align-items:flex-start;gap:10px; } }