:root { /* Palette (dark first) */ --color-bg: #0d1117; --color-bg-alt: #161b22; --color-surface: #1e2530; --color-surface-alt: #25303b; --color-border: #2d3742; --color-border-accent: #3b82f6; --color-accent: #3b82f6; --color-accent-hover: #2563eb; --color-accent-soft: rgba(59,130,246,.14); --color-danger: #ef4444; --color-warn: #f59e0b; --color-ok: #10b981; --color-info: #0ea5e9; --color-text: #f1f5f9; --color-text-dim: #94a3b8; --color-focus-ring: 0 0 0 3px rgba(59,130,246,.4); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-size-title: 22px; --font-size-heading: 16px; --font-size-subheading: 14px; --font-size-body: 14px; --font-size-body-sm: 13px; --font-size-caption: 12px; --font-size-micro: 11px; /* Radii */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* Spacing Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.38); --shadow-lg: 0 8px 28px rgba(0,0,0,.45); /* Transitions */ --ease-standard: cubic-bezier(.4,0,.2,1); --transition-fast: 120ms var(--ease-standard); --transition: 180ms var(--ease-standard); } /* Light theme overrides when [data-theme="light"] present on html */ html[data-theme="light"] { --color-bg: #f5f7fb; --color-bg-alt: #eef1f6; --color-surface: #ffffff; --color-surface-alt: #f1f5f9; --color-border: #d1dae3; --color-border-accent: #3b82f6; --color-text: #1e2935; --color-text-dim: #64748b; --color-accent-soft: rgba(59,130,246,.10); } /* Dark theme explicit (for completeness) */ /* Smooth theme transitions (activated after initial paint by adding .theme-animate to ) */ html.theme-animate body, html.theme-animate .topbar, html.theme-animate .chip, html.theme-animate .user-menu-panel, html.theme-animate .table, html.theme-animate button, html.theme-animate input, html.theme-animate select, html.theme-animate .card, html.theme-animate .status-badge, html.theme-animate .progress, html.theme-animate .toast { transition: background-color var(--transition), color var(--transition), border-color var(--transition), fill var(--transition), stroke var(--transition); } @import url('./tokens.css'); * { box-sizing: border-box; } html, body { height:100%; } body { margin:0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing:antialiased; } /* Skip link visible on focus */ .skip-link:focus { position:static; width:auto; height:auto; padding:8px 14px; background:var(--color-accent); color:#fff; z-index:200; display:inline-block; } /* Layout */ .topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-6); background:linear-gradient(60deg,var(--color-bg-alt),var(--color-bg)); border-bottom:1px solid var(--color-border); backdrop-filter:blur(6px); } .topbar__left, .topbar__right { display:flex; align-items:center; gap:var(--space-3); } .brand { font-weight:600; letter-spacing:.5px; font-size:15px; display:inline-flex; align-items:center; gap:6px; } .brand svg { width:18px; height:18px; color:var(--color-accent); } .nav-links a { position:relative; font:500 13px/1 var(--font-sans); padding:8px 10px; color:var(--color-text-dim); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition-fast); } .nav-links a:hover { color:var(--color-text); background:var(--color-bg-alt); } .nav-links a.active { color:var(--color-accent); background:var(--color-accent-soft); } .page { max-width:1180px; margin:0 auto; padding: var(--space-6) var(--space-6) 120px; } /* Chips */ .chip { display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--font-sans); padding:4px 10px; border-radius:var(--radius-pill); background:var(--color-bg-alt); color:var(--color-text-dim); letter-spacing:.5px; text-transform:uppercase; } .chip-plan { background: var(--color-accent-soft); color: var(--color-accent); } /* Buttons */ .button, button.button { --_bg:var(--color-accent); --_bg-hover:var(--color-accent-hover); --_color:#fff; --_border:var(--color-accent); font:500 13px/1 var(--font-sans); padding:10px 16px; border-radius:var(--radius-md); border:1px solid var(--_border); background:var(--_bg); color:var(--_color); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:var(--transition-fast); text-decoration:none; } .button:hover { background:var(--_bg-hover); } .button:focus-visible { outline:none; box-shadow: var(--color-focus-ring); } .button.ghost { --_bg:var(--color-accent-soft); --_bg-hover:rgba(59,130,246,.22); --_color:var(--color-accent); --_border:transparent; } .button.danger { --_bg:var(--color-danger); --_bg-hover:#f87171; --_border:var(--color-danger); } .button.small { padding:6px 12px; font-size:12px; } /* Card */ .card-grid { display:grid; gap: var(--space-4); grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .card { background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); position:relative; transition: var(--transition); } .card:hover { border-color: var(--color-border-accent); box-shadow: var(--shadow-sm); } .card h3 { margin:0; font-size:15px; font-weight:600; } .card-meta { font-size:12px; color: var(--color-text-dim); display:flex; gap:12px; flex-wrap:wrap; } /* Table polish */ .table-wrap { border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:auto; background:var(--color-surface); } table { width:100%; border-collapse:collapse; font-size:13px; } th { text-align:left; font-weight:600; font-size:11px; letter-spacing:.5px; text-transform:uppercase; background:var(--color-surface-alt); position:sticky; top:0; backdrop-filter:blur(3px); z-index:2; } th, td { padding:10px 12px; border-bottom:1px solid var(--color-border); vertical-align:top; } tbody tr:last-child td { border-bottom:none; } tbody tr:nth-child(even) td { background: rgba(255,255,255,.01); } tr:hover td { background:rgba(255,255,255,.04); } table.compact th, table.compact td { padding:6px 10px; } table.sticky-first th:first-child, table.sticky-first td:first-child { position:sticky; left:0; background:var(--color-surface); z-index:1; } /* Utilities */ .flex { display:flex; } .flex-col { display:flex; flex-direction:column; } .gap-2 { gap:var(--space-2); } .gap-3 { gap:var(--space-3); } .gap-4 { gap:var(--space-4); } .muted { color: var(--color-text-dim); } .text-small { font-size:12px; } .divider { height:18px; width:1px; background:var(--color-border); } .space-between { justify-content:space-between; } .nowrap { white-space:nowrap; } /* Form */ .input { background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 12px; color:var(--color-text); font:500 13px var(--font-sans); width:100%; } .input:focus { outline:none; border-color: var(--color-accent); box-shadow: var(--color-focus-ring); } .label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; display:block; } /* Alerts */ .alert { padding:12px 16px; border-radius: var(--radius-md); font:500 13px/1.4 var(--font-sans); display:flex; gap:10px; align-items:flex-start; border:1px solid; } .alert-info { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); } .alert-warn { background: rgba(245,158,11,.15); border-color: var(--color-warn); color: var(--color-warn); } .alert-danger { background: rgba(239,68,68,.18); border-color: var(--color-danger); color: var(--color-danger); } /* Skeleton */ .skel { position:relative; overflow:hidden; background:linear-gradient(90deg, var(--color-bg-alt) 25%, var(--color-surface) 37%, var(--color-bg-alt) 63%); background-size:400% 100%; animation: skel 1300ms linear infinite; border-radius:4px; } @keyframes skel { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } } /* Progress bars */ .progress { width:100%; height:8px; background:var(--color-bg-alt); border-radius:6px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px var(--color-border); } .progress .bar { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover)); transition:width 300ms var(--ease-standard); } /* Focus outline fallback */ :focus-visible { outline: none; box-shadow: var(--color-focus-ring); } /* ======================================================================== Utility & Helper Classes ------------------------------------------------------------------------ Spacing Scale (tokens.css): 1:4px 2:8px 3:12px 4:16px 5:20px 6:24px 8:32px 10:40px Core naming: m|p{side?}-{step} -> margin/padding (t=top, b=bottom, x=left+right, y=top+bottom) gap-{step} -> flex/grid gap Extended legacy helpers (mb-xs, mb-sm, mb-md, mt-neg-xs) retained temporarily for values between scale steps or negative offsets. Prefer core scale for new code. When refactoring unusual inline values (e.g. 28px, 6px) we round to nearest scale step unless visual regression is material. ======================================================================== */ /* Utility extensions & small component badges */ .status { font:600 10px/1 var(--font-sans); letter-spacing:.5px; text-transform:uppercase; padding:4px 8px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:4px; background:var(--color-bg-alt); color:var(--color-text-dim); } .status-accepted { background:rgba(16,185,129,.15); color:var(--color-ok); } .status-pending { background:var(--color-accent-soft); color:var(--color-accent); } .status-expiring { background:rgba(245,158,11,.15); color:var(--color-warn); } /* legacy alias - kept to avoid break if referenced */ .status-warning { background:rgba(245,158,11,.18); color:var(--color-warn); } .status-critical { background:rgba(239,68,68,.22); color:var(--color-danger); } .status-expired { background:rgba(239,68,68,.18); color:var(--color-danger); } .status svg { width:12px; height:12px; } .role-hint-toggle { cursor:pointer; font-size:11px; color:var(--color-accent); text-decoration:none; } .role-hint-box { margin-top:6px; padding:8px 10px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:11px; display:none; } .role-hint-box.active { display:block; } /* Typography baseline for app (non-marketing) pages */ body:not(.marketing) main.page { font-size: var(--font-size-body); line-height:1.5; } body:not(.marketing) main.page h1 { font-size: var(--font-size-title); font-weight:600; letter-spacing:.2px; margin:0 0 var(--space-3); } body:not(.marketing) main.page h2 { font-size: var(--font-size-heading); font-weight:600; margin:0 0 var(--space-3); } body:not(.marketing) main.page h3 { font-size: var(--font-size-subheading); font-weight:600; margin:0 0 var(--space-2); } .page-title { font-size: var(--font-size-title); font-weight:600; letter-spacing:.2px; margin:0 0 var(--space-3); } .section-title { font-size: var(--font-size-subheading); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color: var(--color-text-dim); margin:0 0 var(--space-2); } .lead { font-size: var(--font-size-body); line-height:1.5; color: var(--color-text-dim); margin:0 0 var(--space-4); } .body-sm { font-size: var(--font-size-body-sm); line-height:1.45; } .caption { font-size: var(--font-size-caption); line-height:1.4; color: var(--color-text-dim); } .micro { font-size: var(--font-size-micro); line-height:1.3; } /* Transition helpers */ .fade-in { animation:fade-in .35s var(--ease-standard); } @keyframes fade-in { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} } /* Spacing / layout utilities (used to strip inline styles) */ .m-0 { margin:0 !important; } .mt-1 { margin-top:var(--space-1)!important; } .mt-2 { margin-top:var(--space-2)!important; } .mt-3 { margin-top:var(--space-3)!important; } .mt-4 { margin-top:var(--space-4)!important; } .mt-5 { margin-top:var(--space-5)!important; } .mt-6 { margin-top:var(--space-6)!important; } .mt-8 { margin-top:var(--space-8)!important; } .mb-0 { margin-bottom:0!important; } .mb-1 { margin-bottom:var(--space-1)!important; } .mb-2 { margin-bottom:var(--space-2)!important; } .mb-3 { margin-bottom:var(--space-3)!important; } .mb-4 { margin-bottom:var(--space-4)!important; } .mb-5 { margin-bottom:var(--space-5)!important; } .mb-6 { margin-bottom:var(--space-6)!important; } .mb-8 { margin-bottom:var(--space-8)!important; } .ml-0 { margin-left:0!important; } .ml-1 { margin-left:var(--space-1)!important; } .ml-2 { margin-left:var(--space-2)!important; } .ml-3 { margin-left:var(--space-3)!important; } .ml-4 { margin-left:var(--space-4)!important; } /* Fine-grain spacing (legacy bridge) */ .mt-fine-1 { margin-top:6px!important; } .mt-fine-2 { margin-top:28px!important; } .mb-fine-1 { margin-bottom:1.1rem!important; } .my-1 { margin-top:var(--space-1)!important; margin-bottom:var(--space-1)!important; } .my-2 { margin-top:var(--space-2)!important; margin-bottom:var(--space-2)!important; } .my-3 { margin-top:var(--space-3)!important; margin-bottom:var(--space-3)!important; } .my-4 { margin-top:var(--space-4)!important; margin-bottom:var(--space-4)!important; } .mx-auto { margin-left:auto!important; margin-right:auto!important; } .ml-auto { margin-left:auto!important; } .mr-auto { margin-right:auto!important; } .pt-1 { padding-top:var(--space-1)!important; } .pt-2 { padding-top:var(--space-2)!important; } .pt-3 { padding-top:var(--space-3)!important; } .pt-4 { padding-top:var(--space-4)!important; } .pb-1 { padding-bottom:var(--space-1)!important; } .pb-2 { padding-bottom:var(--space-2)!important; } .pb-3 { padding-bottom:var(--space-3)!important; } .pb-4 { padding-bottom:var(--space-4)!important; } .py-1 { padding-top:var(--space-1)!important; padding-bottom:var(--space-1)!important; } .py-2 { padding-top:var(--space-2)!important; padding-bottom:var(--space-2)!important; } .py-3 { padding-top:var(--space-3)!important; padding-bottom:var(--space-3)!important; } .py-4 { padding-top:var(--space-4)!important; padding-bottom:var(--space-4)!important; } .px-1 { padding-left:var(--space-1)!important; padding-right:var(--space-1)!important; } .px-2 { padding-left:var(--space-2)!important; padding-right:var(--space-2)!important; } .px-3 { padding-left:var(--space-3)!important; padding-right:var(--space-3)!important; } .px-4 { padding-left:var(--space-4)!important; padding-right:var(--space-4)!important; } .p-1 { padding:var(--space-1)!important; } .p-2 { padding:var(--space-2)!important; } .p-3 { padding:var(--space-3)!important; } .p-4 { padding:var(--space-4)!important; } .gap-1 { gap:var(--space-1)!important; } .gap-2 { gap:var(--space-2)!important; } .gap-3 { gap:var(--space-3)!important; } .gap-4 { gap:var(--space-4)!important; } .mt-0 { margin-top:0 !important; } .mt-neg-xs { margin-top:-.5rem !important; } .mb-md { margin-bottom:1.25rem !important; } .mb-xs { margin-bottom:.4rem !important; } .mb-sm { margin-bottom:.5rem !important; } .w-210 { min-width:210px !important; } .w-180 { min-width:180px !important; } .w-230 { width:230px !important; } .fs-11 { font-size:11px !important; } .fs-mini { font-size:.7rem !important; } .flex { display:flex !important; } .flex-col { flex-direction:column !important; } .flex-wrap { flex-wrap:wrap !important; } .ai-center { align-items:center !important; } .ai-end { align-items:flex-end !important; } .gap-xs { gap:.25rem !important; } .gap-sm { gap:.4rem !important; } .gap-md { gap:.5rem !important; } .gap-base { gap:.5rem !important; } /* Width & alignment compound helpers */ .row-actions { white-space:nowrap !important; } /* User menu */ .site-nav .nav-right { position:relative; } .user-menu-panel { position:absolute; top:100%; right:0; margin-top:8px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:6px 0; min-width:220px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:2px; animation:fade-in .15s var(--ease-standard); z-index:120; } .user-menu-panel[hidden] { display:none !important; } .menu-item { background:none; border:0; width:100%; text-align:left; padding:8px 14px; font:500 12px/1.2 var(--font-sans); color:var(--color-text); cursor:pointer; display:block; } .menu-item:hover, .menu-item:focus { background:var(--color-bg-alt); outline:none; } .menu-section:not(:last-child) { border-bottom:1px solid var(--color-border); } /* (Toast styles introduced in later step) */ /* Accessibility helpers */ .sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; } /* --------------------------------------------------------------------- Theme Unification Utilities (Cards, Stacks, Badges, Status Chips) ------------------------------------------------------------------ */ /* Vertical stacking rhythm: replaces ad-hoc margin-top inline styles */ .stack > * + * { margin-top: var(--space-5); } .stack-tight > * + * { margin-top: var(--space-3); } /* Form layout standardization */ .form { display:flex; flex-direction:column; } .form-row { display:flex; flex-direction:column; } .form-row-inline { display:flex; flex-wrap:wrap; gap:var(--space-4); } .form-row + .form-row { margin-top: var(--space-4); } .form-row-inline + .form-row-inline { margin-top: var(--space-4); } .form-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin-top: var(--space-5); } .form-row label.label, .form-row > .label { margin-bottom: var(--space-2); } .input-small { padding:6px 10px; font-size:12px; } .input-inline { width:auto; min-width:200px; } /* Card flow variants (Access Planner steps) */ .card-flow { background: var(--color-surface-alt); border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-3); } .card-flow h2 { margin:0; font-size:14px; font-weight:600; display:flex; gap: var(--space-2); align-items:center; } /* Badges (step, warn, accent) */ .badge { display:inline-flex; align-items:center; font:600 10px/1 var(--font-sans); letter-spacing:.5px; text-transform:uppercase; padding:4px 8px; border-radius:var(--radius-pill); background:var(--color-bg-alt); color:var(--color-text-dim); } .badge-step { background: var(--color-accent); color:#fff; } .badge-warn { background: var(--color-warn); color:#fff; } .badge-accent { background: var(--color-accent); color:#fff; } /* Status chips for diff tables */ .status-chip { display:inline-flex; align-items:center; gap:4px; font:500 11px/1 var(--font-sans); padding:4px 8px; border-radius: var(--radius-md); background: var(--color-bg-alt); color: var(--color-text-dim); border:1px solid var(--color-border); } .status-chip svg { width:12px; height:12px; } .status-chip-ok { background: rgba(16,185,129,.15); color: var(--color-ok); } .status-chip-change { background: var(--color-accent-soft); color: var(--color-accent); } .status-chip-warn { background: rgba(245,158,11,.18); color: var(--color-warn); } .status-chip-muted { background: var(--color-bg-alt); color: var(--color-text-dim); } /* Diff table compact variant using unified table styling */ table.diff { width:100%; border-collapse:collapse; font-size:13px; } table.diff th, table.diff td { padding:6px 10px; border-bottom:1px solid var(--color-border); vertical-align:top; } table.diff th { background: var(--color-surface-alt); font-weight:600; font-size:11px; letter-spacing:.5px; text-transform:uppercase; } table.diff .is-ok td { background: rgba(16,185,129,.03); } table.diff .is-changed td { background: var(--color-accent-soft); } table.diff .is-warning td { background: rgba(245,158,11,.06); } :root { /* breakpoint tokens */ --bp-mobile: 640px; } /* Hide nav toggle by default (desktop / wider screens) */ .nav-toggle { display:none; } /* Generic responsive table pattern */ @media (max-width: 700px) { .responsive-table { width: 100%; border-collapse: collapse; } .responsive-table thead { display: none; } .responsive-table tr { display: block; border: 1px solid var(--color-border); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .75rem; background: var(--color-surface); } .responsive-table td { display: grid; grid-template-columns: 110px 1fr; gap: 6px; padding: .15rem 0; font-size: .8rem; border: 0; } .responsive-table td::before { content: attr(data-label); font-weight: 600; text-transform: uppercase; font-size: .55rem; letter-spacing: .05em; opacity: .75; align-self: center; } .responsive-table .row-actions { margin-top: .25rem; } .responsive-table input[type="text"].w-230 { width: 100%; } .table-wrap { overflow: visible !important; } } /* Generic horizontal scroll fallback for complex tables (multiple numeric columns) */ @media (max-width: 700px){ .table-wrap:not(.stackable) { -webkit-overflow-scrolling: touch; } .table-wrap:not(.stackable) table { min-width:560px; } } /* Touch target reinforcement for small buttons inside tables */ @media (max-width:700px){ button.small, .button.small { min-height:38px; display:inline-flex; align-items:center; } .manage-trigger { min-height:40px; } } /* Manage pop positioning tweak on mobile */ @media (max-width: 700px) { .manage-pop { position: fixed; top: auto !important; left: 50% !important; bottom: 18px; transform: translateX(-50%); max-width: 92vw; width: 340px; } } /* Narrow topbar nav collapse (future enhancement placeholder) */ @media (max-width: 760px) { .nav-toggle { display:inline-flex; align-items:center; background:var(--color-surface); border:1px solid var(--color-border); border-radius:6px; padding:6px 10px; font:500 13px/1 var(--font-sans); cursor:pointer; } .nav-toggle:focus { outline:2px solid var(--color-accent-faint); outline-offset:2px; } .topbar { flex-wrap:wrap; } .topbar .nav-links { width:100%; order:2; } .topbar .nav-links.collapsed { display:none !important; } .topbar .nav-links.expanded { display:flex !important; flex-direction:column; gap:4px; background:var(--color-surface-alt); padding:8px 6px 10px; border:1px solid var(--color-border); border-radius:8px; margin-top:8px; animation:fadeIn .15s ease; } .topbar .nav-links.expanded a { padding:6px 4px; border-radius:4px; font-size:.8rem; } } /* Account table specific tweaks */ @media (max-width: 900px) { table.account-table colgroup col.account-users-col { width: auto !important; } } /* Utility for hiding on mobile */ @media (max-width: 700px) { .hide-mobile { display: none !important; } } /* Utility for showing only on mobile */ @media (min-width: 701px) { .show-mobile { display: none !important; } } /* Responsive primary navigation Grid layout: auto (logo) | 1fr (center links container) | auto (user/auth area). This keeps the right block flush-right and allows the center to truly center its contents. The center uses flex to center links horizontally regardless of left/right intrinsic widths. */ .site-nav { position:sticky; top:0; z-index:60; background:var(--color-surface); border-bottom:1px solid var(--color-border); } .site-nav .nav-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:.65rem 1rem; } .site-nav .logo { font:600 20px/1 var(--font-sans); letter-spacing:.5px; text-decoration:none; color:var(--color-text); } .site-nav .nav-center { display:flex; justify-content:center; } .site-nav .nav-right { display:flex; align-items:center; gap:12px; justify-self:end; } .site-nav .nav-left { display:flex; align-items:center; gap:10px; } .nav-links { display:flex; gap:22px; align-items:center; } .nav-links a { text-decoration:none; color:var(--color-text-dim); font:500 14px/1 var(--font-sans); padding:4px 2px; position:relative; } .nav-links a:hover, .nav-links a:focus-visible { color:var(--color-text); } .nav-links a:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; border-radius:4px; } .nav-links .nav-sep { width:1px; height:18px; background:var(--color-border-strong, var(--color-border)); } .login-link { font:500 14px/1 var(--font-sans); text-decoration:none; color:var(--color-accent); } .login-link:hover, .login-link:focus-visible { text-decoration:underline; } .nav-toggle { display:none; background:none; border:1px solid var(--color-border); padding:6px 8px; border-radius:8px; cursor:pointer; position:relative; } .nav-toggle:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; } .nav-toggle .bar { display:block; width:20px; height:2px; background:var(--color-text); margin:4px 0; transition:.3s; } .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* Mobile layout */ @media (max-width: 860px){ /* Mobile: convert grid to simple flex; center menu becomes dropdown panel */ .site-nav .nav-inner { display:flex; justify-content:space-between; position:relative; } .nav-toggle { display:block; } .nav-center { position:absolute; left:0; top:100%; width:100%; background:var(--color-surface); border-bottom:1px solid var(--color-border); box-shadow:0 6px 16px -4px rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:.25s; padding-top:4px; justify-content:flex-start; } .nav-center.open { opacity:1; visibility:visible; } .nav-links { flex-direction:column; align-items:flex-start; padding:1rem 1.1rem 1.25rem; gap:14px; } .nav-links .nav-sep { display:none; } .nav-right { gap:8px; } } /* Ultra-small devices: tighten nav padding and ensure toggle tap target size */ @media (max-width: 360px){ .site-nav .nav-inner { padding:.55rem .65rem; } .nav-toggle { padding:10px 12px; } .nav-toggle .bar { width:22px; } } /* Light theme adjustments if needed */ [data-theme="light"] .site-nav { background:#fff; } /* Dark theme subtle contrast */ [data-theme="dark"] .site-nav { background:#0f141a; }