/* ===== CSS Variables ===== */ :root { --bg-primary: #000000; --bg-secondary: #111111; --bg-card: #1a1a1a; --text-primary: #ffffff; --text-secondary: #b0b0b0; --text-muted: #2f2f2f; --border-color: #868686; --btn-lap-bg: #565656; --btn-lap-text: #bcbcbc; --btn-start-from: #30af4f; --btn-start-to: #249a40; --btn-stop-from: #c84028; --btn-stop-to: #b33825; --lap-fastest: #32d74b; --lap-slowest: #ff453a; --menu-bg: #1f1f1f; --menu-fg: #ffffff; --menu-border: transparent; --menu-scroll-thumb: rgba(255, 255, 255, 0.35); --content-bg: #ffffff; --content-card-bg: #ffffff; --content-border: #e5e5e5; --content-heading: #000000; --content-body: #333333; --accent: #000000; --header-fg-hero: #ffffff; --header-fg-below: #000000; --scroll-thumb: #333333; } /* ===== Focus outline: hide on mouse, keep on keyboard ===== */ :focus:not(:focus-visible) { outline: none; } /* ===== Smooth theme transition ===== */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.6s ease, background 0.6s ease, color 0.6s ease, border-color 0.6s ease, fill 0.6s ease, stroke 0.6s ease, box-shadow 0.6s ease !important; } [data-theme="light"] { --bg-primary: #f2f2f2; --bg-secondary: #f0f2f5; --bg-card: #ffffff; --text-primary: #000000; --text-secondary: #555555; --text-muted: #b3b3b3; --border-color: #868686; --btn-lap-bg: #565656; --btn-lap-text: #bcbcbc; --menu-bg: #ffffff; --menu-fg: #000000; --menu-border: transparent; --menu-scroll-thumb: rgba(0, 0, 0, 0.35); --content-bg: #ffffff; --content-card-bg: #ffffff; --content-border: #e5e5e5; --content-heading: #000000; --content-body: #555555; --accent: #000000; --header-fg-hero: #000000; --header-fg-below: #000000; --scroll-thumb: #cccccc; } /* ===== Color themes: hero uses accent color, content section stays white ===== */ [data-theme="red"], [data-theme="teal"], [data-theme="blue"], [data-theme="purple"], [data-theme="green"], [data-theme="slate"] { --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.75); --text-muted: rgba(255, 255, 255, 0.35); --border-color: rgba(255, 255, 255, 0.55); --btn-lap-bg: rgba(255, 255, 255, 0.2); --btn-lap-text: #ffffff; --menu-bg: #ffffff; --menu-fg: #000000; --menu-border: transparent; --menu-scroll-thumb: rgba(0, 0, 0, 0.35); --content-bg: #ffffff; --content-card-bg: #ffffff; --content-border: #e5e5e5; --content-heading: #000000; --content-body: #333333; --header-fg-hero: #ffffff; --scroll-thumb: rgba(255, 255, 255, 0.35); } [data-theme="red"] { --bg-primary: #AE4949; --accent: #AE4949; --header-fg-below: #AE4949; } [data-theme="teal"] { --bg-primary: #2A7479; --accent: #2A7479; --header-fg-below: #2A7479; } [data-theme="blue"] { --bg-primary: #306A96; --accent: #306A96; --header-fg-below: #306A96; } [data-theme="purple"] { --bg-primary: #6D4D89; --accent: #6D4D89; --header-fg-below: #6D4D89; } [data-theme="green"] { --bg-primary: #49794F; --accent: #49794F; --header-fg-below: #49794F; } [data-theme="slate"] { --bg-primary: #4D6978; --accent: #4D6978; --header-fg-below: #4D6978; } /* ===== Dark mode: dropdowns flip to light surface when past hero ===== In dark mode, the content section below hero is white. Dropdowns attached to the fixed header (menu/theme/lang) would otherwise stay dark over that white background, looking out of tone. Once has the `past-hero` class (added by shared.js when hero bottom scrolls above ~50px), switch --menu-bg and --menu-fg to white/black so dropdowns match the content surface, just like the split-color icons in the header. Other themes already use white --menu-bg so they don't need this. */ :root.past-hero:not([data-theme]) .theme-dropdown, :root.past-hero:not([data-theme]) .lang-dropdown, :root.past-hero:not([data-theme]) .nav-dropdown { --menu-bg: #ffffff; --menu-fg: #000000; --menu-scroll-thumb: rgba(0, 0, 0, 0.35); } :root.past-hero:not([data-theme]) .nav-dropdown a:hover, :root.past-hero:not([data-theme]) .lang-dropdown a:hover { background-color: rgba(0, 0, 0, 0.1); } /* ===== Reset & Base ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== Scrollbar ===== */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; } /* ===== Header ===== */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 25px 35px 0; pointer-events: none; } .header > * { pointer-events: auto; } /* Hamburger Menu */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 22px; height: 20px; cursor: pointer; background: none; border: none; padding: 0; z-index: 101; color: var(--header-fg-hero); position: relative; } .hamburger > span:not(.split-overlay) { display: block; width: 100%; height: 2px; background-color: currentColor; transition: transform 0.3s, opacity 0.3s; } /* ===== Split-color overlay for header icons ===== */ .split-overlay { position: absolute; inset: 0; pointer-events: none; color: var(--header-fg-below); clip-path: inset(var(--split-y, 100%) 0 0 0); } .hamburger .split-overlay { display: flex; flex-direction: column; justify-content: center; gap: 5px; } .hamburger .split-overlay span { display: block; width: 100%; height: 2px; background-color: currentColor; transition: transform 0.3s, opacity 0.3s; } .theme-btn .split-overlay, .lang-btn .split-overlay { display: flex; align-items: center; justify-content: center; } .lang-btn .split-overlay { border: 1px solid currentColor; border-radius: 5px; box-sizing: border-box; font-size: 12px; } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Header Right */ .header-right { display: flex; align-items: center; gap: 12px; } /* Theme Switcher */ .theme-switcher { position: relative; } .theme-btn { width: 30px; height: 30px; border: none; background: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; color: var(--header-fg-hero); position: relative; } .theme-btn:active { transform: scale(0.9); } .theme-btn > svg, .theme-btn .split-overlay svg { width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); } .theme-btn:hover > svg, .theme-btn:hover .split-overlay svg { transform: rotate(-18deg) scale(1.08); } .theme-btn:active > svg, .theme-btn:active .split-overlay svg { transform: rotate(-18deg) scale(1); } .theme-swatch { display: block; width: 18px; height: 18px; border-radius: 50%; } .theme-swatch-light { border: 1px solid #cccccc; } .theme-dropdown { position: absolute; top: 40px; left: 50%; background: var(--menu-bg); border-radius: 15px; opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.3s; padding: 10px 12px; display: grid; grid-template-columns: repeat(4, auto); gap: 8px; } .theme-dropdown, .lang-dropdown, .nav-dropdown { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .theme-dropdown.active { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .theme-option { width: 26px; height: 26px; padding: 2px; background: none; border: 2px solid transparent; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, border-color 0.15s; } .theme-option:hover { transform: scale(1.1); } .theme-option .theme-swatch { width: 18px; height: 18px; } .theme-option.active-theme { border-color: var(--menu-fg); } /* Language Switcher */ .lang-switcher { position: relative; } .lang-btn { width: auto; min-width: 30px; height: 30px; /* Use inset box-shadow instead of border so the overlay's border (which sits at inset:0 = padding edge) aligns pixel-perfectly with the base stroke. With a real border, the overlay's border would render 1px inside the button's border, making the button visually shrink when the overlay replaces the base (e.g. dark mode scrolled into white content where --header-fg-hero becomes invisible). */ border: none; box-shadow: inset 0 0 0 1px var(--header-fg-hero); border-radius: 5px; background: none; color: var(--header-fg-hero); font-size: 12px; font-family: 'Inter', system-ui, -apple-system, sans-serif; cursor: pointer; padding: 0 6px; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: background-color 0.3s; position: relative; box-sizing: border-box; } .lang-btn:hover { background-color: rgba(255, 255, 255, 0.1); } [data-theme="light"] .lang-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .lang-dropdown { position: absolute; top: 40px; /* Logical property: anchors dropdown to the parent's inline-end edge. LTR (resolves to right:0): lang-switcher sits at viewport right; dropdown extends leftward and fits. RTL (resolves to left:0): lang-switcher sits at viewport left; dropdown extends rightward and fits. */ inset-inline-end: 0; background: var(--menu-bg); border-radius: 15px; max-height: 300px; max-height: min(300px, calc(100vh - 80px)); max-height: min(300px, calc(100dvh - 80px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--menu-scroll-thumb) transparent; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.3s; white-space: nowrap; /* Asymmetric inline padding: 0 on the start edge, 8px on the end edge where the scrollbar appears (right in LTR, left in RTL). */ padding-block: 12.5px; padding-inline: 0 8px; } .lang-dropdown-panel { max-height: none; overflow: hidden; } .lang-dropdown-scroll { max-height: 300px; max-height: min(300px, calc(100vh - 105px)); max-height: min(300px, calc(100dvh - 105px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--menu-scroll-thumb) transparent; -webkit-overflow-scrolling: touch; } .lang-dropdown::-webkit-scrollbar, .lang-dropdown-scroll::-webkit-scrollbar { width: 14px; } .lang-dropdown::-webkit-scrollbar-track, .lang-dropdown-scroll::-webkit-scrollbar-track { background: transparent; } .lang-dropdown::-webkit-scrollbar-thumb, .lang-dropdown-scroll::-webkit-scrollbar-thumb { background-color: var(--menu-scroll-thumb); border-radius: 999px; border: 4px solid transparent; background-clip: content-box; } .lang-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .lang-dropdown a { display: flex; align-items: center; gap: 10px; padding: 7.5px 15px; color: var(--menu-fg); text-decoration: none; font-size: 12px; transition: background-color 0.15s, color 0.3s; } .lang-code { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; opacity: 0.75; flex-shrink: 0; } .lang-dropdown a:hover { background-color: rgba(255, 255, 255, 0.05); } [data-theme="light"] .lang-dropdown a:hover, [data-theme="red"] .lang-dropdown a:hover, [data-theme="teal"] .lang-dropdown a:hover, [data-theme="blue"] .lang-dropdown a:hover, [data-theme="purple"] .lang-dropdown a:hover, [data-theme="green"] .lang-dropdown a:hover, [data-theme="slate"] .lang-dropdown a:hover { background-color: rgba(0, 0, 0, 0.1); } .lang-dropdown a.active-lang { color: var(--menu-fg); } /* Navigation Menu Dropdown */ .menu-switcher { position: relative; } .nav-dropdown { position: absolute; top: 40px; /* Logical property: anchors dropdown to the parent's inline-start edge. LTR (resolves to left:0): menu-switcher sits at viewport left; dropdown extends rightward and fits. RTL (resolves to right:0): menu-switcher sits at viewport right; dropdown extends leftward and fits. */ inset-inline-start: 0; background: var(--menu-bg); border-radius: 15px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.3s; white-space: nowrap; padding: 12.5px 0; } .nav-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: flex; align-items: center; gap: 15px; padding: 7.5px 15px; color: var(--menu-fg); text-decoration: none; font-size: 12px; transition: background-color 0.15s, color 0.3s; } .nav-dropdown a:hover { background-color: rgba(255, 255, 255, 0.05); } [data-theme="light"] .nav-dropdown a:hover, [data-theme="red"] .nav-dropdown a:hover, [data-theme="teal"] .nav-dropdown a:hover, [data-theme="blue"] .nav-dropdown a:hover, [data-theme="purple"] .nav-dropdown a:hover, [data-theme="green"] .nav-dropdown a:hover, [data-theme="slate"] .nav-dropdown a:hover { background-color: rgba(0, 0, 0, 0.1); } .nav-dropdown a.active-page { color: var(--menu-fg); } .nav-dropdown a svg, .nav-dropdown a img { width: 15px; height: 15px; flex-shrink: 0; } /* ===== Hero Section ===== */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding-top: 15vh; background-color: var(--bg-primary); } /* Timer Display */ .timer-display { font-size: 110px; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -2px; text-align: center; line-height: 1; user-select: none; white-space: nowrap; } /* ===== Buttons ===== */ .btn-group { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; } .btn { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; font-weight: 500; cursor: pointer; border: none; outline: none; transition: opacity 0.15s, transform 0.1s; user-select: none; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.96); } /* Desktop Buttons */ .btn-desktop { width: 210px; height: 35px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .btn-lap { background-color: var(--btn-lap-bg); color: var(--btn-lap-text); } .btn-lap.disabled { cursor: default; opacity: 0.7; } .btn-lap.enabled { color: #ffffff; opacity: 1; } .btn-start { background: linear-gradient(to bottom, var(--btn-start-from), var(--btn-start-to)); color: #ffffff; } .btn-stop { background: linear-gradient(to bottom, var(--btn-stop-from), var(--btn-stop-to)); color: #ffffff; } /* Mobile Buttons */ .btn-mobile { width: 140px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } /* ===== Keyboard Shortcuts Guide ===== */ .shortcuts-guide { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 50px; color: var(--text-secondary); font-size: 12px; position: absolute; bottom: calc(100vh - 15vh - 120px - 40px - 35px - 50px - 26px); left: 50%; transform: translateX(-50%); user-select: none; -webkit-user-select: none; pointer-events: none; } /* Fixed position for shortcuts - don't move with timer */ .shortcuts-wrapper { margin-top: 50px; } .shortcut-item { display: flex; align-items: center; gap: 8px; } .shortcut-item + .shortcut-item { margin-left: 4px; } .shortcut-key { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 5px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .shortcut-label { color: var(--text-secondary); font-size: 12px; white-space: nowrap; } .shortcut-divider { width: 1px; height: 18px; background-color: var(--border-color); margin: 0 12px; transform: rotate(0deg); } /* ===== Scroll Hint ===== */ .scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); animation: bounce 1s infinite; opacity: 0.5; } .scroll-hint svg { width: 24px; height: 24px; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateX(-50%) translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } /* ===== Lap Data Table ===== */ .lap-container { width: 100%; max-width: 442px; margin: 60px auto 0; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .lap-container.visible { opacity: 1; visibility: visible; } .lap-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; } /* Desktop header bar */ .lap-table thead { display: table; width: 100%; background-color: #565656; border-radius: 5px 5px 0 0; } .lap-table thead tr { display: table; width: 100%; table-layout: fixed; } .lap-table th { font-size: 12px; font-weight: 400; color: #ffffff; padding: 10px 16px; text-align: center; position: sticky; top: 0; background-color: #565656; border-bottom: none; } .lap-table th:first-child { border-radius: 5px 0 0 0; text-align: left; } .lap-table th:last-child { border-radius: 0 5px 0 0; text-align: right; } /* Vertical dividers in header */ .lap-table th:nth-child(1), .lap-table th:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.3); } /* Table body container */ .lap-table tbody { display: block; max-height: 330px; overflow-y: auto; border: 1px solid #565656; border-top: none; border-radius: 0 0 5px 5px; } .lap-table tbody tr { display: table; width: 100%; table-layout: fixed; } /* Scrollbar inside tbody */ .lap-table tbody::-webkit-scrollbar { width: 4px; } .lap-table tbody::-webkit-scrollbar-track { background: transparent; } .lap-table tbody::-webkit-scrollbar-thumb { background: #565656; border-radius: 5px; } .lap-table td { font-size: 12px; color: var(--text-primary); padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.08); } .lap-table tbody tr:first-child td { border-top: none; } [data-theme="light"] .lap-table td { border-top: 1px solid rgba(0,0,0,0.08); } [data-theme="light"] .lap-table tbody { border-color: #565656; } .lap-table td:first-child { text-align: left; } .lap-table td:nth-child(2) { text-align: center; } .lap-table td:last-child { text-align: right; } .lap-fastest td { color: #32d74b !important; } .lap-slowest td { color: #ff453a !important; } /* On color themes the flat #565656 grey clashes with the accent-colored hero. Swap to translucent-white glass (same language the timer/alarm use) so the table sits on the accent surface instead of fighting it. */ [data-theme="red"] .lap-table thead, [data-theme="teal"] .lap-table thead, [data-theme="blue"] .lap-table thead, [data-theme="purple"] .lap-table thead, [data-theme="green"] .lap-table thead, [data-theme="slate"] .lap-table thead, [data-theme="red"] .lap-table th, [data-theme="teal"] .lap-table th, [data-theme="blue"] .lap-table th, [data-theme="purple"] .lap-table th, [data-theme="green"] .lap-table th, [data-theme="slate"] .lap-table th { background-color: rgba(255, 255, 255, 0.15); } [data-theme="red"] .lap-table th:nth-child(1), [data-theme="red"] .lap-table th:nth-child(2), [data-theme="teal"] .lap-table th:nth-child(1), [data-theme="teal"] .lap-table th:nth-child(2), [data-theme="blue"] .lap-table th:nth-child(1), [data-theme="blue"] .lap-table th:nth-child(2), [data-theme="purple"] .lap-table th:nth-child(1), [data-theme="purple"] .lap-table th:nth-child(2), [data-theme="green"] .lap-table th:nth-child(1), [data-theme="green"] .lap-table th:nth-child(2), [data-theme="slate"] .lap-table th:nth-child(1), [data-theme="slate"] .lap-table th:nth-child(2) { border-right-color: rgba(255, 255, 255, 0.25); } [data-theme="red"] .lap-table tbody, [data-theme="teal"] .lap-table tbody, [data-theme="blue"] .lap-table tbody, [data-theme="purple"] .lap-table tbody, [data-theme="green"] .lap-table tbody, [data-theme="slate"] .lap-table tbody { border-color: rgba(255, 255, 255, 0.2); } [data-theme="red"] .lap-table td, [data-theme="teal"] .lap-table td, [data-theme="blue"] .lap-table td, [data-theme="purple"] .lap-table td, [data-theme="green"] .lap-table td, [data-theme="slate"] .lap-table td { border-top-color: rgba(255, 255, 255, 0.14); } [data-theme="red"] .lap-table tbody::-webkit-scrollbar-thumb, [data-theme="teal"] .lap-table tbody::-webkit-scrollbar-thumb, [data-theme="blue"] .lap-table tbody::-webkit-scrollbar-thumb, [data-theme="purple"] .lap-table tbody::-webkit-scrollbar-thumb, [data-theme="green"] .lap-table tbody::-webkit-scrollbar-thumb, [data-theme="slate"] .lap-table tbody::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); } /* ===== Page Hero (info pages: About, Privacy, Terms) ===== Smaller themed band that just hosts a page title + subtitle. Uses #hero so shared.js still drives the split-icon header transition correctly. */ .page-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22vh 20px 12vh; background-color: var(--bg-primary); } .page-hero h1 { font-size: 56px; font-weight: 600; color: var(--text-primary); letter-spacing: -1.5px; line-height: 1.1; } .page-hero .page-subtitle { margin-top: 14px; font-size: 17px; font-weight: 400; color: var(--text-secondary); max-width: 560px; line-height: 1.55; } .page-hero .page-meta { margin-top: 22px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.4px; text-transform: uppercase; } /* ===== Content Section ===== */ .content-section { background-color: var(--content-bg); padding: 80px 20px; } .content-wrapper { max-width: 768px; margin: 0 auto; } .content-section h1 { font-size: 32px; font-weight: 700; margin-bottom: 24px; color: var(--content-heading); } .content-section h2 { font-size: 28px; font-weight: 600; margin-bottom: 20px; color: var(--content-heading); } .content-section h3 { font-size: 20px; font-weight: 600; margin: 32px 0 12px; color: var(--content-heading); } .content-section p { font-size: 16px; line-height: 1.7; color: var(--content-body); margin-bottom: 16px; } .content-section ul, .content-section ol { margin: 12px 0 16px 24px; color: var(--content-body); line-height: 1.7; } .content-section li { margin-bottom: 6px; } .content-section a { color: var(--accent); text-decoration: underline; } .content-section a:hover { opacity: 0.8; } .content-card { background: var(--content-card-bg); border: 1px solid var(--content-border); border-radius: 12px; padding: 24px; margin-bottom: 24px; } /* FAQ */ .faq-item { border-bottom: 1px solid var(--content-border); padding: 20px 0; } .faq-item:last-child { border-bottom: none; } .faq-question { font-size: 17px; font-weight: 600; color: var(--content-heading); margin-bottom: 8px; } .faq-answer { font-size: 15px; line-height: 1.6; color: var(--content-body); } /* ===== 404 Error Page ===== */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; text-align: center; padding: 20px; background-color: var(--bg-primary); } .error-code { font-size: 200px; font-weight: 700; line-height: 1; color: var(--text-primary); letter-spacing: -6px; opacity: 0.9; } .error-message { font-size: 28px; font-weight: 600; color: var(--text-primary); margin-top: 16px; } .error-description { font-size: 15px; color: var(--text-secondary); margin-top: 12px; max-width: 420px; line-height: 1.5; } .error-btn { display: inline-block; margin-top: 32px; padding: 14px 36px; background: linear-gradient(to bottom, var(--btn-start-from), var(--btn-start-to)); color: #ffffff; text-decoration: none; border-radius: 999px; font-size: 15px; font-weight: 500; transition: opacity 0.2s, transform 0.1s; } .error-btn:hover { opacity: 0.9; } .error-btn:active { transform: scale(0.97); } /* Footer Footer uses the hero/theme color (--bg-primary) instead of the content-section white. That way the page reads as: dark hero → white content → themed footer. */ .footer { background-color: var(--bg-primary); border-top: 1px solid var(--content-border); padding: 48px 20px 24px; font-size: 13px; color: var(--text-secondary); } .footer-columns { display: flex; gap: 40px; max-width: 768px; margin: 0 auto 32px; } .footer-col { flex: 1; min-width: 0; } /* First col (About) wider when there are exactly 3 cols */ .footer-col:first-child:nth-last-child(3) { flex: 2; } .footer-col h4 { color: var(--text-primary); font-size: 14px; font-weight: 600; margin-bottom: 12px; } .footer-col p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 8px; } .footer-col ul a { color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: color 0.2s; } .footer-col ul a:hover { color: var(--text-primary); } .footer-bottom { text-align: center; padding-top: 24px; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 13px; } /* ===== Responsive ===== */ @media (max-width: 768px) { .header { position: absolute; padding: 25px 20px 0; } .timer-display { font-size: 80px; font-weight: 500; text-align: center; width: 100%; padding-left: 0; } .hero { align-items: center; } .btn-group { padding-left: 0; justify-content: center; gap: 40px; } .btn-desktop { display: none; } .btn-mobile { display: flex; } .shortcuts-wrapper { display: none; } .scroll-hint { display: none; } .lap-container { padding: 0; max-width: 100%; } .lap-table thead { display: none; } .lap-table tbody { border: none; border-radius: 0; max-height: 340px; } .lap-table td { font-size: 16px; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.08); } .lap-table tbody tr:first-child td { border-top: 1px solid rgba(255,255,255,0.08); } [data-theme="light"] .lap-table td, [data-theme="light"] .lap-table tbody tr:first-child td { border-top: 1px solid rgba(0,0,0,0.08); } .lap-table .col-total { display: none; } .lap-table td:nth-child(2) { text-align: right; } .lap-table tbody tr:last-child td { border-bottom: 1px solid rgba(255,255,255,0.08); } [data-theme="light"] .lap-table tbody tr:last-child td { border-bottom: 1px solid rgba(0,0,0,0.08); } /* Mobile lap rows: keep the glass border colour consistent on color themes. */ [data-theme="red"] .lap-table td, [data-theme="teal"] .lap-table td, [data-theme="blue"] .lap-table td, [data-theme="purple"] .lap-table td, [data-theme="green"] .lap-table td, [data-theme="slate"] .lap-table td, [data-theme="red"] .lap-table tbody tr:first-child td, [data-theme="teal"] .lap-table tbody tr:first-child td, [data-theme="blue"] .lap-table tbody tr:first-child td, [data-theme="purple"] .lap-table tbody tr:first-child td, [data-theme="green"] .lap-table tbody tr:first-child td, [data-theme="slate"] .lap-table tbody tr:first-child td, [data-theme="red"] .lap-table tbody tr:last-child td, [data-theme="teal"] .lap-table tbody tr:last-child td, [data-theme="blue"] .lap-table tbody tr:last-child td, [data-theme="purple"] .lap-table tbody tr:last-child td, [data-theme="green"] .lap-table tbody tr:last-child td, [data-theme="slate"] .lap-table tbody tr:last-child td { border-color: rgba(255, 255, 255, 0.14); } .content-section { padding: 60px 8px; } .content-card { padding: 16px; } .content-section h2 { font-size: 24px; } .page-hero { padding: 18vh 20px 10vh; } .page-hero h1 { font-size: 38px; letter-spacing: -1px; } .page-hero .page-subtitle { font-size: 15px; } .footer-columns { flex-direction: column; gap: 24px; } .error-code { font-size: 120px; letter-spacing: -3px; } .error-message { font-size: 22px; } .error-description { font-size: 14px; } } @media (min-width: 769px) { .btn-mobile { display: none; } .btn-desktop { display: flex; } } /* ===== Inline keyboard key styling (shared) ===== */ .content-section kbd { display: inline-block; padding: 2px 7px; margin: 0 1px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; color: var(--content-heading); background: var(--content-card-bg); border: 1px solid var(--content-border); border-bottom-width: 2px; border-radius: 4px; line-height: 1.4; white-space: nowrap; } /* ===== Inline code (used in About / legal pages) ===== */ .content-section code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; padding: 1px 6px; background: rgba(0, 0, 0, 0.05); border-radius: 4px; color: var(--content-heading); } /* ===== Small in-card note paragraph ===== */ .content-section .content-note { font-size: 14px; color: var(--content-body); opacity: 0.78; margin-top: -4px; } /* ===== Last-updated meta line on legal pages ===== */ .content-section .content-updated { font-size: 13px; color: var(--content-body); opacity: 0.7; margin-bottom: 28px; letter-spacing: 0.3px; } /* ===== Scroll-to-top button ===== */ .scroll-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-primary); color: #ffffff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); z-index: 1000; } .scroll-to-top svg { width: 22px; height: 22px; display: block; } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { filter: brightness(1.1); } .scroll-to-top:active { transform: translateY(0) scale(0.95); } [data-theme="light"] .scroll-to-top { background: #000000; color: #ffffff; } @media (max-width: 768px) { .scroll-to-top { width: 42px; height: 42px; bottom: 18px; right: 18px; } .scroll-to-top svg { width: 19px; height: 19px; } } /* ===== Phase 5.1 - RTL fixes for .lap-table ===== In RTL the table column order is visually reversed but :first-child / :last-child still match DOM order. Swap the rounded corner that should sit on the outer edge of the header bar, flip text-align so headers stay aligned with body cells, and move vertical dividers to the inline-end (border-left) of the affected cells. */ [dir="rtl"] .lap-table th:first-child { border-radius: 0 5px 0 0; text-align: right; } [dir="rtl"] .lap-table th:last-child { border-radius: 5px 0 0 0; text-align: left; } [dir="rtl"] .lap-table th:nth-child(1), [dir="rtl"] .lap-table th:nth-child(2) { border-right: none; border-left: 1px solid rgba(255, 255, 255, 0.3); } [dir="rtl"] .lap-table td:first-child { text-align: right; } [dir="rtl"] .lap-table td:last-child { text-align: left; } [dir="rtl"][data-theme="red"] .lap-table th:nth-child(1), [dir="rtl"][data-theme="red"] .lap-table th:nth-child(2), [dir="rtl"][data-theme="teal"] .lap-table th:nth-child(1), [dir="rtl"][data-theme="teal"] .lap-table th:nth-child(2), [dir="rtl"][data-theme="blue"] .lap-table th:nth-child(1), [dir="rtl"][data-theme="blue"] .lap-table th:nth-child(2), [dir="rtl"][data-theme="purple"] .lap-table th:nth-child(1), [dir="rtl"][data-theme="purple"] .lap-table th:nth-child(2), [dir="rtl"][data-theme="green"] .lap-table th:nth-child(1), [dir="rtl"][data-theme="green"] .lap-table th:nth-child(2), [dir="rtl"][data-theme="slate"] .lap-table th:nth-child(1), [dir="rtl"][data-theme="slate"] .lap-table th:nth-child(2) { border-left-color: rgba(255, 255, 255, 0.25); } /* Mobile (≤768px) collapses the lap table to two columns and right-aligns the Split cell so the time number flushes against the viewport edge. In RTL the Split column lands on the visual left, so flip its alignment to keep that "flush against the outer edge" behaviour. */ @media (max-width: 768px) { [dir="rtl"] .lap-table td:nth-child(2) { text-align: left; } }