/* ═══════════════════════════════════════════════════════════════ TABLE OF CONTENTS 1. Theme variables (dark + light) 2. Shared variables & reset 3. PWA / offline UI overrides 4. Scrollbar 5. Layout (app-layout, topbar, sidebar, main) 6. Page header 7. Stat cards 8. Cards 9. Buttons 10. Forms 11. Tables 12. Badges 13. Alerts 14. Step wizard 15. Filters bar 16. Loading / empty states 17. Toast 18. Map (#map) 19. Login page 20. Utilities 21. Atlas page 22. Landing / public pages 23. Admin tabs 24. Sidebar redesign (collapsible, drawer) 25. User chip & topbar nav dropdowns 26. Leaderboard (public index page) 27. Explore map tab 28. Misc component overrides 29. Animations / keyframes 30. MEDIA QUERIES ← all breakpoints consolidated here ═══════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────── 1. THEME VARIABLES Dark theme: class="dark" on (default) Light theme: class="light" on Toggle saved to localStorage as 'mta_theme' ───────────────────────────────────────────────────────────── */ html, html.dark { --bg: #09150d; --surface: #0f2016; --surface2: #152b1c; --surface3: #1c3d26; --border: rgba(126,200,80,0.10); /* was #1e4a28 — now near-invisible */ --border-strong: rgba(126,200,80,0.22); /* for emphatic borders only */ --lime: #7ec850; --lime-glow: rgba(126,200,80,0.12); --lime-dim: #5a9a35; --green: #2d8a3e; --green-bright: #3aad50; --yellow: #c8d44a; --red: #e05050; --blue: #4ea8de; --white: #f0f7f1; --text: #dff0e2; --text-muted: #7aaa85; --text-dim: #4d7a58; --panel-bg: rgba(15,32,22,0.9); --panel-bg-soft: rgba(21,43,28,0.78); --panel-fill: linear-gradient(180deg, rgba(15,32,22,0.98), rgba(21, 58, 37, 0.98)); --modal-backdrop: rgba(7,16,9,0.78); --glass-accent: rgba(126,200,80,0.1); --glass-accent-strong: rgba(126,200,80,0.18); --card-shadow: 0 1px 4px rgba(0,0,0,0.25); /* subtle resting shadow */ --card-shadow-hover:0 6px 24px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); --shadow: 0 4px 24px rgba(0,0,0,0.5); /* ── Forest green chrome (topbar + footer) ── */ --forest: #1a3d22; --forest-text: #c8e8cc; --forest-muted: #7aaa85; --forest-border: rgba(126,200,80,0.14); --forest-hover: rgba(126,200,80,0.10); --forest-active: rgba(126,200,80,0.18);} html.light { --bg: #f2f8f3; --surface: #ffffff; --surface2: #eaf4ec; --surface3: #d5ecd8; --border: rgba(74,154,40,0.13); /* was #b8d9bc — near-invisible */ --border-strong: rgba(74,154,40,0.30); /* for emphatic borders only */ --lime: #4a9a28; --lime-glow: rgba(74,154,40,0.10); --lime-dim: #3a7a1e; --green: #2d6e2d; --green-bright: #3a8c3a; --yellow: #7a8c00; --red: #c0392b; --blue: #1a6fa8; --white: #ffffff; --text: #1a3320; --text-muted: #35563d; --text-dim: #5d7c64; --panel-bg: rgba(255,255,255,0.94); --panel-bg-soft: rgba(234,244,236,0.96); --panel-fill: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(197, 221, 201, 0.98)); --modal-backdrop: rgba(26,51,32,0.18); --glass-accent: rgba(74,154,40,0.08); --glass-accent-strong: rgba(74,154,40,0.14); /* ── Forest green chrome (topbar + footer) ── */ --forest: #1e4a28; --forest-text: #d8f0db; --forest-muted: #8cc89a; --forest-border: rgba(74,154,40,0.18); --forest-hover: rgba(74,154,40,0.12); --forest-active: rgba(74,154,40,0.22); --card-shadow: 0 1px 3px rgba(0,0,0,0.06); /* barely there resting */ --card-shadow-hover:0 6px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07); --shadow: 0 4px 16px rgba(0,0,0,0.12);} html.light .alert-success { color: var(--lime); } /* ───────────────────────────────────────────────────────────── 2. SHARED VARIABLES & RESET ───────────────────────────────────────────────────────────── */ :root { --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 20px; --transition: 0.18s ease; --accent: var(--lime); --accent-glow:var(--lime-glow); --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --font-serif: Georgia, 'Times New Roman', serif;} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.6; transition: background .25s ease, color .25s ease; -webkit-tap-highlight-color: transparent;} /* ───────────────────────────────────────────────────────────── 3. PWA / OFFLINE UI OVERRIDES ───────────────────────────────────────────────────────────── */ #offline-banner { background: var(--surface2) !important; border-top: 2px solid var(--lime) !important; color: var(--text) !important; box-shadow: var(--card-shadow);} #queue-count { background: var(--lime-glow) !important; border: 1px solid color-mix(in srgb, var(--lime) 35%, transparent) !important; color: var(--text) !important;} #pwa-update-toast { background: var(--surface) !important; border: 1px solid var(--lime) !important; color: var(--text) !important; box-shadow: var(--shadow) !important;} #pwa-update-now { background: var(--lime) !important; color: #071009 !important;} .offline-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--surface2); border-top: 2px solid var(--lime); color: var(--text); padding: 10px 20px; display: flex; align-items: center; gap: 12px; font-size: .83rem; box-shadow: var(--card-shadow);} .offline-banner[hidden] { display: none; } .queue-count-badge { margin-left: auto; background: var(--lime-glow); border: 1px solid rgba(126,200,80,.3); padding: 2px 10px; border-radius: 20px; font-size: .78rem; color: var(--text);} body.is-offline .main { padding-bottom: 64px; } /* ───────────────────────────────────────────────────────────── 4. SCROLLBAR ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; } .table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;} /* ───────────────────────────────────────────────────────────── 5. LAYOUT ───────────────────────────────────────────────────────────── */ .app-layout { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 1fr; height: 100vh; height: 100dvh; overflow: scroll;} /* ── Topbar ── */ .topbar { grid-column: 1 / -1; background: var(--forest); border-bottom: 1px solid var(--forest-border); display: flex; align-items: center; padding: 0 24px; gap: 12px; height: 56px; /* fixed — prevents nav wrapping from expanding it */ overflow: visible; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: transform .28s ease, box-shadow .28s ease; will-change: transform;} /* ── Logo: elevated slightly above nav items for brand hierarchy ── */ .topbar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; /* Subtle lift: logo sits 3px higher via negative margin-top */ margin-top: -3px;} .topbar-logo img, .topbar-logo svg { color: var(--lime); } .topbar-logo-text { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--forest-text); letter-spacing: -0.02em; white-space: nowrap;} .topbar-spacer { flex: 1; } /* Topbar nav links */ .topbar-nav { display: flex; align-items: center; gap: 2px; flex: 1; margin: 0 16px; min-width: 0; overflow: visible;} .topbar-nav-link { padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: .83rem; font-weight: 500; color: var(--forest-muted); transition: .15s ease; white-space: nowrap; flex-shrink: 0;} .topbar-nav-link:hover { color: var(--forest-text); background: var(--forest-hover); } .topbar-nav-link.active { color: var(--lime); background: var(--forest-active); } /* Topbar theme toggle */ .topbar-theme-btn { background: transparent; border: 1px solid var(--forest-border); border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--forest-muted); font-size: .9rem; line-height: 1; transition: .15s ease; flex-shrink: 0;} .topbar-theme-btn:hover { color: var(--forest-text); border-color: var(--lime); } .topbar-theme-btn:empty::before { content: ''; display: inline-block; width: 15px; height: 15px;} /* Legacy theme toggle (non-topbar pages) */ .theme-toggle { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0;} .theme-toggle:hover { background: var(--surface3); color: var(--text); } /* Topbar user (legacy, kept for public pages) */ .topbar-user { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--forest-muted); } .topbar-badge { background: var(--lime); color: var(--bg); font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em;} /* ── Sidebar ── */ .sidebar { background: var(--surface); border-right: 1px solid var(--border); /* now near-invisible via CSS var */ padding: 20px 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;} .sidebar-section { margin-bottom: 24px; } .sidebar-label { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); padding: 0 20px; margin-bottom: 6px;} .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; color: var(--text-muted); text-decoration: none; font-size: .88rem; transition: var(--transition); border-left: 3px solid transparent; cursor: pointer; min-height: 44px;} .nav-item:hover { background: var(--surface2); color: var(--text); border-left-color: var(--surface3); } .nav-item.active { background: var(--lime-glow); color: var(--lime); border-left-color: var(--lime); } .nav-item svg { opacity: .7; flex-shrink: 0; } .nav-item.active svg { opacity: 1; } /* ── Main content area ── */ .main { overflow-y: auto; overflow-x: hidden; padding: 24px 28px; background: var(--bg); -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;} .app-page-footer { margin-top: 28px; padding: 18px 20px 4px; border-top: 1px solid var(--forest-border); background: linear-gradient(180deg, transparent, rgba(26,61,34,0.18));} .app-page-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-dim); font-size: .82rem;} .app-page-footer-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;} .app-page-footer-links a { color: var(--text-dim); text-decoration: none; transition: color .15s ease;} .app-page-footer-links a:hover { color: var(--lime);} /* ───────────────────────────────────────────────────────────── 6. PAGE HEADER ───────────────────────────────────────────────────────────── */ .page-header { margin-bottom: 28px; } .page-title { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin-bottom: 4px;} .page-subtitle { color: var(--text-muted); font-size: .88rem; } /* ───────────────────────────────────────────────────────────── 7. STAT CARDS ───────────────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px;} .stat-card { background: var(--surface); border: 1px solid transparent; /* invisible at rest */ border-radius: var(--radius-lg); padding: 20px; position: relative; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); box-shadow: var(--card-shadow);} .stat-card:hover { border-color: var(--lime); transform: translateY(-2px); box-shadow: var(--card-shadow-hover);} .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--lime); opacity: .6;} .stat-card.yellow::before { background: var(--yellow); } .stat-card.blue::before { background: var(--blue); } .stat-card.red::before { background: var(--red); } .stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono); margin-bottom: 8px;} .stat-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 500; color: var(--text); line-height: 1; margin-bottom: 4px;} .stat-sub { font-size: .75rem; color: var(--text-dim); } .stat-icon { position: absolute; top: 16px; right: 16px; color: var(--lime); opacity: .15; } .stat-card.yellow .stat-icon { color: var(--yellow); } .stat-card.blue .stat-icon { color: var(--blue); } .metric-value { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 500; color: var(--text); line-height: 1; margin: 8px 0 6px; align-items: center; justify-content: center;} @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .stat-skeleton { animation: skeletonPulse 1.4s ease-in-out infinite; color: var(--text-dim) !important;} /* ───────────────────────────────────────────────────────────── 8. CARDS ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid transparent; /* invisible at rest */ border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--card-shadow); transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);} .card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--border); transform: translateY(-1px);} .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .card-title { font-size: .95rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px;} .card-title svg { color: var(--lime); } /* ───────────────────────────────────────────────────────────── 9. BUTTONS ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: var(--radius); font-size: .85rem; font-weight: 500; font-family: var(--font-sans); cursor: pointer; border: none; transition: var(--transition); text-decoration: none; white-space: nowrap;} .btn-primary { background: var(--lime); color: #071009; font-weight: 700; } .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.15); } .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface3); border-color: var(--lime); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text); background: var(--surface2); } .btn-danger { background: var(--red); color: white; } .btn-success { background: var(--lime); color: #071009; font-weight: 700; } .btn-sm { padding: 5px 12px; font-size: .78rem; } .btn-lg { padding: 12px 28px; font-size: .95rem; } .btn-full { width: 100%; justify-content: center; } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; } /* Guest state — Sign In button sits in chip wrap */ #user-chip-wrap .btn { margin: 0; } /* ───────────────────────────────────────────────────────────── 10. FORMS ───────────────────────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } .form-row { display: grid; gap: 16px; margin-bottom: 18px; } .form-row.cols-2 { grid-template-columns: 1fr 1fr; } .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } label { display: block; font-size: .78rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; font-family: var(--font-mono);} label .req, .req { color: var(--red); margin-left: 2px; } input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: .88rem; padding: 9px 12px; transition: var(--transition); outline: none; -webkit-appearance: none;} input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--lime); background: var(--surface3); box-shadow: 0 0 0 3px var(--lime-glow);} input::placeholder, textarea::placeholder { color: var(--text-dim); } select option { background: var(--surface); color: var(--text); } textarea { resize: vertical; min-height: 80px; } .form-help { font-size: .75rem; color: var(--text-dim); margin-top: 4px; } .form-error { font-size: .75rem; color: var(--red); margin-top: 4px; } .checkbox-group { display: flex; align-items: center; gap: 8px; cursor: pointer; } .checkbox-group input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--lime); cursor: pointer; } .checkbox-group span { font-size: .88rem; color: var(--text-muted); } .password-field-wrap { position: relative; } .password-field-wrap input { padding-right: 42px; } .password-toggle-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius: 4px; display: flex; align-items: center; transition: var(--transition);} .password-toggle-btn:hover { color: var(--text); } .form-help-inline { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: .72rem; font-style: normal; background: var(--surface3); border-radius: 50%; color: var(--text-muted); cursor: help; margin-left: 5px; vertical-align: middle; border: 1px solid var(--border); transition: .15s ease;} .form-help-inline:hover { background: var(--lime-glow); border-color: var(--lime); color: var(--lime); } .filters-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .filters-bar input:not([type=checkbox]):not([type=radio]), .filters-bar select { flex: 1; min-width: 140px; max-width: 240px; } .filters-bar .btn { flex-shrink: 0; } /* ───────────────────────────────────────────────────────────── 11. TABLES ───────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--card-shadow); } table { width: 100%; border-collapse: collapse; font-size: .84rem; } thead tr { background: var(--surface2); border-bottom: 1px solid var(--border); } thead th { padding: 10px 14px; text-align: left; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap;} tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--surface2); } tbody td { padding: 11px 14px; color: var(--text); } tbody td:first-child { color: var(--text); font-weight: 500; } .td-mono { font-family: var(--font-mono); font-size: .8rem; } .td-commodity-type { font-size: .73rem; font-weight: 600; text-transform: capitalize; color: var(--text-dim); white-space: nowrap;} .commodity-type-pill { display: inline-block; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; font-size: .71rem; font-weight: 600; color: var(--text-muted); text-transform: capitalize; white-space: nowrap;} /* Wide browse table */ .table-wrap.table-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wide table { min-width: 2400px; } .table-wide th, .table-wide td { padding: 8px 10px; font-size: .78rem; white-space: nowrap; } .table-wide thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; border-bottom: 2px solid var(--border);} .table-wide th:first-child, .table-wide td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 3; border-right: 1px solid var(--border); min-width: 130px;} .table-wide thead th:first-child { z-index: 4; } .table-scroll-hint { display: none; font-size: .72rem; color: var(--text-dim); text-align: center; padding: 6px; font-family: var(--font-mono); letter-spacing: .04em;} /* ───────────────────────────────────────────────────────────── 12. BADGES ───────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: .7rem; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em;} .badge-lime { background: var(--lime-glow); color: var(--lime); } .badge-green { background: rgba(45,138,62,.15); color: var(--green-bright); } .badge-yellow { background: rgba(200,212,74,.15); color: var(--yellow); } .badge-red { background: rgba(224,80,80,.12); color: var(--red); } .badge-blue { background: rgba(78,168,222,.12); color: var(--blue); } .badge-grey { background: var(--surface3); color: var(--text); } .badge-amber { background: var(--lime-glow); color: var(--lime); } /* ───────────────────────────────────────────────────────────── 13. ALERTS ───────────────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-size: .85rem; margin-bottom: 16px; border-left: 3px solid;} .alert-error { background: rgba(224,80,80,.08); border-color: var(--red); color: var(--red); } .alert-success { background: var(--lime-glow); border-color: var(--lime); color: var(--lime-dim); } .alert-info { background: rgba(78,168,222,.08); border-color: var(--blue); color: var(--blue); } .alert-warning { background: rgba(200,212,74,.10); border-color: var(--yellow); color: var(--yellow); } /* ───────────────────────────────────────────────────────────── 14. STEP WIZARD ───────────────────────────────────────────────────────────── */ .wizard-steps { display: flex; align-items: center; margin-bottom: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--card-shadow);} .wizard-step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; font-size: .82rem; font-weight: 500; color: var(--text-dim); background: var(--surface); border-right: 1px solid var(--border); cursor: pointer; transition: var(--transition);} .wizard-step:last-child { border-right: none; } .wizard-step.active { background: var(--lime-glow); color: var(--lime); } .wizard-step.done { background: rgba(45,138,62,.08); color: var(--green-bright); } .wizard-step.active .step-num { background: var(--lime); color: #071009; } .wizard-step.done .step-num { background: var(--green); color: white; } .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface3); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; font-family: var(--font-mono); flex-shrink: 0;} .wizard-panel { display: none; } .wizard-panel.active { display: block; } .submission-jumpbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px;} .submission-jumpbar button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;} .submission-jumpbar button:hover { border-color: var(--lime); color: var(--lime); } /* ───────────────────────────────────────────────────────────── 15. LOADING / EMPTY STATES ───────────────────────────────────────────────────────────── */ .loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text-dim); gap: 10px; font-size: .85rem;} .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--lime); border-radius: 50%; animation: spin .7s linear infinite;} .empty { text-align: center; padding: 48px 24px; color: var(--text-dim); } .empty svg { opacity: .2; margin-bottom: 12px; } .empty h3 { font-size: .95rem; color: var(--text-muted); margin-bottom: 6px; } .empty-state { text-align: center; padding: 40px 24px; color: var(--text-dim); font-size: .85rem; border: 1px dashed var(--border); border-radius: 16px;} /* ───────────────────────────────────────────────────────────── 16. TOAST ───────────────────────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px;} .toast { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-size: .84rem; color: var(--text); display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); animation: slideIn .25s ease; min-width: 280px; max-width: 380px;} .toast.success { border-left: 3px solid var(--lime); } .toast.error { border-left: 3px solid var(--red); } .toast.info { border-left: 3px solid var(--blue); } .toast.auto-dismiss { animation: slideIn .25s ease, fadeOut .5s ease var(--dismiss-delay, 4s) forwards;} /* ───────────────────────────────────────────────────────────── 17. MAP ───────────────────────────────────────────────────────────── */ #map { height: calc(100vh - 160px); border-radius: var(--radius-lg); border: 1px solid var(--border);} /* ───────────────────────────────────────────────────────────── 18. LOGIN PAGE ───────────────────────────────────────────────────────────── */ .login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg);} .login-left { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; position: relative; overflow: hidden;} .login-left::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--lime-glow) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%);} .login-logo { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; letter-spacing: -0.03em; text-align: center; margin-bottom: 12px; line-height: 1.1;} .login-logo span { color: var(--lime); } .login-tagline { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 48px; max-width: 340px; line-height: 1.7;} .login-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 360px; } .login-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center;} .login-stat-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; color: var(--lime); } .login-stat-label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .07em; } .login-right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px;} .login-form-wrap { width: 100%; max-width: 400px; } .login-form-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; color: var(--text); } .login-form-sub { font-size: .85rem; color: var(--text-muted); margin-bottom: 28px; } .auth-switch { text-align: center; margin-top: 20px; font-size: .83rem; color: var(--text-dim); } .auth-switch a { color: var(--lime); text-decoration: none; cursor: pointer; } .auth-switch a:hover { text-decoration: underline; } .divider { height: 1px; background: var(--border); margin: 24px 0; } .form-tabs { display: flex; margin-bottom: 24px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .form-tab { flex: 1; padding: 9px; text-align: center; cursor: pointer; font-size: .85rem; font-weight: 500; color: var(--text-muted); background: var(--surface2); transition: var(--transition);} .form-tab.active { background: var(--lime); color: #071009; font-weight: 700; } .login-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; flex-direction: column; text-align: center;} /* ───────────────────────────────────────────────────────────── 19. UTILITIES ───────────────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .flex-center { display: flex; align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .text-muted { color: var(--text-muted); } .text-mono { font-family: var(--font-mono); } .text-sm { font-size: .82rem; } .text-lime { color: var(--lime); } .text-green { color: var(--green-bright); } .text-red { color: var(--red); } .text-white { color: var(--text); } .hidden { display: none !important; } .skip-link { position: absolute; top: -999px; left: 0; z-index: 9999; padding: 10px 20px; background: var(--lime); color: #071009; font-weight: 700; font-size: .88rem; border-radius: 0 0 var(--radius) 0; text-decoration: none; outline: none;} .skip-link:focus { top: 0; } /* ───────────────────────────────────────────────────────────── 20. ATLAS PAGE ───────────────────────────────────────────────────────────── */ .atlas-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .atlas-map-shell { padding: 20px; } .atlas-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr); gap: 18px; align-items: start;} .atlas-map-stack { display: flex; flex-direction: column; gap: 10px; } .atlas-map-frame { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(circle at 20% 20%, rgba(126,200,80,.08), transparent 30%), linear-gradient(180deg, var(--surface2), var(--surface)); min-height: 520px;} #atlas-map { width: 100%; height: 520px; min-height: 520px; } .atlas-map-caption { font-size: .78rem; color: var(--text-muted); padding: 0 4px; } .atlas-region-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; min-height: 180px;} .atlas-region-title { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 12px;} .atlas-country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .atlas-country { text-align: left; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); color: var(--text); cursor: pointer; transition: var(--transition); min-height: 86px;} .atlas-country:hover { transform: translateY(-1px); border-color: var(--lime); } .atlas-country.active { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(126,200,80,.2); } .atlas-country-code { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-family: var(--font-mono); background: rgba(0,0,0,.12); margin-bottom: 8px;} .atlas-country-name { display: block; font-weight: 600; font-size: .82rem; line-height: 1.25; margin-bottom: 4px; } .atlas-country-value { display: block; font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono); } .atlas-tier-1 { background: rgba(78,168,222,.12); } .atlas-tier-2 { background: rgba(200,212,74,.12); } .atlas-tier-3 { background: rgba(126,200,80,.14); } .atlas-tier-4 { background: rgba(224,80,80,.12); } .atlas-detail { background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; min-height: 100%;} .atlas-detail-empty { text-align: center; color: var(--text-dim); padding: 28px 14px; } .atlas-detail-empty h3 { margin: 8px 0 6px; color: var(--text-muted); font-size: .95rem; } .atlas-detail-header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 16px;} .atlas-detail-header h3 { font-size: 1.15rem; margin: 4px 0 0; } .atlas-detail-kicker { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);} .atlas-detail-metric { margin-bottom: 16px; padding: 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border);} .atlas-detail-value { font-size: 1.9rem; font-family: var(--font-mono); color: var(--lime); line-height: 1.1; margin: 4px 0; } .atlas-detail-note { font-size: .78rem; color: var(--text-muted); } .atlas-detail-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .atlas-compare-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; } .atlas-compare-value { font-size: 1.25rem; font-family: var(--font-mono); color: var(--text); margin: 4px 0; } .atlas-detail-list { display: flex; flex-direction: column; gap: 8px; } .atlas-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border);} .atlas-detail-row-title { font-weight: 600; color: var(--text); } .atlas-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;} .atlas-legend-title { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);} .atlas-legend-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--border);} .atlas-legend-1 { background: rgba(78,168,222,.12); } .atlas-legend-2 { background: rgba(200,212,74,.12); } .atlas-legend-3 { background: rgba(126,200,80,.14); } .atlas-legend-4 { background: rgba(224,80,80,.12); } .atlas-legend-missing { background: var(--surface2); } .atlas-detail-anchor { display: none; font-size: .75rem; color: var(--text-dim); text-align: center; padding: 8px; font-family: var(--font-mono);} /* ───────────────────────────────────────────────────────────── 21. LANDING / PUBLIC PAGES ───────────────────────────────────────────────────────────── */ .landing-page { color: var(--text); } .landing-hero { align-items: start; } .landing-hero-card, .pulse-card, .feature-panel { position: relative; overflow: hidden; } .landing-hero-card::before, .pulse-card::before, .feature-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--glass-accent), transparent 35%); pointer-events: none;} .landing-nav-actions { display: flex; gap: 12px; align-items: center; } .landing-theme-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 0.82rem; cursor: pointer;} .landing-side-title { margin-top: 18px; margin-bottom: 18px; } .signal-list, .roadmap-list { display: grid; gap: 14px; } .signal-list div, .roadmap-list div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-bg-soft);} .signal-list strong, .roadmap-list strong { display: block; margin-bottom: 6px; color: var(--text); } .landing-title { max-width: 28ch; font-family: var(--font-serif); font-size: clamp(2.0rem, 3.6vw, 5rem); line-height: 0.7; letter-spacing: 0.04em;} .landing-copy { max-width: 58ch; margin-top: 18px; color: var(--text-muted); font-size: 1.04rem; } .landing-stats-section { padding-top: 0; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; } .section-title-xl { margin-top: 10px; font-family: var(--font-serif); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.05; } .section-note { color: var(--text-muted); font-size: 0.88rem; max-width: 26ch; } .metric-label { display: grid; align-items: center; justify-content: center; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; margin-bottom: 14px; } .dashboard-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; } .content-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; } .panel-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 18px; } .panel-title { margin-top: 10px; } .panel-link, .panel-meta { color: var(--text-muted); font-size: 0.8rem; text-decoration: none; } .panel-link:hover { color: var(--lime); } .reg-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; color: var(--text-muted); font-size: 0.82rem; } .reg-select { flex: 1; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); padding: 11px 12px; font: inherit; } .reg-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .reg-summary-card, .news-card, .ad-placeholder, .reg-row { border: 1px solid var(--border); border-radius: 16px; background: var(--panel-bg-soft); } .reg-summary-card { padding: 14px; } .reg-summary-card span { display: block; font-size: 0.76rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .reg-summary-card strong { display: block; margin-top: 10px; font-size: 1.1rem; } .reg-preview-list, .leaderboard-stack { display: grid; gap: 12px; } .reg-row { padding: 14px 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center;} .reg-row-copy strong, .leaderboard-copy strong { display: block; } .reg-row-copy span, .leaderboard-copy span { color: var(--text-muted); font-size: 0.8rem; } .reg-row-meta { text-align: right; font-size: 0.82rem; color: var(--text); } .reg-row-meta em { display: inline-block; margin-left: 8px; color: var(--lime); font-style: normal; } /* Leaderboard table (public index page) */ .leaderboard-wrap { width: 100%; overflow-x: auto; } .leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; } .leaderboard-table thead tr { border-bottom: 0.5px solid var(--border); } .leaderboard-table th { padding: 8px 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap;} .leaderboard-table th:last-child { text-align: right; } .leaderboard-table td { padding: 10px 12px; border-bottom: 0.5px solid var(--border); vertical-align: middle; } .leaderboard-table tbody tr:last-child td { border-bottom: none; } .leaderboard-table tbody tr:hover { background: var(--panel-bg-soft); } .leaderboard-rank { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; background: var(--surface2); color: var(--text-muted);} .leaderboard-rank.top { background: var(--glass-accent-strong); color: var(--lime); } .leaderboard-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--glass-accent-strong); color: var(--lime); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;} .leaderboard-name { font-weight: 500; font-size: 13px; } .leaderboard-inst { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .leaderboard-score { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--lime); text-align: right;} /* "See more" link */ .lb-see-more { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--lime); text-decoration: none; text-align: right; opacity: .8; transition: opacity .15s; } .lb-see-more:hover { opacity: 1; } /* Full leaderboard modal */ .lb-modal-backdrop { position: fixed; inset: 0; z-index: 1200; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; padding: 16px; } .lb-modal-backdrop[hidden] { display: none; } .lb-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow); } .lb-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .lb-modal-title { font-weight: 600; font-size: 15px; } .lb-modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 4px 8px; border-radius: 6px; line-height: 1; } .lb-modal-close:hover { background: var(--surface2); color: var(--text); } .lb-modal-tabs { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; } .lb-tab { background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--text-muted); padding: 6px 14px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 4px 4px 0 0; transition: color .15s; } .lb-tab:hover { color: var(--text); } .lb-tab.active { color: var(--lime); border-bottom-color: var(--lime); font-weight: 500; } .lb-modal-body { overflow-y: auto; padding: 0 4px 12px; flex: 1; } .news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .news-card { padding: 18px; } .news-date { display: inline-block; margin-bottom: 10px; color: var(--text-dim); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; } .news-card h3 { font-size: 1.05rem; margin-bottom: 10px; } .news-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; } .news-link { margin-top: 16px; border: 0; background: transparent; color: var(--lime); font: inherit; font-weight: 700; cursor: pointer; padding: 0; } .ad-placeholder { padding: 18px; margin-bottom: 14px; } .ad-placeholder.compact{ margin-bottom: 0; } .ad-media-slot { min-height: 140px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--lime) 35%, transparent); background: linear-gradient(135deg, var(--glass-accent), color-mix(in srgb, var(--blue) 12%, transparent)); display: grid; place-items: center; font-family: var(--font-mono); color: var(--text-muted); margin-bottom: 12px; text-align: center; padding: 18px;} .ad-media-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; display: block;} .ad-placeholder p { color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; } .ad-title { margin-bottom: 8px; font-size: 1rem; } .ad-link { display: inline-block; margin-top: 12px; color: var(--lime); text-decoration: none; font-size: 0.85rem; font-weight: 700; } .collaborators-section { padding-top: 0; } /* ═══════════════════════════════════ Collaborators Grid ═══════════════════════════════════ */ .logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 1rem;} /* ═══════════════════════════════════ Collaborator Card ═══════════════════════════════════ */ .logo-slot { width: 108px; height: 108px; text-decoration: none; color: inherit; overflow: hidden; flex-shrink: 0;} /* ═══════════════════════════════════ Inner Layout ═══════════════════════════════════ */ .logo-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.7rem; box-sizing: border-box;} /* ═══════════════════════════════════ Logo Image ═══════════════════════════════════ */ .logo-image { display: block; height: 30px; width: auto; max-width: 54px; object-fit: contain; margin-bottom: 0.7rem;} /* ═══════════════════════════════════ Name BELOW logo ═══════════════════════════════════ */ .logo-name { font-size: 0.7rem; line-height: 1.2; text-align: center; color: var(--text-muted);} .newsletter-modal[hidden] { display: none; } .newsletter-modal { position: fixed; inset: 0; z-index: 90; } .newsletter-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); } .newsletter-dialog { position: relative; z-index: 1; max-width: 760px; margin: 6vh auto; max-height: 88vh; overflow: auto; padding: 28px; border-radius: 24px; border: 1px solid var(--border); background: var(--panel-fill); box-shadow: var(--shadow);} .newsletter-close { position: sticky; top: 0; margin-left: auto; display: block; border: 0; background: transparent; color: var(--text-muted); font-size: 2rem; cursor: pointer;} .modal-title { margin: 10px 0 16px; font-family: var(--font-serif); font-size: 2rem; } .modal-body { color: var(--text); line-height: 1.8; } .legal-card { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; } .legal-card h2 { margin: 14px 0 0; font-size: 1.1rem; color: var(--text); } .legal-card p { margin: 0; color: var(--text-muted); line-height: 1.7; } /* ───────────────────────────────────────────────────────────── 22. ADMIN TABS ───────────────────────────────────────────────────────────── */ .admin-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;} .admin-tabs::-webkit-scrollbar { display: none; } .admin-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius); font-size: .82rem; font-weight: 500; color: var(--text-muted); background: transparent; border: none; cursor: pointer; transition: var(--transition); white-space: nowrap; font-family: var(--font-sans); flex-shrink: 0; scroll-snap-align: start;} .admin-tab:hover { background: var(--surface2); color: var(--text); } .admin-tab.active { background: var(--lime-glow); color: var(--lime); font-weight: 600; } .admin-tab-badge { font-size: .65rem; } .admin-panel { display: none; } .admin-panel.active { display: block; } .admin-section-label { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);} .admin-search-wrap { flex: 1; max-width: 280px; } .admin-search-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: .85rem; padding: 7px 12px; outline: none;} .admin-search-input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime-glow); } .collaborator-editor-row { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;} /* ───────────────────────────────────────────────────────────── 23. SIDEBAR REDESIGN (collapsible, role-aware, drawer) ───────────────────────────────────────────────────────────── */ .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 8px 12px 16px auto; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; color: var(--text-dim); transition: var(--transition); flex-shrink: 0;} .sidebar-collapse-btn:hover { color: var(--lime); border-color: var(--lime); } .app-layout.sidebar-collapsed { grid-template-columns: 56px 1fr !important; } .sidebar-collapsed .sidebar { width: 56px; overflow: hidden; } .sidebar-collapsed .sidebar-label, .sidebar-collapsed .nav-item span, .sidebar-collapsed .sidebar-footer { display: none; } .sidebar-collapsed .nav-item { justify-content: center; padding: 10px; } .sidebar-collapsed .nav-item svg { opacity: 1; } .sidebar-collapsed .nav-item { position: relative; } .sidebar-collapsed .nav-item:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: .78rem; padding: 4px 10px; border-radius: var(--radius); white-space: nowrap; z-index: 200; pointer-events: none; box-shadow: var(--card-shadow);} .sidebar-footer { margin-top: auto; padding: 14px 0; border-top: 1px solid var(--border);} .nav-item--signout { color: var(--text-dim) !important; } .nav-item--signout:hover { color: var(--red) !important; background: rgba(224,80,80,.08) !important; } /* Mobile nav button (hamburger) */ .mobile-nav-btn { display: none; background: none; border: 1px solid var(--forest-border); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; color: var(--forest-muted); flex-shrink: 0;} .mobile-nav-btn:hover { color: var(--forest-text); border-color: var(--lime); } /* Drawer overlay */ .sidebar-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; } .sidebar-drawer-overlay.open { display: block; } /* Drawer */ .sidebar-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 85vw); background: var(--surface); border-right: 1px solid var(--border); z-index: 201; padding: 0; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow); display: flex; flex-direction: column;} .sidebar-drawer.open { transform: translateX(0); } .sidebar-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;} .sidebar-drawer-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 4px 6px; border-radius: var(--radius);} .sidebar-drawer-close:hover { background: var(--surface2); } .sidebar-drawer .sidebar-section { padding: 0; } .sidebar-drawer .sidebar-footer { margin-top: 0; } /* ───────────────────────────────────────────────────────────── 24. USER CHIP & TOPBAR DROPDOWNS ───────────────────────────────────────────────────────────── */ .user-chip-wrap { position: relative; flex-shrink: 0; } .user-chip-btn { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; background: var(--forest-hover); border: 1px solid var(--forest-border); border-radius: 20px; cursor: pointer; transition: .15s ease; font-family: inherit; color: var(--forest-text);} .user-chip-btn:hover { border-color: var(--lime); background: var(--forest-active); } .user-chip-name { font-size: .82rem; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .user-avatar { width: 32px; height: 32px; background: rgba(126,200,80,0.18); border: 1px solid var(--forest-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--lime);} .user-chip-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35); min-width: 200px; padding: 8px; display: none; flex-direction: column; z-index: 300;} .user-chip-dropdown.open { display: flex; } .udd-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px; text-decoration: none; font-size: .85rem; color: var(--text); transition: .15s ease; cursor: pointer; border: none; background: transparent; font-family: inherit; width: 100%; text-align: left;} .udd-item svg { flex-shrink: 0; } .udd-item:hover { background: var(--surface2); color: var(--lime); } .udd-item.danger:hover { background: rgba(224,80,80,.1); color: #e05050; } .udd-divider { height: 1px; background: var(--border); margin: 4px 0; } /* Topbar grouped nav dropdowns */ .topbar-drop-wrap { position: relative; display: inline-flex; align-items: center; } .topbar-drop-wrap::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px;} .topbar-drop-btn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: none; font-family: inherit; background: transparent; color: var(--forest-muted); font-size: .83rem; font-weight: 500; padding: 6px 12px; border-radius: 6px; transition: .15s ease; line-height: 1;} .topbar-drop-btn:hover, .topbar-drop-wrap.open > .topbar-drop-btn { color: var(--forest-text); background: var(--forest-hover); } .topbar-drop-btn.active { color: var(--lime); background: var(--forest-active); } .topbar-drop-btn svg { transition: transform .17s ease; } .topbar-drop-wrap.open .topbar-drop-btn svg { transform: rotate(180deg); } .topbar-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.35); padding: 6px; z-index: 300; display: none; flex-direction: column; opacity: 0; transition: opacity .15s ease, transform .15s ease;} .topbar-drop-wrap.open .topbar-dropdown { display: flex; opacity: 1; transform: translateX(-50%) translateY(0);} .topbar-dd-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 7px; text-decoration: none; font-size: .83rem; color: var(--text-muted); transition: .15s ease; cursor: pointer; white-space: nowrap;} .topbar-dd-item svg { flex-shrink: 0; opacity: .7; } .topbar-dd-item[href]:hover { background: var(--surface2); color: var(--lime); } .topbar-dd-item[href]:hover svg { opacity: 1; } .topbar-dd-soon { opacity: .4; cursor: default; font-size: .78rem; pointer-events: none; } /* ───────────────────────────────────────────────────────────── 25. ANIMATIONS / KEYFRAMES ───────────────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } } /* ═══════════════════════════════════════════════════════════════ 26. MEDIA QUERIES — ALL BREAKPOINTS CONSOLIDATED HERE Order: largest → smallest to maintain correct cascade ═══════════════════════════════════════════════════════════════ */ /* ── 1100px: public page multi-column grids ── */ @media (max-width: 1100px) { .dashboard-grid, .content-grid, .news-grid { grid-template-columns: 1fr; } } /* ── 920px: landing page stacking ── */ @media (max-width: 920px) { .section-heading, .landing-nav-actions, .reg-toolbar { align-items: start; flex-direction: column; } .reg-summary-grid { grid-template-columns: 1fr; } } /* ── 900px: sidebar collapses, hamburger appears ── */ @media (max-width: 900px) { .app-layout { grid-template-columns: 1fr !important; } .app-layout.sidebar-collapsed { grid-template-columns: 1fr !important; } .sidebar { display: none; } .mobile-nav-btn { display: flex; align-items: center; } .topbar { padding: 0 16px; gap: 8px; } .topbar-nav { display: none; } /* drawer handles nav */ .topbar-logo-text { font-size: 1rem; } .main { padding: 20px 16px; } .login-page { grid-template-columns: 1fr; } .login-left { display: none; } .login-mobile-brand { display: flex; } .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr 1fr; } .atlas-layout { grid-template-columns: 1fr; } .atlas-detail-comparison { grid-template-columns: 1fr; } .atlas-legend { justify-content: flex-start; } .atlas-map-frame, #atlas-map { height: 420px; min-height: 420px; } .atlas-detail-anchor { display: block; } .admin-tab span { display: none; } /* icon-only on tablet */ .admin-panel .card-header { flex-direction: column; align-items: flex-start; gap: 10px; } .admin-search-wrap { max-width: 100%; width: 100%; } } /* ── 768px: topbar shrinks further ── */ @media (max-width: 768px) { .topbar { padding: 0 12px; gap: 6px; } .topbar-logo-text { display: none; } /* icon-only logo */ .topbar-theme-btn { padding: 4px 6px; font-size: .8rem; } .user-chip-name { display: none; } /* avatar-only chip */ .user-chip-btn { padding: 4px; border-radius: 50%; } .table-scroll-hint { display: block; } } /* ── 720px: leaderboard / reg-row stacking ── */ @media (max-width: 720px) { .submission-jumpbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .leaderboard-row, .reg-row { grid-template-columns: 1fr; text-align: left; } .reg-row { display: grid; } } /* ── 600px: further stacking ── */ @media (max-width: 600px) { .form-row.cols-2 { grid-template-columns: 1fr; } .wizard-step span { display: none; } .wizard-step { padding: 12px 10px; } .admin-tab { padding: 8px 10px; font-size: .78rem; } .admin-tab span { display: inline; } /* restore labels — tabs wrap */ } /* ── 480px: smallest screens ── */ @media (max-width: 480px) { .form-row.cols-2, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .page-title { font-size: 1.4rem; } .main { padding: 18px 14px; } .wizard-step span { display: none; } .wizard-step { padding: 12px 10px; } } /* ── Touch devices: larger tap targets (WCAG / Apple HIG) ── */ @media (pointer: coarse) { .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .btn-sm { min-height: 36px; } .nav-item { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } select, input:not([type=checkbox]):not([type=radio]) { min-height: 44px; font-size: 16px; } textarea { font-size: 16px; } input[type=checkbox] { width: 20px; height: 20px; } tbody tr { min-height: 48px; } tbody td { padding: 14px; } } /* ── Safe area insets (iPhone notch / home bar) ── */ @supports (padding: env(safe-area-inset-top)) { .topbar { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); } @media (display-mode: standalone) { .topbar { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); } .app-layout { grid-template-rows: calc(56px + env(safe-area-inset-top)) 1fr; } .sidebar { padding-bottom: env(safe-area-inset-bottom, 16px); } .main { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); } html { overscroll-behavior-y: none; } } } /* ── Hide-on-scroll topbar with peek strip ── */ /* The topbar slides almost all the way up, leaving a 6px forest-green strip. A compact nav strip reappears on hover so users can get back to nav. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform .28s ease, box-shadow .28s ease; will-change: transform;} .topbar.hidden { /* Slide up all but a 6px strip — enough to show the green edge */ transform: translateY(calc(-100% + 6px)); box-shadow: 0 1px 6px rgba(0,0,0,0.25);} /* On hover of the strip, the full topbar peeks back into view */ .topbar.hidden:hover { transform: translateY(0); box-shadow: 0 2px 12px rgba(0,0,0,0.3);} /* ── Peek strip indicator line ── */ .topbar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lime) 0%, transparent 100%); opacity: 0; transition: opacity .2s ease;} .topbar.hidden::after { opacity: 1;} /* Compensate for fixed topbar */ .app-layout { padding-top: 56px;} .main { height: calc(100vh - 56px);} .landing-image { width: 100%; max-width: 1200px; height: auto; display: block; margin: 0 auto; border-radius: 12px;} /* medium widget */ .medium_update { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; place-items: center;} /* .atlas-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } */ /* .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } */ .news-card { background: var(--panel-fill, #111); border: 1px solid var(--border, #222); border-radius: 12px; padding: 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer;} .news-card:hover { transform: translateY(-4px); border-color: var(--accent, #00b894);} .news-date { display: inline-block; font-size: 0.85rem; margin-bottom: 0.75rem; opacity: 0.7;} .news-card h3 { margin-bottom: 0.75rem; line-height: 1.4;} .news-card p { line-height: 1.6; opacity: 0.9;} .news-link { display: inline-block; margin-top: 1rem; font-weight: 600;} .news-error { opacity: 0.7; padding: 1rem 0;} .skeleton-card { opacity: 0.5; pointer-events: none;} .skeleton-text { background: #222; color: transparent; border-radius: 4px;} #rotating-ads { width: 100%;} .sponsored-ad-card { display: block; text-decoration: none; color: inherit; background: var(--panel-bg-soft, #111); border: 1px solid var(--border, #222); border-radius: 14px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;} .sponsored-ad-card:hover { transform: translateY(-4px); border-color: var(--accent, #00b894);} .sponsored-ad-media-wrap { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-bg-soft, #111) } .sponsored-ad-media { width: 100%; height: 100%; object-fit: cover; display: block;} .sponsored-ad-content { padding: 1rem;} .sponsored-label { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin-bottom: 0.6rem; color: var(--text, #eaeeeb57);} .sponsored-ad-title { margin-bottom: 0.45rem; line-height: 1.3; color: var(--text, #eaeeeb57);} .sponsored-ad-subtitle { font-weight: 600; margin-bottom: 0.75rem; opacity: 0.9; color: var(--text, #eaeeeb57);} .sponsored-ad-body { line-height: 1.6; margin-bottom: 0.75rem; opacity: 0.85; color: var(--text-muted, #eaeeeb57);} .sponsored-ad-description { font-size: 0.92rem; opacity: 0.7; line-height: 1.5; margin-bottom: 1rem; color: var(--text-dim, #eaeeeb57);} .sponsored-ad-cta { display: inline-block; font-weight: 600; color: var(--text-muted, #eaeeeb57);} /* Homepage extracted from index.html */ /* ── CAROUSEL ─────────────────────────────────────── */ .container { max-width: 1400px; /* Limits the width */ margin-left: auto; /* Centers the container */ margin-right: auto; /* Centers the container */ padding: 0 40px; /* Optional: prevents content from touching screen edges on mobile */ width: 100%; /* Ensures it stays responsive on smaller screens */ } .landing-carousel { position: relative; width: 100%; background: #0b1a14; overflow: hidden;} .carousel-track-wrap { overflow: hidden; width: 100%;} .carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform;} .carousel-slide { flex: 0 0 100%; min-width: 0; height: 420px; position: relative; display: flex; align-items: flex-end;} .carousel-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;} .carousel-slide-overlay { position: relative; z-index: 2; padding: 2rem 3rem; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%); width: 100%;} .carousel-slide-caption { color: rgba(255,255,255,0.92); font-size: 0.85rem; letter-spacing: 0.03em; font-family: var(--font-serif); font-style: italic;} .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background 0.2s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);} .carousel-arrow:hover { background: rgba(255,255,255,0.28); } .carousel-arrow.prev { left: 1.25rem; } .carousel-arrow.next { right: 1.25rem; } .carousel-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10;} .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; transition: background 0.2s;} .carousel-dot.active { background: #fff; } /* ── TWO-PANE LAYOUT ──────────────────────────────── */ .two-pane-shell { display: flex; min-height: 100vh; position: relative;} .pane-divider { width: 1px; background: var(--border, #d0cfc8); flex-shrink: 0; align-self: stretch;} .pane-left { flex: 1 1 0; min-width: 0; padding: 2.5rem 2.5rem 2.5rem 2rem; display: flex; flex-direction: column; gap: 2.5rem;} .pane-right { flex: 0 0 340px; width: 340px; padding: 2rem 1.75rem 2rem 1.75rem; display: flex; flex-direction: column; gap: 0;} /* ── METRICS GRID ─────────────────────────────────── */ .metrics-header { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #888); font-weight: 600; margin-bottom: 0.75rem;} .metrics-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.5rem;} .metric-cell { background: var(--panel-bg-soft, #f5f4ef); border-radius: 8px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 4px;} .metric-cell .metric-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted, #888); font-weight: 600;} .metric-cell .metric-value { font-size: 1.65rem; font-weight: 700; color: var(--text, #1a1a17); line-height: 1.1; font-family: var(--font-serif);} .metric-cell .metric-sub { font-size: 0.7rem; color: var(--text-muted, #888); line-height: 1.3;} /* ── HORIZONTAL DIVIDER ───────────────────────────── */ .h-rule { border: none; border-top: 1px solid var(--border, #dddbd2); margin: 1.25rem 0;} /* ── LEADERBOARD ──────────────────────────────────── */ .right-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #888); font-weight: 600; margin-bottom: 0.75rem;} .leaderboard-list { display: flex; flex-direction: column; gap: 8px;} .lb-row { display: flex; align-items: center; gap: 10px; padding: 0.5rem 0; border-bottom: 0.5px solid var(--border-tertiary, rgba(0,0,0,0.08));} .lb-rank { font-size: 0.75rem; font-weight: 700; color: var(--text-muted, #999); width: 18px; text-align: right; flex-shrink: 0;} .lb-rank.gold { color: #c89a22; } .lb-rank.silver { color: #7d8a93; } .lb-rank.bronze { color: #9b6b4a; } .lb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-bg-soft, #e6f1fb); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--text-dim, #185fa5); flex-shrink: 0; text-transform: uppercase;} .lb-name { flex: 1; font-size: 0.82rem; font-weight: 500; color: var(--text, #1a1a17);} .lb-score { font-size: 0.78rem; font-weight: 600; color: var(--text-muted, #888);} .lb-opt-in { display: inline-block; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-dim, #185fa5); text-decoration: none;} .lb-opt-in:hover { text-decoration: underline; } /* ── ADVERTISEMENT ────────────────────────────────── */ .ad-block { border: 1px dashed var(--border, #c8c6bc); border-radius: 10px; padding: 1.1rem 1rem; background: var(--panel-bg-soft, #f8f7f2); display: flex; flex-direction: column; gap: 6px;} .ad-eyebrow { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #aaa); font-weight: 600;} .ad-title-text { font-size: 0.9rem; font-weight: 600; color: var(--text, #1a1a17);} .ad-body-text { font-size: 0.78rem; color: var(--text-muted, #888); line-height: 1.5;} .ad-link { font-size: 0.75rem; color: var(--text-dim, #185fa5); text-decoration: none; margin-top: 4px;} .ad-link:hover { text-decoration: underline; } /* ── LEFT PANE PANELS ─────────────────────────────── */ .panel-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #888); font-weight: 600; margin-bottom: 0.6rem;} .panel-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem;} .panel-link-sm { font-size: 0.78rem; color: var(--text-dim, #185fa5); text-decoration: none;} .panel-link-sm:hover { text-decoration: underline; } /* Medium Articles */ .medium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;} .medium-card { background: var(--panel-bg, #fff); border: 0.5px solid var(--border-tertiary, rgba(0,0,0,0.1)); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;} .medium-card-img { width: 100%; height: 130px; object-fit: cover; background: var(--panel-bg-soft, #f0ede6); display: block;} .medium-card-img-placeholder { width: 100%; height: 130px; background: linear-gradient(135deg, #1d4731 0%, #0b2b1f 100%); display: flex; align-items: center; justify-content: center;} .medium-card-img-placeholder svg { opacity: 0.2;} .medium-card-body { padding: 0.85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 5px;} .medium-card-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #888); font-weight: 600;} .medium-card-title { font-size: 0.88rem; font-weight: 600; color: var(--text, #1a1a17); line-height: 1.4;} .medium-card-title a { color: inherit; text-decoration: none;} .medium-card-title a:hover { text-decoration: underline; } .medium-card-meta { font-size: 0.72rem; color: var(--text-muted, #999); margin-top: auto;} /* Regulatory Intelligence */ .reg-toxin-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap;} .reg-toxin-bar label { font-size: 0.78rem; color: var(--text-muted, #888);} .reg-toxin-bar select { font-size: 0.82rem; padding: 4px 10px; border: 1px solid var(--border, #ccc); border-radius: 6px; background: var(--panel-bg, #fff); color: var(--text, #111); cursor: pointer;} .reg-stats-row { display: flex; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap;} .reg-stat-pill { flex: 1; min-width: 90px; background: var(--panel-bg-soft, #f5f4ef); border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.72rem; color: var(--text-muted, #888); display: flex; flex-direction: column; gap: 3px;} .reg-stat-pill strong { font-size: 1.1rem; color: var(--text, #111); font-weight: 700;} .reg-entry-list { display: flex; flex-direction: column; gap: 0;} .reg-entry { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 0; border-bottom: 0.5px solid var(--border-tertiary, rgba(0,0,0,0.07)); gap: 8px;} .reg-entry-country { font-size: 0.82rem; font-weight: 500; color: var(--text, #111);} .reg-entry-commodity { font-size: 0.76rem; color: var(--text-muted, #888); flex: 1; text-align: center;} .reg-entry-limit { font-size: 0.82rem; font-weight: 600; color: var(--text-dim, #185fa5); text-align: right; white-space: nowrap;} .reg-table-wrap { width: 100%; overflow-x: auto;} .reg-intel-table { width: 100%; border-collapse: collapse; font-size: 0.8rem;} .reg-intel-table th { text-align: left; padding: 7px 8px; color: var(--text-muted, var(--text-muted)); border-bottom: 1px solid var(--border, var(--border)); white-space: nowrap;} .reg-intel-table td { padding: 8px; border-bottom: 0.5px solid var(--border-tertiary, var(--border)); vertical-align: top;} .reg-intel-table tr:last-child td { border-bottom: none;} /* Published Briefs */ .briefs-list { display: flex; flex-direction: column; gap: 0;} .brief-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 0.9rem 0; border-bottom: 0.5px solid var(--border-tertiary, rgba(0,0,0,0.07));} .brief-row:last-child { border-bottom: none; } .brief-title { font-size: 0.9rem; font-weight: 600; color: var(--text, #1a1a17); line-height: 1.4; cursor: pointer;} .brief-title:hover { color: var(--lime, #185fa5); } .brief-meta { font-size: 0.72rem; color: var(--text-muted, #888); margin-top: 3px;} .brief-tag { font-size: 0.66rem; padding: 3px 8px; background: var(--panel-bg-soft, #e6f1fb); color: var(--text-dim, #185fa5); border-radius: 4px; font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; align-self: flex-start;} /* ── COLLABORATORS ─────────────────────────────────── */ .collaborators-section { padding: 2.5rem 2rem; border-top: 1px solid var(--border, #dddbd2);} .collab-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem;} .collab-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #888); font-weight: 600;} .collab-note { font-size: 0.8rem; color: var(--text-muted, #aaa);} .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;} .logo-slot { border: 1px dashed var(--border, #eeede718); border-radius: 8px; padding: 1.1rem 0.75rem; text-align: center; font-size: 0.75rem; color: var(--text-muted, #aaa); background: var(--panel-bg-soft, #f8f7f21e); min-height: 56px; display: flex; align-items: center; justify-content: center;} /* ── RESPONSIVE ────────────────────────────────────── */ @media (max-width: 860px) { .two-pane-shell { flex-direction: column; } .pane-divider { width: 100%; height: 1px; } .pane-right { width: 100%; flex: none; border-top: 1px solid var(--border, #dddbd2); } .pane-left { padding: 1.5rem 1.25rem; } .pane-right { padding: 1.5rem 1.25rem; } .carousel-slide { height: 260px; } } @media (max-width: 560px) { .carousel-slide { height: 200px; } .medium-grid { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────────────── Review Checklist styles — append to css/styles.css ───────────────────────────────────────────────────────────────────────────── */ .cl-layer { margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 4px; } .cl-layer-hdr { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .cl-pts { font-family: var(--font-mono, monospace); font-size: .75rem; color: var(--lime); font-weight: 700; } .cl-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; cursor: pointer; font-size: .84rem; color: var(--text); line-height: 1.4; border-bottom: 1px solid transparent; } .cl-row:hover { color: var(--text); opacity: .85; } .cl-row input[type=checkbox] { flex-shrink: 0; accent-color: var(--lime); width: 14px; height: 14px; margin-top: 2px; } .cl-pt-tag { margin-left: auto; white-space: nowrap; font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(126, 200, 80, .1); color: var(--lime); font-family: var(--font-mono, monospace); } .cl-agg { opacity: .85; } /* ───────────────────────────────────────────────────────────────────────────── Announcement Banner — append to styles.css ───────────────────────────────────────────────────────────────────────────── */ :root { --mab-height: 0px; /* set dynamically by JS after render */ } #mta-announce-banner { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: var(--surface, #161b12); border-bottom: 1px solid var(--border, rgba(255,255,255,.07)); box-shadow: 0 2px 8px rgba(0,0,0,.18); overflow: hidden; max-height: 200px; transition: max-height .3s ease, opacity .3s ease; z-index: 120; /* above page content, below modals (500) */ } #mta-announce-banner.mab-collapsing { opacity: 0; transition: max-height .3s ease, opacity .25s ease; } .mab-inner { display: flex; align-items: center; gap: 10px; padding: 9px 20px; flex-wrap: wrap; min-height: 44px; } /* ── Visit pill ──────────────────────────────────────────────────────────── */ .mab-visit-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; background: var(--lime-glow, rgba(163,230,53,.1)); border: 1px solid rgba(163,230,53,.2); color: var(--lime, #a3e635); flex-shrink: 0; white-space: nowrap; } .mab-visit-count { font-family: var(--font-mono, monospace); font-size: .8rem; font-weight: 700; line-height: 1; } .mab-visit-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; opacity: .75; } /* ── Divider ─────────────────────────────────────────────────────────────── */ .mab-divider { width: 1px; height: 18px; background: var(--border, rgba(255,255,255,.1)); flex-shrink: 0; align-self: center; } /* ── Text content ────────────────────────────────────────────────────────── */ .mab-eyebrow { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--lime, #a3e635); flex-shrink: 0; opacity: .8; } .mab-headline { font-size: .83rem; font-weight: 700; color: var(--text, #e8eae4); flex-shrink: 0; } .mab-body { font-size: .8rem; color: var(--text-muted, #888); line-height: 1.4; flex: 1; min-width: 160px; } /* ── CTA button ──────────────────────────────────────────────────────────── */ .mab-cta { flex-shrink: 0; white-space: nowrap; } /* ── Close button ────────────────────────────────────────────────────────── */ .mab-close { flex-shrink: 0; margin-left: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 4px; color: var(--text-muted, #888); cursor: pointer; opacity: .45; transition: opacity .15s, background .15s; padding: 0; } .mab-close:hover { opacity: 1; background: var(--surface2, rgba(255,255,255,.06)); color: var(--text, #e8eae4); } /* Offset all page content so the fixed banner doesn't cover it. --mab-height is set by JS after the banner renders; 0px when banner is absent. */ body { padding-top: var(--mab-height, 0px); transition: padding-top .3s ease; } /* Internal pages: topbar is also fixed — push it down by banner height */ .topbar { top: var(--mab-height, 0px); transition: top .3s ease; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 700px) { .mab-inner { padding: 8px 14px; gap: 7px; } .mab-divider { display: none; } .mab-eyebrow { display: none; } .mab-body { display: none; } .mab-headline { font-size: .8rem; } .mab-visit-pill { order: -1; } }