/* * Shared styles for every page in this repo. * Tools link it with a relative path, e.g. ../../../../shared/base.css */ :root { /* Page */ --bg: #fdf8f0; --surface: #ffffff; --surface-2: #f4ede1; --text: #2a2622; --muted: #6f675d; --border: #e6ddcf; --accent: #3e63dd; --focus: #3e63dd; --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(42, 38, 34, 0.06), 0 6px 18px rgba(42, 38, 34, 0.08); --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* * Number colors 1–10. Tools that show numbers use these so a number keeps * the same color everywhere. 10 is also the color for numbers ending in 0. * --dN-ink is the text color that reads well on top of --dN. */ --d1: #e5484d; --d1-ink: #ffffff; --d2: #f76b15; --d2-ink: #1c2024; --d3: #ffc53d; --d3-ink: #1c2024; --d4: #8fd14f; --d4-ink: #1c2024; --d5: #30a46c; --d5-ink: #1c2024; --d6: #12b5a5; --d6-ink: #1c2024; --d7: #3fb4f2; --d7-ink: #1c2024; --d8: #3e63dd; --d8-ink: #ffffff; --d9: #8e4ec6; --d9-ink: #ffffff; --d10: #d6409f; --d10-ink: #ffffff; } @media (prefers-color-scheme: dark) { :root { --bg: #17151f; --surface: #221f2c; --surface-2: #2b2838; --text: #f1edf7; --muted: #aaa3b8; --border: #393547; --accent: #8da4ef; --focus: #8da4ef; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35); } } [data-digit="1"] { --c: var(--d1); --ink: var(--d1-ink); } [data-digit="2"] { --c: var(--d2); --ink: var(--d2-ink); } [data-digit="3"] { --c: var(--d3); --ink: var(--d3-ink); } [data-digit="4"] { --c: var(--d4); --ink: var(--d4-ink); } [data-digit="5"] { --c: var(--d5); --ink: var(--d5-ink); } [data-digit="6"] { --c: var(--d6); --ink: var(--d6-ink); } [data-digit="7"] { --c: var(--d7); --ink: var(--d7-ink); } [data-digit="8"] { --c: var(--d8); --ink: var(--d8-ink); } [data-digit="9"] { --c: var(--d9); --ink: var(--d9-ink); } [data-digit="10"] { --c: var(--d10); --ink: var(--d10-ink); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.4; } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Tool pages ------------------------------------------------------- */ /* * Full-screen, touch-first layout. Add class="tool" to a tool's . * The height is fixed (not min-height) so a child with * container-type: size gets a real height to measure. */ body.tool { height: 100vh; height: 100dvh; display: flex; flex-direction: column; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .tool-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .tool-header h1 { flex: 1; margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tool-actions { display: flex; align-items: center; gap: 8px; } .icon-btn, .pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; text-decoration: none; transition: transform 0.12s ease; } .icon-btn { width: 48px; padding: 0; } .pill-btn { padding: 0 18px; font-weight: 700; font-size: 1rem; } /* On narrow screens, pill buttons show only their icon. */ @media (max-width: 480px) { .pill-btn .btn-label { display: none; } .pill-btn { width: 48px; padding: 0; } } .icon-btn:active, .pill-btn:active { transform: scale(0.94); } .icon-btn svg, .pill-btn svg { width: 24px; height: 24px; flex: none; } /* Mute button: shows the speaker or the crossed-out speaker. */ .mute-btn .icon-muted { display: none; } .mute-btn[aria-pressed="true"] .icon-sound { display: none; } .mute-btn[aria-pressed="true"] .icon-muted { display: block; } /* * Reduced motion: remove animations and transitions entirely. (Shortening * them to near zero isn't enough: Safari's engine keeps reporting them as * running.) Tools must use timers, never animationend/transitionend events. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }