/* ======================================================================== OnlineOffice — Design System v2 SaaS-inspired (minimal/flat/island) with Sunset Orange accent. Themes: light (default) & dark — switched via [data-theme] on . The accent is a solid #ea580c plus a gradient #ea580c → #facc15 used on logo, hover bars on tool cards, and other highlight surfaces. ======================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* ── Accent & shared tokens (identical in light + dark) ─────────────── */ :root { --accent-color: #ea580c; --accent-hover: #c2410c; --accent-muted: #fb923c; --accent-rgb: 234, 88, 12; --theme-highlight: linear-gradient(90deg, #ea580c, #facc15); --green: #22c55e; --red: #ef4444; --amber: #f59e0b; --font-main: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --transition-fast: 0.15s; } /* ── LIGHT (default) ────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { /* Make native form controls (checkbox / radio / scrollbars / select popup) match the light theme. Without this, OS "dark-mode" users get inverted controls even after toggling the app into light mode. */ color-scheme: light; --bg-color: #ffffff; --surface-color: #ffffff; --sidebar-bg: #fafafa; --border-color: #eaeaea; --border-light: #f3f4f6; --text-main: #111111; --text-muted: #666666; --text-faint: #999999; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08); --overlay-bg: rgba(255, 255, 255, 0.7); --hover-bg: rgba(0, 0, 0, 0.04); } /* ── DARK (explicit) ────────────────────────────────────────────────── */ :root[data-theme="dark"] { color-scheme: dark; --bg-color: #000000; --surface-color: #0a0a0a; --sidebar-bg: #000000; --border-color: #2a2a2a; --border-light: #1a1a1a; --text-main: #ededed; --text-muted: #b0b0b0; --text-faint: #888888; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.6); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.75); --overlay-bg: rgba(0, 0, 0, 0.6); --hover-bg: rgba(255, 255, 255, 0.05); } /* ── Legacy aliases used by inline-styled components in JS modules. ── */ :root { --bg: var(--bg-color); --border: var(--border-color); --primary: var(--accent-color); --primary-light: rgba(var(--accent-rgb), 0.14); --secondary: var(--green); --secondary-light: rgba(34, 197, 94, 0.10); --danger: var(--red); --danger-light: rgba(239, 68, 68, 0.10); --text-secondary: var(--text-muted); --text-tertiary: var(--text-faint); --teal-accent: var(--accent-muted); } /* ── Reset & Base ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-main); font-size: 14px; display: flex; flex-direction: column; /* `dvh` (dynamic viewport height) accounts for the iOS Safari URL bar showing/hiding. Without this, the bottom of the page is unreachable when the URL bar re-appears. The `vh` line is a fallback for browsers that don't yet support `dvh`. */ min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } .mono { font-family: var(--font-mono); } a { color: var(--accent-color); text-decoration: none; } a:hover { text-decoration: underline; } img, video, canvas { max-width: 100%; display: block; } .oo-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .tool-heading { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-4); font-size: 1.25rem; } .tool-heading-icon { width: 20px; height: 20px; color: var(--accent-color); } ::selection { background: rgba(var(--accent-rgb), 0.25); color: var(--text-main); } /* ── Scrollbars ─────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ═══════════════════════════════════════════════════════════════════ HEADER — Top bar with logo + tool tabs + settings gear ═══════════════════════════════════════════════════════════════════ */ header { display: flex; align-items: center; padding: 0 24px; /* Extend the header background up under the iOS status bar / Dynamic Island in PWA standalone mode (we ship `viewport-fit=cover` plus `apple-mobile-web-app-status-bar-style=black-translucent`, so the status bar overlays the viewport). The `padding-top` then pushes the logo / tabs / actions back below the unsafe area, while the header's dark background fills the strip above so the notch sits on chrome instead of page content. On non-iOS / non-PWA browsers `env(safe-area-inset-top)` is 0, so this is a no-op there. Horizontal insets keep the logo / settings cluster from sliding under the rounded corners in landscape. */ 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); height: calc(56px + env(safe-area-inset-top)); background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); flex-shrink: 0; z-index: 100; } .logo { font-family: var(--font-main); font-size: 18px; font-weight: 700; color: var(--text-main); letter-spacing: -0.5px; text-decoration: none; flex-shrink: 0; margin-right: 32px; } .logo:hover { text-decoration: none; } .logo span { background: var(--theme-highlight); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .header-tabs { display: flex; align-items: stretch; height: 100%; gap: 0; flex: 1; min-width: 0; overflow-x: auto; /* The 2px active-tab underline pushes 1px above the box, which makes Safari render a phantom vertical scrollbar inside the strip. Pin `overflow-y: hidden` so only horizontal scroll is offered. */ overflow-y: hidden; -webkit-overflow-scrolling: touch; /* Tools cluster to the right, leaving a generous gap after the logo. Keeps the eye moving from brand → actions instead of wading through tabs as soon as you land on the page. */ justify-content: flex-end; } .header-tab { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; font-family: var(--font-main); text-decoration: none; } .header-tab:hover { color: var(--text-main); text-decoration: none; } .header-tab.active { color: var(--text-main); border-bottom-color: var(--accent-color); } .header-tab svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-left: 16px; margin-left: 16px; /* Fine divider between the tool tabs (which now hug the right side) and the settings / burger cluster, to separate navigation from app-level actions. Dropped on mobile (below) where the tabs are hidden and the separator would float in empty space. */ border-left: 1px solid var(--border-color); } /* When there's no tab list to its left (e.g. tools-less pages), fall back to a plain right-aligned cluster without the phantom separator. */ header:not(:has(.header-tabs)) .header-right, header .header-tabs:empty + .header-right { border-left: none; padding-left: 0; margin-left: auto; } .privacy-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: rgba(34, 197, 94, 0.10); color: var(--green); font-size: 11px; font-weight: 600; border-radius: 999px; font-family: var(--font-mono); border: 1px solid rgba(34, 197, 94, 0.25); white-space: nowrap; } .privacy-badge svg { width: 12px; height: 12px; } .inline-icon-label { display: flex; align-items: center; gap: 6px; } /* Settings gear + popover */ .settings-trigger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .settings-trigger:hover { color: var(--text-main); background: var(--hover-bg); border-color: var(--border-color); } .settings-trigger svg { width: 16px; height: 16px; } .settings-popover { position: absolute; right: 12px; /* Anchor below the (now notch-aware) header. Header height is 56px + safe-area-inset-top in standalone PWA, so the popover has to add the inset itself or it overlaps the gear it belongs to. */ top: calc(52px + env(safe-area-inset-top)); min-width: 220px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 10px; z-index: 1001; display: none; animation: popoverIn 0.12s ease; } .settings-popover.open { display: block; } .settings-popover h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--text-faint); padding: 4px 8px 8px; } .settings-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; border-radius: var(--radius); color: var(--text-main); font-family: var(--font-main); font-size: 13px; cursor: pointer; text-align: left; text-decoration: none; transition: background 0.12s; } .settings-popover h4:not(:first-child) { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-color); } /* Install slot is a wrapper so we can toggle the whole section via `hidden`. The first h4 inside wouldn't otherwise pick up the section separator because it's :first-child of *its own* div, not the popover. */ .oo-install-slot > h4 { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-color); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; } .oo-install-slot[hidden] { display: none; } .settings-option:hover { background: var(--hover-bg); } .settings-option.active { background: rgba(var(--accent-rgb), 0.10); color: var(--accent-color); font-weight: 600; } .settings-option svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Some menu icons (e.g. third-party brand marks) are filled glyphs rather than stroked outlines — opt them out of the stroke styling so `fill: currentColor` lights them up correctly in dark + light. */ .settings-option--filled-icon svg { stroke: none; fill: currentColor; } .settings-option .check { margin-left: auto; opacity: 0; } .settings-option.active .check { opacity: 1; } @keyframes popoverIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════ MAIN LAYOUT — Sidebar + Content ═══════════════════════════════════════════════════════════════════ */ .app-container { display: flex; flex: 1; overflow: hidden; } .sidebar { width: 240px; background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color); padding: 20px 0; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; } .sidebar-section { margin-bottom: 22px; } .sidebar-section-title { padding: 0 16px; margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-family: var(--font-main); font-weight: 700; display: flex; align-items: center; gap: 6px; text-decoration: none; } .sidebar-section-title svg { width: 14px; height: 14px; color: var(--text-main); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sidebar-section-link { color: var(--text-faint); transition: color 0.12s; } .sidebar-section-link:hover { color: var(--text-main); text-decoration: none; } .sidebar-section-link:hover svg { color: var(--text-main); } .sidebar-item { display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 36px; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: color 0.12s, background 0.12s; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-main); text-decoration: none; } .sidebar-item:hover { color: var(--text-main); background: var(--hover-bg); text-decoration: none; } .sidebar-item.active { color: var(--accent-color); background: rgba(var(--accent-rgb), 0.10); font-weight: 600; border-right: 2px solid var(--accent-color); } .sidebar-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; } .sidebar-item.active svg { opacity: 1; } .sidebar-link { text-decoration: none; } .sidebar-link:hover { text-decoration: none; } .main-content { flex: 1; padding: 28px 36px; overflow-y: auto; overflow-x: hidden; } .page-header { margin-bottom: 20px; } /* ─── Legal / long-form content ────────────────────────────────── A readable measure (~68ch) for Terms, Privacy, Imprint and similar static documents. Lives under `.main-content` like every other page so the existing header / sidebar / theme all keep working. */ .legal-doc { max-width: 72ch; line-height: 1.65; font-size: 15px; color: var(--text-main); } .legal-doc h1 { font-size: 1.75rem; margin: 0 0 var(--sp-2); } .legal-doc .legal-meta { color: var(--text-faint); font-size: 13px; margin-bottom: var(--sp-6); } .legal-doc h2 { font-size: 1.15rem; margin: var(--sp-6) 0 var(--sp-2); } .legal-doc h3 { font-size: 1rem; margin: var(--sp-5) 0 var(--sp-2); } .legal-doc p { margin: 0 0 var(--sp-3); } .legal-doc ul, .legal-doc ol { margin: 0 0 var(--sp-3) 1.2em; padding: 0; } .legal-doc li { margin-bottom: 4px; } .legal-doc a { color: var(--accent-color); } .legal-doc address { font-style: normal; } .legal-doc code { font-family: var(--font-mono); background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; } /* ─── Storage / consent notice banner ───────────────────────────── Non-blocking info bar anchored to the bottom of the viewport. The banner is intentionally small, keyboard-dismissable (Esc) and remembered via localStorage, so we don't annoy returning visitors. See assets/consent-notice.js for behaviour. Naming: classes deliberately avoid "cookie-banner" because Brave Shields and most uBlock filter lists hide any element matching that pattern via cosmetic filters, which would silently remove the banner without informing the user. */ .oo-consent-notice { position: fixed; left: 50%; /* Float above the iOS home-indicator and any installed-PWA tab bar. Without `env(safe-area-inset-bottom)` the banner disappears behind the home indicator on iPhone X+. */ bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 32px); max-width: 720px; background: var(--surface-color); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px 16px; z-index: 2000; animation: oo-consent-in 0.18s ease; transition: opacity 0.2s ease, transform 0.2s ease; } .oo-consent-notice.leaving { opacity: 0; transform: translateX(-50%) translateY(8px); } .oo-consent-notice-inner { display: flex; align-items: center; gap: 16px; } .oo-consent-notice p { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); } .oo-consent-notice a { color: var(--accent-color); } .oo-consent-notice .btn { flex-shrink: 0; } @keyframes oo-consent-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (max-width: 600px) { .oo-consent-notice { bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 16px); padding: 10px 12px; } .oo-consent-notice-inner { flex-direction: column; align-items: stretch; gap: 10px; } .oo-consent-notice .btn { align-self: flex-end; } } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); margin-bottom: 6px; } .breadcrumb a { color: var(--text-faint); text-decoration: none; } .breadcrumb a:hover { color: var(--text-muted); } .breadcrumb .sep { font-size: 10px; } .page-title { display: flex; align-items: center; gap: 12px; } .page-title h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } /* ═══════════════════════════════════════════════════════════════════ CARDS & PANELS ═══════════════════════════════════════════════════════════════════ */ .card { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-body { padding: 20px; } .card-footer { padding: 14px 20px; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: flex-end; gap: 10px; } /* ═══════════════════════════════════════════════════════════════════ IN-CONTENT SUB-TABS ═══════════════════════════════════════════════════════════════════ */ .tab-bar { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; gap: 0; overflow-x: auto; /* Same reasoning as `.header-tabs`: hide the phantom vertical scrollbar Safari adds when the active-tab underline pokes outside the inline box. */ overflow-y: hidden; -webkit-overflow-scrolling: touch; } .tab-btn { padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; font-family: var(--font-main); } .tab-btn:hover { color: var(--text-main); } .tab-btn.active { color: var(--text-main); border-bottom-color: var(--accent-color); } .tab-content { display: none; } .tab-content.active { display: block; } /* ═══════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: var(--font-main); border: 1px solid var(--border-color); border-radius: var(--radius); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s; background: var(--surface-color); color: var(--text-main); white-space: nowrap; text-decoration: none; } .btn:hover { background: var(--hover-bg); border-color: var(--text-faint); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn svg { width: 14px; height: 14px; } .btn-primary { background: var(--accent-color); color: #ffffff; border-color: var(--accent-color); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { background: var(--red); color: #fff; border-color: var(--red); } .btn-danger:hover:not(:disabled) { background: #dc2626; border-color: #dc2626; } .btn-secondary { background: var(--hover-bg); color: var(--text-main); border-color: var(--border-color); } .btn-secondary:hover:not(:disabled) { background: var(--border-light); border-color: var(--text-faint); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover:not(:disabled) { color: var(--text-main); background: var(--hover-bg); } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn-lg { padding: 10px 20px; font-size: 14px; } .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════════════════════════ FORM ELEMENTS ═══════════════════════════════════════════════════════════════════ */ .input-group { margin-bottom: 16px; } .form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .form-grid .input-group { margin-bottom: 0; } .form-grid-tight { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; } .stat-tile { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .stat-tile .stat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text-main); letter-spacing: -0.01em; } .stat-tile .stat-value.stat-value--alt { color: var(--accent-color); } .stat-tile .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 500; } .segmented-control { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; background: var(--surface-color); } .segmented-control button { padding: 6px 14px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-main); font-size: 12px; font-weight: 500; cursor: pointer; border-right: 1px solid var(--border-color); transition: background 0.12s, color 0.12s; } .segmented-control button:last-child { border-right: none; } .segmented-control button:hover { background: var(--hover-bg); color: var(--text-main); } .segmented-control button.active { background: var(--accent-color); color: #fff; } .action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .action-row.justify-between { justify-content: space-between; } .checkbox-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tool-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .tool-split .settings-stack { display: flex; flex-direction: column; gap: 16px; } .converter-workspace { display: flex; flex-direction: column; gap: 16px; } .settings-heading { font-size: 13px; font-weight: 600; color: var(--text-main); margin-bottom: 12px; } .input-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 5px; } input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="email"], input[type="date"], textarea, select { width: 100%; background-color: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-main); padding: 8px 12px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } /* iOS auto-zooms into any input whose computed font-size is < 16px the moment it gains focus and never zooms back out. Our visual baseline is 13px, so we bump every form control to 16px on touch viewports. `≤700px` covers phones in portrait and most phones in landscape without affecting tablet/desktop where 13px reads better. */ @media (max-width: 700px) { input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], input[type="email"], input[type="date"], input[type="tel"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select { font-size: 16px; } } input:focus, textarea:focus, select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } textarea { resize: vertical; min-height: 80px; } textarea.code-area { font-family: var(--font-mono); font-size: 13px; tab-size: 2; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; cursor: pointer; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--border-color); border-radius: 2px; outline: none; border: none; padding: 0; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-color); cursor: pointer; border: none; } .toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { width: 36px; height: 20px; background: var(--border-color); border-radius: 10px; transition: background 0.15s; flex-shrink: 0; position: relative; } .toggle input:checked + .toggle-track { background: var(--accent-color); } .toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s; } .toggle input:checked + .toggle-track::after { transform: translateX(16px); } .checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; } .checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-color); cursor: pointer; } /* Theme every native checkbox/radio, not just those wrapped in .checkbox (e.g. viewer layer toggles, batch file lists). Without accent-color + the :root color-scheme above, browsers fall back to the OS scheme and render a dark control on a light UI. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-color); } /* ═══════════════════════════════════════════════════════════════════ DROPZONE ═══════════════════════════════════════════════════════════════════ */ .dropzone { border: 2px dashed var(--border-color); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--surface-color); } /* `.drag-over` is set by the JS during an actual drag — keep that highlight on every device. `:hover` sticks after a tap on touch, so we only honour it on hover-capable pointers. */ .dropzone.drag-over { border-color: var(--accent-color); background: rgba(var(--accent-rgb), 0.04); } @media (hover: hover) { .dropzone:hover { border-color: var(--accent-color); background: rgba(var(--accent-rgb), 0.04); } } .dropzone-icon { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--text-faint); } .dropzone-text { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; } /* Flex-center the hint so the privacy badge (inline-flex pill) sits truly centred regardless of font-metric quirks around the lock icon — plain `text-align: center` on an inline-flex child can end up a few pixels off in some browsers. */ .dropzone-hint { font-size: 12px; color: var(--text-faint); display: flex; justify-content: center; align-items: center; } .dropzone-browse { color: var(--accent-color); font-weight: 600; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════════════════════════════ */ .toast-container { position: fixed; /* Header is 56px tall + 8px breathing room. In PWA standalone iOS adds the status-bar inset on top, so we max() with the env value to push toasts below the notch / Dynamic Island. */ top: calc(64px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: 13px; color: var(--text-main); pointer-events: auto; animation: toastIn 0.25s ease forwards; max-width: 360px; } .toast.removing { animation: toastOut 0.2s ease forwards; } .toast-icon { width: 18px; height: 18px; flex-shrink: 0; } .toast-success { border-left: 3px solid var(--green); } .toast-success .toast-icon { color: var(--green); } .toast-error { border-left: 3px solid var(--red); } .toast-error .toast-icon { color: var(--red); } .toast-info { border-left: 3px solid var(--accent-color); } .toast-info .toast-icon { color: var(--accent-color); } .toast-warning { border-left: 3px solid var(--amber); } .toast-warning .toast-icon { color: var(--amber); } @keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } } /* ═══════════════════════════════════════════════════════════════════ APP DIALOGS (replaces native alert/confirm/prompt) See assets/dialog.js for the API. ═══════════════════════════════════════════════════════════════════ */ .oo-dialog-host { position: fixed; inset: 0; z-index: 10000; pointer-events: none; } .oo-dialog-overlay { position: fixed; inset: 0; background: rgba(8, 12, 20, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: auto; opacity: 0; transition: opacity 0.14s ease-out; } .oo-dialog-overlay.is-open { opacity: 1; } .oo-dialog-overlay.is-leaving { opacity: 0; } .oo-dialog { background: var(--surface-color); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(440px, 100%); max-height: min(80vh, 80dvh); display: flex; flex-direction: column; overflow: hidden; transform: translateY(8px) scale(0.985); transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); } .oo-dialog-overlay.is-open .oo-dialog { transform: none; } .oo-dialog-header { padding: 16px 20px 0; } .oo-dialog-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); } .oo-dialog-body { padding: 14px 20px 4px; overflow-y: auto; flex: 1 1 auto; font-size: 13.5px; line-height: 1.55; } .oo-dialog-message { margin: 0; color: var(--text-secondary); } .oo-dialog-field { margin-top: 12px; } .oo-dialog-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-color); color: var(--text-main); font: inherit; font-size: 13.5px; transition: border-color 0.12s, box-shadow 0.12s; } .oo-dialog-input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); } .oo-dialog-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .oo-dialog-choice { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 10px 12px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-main); cursor: pointer; font: inherit; transition: border-color 0.12s, background 0.12s; } .oo-dialog-choice:hover { border-color: var(--accent-color); background: rgba(var(--accent-rgb), 0.08); } .oo-dialog-choice-label { font-weight: 600; font-size: 13px; } .oo-dialog-choice-hint { font-size: 12px; color: var(--text-tertiary); } .oo-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--border-light); background: color-mix(in srgb, var(--surface-color) 92%, var(--bg-color)); } @media (max-width: 480px) { .oo-dialog-overlay { padding: 12px; align-items: flex-end; } .oo-dialog { width: 100%; max-height: 90vh; border-radius: var(--radius); } } /* ═══════════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════════ */ .table-wrapper { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface-color); } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead { background: var(--hover-bg); } th { padding: 10px 12px; text-align: left; font-weight: 600; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); font-family: var(--font-main); white-space: nowrap; } td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--hover-bg); } /* ═══════════════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════════════ */ .badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-family: var(--font-mono); background-color: var(--hover-bg); border: 1px solid var(--border-color); color: var(--text-muted); backdrop-filter: blur(4px); } .badge-primary { background: rgba(var(--accent-rgb), 0.10); color: var(--accent-color); border-color: rgba(var(--accent-rgb), 0.25); } .badge-success { background: rgba(34, 197, 94, 0.10); color: var(--green); border-color: rgba(34, 197, 94, 0.25); } .badge-danger { background: rgba(239, 68, 68, 0.10); color: var(--red); border-color: rgba(239, 68, 68, 0.25); } /* ═══════════════════════════════════════════════════════════════════ PROGRESS BAR ═══════════════════════════════════════════════════════════════════ */ .progress-bar { width: 100%; height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent-color); border-radius: 2px; transition: width 0.2s; width: 0%; } .progress-bar-fill.success { background: var(--green); } /* ═══════════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); backdrop-filter: blur(3px); z-index: 1000; display: flex; align-items: center; justify-content: center; /* Pad against the device safe-area so the modal body is never clipped by notch / home-indicator on phones held in landscape. */ padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 100%; max-width: 500px; max-height: 85vh; overflow-y: auto; padding: 24px; box-shadow: var(--shadow-lg); transform: scale(0.97); transition: transform 0.2s; } .modal-overlay.open .modal { transform: scale(1); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-body { margin-bottom: 20px; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; } /* ═══════════════════════════════════════════════════════════════════ FILE LIST & ITEMS ═══════════════════════════════════════════════════════════════════ */ .file-list { display: flex; flex-direction: column; gap: 8px; } .file-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-color); border: 1px solid var(--border-light); border-radius: var(--radius); transition: border-color 0.15s; } .file-item:hover { border-color: var(--border-color); } .file-item-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), 0.12); color: var(--accent-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .file-item-info { flex: 1; min-width: 0; } .file-item-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-item-meta { font-size: 11px; color: var(--text-faint); } .file-item-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════ THUMBNAIL GRID ═══════════════════════════════════════════════════════════════════ */ .thumbnail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .thumbnail { position: relative; aspect-ratio: 3/4; border: 2px solid var(--border-color); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; background: var(--surface-color); } .thumbnail:hover { border-color: var(--accent-color); } .thumbnail.selected { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); } .thumbnail img, .thumbnail canvas { width: 100%; height: 100%; object-fit: contain; } .thumbnail-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 6px; background: rgba(0,0,0,0.5); color: white; font-size: 10px; text-align: center; font-family: var(--font-mono); } /* ═══════════════════════════════════════════════════════════════════ CONVERTER TWO-PANEL ═══════════════════════════════════════════════════════════════════ */ .converter-panel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; } .converter-swap { display: flex; align-items: center; justify-content: center; padding-top: 28px; } .converter-swap .btn-icon { width: 40px; height: 40px; border-radius: 50%; } .dms-converter { display: grid; gap: 12px; max-width: 720px; margin: 0 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface-color); } .dms-converter h3 { margin-bottom: 4px; font-size: 14px; } .dms-converter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .55fr); gap: 12px; } .dms-converter-result { display: flex; min-height: 36px; align-items: center; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-color); overflow-wrap: anywhere; } .dms-converter-error { min-height: 18px; color: var(--red); } /* ═══════════════════════════════════════════════════════════════════ COLOR SWATCH / STRENGTH METER / EMPTY / WARNING / SPINNER / PREVIEW ═══════════════════════════════════════════════════════════════════ */ .color-swatch { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border-color); cursor: pointer; transition: transform 0.15s; } /* `scale(1.1)` sticks after a tap on touch — gate behind hover-capable pointers so phones see no transform shift on selection. */ @media (hover: hover) { .color-swatch:hover { transform: scale(1.1); } } .strength-meter { display: flex; gap: 3px; height: 4px; } .strength-meter span { flex: 1; background: var(--border-color); border-radius: 2px; transition: background 0.15s; } .strength-meter.weak span:nth-child(-n+1) { background: var(--red); } .strength-meter.fair span:nth-child(-n+2) { background: var(--amber); } .strength-meter.good span:nth-child(-n+3) { background: var(--accent-color); } .strength-meter.strong span:nth-child(-n+4) { background: var(--green); } .empty-state { text-align: center; padding: 48px 20px; color: var(--text-faint); } .empty-state h3 { color: var(--text-muted); margin-bottom: 6px; } .warning-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.30); border-radius: var(--radius); font-size: 13px; color: var(--text-main); margin-bottom: 16px; } .warning-banner svg { width: 18px; height: 18px; color: var(--amber); flex-shrink: 0; } .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 0.6s linear infinite; } .spinner-sm { width: 14px; height: 14px; } .spinner-lg { width: 36px; height: 36px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* Full-cover spinner used by the viewer-session helper — shown when a persisted file is being rehydrated from IndexedDB on page load. */ .viewer-spinner-overlay { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-color) 85%, transparent); backdrop-filter: blur(1px); } .viewer-spinner-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; } .preview-canvas-container { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; position: relative; } /* ═══════════════════════════════════════════════════════════════════ LANDING / INDEX TOOL GRID — v4-inspired cards ═══════════════════════════════════════════════════════════════════ */ .landing-hero { text-align: center; padding: 40px 24px 20px; } .landing-hero h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; background: linear-gradient(90deg, var(--text-main), var(--text-muted)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-hero p { font-size: 15px; color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.6; } .search-box { position: relative; max-width: 420px; margin: 24px auto 32px; } .search-box input { padding-left: 36px; height: 40px; border-radius: var(--radius); font-size: 14px; font-family: var(--font-mono); } .search-box .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 2px; } .tool-card { display: flex; flex-direction: column; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--theme-highlight); opacity: 0; transition: opacity 0.25s; } /* Gate the lift / shadow / accent-bar reveal behind `(hover: hover)` so these effects don't get stuck after a tap on touch devices. On phones the card is tapped, the `:hover` state lingers until the next tap elsewhere — which leaves the card visually offset and the gradient bar showing forever. */ @media (hover: hover) { .tool-card:hover::before { opacity: 1; } .tool-card:hover { border-color: var(--text-faint); transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; } } .tool-card-icon { color: var(--text-main); margin-bottom: 16px; display: inline-flex; width: auto; height: auto; background: transparent; font-size: inherit; } .tool-card-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tool-card h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color: var(--text-main); letter-spacing: -0.01em; } .tool-card p { margin: 0 0 20px 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; flex-grow: 1; } .tool-card-tags { display: flex; flex-wrap: wrap; gap: 8px; } .section-title { font-size: 32px; font-weight: 700; margin-bottom: 30px; background: linear-gradient(90deg, var(--text-main), var(--text-muted)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } /* Tool pages override this in their breadcrumbs — keep a secondary uppercase flavor of section-title usable via class combo. */ .section-title.section-title--sm { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); font-family: var(--font-main); background: none; -webkit-text-fill-color: unset; margin-bottom: 12px; } /* ═══════════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .grid { display: grid; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; } .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; } .w-full { width: 100%; } .flex-1 { flex: 1; } .min-w-0 { min-width: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .text-center { text-align: center; } .text-sm { font-size: 13px; } .text-xs { font-size: 11px; } .text-secondary { color: var(--text-muted); } .text-tertiary { color: var(--text-faint); } .text-mono { font-family: var(--font-mono); font-size: 13px; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ═══════════════════════════════════════════════════════════════════ MOBILE BURGER + SPLIT-VIEW MENU Hidden on desktop; shown only at <=768px. ═══════════════════════════════════════════════════════════════════ */ .mobile-burger { display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .mobile-burger:hover { color: var(--text-main); background: var(--hover-bg); border-color: var(--border-color); } .mobile-burger svg { width: 18px; height: 18px; } .mobile-menu { position: fixed; inset: 0; z-index: 1200; background: var(--overlay-bg); backdrop-filter: blur(4px); display: none; flex-direction: column; animation: popoverIn 0.14s ease; } .mobile-menu.open { display: flex; } body.mobile-menu-open { overflow: hidden; } .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; /* Push the head row below the iOS notch / status bar inside an installed PWA. Horizontal insets handle landscape rounded corners. */ padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); background: var(--bg-color); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .mobile-menu-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); } .mobile-menu-close { width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border-color); background: var(--surface-color); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .mobile-menu-close:hover { color: var(--text-main); background: var(--hover-bg); } .mobile-menu-close svg { width: 18px; height: 18px; } .mobile-menu-split { flex: 1; display: grid; grid-template-columns: minmax(130px, 40%) 1fr; background: var(--bg-color); min-height: 0; } .mobile-menu-tools { border-right: 1px solid var(--border-color); background: var(--sidebar-bg); overflow-y: auto; padding: 8px 0; /* Keep the last tool reachable above the iOS home indicator. */ padding-bottom: max(8px, env(safe-area-inset-bottom)); } .mobile-nav-tool { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-main); font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; border-left: 3px solid transparent; transition: color 0.12s, background 0.12s, border-color 0.12s; } .mobile-nav-tool:hover { color: var(--text-main); background: var(--hover-bg); } .mobile-nav-tool.active { color: var(--accent-color); background: rgba(var(--accent-rgb), 0.10); border-left-color: var(--accent-color); font-weight: 600; } .mobile-nav-tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .mobile-nav-tool-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mobile-nav-tool-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-menu-subs { overflow-y: auto; padding: 8px 0; /* Ensure the last sub-link doesn't sit behind the iOS home indicator. */ padding-bottom: max(8px, env(safe-area-inset-bottom)); } .mobile-nav-subpane { display: none; flex-direction: column; } .mobile-nav-subpane.active { display: flex; } .mobile-nav-sub { padding: 12px 18px; color: var(--text-main); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--border-light); } .mobile-nav-sub:hover, .mobile-nav-sub:active { background: var(--hover-bg); text-decoration: none; } /* Current-page indicator on the sub-pane: bar on the trailing edge plus accent text, matching the desktop sidebar's `.sidebar-item.active` look. Note this is the `.active` *class* set by nav.js, distinct from the `:active` pseudo-class above (which is just tap feedback). Higher specificity than `.mobile-nav-sub-all` so the highlight wins when "All " is the current page. */ .mobile-nav-sub.active, .mobile-nav-sub-all.active { color: var(--accent-color); background: rgba(var(--accent-rgb), 0.10); font-weight: 600; border-right: 3px solid var(--accent-color); } .mobile-nav-sub-all { color: var(--accent-color); font-weight: 600; background: rgba(var(--accent-rgb), 0.06); } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { header { /* Same notch-clearance treatment as the desktop rule. The mobile breakpoint is exactly where this matters — installed PWA on iPhone X+ in portrait — but the property still has to be set inside the media query to override the desktop `height`. */ height: calc(60px + env(safe-area-inset-top)); padding: 0 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); } .header-tabs { display: none; } .logo { margin-right: 0; } /* No tabs to the left → drop the divider so the gear/burger cluster floats clean on the right. */ .header-right { margin-left: auto; gap: 6px; padding-left: 8px; border-left: none; } /* Apple HIG / WCAG 2.5.5 minimum tap target: 44×44. The gear and burger were 40px and got mis-tapped on every-other use. */ .mobile-burger { display: inline-flex; width: 44px; height: 44px; } .mobile-burger svg { width: 22px; height: 22px; } .settings-trigger { width: 44px; height: 44px; } .settings-trigger svg { width: 20px; height: 20px; } /* `.btn-icon` is the share / copy / close / overflow button across the app. 32×32 fails the touch-target rule on every platform. */ .btn-icon { width: 44px; height: 44px; } /* Pad small buttons enough that they're tap-safe without inflating the visual chrome. Keeps the 12px font but adds vertical bulk. */ .btn-sm { padding: 10px 14px; font-size: 13px; } /* Bigger pill / hit area for native checkbox + custom toggle on touch — mostly affects converter / PDF settings rows. */ .toggle-track { width: 44px; height: 26px; border-radius: 14px; } .toggle-track::after { width: 22px; height: 22px; } .toggle input:checked + .toggle-track::after { transform: translateX(18px); } .sidebar { display: none; } .main-content { padding: 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .converter-panel { grid-template-columns: 1fr; max-width: none; } .dms-converter-row { grid-template-columns: 1fr; } .tool-split { grid-template-columns: 1fr; } .tool-grid { grid-template-columns: 1fr; gap: 14px; } .tool-card { padding: 18px; } .settings-popover { right: 8px; top: calc(60px + env(safe-area-inset-top)); /* Settings options are full-width tappable rows; bump them up so they meet the 44px target on touch. */ } .settings-popover .settings-option { padding: 12px 12px; min-height: 44px; } } /* Finer grain for very narrow screens: single-column sub pane. */ @media (max-width: 420px) { .mobile-menu-split { grid-template-columns: minmax(120px, 45%) 1fr; } .mobile-nav-tool { padding: 10px 10px; font-size: 13px; } .mobile-nav-tool-label { font-size: 13px; } .mobile-nav-sub { padding: 10px 14px; font-size: 13px; } }