/* ========================================================================== Tremorbell — a cute earthquake detector Soft, rounded, high-contrast-friendly. Themes are swapped by setting data-theme on ; every colour below is a token. ========================================================================== */ :root { --bg: #fff7f2; --bg-2: #ffe9de; --surface: #ffffff; --surface-2: #fff1ea; --border: #f2d6c8; --text: #43302b; --text-soft: #8a6f66; --accent: #ff8a5b; --accent-2: #ffb26b; --calm: #58c9a3; --warn: #ffb020; --hot: #ef5f6b; --shadow: 0 12px 30px rgba(196, 121, 88, 0.16); --radius: 22px; --radius-sm: 14px; --font: 'Nunito', system-ui, -apple-system, sans-serif; --display: 'Baloo 2', 'Nunito', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; } html[data-theme='mint'] { --bg: #f2fbf7; --bg-2: #dff5ec; --surface: #ffffff; --surface-2: #eafaf3; --border: #c9e9dc; --text: #22423a; --text-soft: #5f8479; --accent: #34b39a; --accent-2: #7fd6b3; --calm: #34b39a; --warn: #e2a33a; --hot: #e2606f; --shadow: 0 12px 30px rgba(52, 179, 154, 0.16); } html[data-theme='blossom'] { --bg: #fdf4fb; --bg-2: #f7e3f4; --surface: #ffffff; --surface-2: #fbeefa; --border: #efd2ea; --text: #442a41; --text-soft: #8a6a86; --accent: #d264b6; --accent-2: #f2a3dc; --calm: #6fc4a8; --warn: #e4a53c; --hot: #e05a7b; --shadow: 0 12px 30px rgba(210, 100, 182, 0.16); } html[data-theme='midnight'] { --bg: #0f1424; --bg-2: #161d33; --surface: #171e33; --surface-2: #1d2542; --border: #2b3455; --text: #eaeeff; --text-soft: #9aa4c8; --accent: #7c9cff; --accent-2: #a78bfa; --calm: #4fd1a5; --warn: #ffc14d; --hot: #ff7a8a; --shadow: 0 14px 34px rgba(0, 0, 0, 0.45); } html[data-theme='contrast'] { --bg: #000000; --bg-2: #0a0a0a; --surface: #0d0d0d; --surface-2: #151515; --border: #ffffff; --text: #ffffff; --text-soft: #e6e6e6; --accent: #ffd400; --accent-2: #00e5ff; --calm: #00ff9c; --warn: #ffd400; --hot: #ff5b5b; --shadow: none; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); color: var(--text); background: radial-gradient(900px 500px at 12% -10%, var(--bg-2), transparent 60%), radial-gradient(700px 520px at 92% 0%, var(--bg-2), transparent 55%), var(--bg); background-attachment: fixed; min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { width: min(1000px, 92vw); margin: 0 auto; padding: 28px 0 64px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--surface); color: var(--text); padding: 10px 16px; border-radius: var(--radius-sm); border: 2px solid var(--accent); z-index: 10; } .skip-link:focus { left: 12px; } a { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 8px; } /* ---------- hero ---------- */ .hero { text-align: center; padding: 8px 0 26px; } .back { display: block; text-align: left; font-weight: 700; font-size: 0.92rem; text-decoration: none; margin-bottom: 14px; } .back:hover { text-decoration: underline; } .hero-mark { font-size: 4rem; line-height: 1; display: inline-block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.15)); } .hero-mark.wobble { animation: wobble 0.5s ease-in-out infinite; } @keyframes wobble { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(-6px, 2px, 0) rotate(-9deg); } 75% { transform: translate3d(6px, -2px, 0) rotate(9deg); } } h1 { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.2rem); letter-spacing: 0.5px; margin: 6px 0 8px; } .lede { max-width: 62ch; margin: 0 auto; color: var(--text-soft); } .lede strong { color: var(--text); } .theme-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } .theme-label { font-weight: 700; font-size: 0.88rem; color: var(--text-soft); } .theme-swatches { display: flex; gap: 8px; } .swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; background: var(--sw, #ccc); transition: transform 0.15s ease; } .swatch:hover { transform: scale(1.12); } .swatch[aria-pressed='true'] { border-color: var(--text); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); } /* ---------- stage ---------- */ .stage { position: relative; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; overflow: hidden; } .trace { display: block; width: 100%; height: 220px; border-radius: var(--radius-sm); background: var(--surface-2); } .stage-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.88rem; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface-2); } .pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-soft); } .pill-live .dot { background: var(--calm); animation: blip 1.4s ease-in-out infinite; } .pill-alert { border-color: var(--hot); color: var(--hot); } .pill-alert .dot { background: var(--hot); } @keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .sensor-tag, .stage-hint { font-size: 0.85rem; color: var(--text-soft); } .stage-hint { margin-top: 8px; } /* ---------- readouts ---------- */ .readouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; } .card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .card-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-soft); } .card-value, .mag-value { font-family: var(--display); font-size: 2rem; line-height: 1.2; margin: 4px 0 2px; } .card-mag { background: linear-gradient(140deg, var(--surface), var(--surface-2)); } .mag-value { font-size: 3rem; color: var(--accent); transition: color 0.3s ease; } .card-mag.is-shaking .mag-value { color: var(--hot); } .unit { font-size: 0.95rem; color: var(--text-soft); font-family: var(--font); } .card-note { font-size: 0.82rem; color: var(--text-soft); } /* ---------- gauge ---------- */ .section-title { font-family: var(--display); font-size: 1.35rem; margin-bottom: 12px; } .scale, .controls, .log-section, .explain { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; } .gauge { padding-top: 26px; } .gauge-track { position: relative; height: 22px; border-radius: 999px; background: linear-gradient(90deg, var(--calm), var(--warn) 55%, var(--hot)); border: 2px solid var(--border); overflow: visible; } .gauge-fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px; background: rgba(255, 255, 255, 0.35); mix-blend-mode: overlay; } .gauge-needle { position: absolute; top: -6px; left: 0; width: 4px; height: 34px; border-radius: 4px; background: var(--text); transition: left 0.25s ease; } .needle-bubble { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); background: var(--text); color: var(--surface); font-family: var(--mono); font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .gauge-ticks { display: flex; justify-content: space-between; list-style: none; margin-top: 8px; font-family: var(--mono); font-size: 0.76rem; color: var(--text-soft); } .scale-legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 18px; font-size: 0.88rem; color: var(--text-soft); } .chip { display: inline-block; min-width: 74px; text-align: center; font-family: var(--mono); font-size: 0.76rem; padding: 2px 8px; border-radius: 999px; margin-right: 8px; color: #23201f; background: var(--calm); } .chip-2 { background: #9fe0c4; } .chip-3 { background: #ffe08a; } .chip-4 { background: var(--warn); } .chip-5 { background: #ff9a6b; } .chip-6 { background: var(--hot); color: #fff; } /* ---------- controls ---------- */ .control-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .btn { font-family: var(--display); font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } html[data-theme='contrast'] .btn-primary { color: #000; } .btn-small { font-size: 0.85rem; padding: 7px 14px; } .control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; } .field { display: block; } .field-label { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; } .field-value { font-family: var(--mono); color: var(--accent); } .field-hint { display: block; font-size: 0.8rem; color: var(--text-soft); margin-top: 4px; } input[type='range'] { width: 100%; accent-color: var(--accent); } .switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.92rem; font-weight: 600; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--border); transition: background 0.15s ease; } .switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-soft); transition: transform 0.15s ease, background 0.15s ease; } .switch input:checked+.switch-track { background: var(--accent); border-color: var(--accent); } .switch input:checked+.switch-track::after { transform: translateX(20px); background: #fff; } .switch input:focus-visible+.switch-track { outline: 3px solid var(--accent-2); outline-offset: 3px; } /* ---------- log ---------- */ .log-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .log-actions { display: flex; gap: 8px; } .log { list-style: none; margin-top: 12px; display: grid; gap: 8px; max-height: 320px; overflow-y: auto; } .log-empty { color: var(--text-soft); font-size: 0.9rem; } .log-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; } .log-mag { font-family: var(--display); font-size: 1.35rem; min-width: 3.2rem; text-align: center; } .log-desc { font-size: 0.88rem; color: var(--text-soft); } .log-time { font-family: var(--mono); font-size: 0.78rem; color: var(--text-soft); } /* ---------- explain ---------- */ .explain-list { margin: 0 0 16px 20px; display: grid; gap: 8px; font-size: 0.94rem; color: var(--text-soft); } .explain-list strong { color: var(--text); } code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; } .disclaimer { background: var(--surface-2); border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.9rem; color: var(--text-soft); } .foot { text-align: center; font-size: 0.85rem; color: var(--text-soft); display: grid; gap: 6px; } @media (max-width: 560px) { .trace { height: 170px; } .log-item { grid-template-columns: auto 1fr; } .log-time { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }