@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); /* ============================================================================= style.css — Dual-Use Navigator "Console" theme system. Three modes via [data-theme] on : sepia (default), light, dark. All colors are CSS variables — swap the token block and the whole UI recolors. No framework. ============================================================================= */ /* ---------- Theme tokens ---------- */ :root, [data-theme="sepia"] { --bg:#F1E9DA; --panel:#FBF6EB; --panel-2:#F6EFDF; --field:#FFFCF5; --border:#E6DBC5; --border-strong:#D3C4A7; --text:#2A2114; --text-2:#6E6047; --text-3:#9A8A6D; --accent:#2C6E92; --accent-ink:#FFFFFF; --accent-soft-bg:#E7EDF0; --accent-border:#C9D8DF; --brand-a:#3A82A6; --brand-b:#2C6E92; --us:#2C6E92; --us-bg:#E5EDF1; --eu:#9A6B1E; --eu-bg:#F1E6CD; --au:#4A7A52; --au-bg:#E6EEDD; --warn:#9A6B1E; --warn-bg:#F2E7CD; --warn-text:#6E531C; --hero-a:#ECE2CE; --hero-b:#F6EFDF; --map-a:#EBE1CB; --map-b:#F1EAD7; --shadow: 0 1px 2px rgba(42,33,20,0.05), 0 10px 28px -18px rgba(42,33,20,0.30); color-scheme: light; } [data-theme="light"] { --bg:#F4F6F9; --panel:#FFFFFF; --panel-2:#FFFFFF; --field:#FFFFFF; --border:#E4E8EE; --border-strong:#CBD4DF; --text:#0F1722; --text-2:#4A576A; --text-3:#7A8696; --accent:#1E73E6; --accent-ink:#FFFFFF; --accent-soft-bg:#EAF1FC; --accent-border:#CFE0F8; --brand-a:#2E86F0; --brand-b:#1559C0; --us:#1E73E6; --us-bg:#EAF1FC; --eu:#A86E12; --eu-bg:#F7EDD6; --au:#2E8B57; --au-bg:#E6F4EC; --warn:#C8922A; --warn-bg:#FBF3E0; --warn-text:#7A5E1E; --hero-a:#E9F1FD; --hero-b:#F5F9FE; --map-a:#E8ECF2; --map-b:#F1F4F8; --shadow: 0 1px 2px rgba(15,23,34,0.04), 0 10px 30px -18px rgba(15,23,34,0.22); color-scheme: light; } [data-theme="dark"] { --bg:#0D1014; --panel:#11161C; --panel-2:#151B22; --field:#0D1014; --border:#1B212A; --border-strong:#2A3340; --text:#F3F6FA; --text-2:#9AA6B5; --text-3:#6E7A8A; --accent:#46B4FF; --accent-ink:#06121F; --accent-soft-bg:#0F1B27; --accent-border:#1F3247; --brand-a:#46B4FF; --brand-b:#2C7FE0; --us:#5B9DFF; --us-bg:#142233; --eu:#E3AE45; --eu-bg:#241E0E; --au:#5BC57E; --au-bg:#10241A; --warn:#E3AE45; --warn-bg:#231C0C; --warn-text:#D8B86A; --hero-a:#13202E; --hero-b:#101620; --map-a:#0F141A; --map-b:#121821; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 14px 34px -18px rgba(0,0,0,0.7); color-scheme: dark; } /* ---------- Reset ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; line-height: 1.6; color: var(--text-2); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } ::selection { background: var(--accent); color: var(--accent-ink); } a { color: var(--accent); } /* ---------- Navigation ---------- */ nav { background: var(--panel); border-bottom: 1px solid var(--border); padding: 0.85rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; transition: background-color .25s ease, border-color .25s ease; } nav .nav-brand { color: var(--text); text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.6rem; } nav .nav-brand::before { content: ''; width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); flex: none; } .nav-right { display: flex; align-items: center; gap: 1.5rem; } nav .nav-links { display: flex; gap: 1.5rem; } nav .nav-links a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding-bottom: 2px; } nav .nav-links a:hover { color: var(--text); } nav .nav-links a.active { color: var(--accent); border-bottom: 2px solid var(--accent); } /* ---------- Theme toggle (added to base.html) ---------- */ .theme-toggle { display: inline-flex; gap: 3px; padding: 3px; background: var(--field); border: 1px solid var(--border); border-radius: 10px; } .theme-btn { padding: 5px 13px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-3); font-family: 'IBM Plex Sans', sans-serif; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all .15s ease; } .theme-btn:hover { color: var(--text); } .theme-btn.active { background: var(--accent-soft-bg); border-color: var(--accent-border); color: var(--accent); } /* ---------- Main content ---------- */ main { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.75rem; } h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 2rem; letter-spacing: -0.02em; color: var(--text); margin-bottom: 0.35rem; } .subtitle { color: var(--text-2); margin-bottom: 1.75rem; font-size: 1.02rem; } /* ---------- Stats (index) ---------- */ .stats { display: flex; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; } .stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 1.25rem 1.4rem; text-align: left; flex: 1; min-width: 140px; box-shadow: var(--shadow); transition: background-color .25s ease, border-color .25s ease; } /* First card = hero figure (Total entries) */ .stat-card:first-child { flex: 1.6 1 220px; background: linear-gradient(150deg, var(--hero-a), var(--hero-b)); border-color: var(--accent-border); } /* Jurisdiction accents: US / EU / AU = cards 2,3,4 */ .stat-card:nth-child(2) { border-top: 2px solid var(--us); } .stat-card:nth-child(3) { border-top: 2px solid var(--eu); } .stat-card:nth-child(4) { border-top: 2px solid var(--au); } .stat-number { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 600; color: var(--text); line-height: 1; } .stat-card:first-child .stat-number { font-size: 2.9rem; } .stat-label { display: block; font-size: 0.78rem; color: var(--text-3); margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- Action buttons ---------- */ .actions { display: flex; gap: 0.85rem; margin-bottom: 2rem; flex-wrap: wrap; } .action-button { display: inline-flex; align-items: center; padding: 0.8rem 1.6rem; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); color: var(--accent-ink); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 0.95rem; box-shadow: var(--shadow); } .action-button:hover { filter: brightness(1.05); } .action-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; } .action-secondary:hover { background: var(--accent-soft-bg); border-color: var(--accent-border); filter: none; } /* ---------- Info box ---------- */ .info-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; box-shadow: var(--shadow); } .info-box h3 { margin: 1.4rem 0 0.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .info-box h3:first-child { margin-top: 0; } .info-box ul { margin-left: 1.5rem; margin-bottom: 0.5rem; color: var(--text-2); } .info-box p { color: var(--text-2); } .info-box strong { color: var(--text); } /* ---------- Forms ---------- */ .compare-form, .search-form { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; } .form-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: flex-end; } .form-group { display: flex; flex-direction: column; min-width: 150px; flex: 1; } .form-group-wide { flex: 2; } label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--text-3); } input[type="text"], select { padding: 0.6rem 0.75rem; background: var(--field); border: 1px solid var(--border-strong); border-radius: 7px; font-size: 0.95rem; font-family: inherit; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } #code, input[name="q"] { font-family: 'IBM Plex Mono', monospace; } input[type="text"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-bg); } input::placeholder { color: var(--text-3); } button[type="submit"] { padding: 0.65rem 1.7rem; background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); color: var(--accent-ink); border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; } button[type="submit"]:hover { filter: brightness(1.05); } /* ---------- Comparison layout ---------- */ .comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } @media (max-width: 768px) { .comparison { grid-template-columns: 1fr; } } .entry-card { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: 12px; padding: 1.5rem; box-shadow: var(--shadow); } /* Color the card's top edge by the jurisdiction it contains */ .entry-card:has(.entry-jurisdiction.us) { border-top-color: var(--us); } .entry-card:has(.entry-jurisdiction.eu) { border-top-color: var(--eu); } .entry-card:has(.entry-jurisdiction.au) { border-top-color: var(--au); } .entry-card h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.85rem; padding-bottom: 0; border-bottom: none; } .entry-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; } .entry-code { font-family: 'IBM Plex Mono', monospace; font-size: 1.4rem; font-weight: 600; color: var(--text); } .entry-jurisdiction { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .entry-jurisdiction.us { background: var(--us-bg); color: var(--us); } .entry-jurisdiction.eu { background: var(--eu-bg); color: var(--eu); } .entry-jurisdiction.au { background: var(--au-bg); color: var(--au); } .entry-label { margin-bottom: 1rem; color: var(--text-2); font-size: 0.95rem; } /* ---------- Entry detail tables ---------- */ .entry-details { width: 100%; margin-bottom: 1rem; font-size: 0.88rem; } .entry-details th { text-align: left; padding: 0.3rem 0.75rem 0.3rem 0; color: var(--text-3); width: 120px; vertical-align: top; font-weight: 600; } .entry-details td { padding: 0.3rem 0; color: var(--text-2); } .entry-details a { color: var(--accent); } /* ---------- Field blocks ---------- */ .field-block { margin-bottom: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); } .field-block h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.55rem; } .field-block ul { margin-left: 1.25rem; font-size: 0.88rem; color: var(--text-2); } .field-block p { font-size: 0.9rem; color: var(--text-2); } .tag-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag { display: inline-block; padding: 0.2rem 0.5rem; background: var(--accent-soft-bg); color: var(--accent); border-radius: 4px; font-size: 0.78rem; font-weight: 600; font-family: 'IBM Plex Mono', monospace; } .tag-small { font-size: 0.68rem; padding: 0.12rem 0.4rem; } /* ---------- Data tables (country chart) ---------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin-top: 0.25rem; } .data-table th, .data-table td { padding: 0.4rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); color: var(--text-2); } .data-table th { color: var(--text-3); font-weight: 600; } /* ---------- Items list ---------- */ .items-list li { margin-bottom: 0.25rem; font-size: 0.84rem; color: var(--text-2); overflow-wrap: break-word; } .more-items { color: var(--text-3); font-style: italic; list-style: none; margin-left: -1.25rem; } /* ---------- No entry / coverage gap ---------- */ .no-entry { padding: 1.75rem; text-align: center; color: var(--text-3); background: var(--panel-2); border: 1px dashed var(--border-strong); border-radius: 8px; } .no-entry strong { color: var(--text-2); font-family: 'IBM Plex Mono', monospace; } /* ---------- Info note ---------- */ .info-note { margin-top: 1rem; padding: 0.75rem 0.9rem; background: var(--warn-bg); border-left: 3px solid var(--warn); border-radius: 0 6px 6px 0; font-size: 0.83rem; color: var(--warn-text); } /* ---------- Hierarchy path ---------- */ .hierarchy-path { font-family: 'IBM Plex Mono', monospace; font-size: 0.83rem; color: var(--text-2); } /* ---------- Regime info block ---------- */ .regime-info { background: var(--accent-soft-bg); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; } .regime-info h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .regime-info p { font-size: 0.88rem; color: var(--text-2); margin-bottom: 0.25rem; } .regime-info strong { color: var(--text); } /* ---------- Coverage warnings ---------- */ .warnings { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .warning-item { padding: 0.6rem 0.85rem; background: var(--warn-bg); border-left: 3px solid var(--warn); border-radius: 0 6px 6px 0; font-size: 0.86rem; color: var(--warn-text); } /* ---------- EUGEA authorisation items ---------- */ .eugea-item { margin-bottom: 0.75rem; padding: 0.6rem 0.85rem; background: var(--panel-2); border-radius: 6px; font-size: 0.86rem; border-left: 3px solid var(--au); color: var(--text-2); } .eugea-item strong { font-family: 'IBM Plex Mono', monospace; color: var(--text); } .eugea-excluded { background: var(--warn-bg); border-left-color: var(--warn); } .eugea-partial { background: var(--warn-bg); border-left-color: var(--warn); } .eugea-destinations { font-size: 0.8rem; color: var(--text-3); margin: 0.3rem 0 0; } .eugea-note-excluded { color: var(--warn-text); font-weight: 600; font-size: 0.8rem; margin-top: 0.3rem; } .eugea-note-partial { color: var(--warn-text); font-size: 0.8rem; margin-top: 0.3rem; } /* ---------- Search results ---------- */ .results-header { margin-bottom: 1rem; color: var(--text-2); } .results-header strong { color: var(--text); } .results-list { display: flex; flex-direction: column; gap: 0.6rem; } .result-item { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; box-shadow: var(--shadow); transition: border-color .15s ease; } .result-item:hover { border-color: var(--border-strong); } .result-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; } .result-code { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 1rem; color: var(--accent); text-decoration: none; } .result-code:hover { text-decoration: underline; } .result-label { font-size: 0.9rem; color: var(--text-2); margin-bottom: 0.4rem; } .no-results { padding: 2rem; text-align: center; color: var(--text-3); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; } /* ---------- Source links ---------- */ .source-link { font-size: 0.8rem; color: var(--text-3); text-decoration: none; } .source-link:hover { color: var(--accent); text-decoration: underline; } /* ---------- Interactive map ---------- */ .map-container { margin-bottom: 1.5rem; } #map { height: 380px; width: 100%; max-width: 1200px; border: 1px solid var(--border); border-radius: 10px; background: repeating-linear-gradient(135deg, var(--map-a), var(--map-a) 11px, var(--map-b) 11px, var(--map-b) 22px); } .map-hint { font-size: 0.8rem; color: var(--text-3); margin-top: 0.4rem; } .map-tooltip { font-size: 0.8rem; padding: 4px 8px; } /* ---------- Regime toggle controls ---------- */ .regime-toggles { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.65rem; flex-wrap: wrap; } .regime-toggles-label { font-size: 0.78rem; color: var(--text-3); font-weight: 600; margin-right: 0.25rem; } .regime-toggle-btn { padding: 0.3rem 0.7rem; font-size: 0.76rem; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--field); color: var(--text-2); cursor: pointer; font-weight: 500; font-family: inherit; transition: all .15s ease; } .regime-toggle-btn:hover { background: var(--accent-soft-bg); color: var(--accent); } .regime-toggle-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .regime-legend { font-size: 0.76rem; color: var(--accent); font-weight: 500; margin-top: 0.4rem; font-family: 'IBM Plex Mono', monospace; } /* ---------- Footer ---------- */ footer { max-width: 1200px; margin: 2.5rem auto 0; padding: 1.5rem 1.75rem 2.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-3); } footer a { color: var(--text-2); } footer a:hover { color: var(--accent); } @media (max-width: 768px) { #map { height: 250px; } h1 { font-size: 1.6rem; } .nav-right { gap: 0.75rem; width: 100%; justify-content: space-between; } }