/* ============================================================ Shared across every tool: design tokens, page reset, the universal top nav bar, and the Tools landing page layout. ============================================================ */ /* Dark is the default (bare :root, no media query). theme-init.js sets data-theme="light" on before first paint — from a saved manual toggle if one exists, else from prefers-color-scheme — and :root[data-theme="light"] below overrides every token for that variant. */ :root { --tools-bg: #12181f; --tools-panel: #19212b; --tools-panel-alt: #1f2933; --tools-line: #2a3542; --tools-text: #dbe4ee; --tools-muted: #7c8ba0; --tools-ok: #3fd68a; --tools-warn: #e8a94c; --tools-info: #4fa3e0; --tools-danger: #e2584f; --tools-idle: #4a5563; --tools-accent: #4fd6c4; /* Text color to use ON TOP of a solid --tools-accent surface (e.g. a primary button fill). Paired with --tools-accent because the two need to invert together: dark mode's accent is bright enough for dark text; light mode's accent is darkened for contrast against a white page, so it needs light text instead. */ --tools-accent-contrast: #0b1015; --tools-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; /* Shared content-column width — every page's main wrapper (the landing grid, .exam-main, each Finance tool's .wrap) reads this instead of hardcoding its own, so the page doesn't visibly change width as you navigate between tools. */ --tools-content-width: 960px; } :root[data-theme="light"] { --tools-bg: #f5f7f9; --tools-panel: #ffffff; --tools-panel-alt: #eceff2; --tools-line: #d7dde3; --tools-text: #16202b; --tools-muted: #5b6b7a; --tools-ok: #1a8f53; --tools-warn: #a8690d; --tools-info: #1f6fb0; --tools-danger: #c23f35; --tools-idle: #aab4bd; --tools-accent: #0f8f7e; --tools-accent-contrast: #ffffff; } * { box-sizing: border-box; } body { margin: 0; background: var(--tools-bg); color: var(--tools-text); font-family: var(--tools-mono); } a { color: inherit; } button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--tools-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* -------- universal top nav -------- */ .tools-nav { display: flex; align-items: center; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--tools-line); background: var(--tools-panel); /* Set explicitly (not inherited from body) so a tool's own font-family override on body can't change how the universal nav renders. */ font-family: var(--tools-mono); /* Anchors the dropdown menu (.tools-nav-menu, absolutely positioned) below the narrow-screen breakpoint. */ position: relative; } .tools-theme-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tools-muted); background: transparent; border: 1px solid var(--tools-line); border-radius: 6px; padding: 6px 10px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .tools-theme-toggle:hover { color: var(--tools-text); border-color: var(--tools-accent); } .tools-nav-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--tools-text); } .tools-nav-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tools-accent); flex-shrink: 0; } .tools-nav-version { font-size: 11px; color: var(--tools-muted); letter-spacing: 0.04em; } .tools-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0 auto 0 0; padding: 0; } .tools-nav-link { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--tools-muted); padding: 6px 10px; border-radius: 6px; transition: color 0.15s ease, background-color 0.15s ease; } .tools-nav-link:hover { color: var(--tools-text); background: var(--tools-panel-alt); } .tools-nav-link--active { color: var(--tools-accent); background: var(--tools-panel-alt); } /* -------- responsive nav menu -------- .tools-nav-menu wraps the links + theme toggle. On wide screens it's `display: contents` — invisible to layout, so its children act as direct flex items of .tools-nav exactly as if the wrapper weren't there. Below the breakpoint it becomes a collapsible dropdown behind a hamburger button instead. */ .tools-nav-menu-toggle { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; font-size: 15px; line-height: 1; color: var(--tools-muted); background: transparent; border: 1px solid var(--tools-line); border-radius: 6px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .tools-nav-menu-toggle:hover { color: var(--tools-text); border-color: var(--tools-accent); } .tools-nav-menu { display: contents; } @media (max-width: 640px) { .tools-nav-menu-toggle { display: flex; } .tools-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 4px; background: var(--tools-panel); border-bottom: 1px solid var(--tools-line); padding: 10px 20px 16px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .tools-nav-menu--open { display: flex; } .tools-nav-links { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; } .tools-nav-link { padding: 10px; } .tools-theme-toggle { align-self: flex-start; margin-top: 6px; } .tools-nav-auth { align-self: flex-start; margin-top: 6px; margin-left: 0; } } /* -------- auth: nav bar login state + shared modal -------- The nav-bar half (.tools-nav-auth, .tools-auth-user) sits inline with the theme toggle. The modal (.tools-modal-*) is injected into its own body-level root by nav.js so it overlays the whole page regardless of which tool is open — see window.ToolsAuth in nav.js. */ .tools-nav-auth { display: flex; align-items: center; gap: 8px; margin-left: 8px; } .tools-auth-user { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tools-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tools-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); padding: 20px; } .tools-modal { width: 100%; max-width: 340px; background: var(--tools-panel); border: 1px solid var(--tools-line); border-radius: 10px; padding: 24px; position: relative; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } .tools-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--tools-muted); font-size: 14px; cursor: pointer; line-height: 1; padding: 4px; } .tools-modal-close:hover { color: var(--tools-text); } .tools-modal-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tools-muted); } .tools-modal-title { font-size: 20px; margin-top: 4px; } .tools-modal-prompt { font-size: 12px; color: var(--tools-muted); margin-top: 8px; line-height: 1.5; } .tools-modal-label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tools-muted); margin-top: 16px; } .tools-modal-label input { background: var(--tools-bg); border: 1px solid var(--tools-line); color: var(--tools-text); font-family: inherit; font-size: 14px; text-transform: none; letter-spacing: normal; padding: 9px 10px; border-radius: 6px; } .tools-modal-label input:focus { outline: none; border-color: var(--tools-accent); } .tools-modal-error { margin-top: 12px; font-size: 12px; color: var(--tools-danger); } .tools-modal-submit { width: 100%; margin-top: 20px; background: var(--tools-accent); border: 1px solid var(--tools-accent); color: var(--tools-accent-contrast); font-family: inherit; font-weight: 600; font-size: 14px; padding: 10px; border-radius: 6px; cursor: pointer; } .tools-modal-submit:disabled { opacity: 0.6; cursor: default; } .tools-modal-switch { display: block; width: 100%; text-align: center; margin-top: 14px; background: transparent; border: none; color: var(--tools-muted); font-family: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; } .tools-modal-switch:hover { color: var(--tools-text); } /* -------- per-tool status bar -------- A second bar a tool can place below the universal nav to show its own identity/state (e.g. Exam's session status, or a calculator's variant label). Shared here so every tool that has one looks and behaves the same way; .tools-status-bar-id--clickable is opt-in for tools (like Exam) where the left side is an actual control, not just a label. Width-matched to --tools-content-width (and centered) so it lines up with the page's main content column instead of running edge-to-edge like the universal nav above it. */ .tools-status-bar { display: flex; align-items: center; justify-content: space-between; max-width: var(--tools-content-width); margin: 0 auto; padding: 14px 20px; border-bottom: 1px solid var(--tools-line); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tools-muted); } .tools-status-bar-id { display: flex; align-items: center; gap: 8px; } .tools-status-bar-id--clickable { cursor: pointer; } .tools-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tools-idle); display: inline-block; flex-shrink: 0; } .tools-status-dot--live { background: var(--tools-info); animation: tools-status-pulse 1.8s ease-in-out infinite; } .tools-status-dot--ok { background: var(--tools-ok); } @keyframes tools-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* -------- landing page -------- */ .tools-home-main { max-width: var(--tools-content-width); margin: 0 auto; padding: 48px 20px 80px; } .tools-home-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tools-muted); margin-bottom: 10px; } .tools-home-title { font-size: 28px; margin: 0 0 8px; } .tools-home-sub { color: var(--tools-muted); margin: 0 0 32px; line-height: 1.6; } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .tools-category { margin-top: 36px; } .tools-category:first-child { margin-top: 0; } .tools-category-heading { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tools-muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--tools-line); } .tools-card { display: block; background: var(--tools-panel); border: 1px solid var(--tools-line); border-radius: 10px; padding: 20px; text-decoration: none; color: var(--tools-text); transition: border-color 0.15s ease, transform 0.15s ease; } .tools-card:hover { border-color: var(--tools-accent); transform: translateY(-2px); } .tools-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; } .tools-card-desc { font-size: 12px; color: var(--tools-muted); line-height: 1.5; } .tools-empty { color: var(--tools-muted); font-size: 13px; }