/* Base variables (defaults: dark theme) */ :root { /* Core palette */ --color-bg: #0f1115; --color-bg-2: #0c0e12; --color-surface: #171a21; --color-surface-2: #232838; --color-surface-3: #0d1118; --color-text: #f2f5f7; --color-muted: #c2c8d0; --color-primary: #5cc8ff; --color-on-primary: #08131a; --color-accent: #ffd166; --color-focus: #ff9f1c; --color-border: #202633; --color-divider: #1f2431; --color-placeholder: #98a2b3; --color-header-bg: rgba(15, 17, 21, 0.8); --color-footer-bg: #0c0f14; --color-hero-grad-1: #1b2132; --color-hero-grad-2: #1a2835; /* Layout scale */ --font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --radius: 12px; --maxw: 68rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; /* Toast variables */ --toast-bg: var(--color-surface); --toast-text: var(--color-text); --toast-border: var(--color-border); --toast-shadow: 0 8px 24px rgba(0,0,0,0.35); --toast-button-bg: var(--color-primary); --toast-button-text: var(--color-on-primary); --toast-secondary-bg: var(--color-surface-2); --toast-secondary-text: var(--color-text); --toast-secondary-border: var(--color-border); /* Arrival highlight */ --color-highlight-bg: rgba(255, 209, 102, 0.28); /* subtle accent tint */ } /* Light theme (respects system preference when no explicit user choice) */ @media (prefers-color-scheme: light) { :root { --color-bg: #f8fafc; --color-bg-2: #eef2f7; --color-surface: #ffffff; --color-surface-2: #f1f5f9; --color-surface-3: #f8fafc; --color-text: #111827; --color-muted: #4b5563; --color-primary: #0b6bcb; --color-on-primary: #ffffff; --color-accent: #b7791f; --color-focus: #1a73e8; --color-border: #e5e7eb; --color-divider: #e5e7eb; --color-placeholder: #6b7280; --color-header-bg: rgba(255, 255, 255, 0.8); --color-footer-bg: #f3f4f6; --color-hero-grad-1: #e8f0fe; --color-hero-grad-2: #eaf7ff; /* Softer highlight in light mode */ --color-highlight-bg: rgba(183, 121, 31, 0.18); } } /* Explicit user overrides via [data-theme] on */ :root[data-theme="dark"] { --color-bg: #0f1115; --color-bg-2: #0c0e12; --color-surface: #171a21; --color-surface-2: #232838; --color-surface-3: #0d1118; --color-text: #f2f5f7; --color-muted: #c2c8d0; --color-primary: #5cc8ff; --color-on-primary: #08131a; --color-accent: #ffd166; --color-focus: #ff9f1c; --color-border: #202633; --color-divider: #1f2431; --color-placeholder: #98a2b3; --color-header-bg: rgba(15, 17, 21, 0.8); --color-footer-bg: #0c0f14; --color-hero-grad-1: #1b2132; --color-hero-grad-2: #1a2835; } :root[data-theme="light"] { --color-bg: #f8fafc; --color-bg-2: #eef2f7; --color-surface: #ffffff; --color-surface-2: #f1f5f9; --color-surface-3: #f8fafc; --color-text: #111827; --color-muted: #4b5563; --color-primary: #0b6bcb; --color-on-primary: #ffffff; --color-accent: #b7791f; --color-focus: #1a73e8; --color-border: #e5e7eb; --color-divider: #e5e7eb; --color-placeholder: #6b7280; --color-header-bg: rgba(255, 255, 255, 0.8); --color-footer-bg: #f3f4f6; --color-hero-grad-1: #e8f0fe; --color-hero-grad-2: #eaf7ff; } /* Temporary arrival highlight for search terms */ mark.arrival-highlight { background: var(--color-highlight-bg); border-radius: 4px; padding: 0 0.1em; } @media (prefers-reduced-motion: no-preference) { mark.arrival-highlight { transition: background-color 0.6s ease; } mark.arrival-highlight.fade-out { background-color: transparent; } } /* Reset and base */ * { box-sizing: border-box; } html { line-height: 1.5; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-family); background: linear-gradient(180deg, var(--color-bg), var(--color-bg-2) 60%); color: var(--color-text); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Focus styles */ :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; } /* Layout helpers */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-4); } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } /* Performance: avoid work for offscreen main content */ @media screen { @supports (content-visibility: auto) { /* Use two-dimension intrinsic size to stabilize anchor landings */ main > .container { content-visibility: auto; contain-intrinsic-size: 1px 1000px; } } } .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); transform: translateY(-200%); background: var(--color-focus); color: #000; padding: var(--space-2) var(--space-4); border-radius: 8px; font-weight: 600; z-index: 1000; } .skip-link:focus-visible { transform: translateY(0); text-decoration: none; } /* Header */ header.site-header { position: sticky; top: 0; background: var(--color-header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); z-index: 10; } /* Fallback when backdrop-filter is unsupported: use a solid/semi-opaque surface */ @supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) { header.site-header { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } } .brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .site-title { font-size: 1.25rem; margin: 0; font-weight: 700; letter-spacing: 0.2px; } .site-title a { color: var(--color-text); text-decoration: none; } /* Nav */ nav.primary-nav ul { list-style: none; display: flex; gap: var(--space-4); padding: 0; margin: 0; } nav.primary-nav a { color: var(--color-text); opacity: 0.85; padding: var(--space-2) var(--space-3); border-radius: 8px; } nav.primary-nav a[aria-current="page"] { background: var(--color-surface-2); opacity: 1; } nav.primary-nav a:hover { background: var(--color-surface-2); text-decoration: none; } /* Mobile nav toggle */ .nav-toggle { display: none; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 700; } .nav-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Theme toggle button (in header) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.45rem 0.75rem; min-width: 44px; min-height: 44px; /* ensure recommended touch target */ border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 700; } .theme-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } @media (max-width: 720px) { html.js .nav-toggle { display: inline-flex; } nav.primary-nav { position: absolute; top: 100%; right: var(--space-4); left: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: var(--space-2); } nav.primary-nav ul { display: grid; gap: 0.25rem; } nav.primary-nav a { display: block; } /* hidden by default when JS is enabled */ html.js header.site-header nav.primary-nav { display: none; } /* shown when toggled (JS enabled) */ html.js header.site-header[data-nav-open="true"] nav.primary-nav { display: block; } } /* Site search */ .site-search { position: relative; } .site-search label { margin: 0; } .site-search input[type="search"] { width: min(36ch, 42vw); background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.45rem 0.75rem; min-height: 44px; /* improve touch target and visual alignment */ } .site-search .search-help-button { display: none; /* hidden by default; shown when JS is enabled */ margin-left: 0.5rem; padding: 0.45rem 0.6rem; min-width: 44px; min-height: 44px; /* ensure recommended touch target */ border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 700; } html.js .site-search .search-help-button { display: inline-flex; align-items: center; justify-content: center; } .site-search input::placeholder { color: var(--color-placeholder); } .site-search .search-results { position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.35); max-height: 60vh; overflow: auto; } .site-search .search-results ul { list-style: none; margin: 0; padding: 0; } .site-search .search-results li { border-top: 1px solid var(--color-divider); } .site-search .search-results li:first-child { border-top: 0; } .site-search .search-results a { display: block; padding: 0.6rem 0.75rem; color: var(--color-text); text-decoration: none; } .site-search .search-results a[aria-selected="true"] { background: var(--color-surface-2); } .site-search .search-results a:hover { background: var(--color-surface-2); text-decoration: none; } .site-search .search-results a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; } .site-search .search-results .title { font-weight: 700; display: block; } .site-search .search-results .snippet { color: var(--color-muted); font-size: 0.92rem; display: block; } /* Recent searches header and clear control */ .site-search .search-results .recent-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--color-divider); color: var(--color-muted); font-size: 0.9rem; } .site-search .search-results .recent-header .recent-clear { background: none; border: 0; color: var(--color-link); font: inherit; cursor: pointer; padding: 0.2rem 0.25rem; } /* Results header + Copy link button */ .site-search .search-results .results-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--color-divider); color: var(--color-muted); font-size: 0.9rem; } .site-search .search-results .results-header .search-copy { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.55rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font: inherit; font-size: 0.85rem; cursor: pointer; } .site-search .search-results .results-header .search-copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } @media (max-width: 720px) { .site-search input[type="search"] { width: min(28ch, 55vw); } } /* Desktop-only visual '/' hint near search */ @media (min-width: 1024px) { .site-search { position: relative; } .site-search::after { content: "/"; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--color-placeholder); opacity: 0.55; font-weight: 700; font-size: 0.95rem; pointer-events: none; } .site-search input[type="search"] { padding-right: 1.6rem; } /* When the dedicated Help button is present next to search, hide the decorative '/' hint to avoid visual ambiguity */ .site-search:has(.search-help-button)::after { content: none; } } /* Fallback for browsers without :has() support: hide the decorative '/' to avoid ambiguity */ @supports not selector(:has(*)) { @media (min-width: 1024px) { .site-search::after { content: none; } } } /* Hero */ .hero { padding-block: clamp(var(--space-12), 8vw, 5rem); background: radial-gradient(1200px 400px at 10% -10%, var(--color-hero-grad-1), transparent 60%), radial-gradient(1000px 400px at 110% -20%, var(--color-hero-grad-2), transparent 60%); border-bottom: 1px solid var(--color-border); } .hero h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 var(--space-4) 0; } .hero p { color: var(--color-muted); max-width: 52ch; margin: 0; } .cta-row { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; } .btn { display: inline-block; padding: 0.6rem 1rem; border-radius: 999px; font-weight: 700; letter-spacing: 0.2px; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); } .btn-secondary { background: var(--color-surface-2); color: var(--color-text); } .btn:hover { filter: brightness(1.05); text-decoration: none; } /* Micro-interactions with reduced-motion respect */ @media (prefers-reduced-motion: no-preference) { .btn { transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease; } .btn:active { transform: translateY(1px); } } /* Subtle elevation for primary actions */ .btn-primary { box-shadow: 0 2px 0 rgba(0,0,0,0.2); } .btn-primary:hover { box-shadow: 0 3px 0 rgba(0,0,0,0.25); } .btn-primary:active { box-shadow: 0 1px 0 rgba(0,0,0,0.2); } /* Small button variant used across tools */ .btn-small { padding: 0.4rem 0.7rem; font-size: 0.9rem; border-radius: 10px; } /* Inline dice icons for quick buttons */ .btn .die-icon { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.125em; margin-right: 0.45rem; } /* Hero media image */ .hero-media { margin-top: var(--space-6); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-3); box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .hero-media img { width: 100%; height: auto; display: block; } /* Intro grid */ .intro { padding-block: var(--space-12); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); } .card { grid-column: span 12; background: var(--color-surface); padding: var(--space-6); border-radius: var(--radius); border: 1px solid var(--color-border); } .card h3 { margin-top: 0; margin-bottom: var(--space-3); font-size: 1.25rem; } .card h2 { margin-top: 0; margin-bottom: var(--space-3); font-size: 1.25rem; } .card p { margin: 0; color: var(--color-muted); } /* Form controls: consistent, accessible styling */ label { display: inline-block; margin-bottom: 0.25rem; } input[type="text"], input[type="number"], input[type="search"], select, textarea { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 10px; padding: 0.55rem 0.75rem; } input::placeholder, textarea::placeholder { color: var(--color-placeholder); } /* Checkbox and radio label helpers used in tools */ label.checkbox, label.radio { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.25rem; border-radius: 8px; } label.checkbox:focus-within, label.radio:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Compact grid groupings inside forms */ .grid .checkbox, .grid .radio { grid-column: span 6; } @media (min-width: 700px) { .grid .checkbox, .grid .radio { grid-column: span 3; } } @media (min-width: 700px) { .card { grid-column: span 4; } } /* Footer */ footer.site-footer { border-top: 1px solid var(--color-border); background: var(--color-footer-bg); color: var(--color-muted); } footer.site-footer .inner { padding-block: var(--space-8); } footer.site-footer p { margin: 0; } /* Footer utility nav */ .footer-nav { margin-top: var(--space-2); } .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; } .footer-nav a { color: var(--color-muted); text-underline-offset: 2px; padding: 0.1rem 0.25rem; border-radius: 6px; } .footer-nav a[aria-current="page"] { /* Visually distinguish the current page link without affecting focus styles */ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; text-decoration-color: var(--color-primary); color: var(--color-text); } .footer-nav a:hover { text-decoration: underline; } .footer-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; text-decoration: none; } /* Small screens: prevent horizontal scroll */ body { overflow-x: hidden; } /* Table of Contents (TOC) */ nav.toc { margin-block: var(--space-4); } .toc .toc-label { margin: 0 0 var(--space-2) 0; color: var(--color-muted); font-weight: 600; font-size: 0.95rem; } .toc ul { margin: 0; padding-left: 1rem; line-height: 1.7; } .toc a { text-underline-offset: 2px; } /* Breadcrumbs */ nav.breadcrumbs { margin: var(--space-4) 0; font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .breadcrumbs .crumbs { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; } .breadcrumbs li { color: var(--color-muted); display: inline-flex; align-items: center; } /* Simple utility classes used across tools */ .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-2 { margin-bottom: var(--space-2); } .ml-2 { margin-left: var(--space-2); } .muted { color: var(--color-muted); } /* Print button (shown near breadcrumbs on long-form guides) */ .print-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 700; white-space: nowrap; } .print-button:hover { text-decoration: none; filter: brightness(1.05); } .print-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } @media (max-width: 520px) { nav.breadcrumbs { flex-wrap: wrap; } .print-button { margin-top: 0.5rem; } } /* Print styles: consolidated for readability and consistency */ @media print { /* Neutralize effects and ensure high-contrast text */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; background: transparent !important; } html, body { background: #ffffff !important; color: #000000 !important; } body { overflow: visible !important; } /* Page margins optimized for Letter/A4 */ @page { margin: 0.5in; } /* Hide chrome/UI and simplify surfaces */ header.site-header { position: static !important; background: transparent !important; backdrop-filter: none !important; border: 0 !important; display: none !important; } footer.site-footer { display: none !important; background: transparent !important; } nav.primary-nav, .site-search, nav.breadcrumbs, .back-to-top, .cta-row { display: none !important; } /* Layout adjustments */ .container { max-width: none; padding-inline: 0; } .hero { background: none !important; padding-block: 0 !important; border: 0 !important; } .hero-media { display: none !important; } img, svg, video { max-width: 100% !important; height: auto !important; } /* Typography and links */ a, a:visited { color: #000000 !important; text-decoration: underline; } h1, h2, h3, h4, h5, h6 { color: #000000 !important; } p, li { color: #000000 !important; } /* Show URLs for external links inside main content only */ main a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: normal; opacity: 0.6; } main a[href^="#"]::after, main a[href^="/"]::after, main a[href^="javascript:"]::after { content: ""; } /* Prevent width overflow; wrap long words/URLs */ body, main, p, li, a { overflow-wrap: anywhere; word-break: break-word; } /* Print-friendly lists and section breaks */ .card, .site-footer { background: transparent !important; } .card { border-color: #cccccc !important; page-break-inside: avoid; } .card ul, .card ol { padding-left: 1.1rem; } .card li { border-bottom: 1px solid #bbbbbb; padding-bottom: 0.3rem; margin: 0.35rem 0; } .card h2 { page-break-after: avoid; margin-top: 1rem; } .card ol, .card ul { page-break-inside: avoid; } /* Tables: avoid breaking rows across pages */ table { page-break-inside: avoid; } tr, thead, tbody { page-break-inside: avoid; break-inside: avoid; } th, td { page-break-inside: avoid; } /* Hide non-essential interactive affordances in print */ .heading-anchor { display: none !important; } /* Hide on-page Table of Contents in print */ .toc { display: none !important; } .copy-toast { display: none !important; } .print-button { display: none !important; } } /* Help overlay (accessible modal) */ .help-overlay-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; z-index: 1000; } .help-overlay-dialog { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,0.45); width: min(680px, 92vw); padding: var(--space-6); } .help-overlay-dialog h2 { margin-top: 0; margin-bottom: var(--space-3); } .help-overlay-content p { margin: 0.5rem 0 0 0; } .help-overlay-close { position: absolute; top: 8px; right: 12px; background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; } .help-overlay-close:hover { filter: brightness(1.05); } .help-overlay-close:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } .shortcut-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; } .shortcut-list kbd { display: inline-block; background: var(--color-surface-2); border: 1px solid var(--color-border); border-bottom-width: 3px; border-radius: 6px; padding: 0 0.35rem; font-weight: 700; } .breadcrumbs li+li::before { content: "/"; margin: 0 0.5rem; color: var(--color-muted); } .breadcrumbs a { color: var(--color-muted); text-decoration: none; padding: 0.1rem 0.25rem; border-radius: 6px; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; text-decoration: none; } /* Back to top link */ .back-to-top { margin: var(--space-8) 0 var(--space-4); text-align: right; } .back-to-top a { font-weight: 700; } /* Offline page */ .offline-main { padding-block: var(--space-12); } /* Linkable heading anchors */ .heading-anchor { visibility: hidden; margin-left: 0.5rem; color: var(--color-muted); text-decoration: none; font-weight: 700; } h2:hover .heading-anchor, h2:focus-within .heading-anchor, h3:hover .heading-anchor, h3:focus-within .heading-anchor, li:hover .heading-anchor, li:focus-within .heading-anchor { visibility: visible; } .heading-anchor:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; text-decoration: none; } /* Arrival styles for in-page anchors (screen only) */ @media screen { h2:target, h3:target, li:target, header#top:target { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 8px; background-image: linear-gradient(0deg, transparent, transparent), none; /* avoid print background inheritance */ } } /* Brief fade-out of :target arrival highlight (respects reduced motion) */ @media screen and (prefers-reduced-motion: no-preference) { @keyframes target-arrival-fade { 0% { background-color: var(--color-highlight-bg); } 100% { background-color: transparent; } } h2:target, h3:target, li:target, header#top:target { animation: target-arrival-fade 1s ease-out forwards; } } /* Offset anchor scroll position for sticky header */ h2[id], h3[id], li[id] { scroll-margin-top: 5rem; } /* Visual "Link copied" toast */ .copy-toast { position: fixed; z-index: 1000; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 0.85rem; padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid #333a; box-shadow: 0 4px 12px rgba(0,0,0,0.35); pointer-events: none; opacity: 0; transform: translateY(-4px); animation: copytoast-fade 1.8s ease-out forwards; } @keyframes copytoast-fade { 0% { opacity: 0; transform: translateY(-4px); } 10% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { /* Disable non-essential motion for users who prefer reduced motion */ *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .copy-toast { animation: none; opacity: 1; } } /* (consolidated print styles above) */ /* Spacing & layout utilities */ .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .pb-8 { padding-bottom: var(--space-8); } .pb-12 { padding-bottom: var(--space-12); } .row-gap-4 { row-gap: var(--space-4); } .col-span-12 { grid-column: span 12; } /* Callouts (tip/note/warning) */ .callout { margin: var(--space-4) 0; padding: var(--space-4); background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-left: 6px solid var(--color-accent); border-radius: 10px; } .callout p { margin: 0.25rem 0 0 0; } .callout p:first-child { margin-top: 0; } .callout .callout-label { display: inline-block; margin-right: 0.5rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--color-surface-3); border: 1px solid var(--color-border); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; } .callout.tip { border-left-color: var(--color-primary); } .callout.note { border-left-color: var(--color-accent); } .callout.warning { border-left-color: #e11d48; } @media print { .callout { background: transparent !important; border-color: #888 !important; } .callout .callout-label { border-color: #888 !important; background: transparent !important; } } /* Shared toast styles (offline + SW update) */ .offline-toast, .sw-toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2147483647; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--toast-border); background: var(--toast-bg); color: var(--toast-text); font: 600 14px/1 var(--font-family); box-shadow: var(--toast-shadow); } .offline-toast[hidden], .sw-toast[hidden] { display: none !important; } .sw-toast .msg { margin-right: 6px; } .offline-toast button, .sw-toast button { appearance: none; -webkit-appearance: none; border: 1px solid var(--toast-secondary-border); background: var(--toast-button-bg); color: var(--toast-button-text); padding: 6px 10px; border-radius: 6px; font: 600 13px/1 var(--font-family); cursor: pointer; } .sw-toast button.secondary { background: var(--toast-secondary-bg); color: var(--toast-secondary-text); border-color: var(--toast-secondary-border); } /* Use the global focus-visible outline color for clarity */ .offline-toast button:focus-visible, .sw-toast button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Reduced motion: avoid transitions/animations on toasts */ @media (prefers-reduced-motion: reduce) { .offline-toast, .sw-toast, .offline-toast *, .sw-toast * { transition: none !important; animation: none !important; } } /* "Ready offline" badge near tool page titles */ .offline-ready-slot { display: inline-block; min-width: 8.5rem; /* reserve space to avoid layout shift */ height: 1.5rem; margin-left: 0.5rem; vertical-align: baseline; } .offline-ready-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 700; font-size: 0.85rem; line-height: 1; } @media print { .offline-ready-slot, .offline-ready-badge { display: none !important; } } /* Content badges for Featured/New labels */ .badge { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .badge + .badge { margin-left: 0.4rem; } .badge.new { /* subtle accent tint handled by base; keep neutral */ } .badge.featured { /* same style; semantic class for easy targeting */ } /* Help overlay (minimal, reusable) */ .help-overlay[hidden] { display: none !important; } .help-overlay-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); } .help-overlay-panel { position: fixed; inset: 10% auto auto 50%; transform: translateX(-50%); width: min(520px, 92vw); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 24px 48px rgba(0,0,0,0.45); padding: var(--space-6); } .help-overlay-panel h2 { margin-top: 0; } .help-overlay-list { margin: 0 0 var(--space-4) 1.25rem; } .help-overlay-list kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.05em 0.35em; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); } .help-overlay-close { margin-top: var(--space-4); padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 700; } .help-overlay-trigger { position: fixed; right: 1rem; bottom: 1rem; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: 800; font-size: 1rem; } .help-overlay-trigger:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Dice Roller: prominent live result + subtle flash */ .result-display { font-size: 1.5rem; font-weight: 700; padding: var(--space-3); border-radius: 8px; background: var(--color-surface-1, var(--color-surface-2)); box-shadow: 0 0 0 1px var(--color-divider, var(--color-border)) inset; } .result-flash { animation: resultFlash 0.45s ease-out; } @keyframes resultFlash { 0% { background-color: rgba(255, 235, 59, 0.25); } 100% { background-color: var(--color-surface-1, var(--color-surface-2)); } } /* Big number for single-die results */ .result-big { font-size: clamp(2rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.02em; } .result-detail { margin-top: 0.25rem; color: var(--color-muted); } /* Dice Roller: brief pre-roll shimmer (reduced-motion aware) */ @media (prefers-reduced-motion: no-preference) { .result-display.pre-rolling { position: relative; overflow: hidden; } .result-display.pre-rolling::after { content: 'Rolling…'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted); background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.06) 40%, transparent 60%); animation: preRollShimmer 0.18s linear 0s 1; } @keyframes preRollShimmer { 0% { transform: translateX(-20%); opacity: 1; } 100% { transform: translateX(20%); opacity: 1; } } } /* Presets editor */ .preset-row { display: flex; flex-wrap: wrap; gap: var(--space-4); } .preset-btn:disabled { opacity: 0.6; cursor: not-allowed; } .preset-manage { margin-top: 0.25rem; } .preset-manage-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); } .preset-edit { display: grid; gap: var(--space-3); grid-template-columns: 1fr auto; align-items: center; } .preset-edit input[type="text"] { width: 100%; background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 10px; padding: 0.55rem 0.75rem; } .preset-edit-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Dice 3D (lite) */ .dice3d-area { margin-block: 0.25rem 0.75rem; display: grid; place-items: center; min-height: 140px; } .dice3d-stage { position: relative; width: 120px; height: 120px; perspective: 800px; } .dice3d-cube { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion: reduce) { .dice3d-cube { transition: none; } } .dice3d-face { --z: 60px; position: absolute; width: 100%; height: 100%; display: grid; place-items: center; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); font-weight: 800; font-size: 2rem; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } .dice3d-face.front { transform: translateZ(var(--z)); } .dice3d-face.back { transform: rotateY(180deg) translateZ(var(--z)); } .dice3d-face.right { transform: rotateY(90deg) translateZ(var(--z)); } .dice3d-face.left { transform: rotateY(-90deg) translateZ(var(--z)); } .dice3d-face.top { transform: rotateX(90deg) translateZ(var(--z)); } .dice3d-face.bottom { transform: rotateX(-90deg) translateZ(var(--z)); } .dice3d-splash { display: inline-block; padding: 0.25rem 0.75rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; font-weight: 800; } @media (prefers-reduced-motion: no-preference) { .dice3d-splash { animation: pop 300ms ease; } @keyframes pop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } }