@layer reset, base, components, utilities; /* Entry point for your PostCSS build */ /******************** Start from good reset *********************/ /* * With Propshaft, assets are served efficiently without preprocessing steps. * CSS precedence follows the standard cascading order — styles declared * later in the manifest win over earlier ones at equal specificity — except * where @layer below overrides that (a layered rule always loses to any * unlayered rule, regardless of source order). */ @layer reset { [hidden] { display: none !important; } /* Kill the ~300ms "is this a double-tap-to-zoom?" wait and the grey tap flash on anything interactive -- on mobile the first tap on a button would otherwise sometimes just get eaten. */ :where(a, button, input, textarea, select, label, summary, [role="button"], [data-action]) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Box sizing and border defaults */ :where(*, *::before, *::after) { box-sizing: border-box; border-width: 0; border-style: solid; min-width: 0; } /* Core root defaults */ :where(html) { block-size: 100%; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; interpolate-size: allow-keywords; } :where(body) { min-block-size: 100vh; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased; } /* Typography improvements */ :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; font-weight: bold; line-height: 1.35; margin: 0 0 0.5rem; font-family: var(--font-heading); } :where(p) { text-wrap: pretty; margin-block-end: 1em; } :where(p + p) { margin-block-start: 0.75em; } /* Ported from ~/Repos/bhamdiy's own typography.css -- list/definition-list spacing this app never had its own opinion on. A component's more specific class (e.g. .table-list's own list-style/padding, or .player-info__stat-value's own margin: 0) already wins over these bare tag rules on specificity, so nothing already hand-tuned shifts. */ :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.5rem; line-height: 1.625; } :where(li) { margin-bottom: 0.25rem; } :where(dl) { margin: 0 0 1rem; } :where(dt) { font-weight: 600; margin-top: 0.75rem; } :where(dt:first-child) { margin-top: 0; } :where(dd) { margin: 0.125rem 0 0 1rem; line-height: 1.5; } /* Media handling */ :where(img, svg, video, canvas) { display: block; max-inline-size: 100%; block-size: auto; } /* Form control modernization */ :where(input, textarea, select, button) { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: currentColor; } :where(select, input) { field-sizing: content; } /* iOS Safari auto-zooms the whole page when a focused input's computed font-size is under 16px — and unlike a manual pinch-zoom, dismissing the keyboard afterward doesn't zoom back out on its own, leaving the page stuck zoomed in. Forcing every text input to at least 16px (this app's own 1rem is already 17.6px, comfortably above that) prevents the zoom from triggering in the first place, rather than trying to reactively undo it once it has. */ :where(input, textarea, select) { font-size: max(1rem, 16px); } /* Accessibility */ :where(:focus-visible) { outline: 2px solid canvasText; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } } @layer base { /* Full-bleed elements (e.g. the hole-cards hero) are allowed to run a little wide on very small screens — this crops that overflow instead of introducing a horizontal scrollbar. Set on both html and body (the one that actually controls viewport scrolling varies by browser); this is safe for the action bar's `position: sticky` too, since neither element is height-constrained, so the resulting scroll box still matches the viewport's own. */ html { font-size: 17.6px; overflow-x: hidden; } body { margin: 0; overflow-x: hidden; font-family: var(--font-sans); background: var(--color-background); color: var(--color-foreground); } /* Turbo Drive's own top-of-page loading bar -- Turbo injects its own \3c style> at runtime with this same selector (ProgressBar.defaultCSS in turbo.js), unlayered and with a hardcoded #0076ff blue. Unlayered always beats a layered rule regardless of source order (see the top of this file), so !important is the only way to actually win here -- same green as .btn--primary (button.css), the app's one "in-progress" accent elsewhere. */ .turbo-progress-bar { background-color: var(--color-primary) !important; } a { color: var(--color-primary-text); text-decoration: none; transition: color 140ms; } a:hover { color: var(--color-chip-ivory); } /* Unlike , browsers don't give