/* Theme Name: Ohm Tools Theme URI: https://ohm.tools Author: ohm.tools Description: Landing page theme for ohm.tools — free browser-based tools for the creative industries. Version: 1.0.0 License: GNU General Public License v2 or later Text Domain: ohm-tools */ /* ═══════════════════════════════════════════════════════════════════ THEME TOKENS Semantic colour names (bg, surface, border, text-*, accent) so the light/dark flip is a single class change on . Zone colours are shared across themes — they identify data, not UI chrome. ═══════════════════════════════════════════════════════════════════ */ :root { /* Dark theme (default) */ --bg: #141618; --surface: #1a1d20; --surface-2: #22262a; --border: #2d3136; --border-strong: #3a3f45; --text-1: #e8eaed; --text-2: #a1a6ab; /* Slightly brightened for legibility on dark surfaces */ --text-3: #75797e; /* Slightly brightened to prevent blending into surface */ --accent: #e8a547; /* Warm amber — the only UI accent */ --accent-dim: rgba(232, 165, 71, 0.18); --accent-faint: rgba(232, 165, 71, 0.08); --danger: #d97757; --canvas-grid: rgba(232, 165, 71, 0.04); --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } :root.light { --bg: #f5f5f4; --surface: #ffffff; --surface-2: #f0f0ee; --border: #e4e4e2; --border-strong: #d0d0ce; --text-1: #1a1d20; --text-2: #5f6368; /* Deepened for AA contrast on light */ --text-3: #3c4043; /* Deepened for AA contrast on light */ --accent: #b87725; /* Deeper amber for AA contrast on light */ --accent-dim: rgba(184, 119, 37, 0.15); --accent-faint: rgba(184, 119, 37, 0.06); --danger: #b8562f; --canvas-grid: rgba(0, 0, 0, 0.04); } /* Landing pages (front-page, about, beta) share a darker palette and IBM Plex fonts, distinct from the tool pages. Higher specificity than :root so these override the tool-page defaults above. */ html.landing { --bg: #0d0f10; --surface: #131618; --border: #1e2225; --border-mid: #2a2f35; --text-1: #f0f2f4; --text-2: #e2e4e7; --text-3: #6b7280; --text-4: #555f6b; --text-5: #3d4349; --accent: #e8a547; --accent-dim: rgba(232, 165, 71, 0.10); --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; } /* ═══════════════════════════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--text-1); font-family: var(--font-ui); font-size: 13px; /* Standard modern DAW UI text size */ line-height: 1.5; font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* All interactive elements inherit the 13px baseline */ input, select, textarea, button, .input, .btn { font-size: 13px; } /* Numeric readouts (coords, dB, dimensions) in mono so values line up vertically. Monospace appears visually larger, so 12px aligns with 13px sans-serif. */ .mono, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.2px; } /* ═══════════════════════════════════════════════════════════════════ CANVAS ═══════════════════════════════════════════════════════════════════ */ canvas { cursor: crosshair; background-image: linear-gradient(to right, var(--canvas-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--canvas-grid) 1px, transparent 1px); background-size: 40px 40px; } /* ═══════════════════════════════════════════════════════════════════ UTILITY HELPERS ═══════════════════════════════════════════════════════════════════ */ /* ─── Hairlines ────────────────────────────────────────────────── */ .hairline { border: 1px solid var(--border); } .hairline-b { border-bottom: 1px solid var(--border); } .hairline-r { border-right: 1px solid var(--border); } /* ─── Section label ────────────────────────────────────────────── */ .section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } /* ─── Scrollbars ───────────────────────────────────────────────── */ /* Global thin scrollbars — keeps the DAW illusion intact across every scrollable container. Track matches --surface, thumb uses --surface-2, hovering lifts to --border. 8 px wide on the block axis, same on inline so horizontal bars feel equally restrained. */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border); } ::-webkit-scrollbar-corner { background: var(--surface); } /* Firefox */ .scroll, .custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--surface-2) var(--surface); } /* ─── Focus rings (accessibility) ─────────────────────────────── */ button:focus-visible, .tool:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } /* ═══════════════════════════════════════════════════════════════════ FORM ELEMENTS ═══════════════════════════════════════════════════════════════════ */ /* ─── Labels ───────────────────────────────────────────────────── */ .field-label { display: block; font-size: 11px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; } /* ─── Text inputs & selects ────────────────────────────────────── */ .input, .select { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text-1); font-family: var(--font-mono); font-size: 12px; padding: 6px 8px; border-radius: 3px; transition: border-color 0.12s ease, background 0.12s ease; } .input:hover, .select:hover { border-color: var(--border-strong); } .input:focus, .select:focus { outline: none; border-color: var(--accent); background: var(--surface); } .input[type="number"] { text-align: right; } /* ─── Remove native number spinners ────────────────────────────── */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ─── Select chevron ───────────────────────────────────────────── */ .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px; padding-right: 24px; } /* ─── Range sliders ────────────────────────────────────────────── */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--border); border-radius: 2px; outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); } input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--accent); border-radius: 50%; cursor: pointer; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); } /* ─── Inline style overrides for JS-generated font sizes ──────── */ /* Bumps hardcoded 10px/11px inline styles to accessible minimums */ [style*="font-size: 10px"], [style*="font-size:10px"] { font-size: 11px !important; } [style*="font-size: 11px"], [style*="font-size:11px"] { font-size: 12px !important; } /* ═══════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); color: var(--text-1); cursor: pointer; transition: all 0.12s ease; white-space: nowrap; } .btn:hover { border-color: var(--border-strong); background: var(--surface-2); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { border-color: var(--accent); background: var(--accent); color: #1a1410; } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); } .btn-ghost:hover { color: var(--text-1); background: var(--surface-2); } /* ═══════════════════════════════════════════════════════════════════ TOOL BUTTONS (sidebar grid) ═══════════════════════════════════════════════════════════════════ */ .tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; color: var(--text-2); cursor: pointer; transition: all 0.12s ease; aspect-ratio: 1; } .tool:hover { border-color: var(--border-strong); color: var(--text-1); background: var(--surface-2); } /* Updated tool active state */ .tool.active, .tool-zone.active { color: var(--accent); background: transparent; border-color: transparent; box-shadow: 0 0 0 1px var(--accent), 0 0 8px var(--accent-faint); } /* Add these new utility classes for DOM elements (Stages, Fixtures, Timeline Blocks) */ .is-selected, .active-item, .fixture.selected, .timeline-block.selected { background: transparent !important; border-color: transparent !important; box-shadow: 0 0 0 1px var(--accent), 0 0 8px var(--accent-faint) !important; z-index: 10; /* Ensures the outer glow is not clipped by adjacent elements */ } .tool svg { width: 18px; height: 18px; stroke-width: 1.5; } /* ─── SVG icon normalisation ───────────────────────────────────── */ /* non-scaling-stroke keeps stroke weight constant in screen pixels regardless of transform/scale — prevents lines going hairline-thin when icons are rendered at 14–16 px in denser list/toolbar views. */ svg path, svg line, svg circle, svg rect, svg polyline, svg polygon, svg ellipse, svg use { vector-effect: non-scaling-stroke; } .tool-label { font-size: 10px; font-weight: 500; line-height: 1.1; text-align: center; letter-spacing: 0.01em; } .tool-zone { padding: 8px 4px; } .tool-zone svg { width: 16px; height: 16px; } .tool-zone .tool-label { font-size: 9px; } /* ═══════════════════════════════════════════════════════════════════ HUD (canvas bottom metrics bar) ═══════════════════════════════════════════════════════════════════ */ /* ─── Legacy single-cell HUD ───────────────────────────────────── */ .hud { position: absolute; bottom: 16px; left: 16px; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-size: 11px; pointer-events: none; overflow: hidden; } .hud-cell { padding: 8px 12px; display: flex; align-items: baseline; gap: 6px; } .hud-cell + .hud-cell { border-left: 1px solid var(--border); } .hud-label { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .hud-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); font-size: 12px; min-width: 60px; } /* ─── Main HUD pill bar (#mainHud / .canvas-hud) ───────────────── */ #mainHud, .canvas-hud { position: absolute; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 8px; z-index: 500; pointer-events: none; } .canvas-hud-right { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 8px; z-index: 500; pointer-events: none; } /* Individual pills */ #mainHud > div, #mainHud > span, #mainHud > p, .hud-pill { background-color: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2); font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; letter-spacing: 0.2px; height: 26px; margin: 0; box-sizing: border-box; line-height: 1; } :root.light #mainHud > div, :root.light #mainHud > span, :root.light #mainHud > p, :root.light .hud-pill { border-color: var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); color: var(--text-3); } /* Inputs/sliders inside HUD pills */ #mainHud input, .hud-pill input { background: transparent; border: none; color: var(--text-1); font-family: var(--font-mono); font-size: 11px; padding: 0; height: auto; margin: 0; vertical-align: middle; } .hud-pill input[type="number"]:focus { box-shadow: none; outline: none; } /* ═══════════════════════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════════════════════ */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(4px); background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-1); padding: 10px 16px; border-radius: 3px; font-size: 12px; font-weight: 500; z-index: 50; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { border-color: var(--danger); } /* ═══════════════════════════════════════════════════════════════════ WORDMARK ═══════════════════════════════════════════════════════════════════ */ .wordmark { display: flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-1); } .wordmark .logo-icon { width: 20px; height: 20px; margin-right: 8px; } .wordmark .sub { color: var(--text-3); font-weight: 400; margin-left: 6px; } /* ═══════════════════════════════════════════════════════════════════ INSPECTOR EMPTY STATE ═══════════════════════════════════════════════════════════════════ */ .inspector-empty { font-size: 11px; color: var(--text-3); text-align: center; padding: 24px 12px; line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════ HELP MODAL (slide-in panel) ═══════════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.65); display: none; } .modal-overlay.open { display: flex; justify-content: flex-end; } .modal-panel { width: 420px; max-width: 100%; height: 100%; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-2) var(--surface); display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; will-change: transform; } .modal-panel::-webkit-scrollbar { /* inherited from global ::-webkit-scrollbar rule */ } .help-sec { padding: 20px; border-bottom: 1px solid var(--border); } .help-sec:last-child { border-bottom: none; } .help-h2 { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .help-p { font-size: 12px; line-height: 1.65; color: var(--text-2); margin-bottom: 8px; } .help-p:last-child { margin-bottom: 0; } .help-p strong { color: var(--text-1); font-weight: 600; } .help-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; } .help-key { font-family: var(--font-mono); font-size: 11px; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; white-space: nowrap; } .help-val { font-size: 12px; color: var(--text-2); line-height: 1.5; padding-top: 2px; } /* ═══════════════════════════════════════════════════════════════════ DEPTH & SHADOW SYSTEM Recessed panels and floating elements share a consistent shadow vocabulary across all tools. ═══════════════════════════════════════════════════════════════════ */ /* ─── Recessed canvas areas ────────────────────────────────────── */ #canvasWrap, #timelineScroll, #listScroll, #previewPanel { box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--border-strong); position: relative; } /* SPL Map: Leaflet's internal panes have solid backgrounds that cover container inset shadows. This pseudo-element casts the shadow over the tiles while allowing clicks through. */ #map::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--border-strong); z-index: 1000; /* Sits above leaflet-tile-pane (z-index 400) */ } :root.light #canvasWrap, :root.light #timelineScroll, :root.light #listScroll, :root.light #map::after, :root.light #previewPanel { box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--border); } /* ─── Floating elements ────────────────────────────────────────── */ .modal-content, #dragGhost, #toast, .context-menu, .dropdown-menu { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-strong); } :root.light .modal-content, :root.light #dragGhost, :root.light #toast, :root.light .context-menu, :root.light .dropdown-menu { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border); } /* ═══════════════════════════════════════════════════════════════════ RESIZABLE PANES & SPLITTERS ═══════════════════════════════════════════════════════════════════ */ .resizer, .splitter { position: relative; background-color: transparent; transition: background-color 0.15s ease-in-out; } .resizer::before, .splitter::before { content: ''; position: absolute; background-color: var(--border-strong); transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* Vertical splitters (between sidebar and canvas) */ .resizer-y, .splitter-y { cursor: col-resize; } .resizer-y::before, .splitter-y::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); } /* Horizontal splitters (dock panels) */ .resizer-x, .splitter-x { cursor: row-resize; } .resizer-x::before, .splitter-x::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); } /* Hover / active — DAW glow */ .resizer:hover::before, .splitter:hover::before, .resizer:active::before, .splitter:active::before { background-color: var(--accent); box-shadow: 0 0 6px var(--accent-faint); } :root.light .resizer:hover::before, :root.light .splitter:hover::before, :root.light .resizer:active::before, :root.light .splitter:active::before { box-shadow: 0 0 4px var(--accent-dim); } /* Cursor lock while dragging */ body.is-resizing * { cursor: col-resize !important; user-select: none !important; pointer-events: none !important; } /* ═══════════════════════════════════════════════════════════════════ LAYOUT UTILITIES (replaces Tailwind CDN) ═══════════════════════════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1 1 0%; min-width: 0; min-height: 0; } .shrink-0 { flex-shrink: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .relative { position: relative; } .h-screen { height: 100vh; } .h-5 { height: 1.25rem; } .h-12 { height: 3rem; } .w-full { width: 100%; } .w-px { width: 1px; } .w-\[280px\] { width: 280px; } .hidden { display: none !important; } .text-center { text-align: center; } .cursor-pointer { cursor: pointer; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .p-4 { padding: 1rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .pb-2 { padding-bottom: 0.5rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-3 { margin-bottom: 0.75rem; } .mt-1 { margin-top: 0.25rem; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } /* ═══════════════════════════════════════════════════════════════════ PRINT ═══════════════════════════════════════════════════════════════════ */ @media print { body, html { height: auto; overflow: visible !important; background: white !important; color: black !important; } /* Hide all UI chrome */ header, aside, #dayTabs, #timelineScroll, #dockPanel, #mainHud, #toast, #helpModal, #dragGhost, .no-print { display: none !important; } main { overflow: visible !important; display: block !important; height: auto !important; } .flex-1 { flex: none !important; } #listScroll { display: block !important; overflow: visible !important; padding: 0 !important; background: white !important; } * { text-shadow: none !important; box-shadow: none !important; } table { page-break-inside: auto; width: 100%; border-collapse: collapse; } tr { page-break-inside: avoid; page-break-after: auto; opacity: 1 !important; } th, td { color: black !important; border-bottom: 1px solid #000 !important; } th { border-bottom-width: 2px !important; } h3 { page-break-after: avoid; color: black !important; border-bottom: 2px solid #000; padding-bottom: 4px; } }