/* =========================== PRODUCTION CSS RESET v2.0 Modern, accessible, performant =========================== */ /* ===== BOX MODEL ===== */ *, *::before, *::after { box-sizing: border-box; } /* ===== ROOT & HTML ===== */ html { /* 62.5% → 1rem = 10px */ font-size: 62.5%; /* Prevent font size inflation on mobile */ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; /* Enable smooth scroll only if user prefers */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Let browser style and scrollbars based on color scheme */ html { background: transparent; color-scheme: light; } /* ===== SPACING RESET ===== */ body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } /* Remove list styles on ul, ol elements with a list role */ ul[role='list'], ol[role='list'] { list-style: none; } /* ===== BODY DEFAULTS ===== */ body { min-height: 100vh; min-height: 100dvh; /* Dynamic viewport height for mobile */ line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== TYPOGRAPHY ===== */ h1, h2, h3, h4, h5, h6 { line-height: 1.1; text-wrap: balance; /* Better heading wrapping */ } /* Prevent text overflow */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ===== LINKS ===== */ a { color: currentColor; text-decoration-skip-ink: auto; } a:not([class]) { text-decoration: underline; } /* ===== MEDIA ===== */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Prevent images from stretching when width is set */ img { font-style: italic; /* Alt text styling if image fails to load */ background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; } /* ===== FORMS ===== */ input, button, textarea, select { font: inherit; color: inherit; line-height: inherit; } /* Remove default button styles */ button { all: unset; cursor: pointer; display: inline-block; } /* Restore button role for accessibility */ button, [role='button'] { cursor: pointer; } /* Input and textarea defaults */ input, textarea, select { background-color: transparent; border: none; } /* Remove spinner from number inputs */ input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type='number'] { -moz-appearance: textfield; } /* Textarea defaults */ textarea { resize: vertical; } textarea:not([rows]) { min-height: 10em; } /* File input cursor */ input[type='file'] { cursor: pointer; } input[type='file']::file-selector-button { cursor: pointer; } /* Search input reset */ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; } /* Select appearance reset */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; } /* Placeholder styles */ ::placeholder { opacity: 0.6; color: currentColor; } /* ===== INTERACTIVE STATES ===== */ :disabled, [aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; } :focus { outline: none; } :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Remove outline on elements that don't need it */ :focus:not(:focus-visible) { outline: none; } /* ===== TABLES ===== */ table { border-collapse: collapse; border-spacing: 0; width: 100%; } /* ===== MISC ELEMENTS ===== */ hr { border: none; border-top: 1px solid currentColor; margin: 0; opacity: 0.25; color: inherit; } address { font-style: normal; } summary { cursor: pointer; list-style: none; } /* Remove default marker */ summary::-webkit-details-marker { display: none; } details > summary { list-style: none; } code, pre, kbd, samp { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'Courier New', monospace; } dialog { border: none; padding: 0; max-width: 100vw; max-height: 100vh; } dialog::backdrop { background: rgba(0, 0, 0, 0.5); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; } /* ===== UTILITY ATTRIBUTES ===== */ [hidden] { display: none !important; } [aria-busy='true'] { cursor: progress; } [aria-controls] { cursor: pointer; } /* ===== ACCESSIBILITY ===== */ /* Scroll margin for anchors (smooth scrolling offset) */ :target { scroll-margin-block: 5ex; } /* Skip to content link */ .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } /* Screen reader only content */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ===== PERFORMANCE & ISOLATION ===== */ /* Create stacking context for root elements */ #root, #__next, #app { isolation: isolate; } /* Optimize animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Optimize font rendering */ @supports (font-variation-settings: normal) { html { font-feature-settings: 'kern' 1; } }