I’ll build this as a strong theme foundation reset, not a visual design file. It will normalize browsers, improve accessibility, forms, media, tables, WordPress blocks, and safe defaults for RX Theme.
Below is an advanced assets/css/rx-reset.css file for your RX Theme.
It is safe as a foundation file: browser reset, accessibility, typography base, media, forms, tables, WordPress core classes, block editor support, print reset, dark-mode safety, reduced-motion support.
/*!
Theme Name: RX Theme
File: assets/css/rx-reset.css
Description: Advanced reset, normalization, accessibility base, and WordPress-safe foundation styles.
Author: RxHarun
Version: 1.0.0
*/
/* ==========================================================================
01. Cascade Layers
========================================================================== */
@layer rx-reset, rx-base, rx-accessibility, rx-wordpress, rx-print;
/* ==========================================================================
02. Universal Box Model Reset
========================================================================== */
@layer rx-reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
body {
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: 0;
}
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
display: block;
max-width: 100%;
}
img,
video,
canvas,
svg {
height: auto;
}
svg {
overflow: hidden;
vertical-align: middle;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
cursor: not-allowed;
}
a {
color: inherit;
text-decoration-thickness: from-font;
text-underline-offset: 0.15em;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
}
address {
font-style: normal;
}
hr {
height: 0;
border: 0;
border-top: 1px solid currentColor;
color: inherit;
}
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
b,
strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
font-size: 1em;
}
pre {
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
summary {
display: list-item;
cursor: pointer;
}
details {
display: block;
}
template,
[hidden] {
display: none !important;
}
}
/* ==========================================================================
03. RX Theme Root Defaults
========================================================================== */
@layer rx-base {
:root {
--rx-color-text: #111827;
--rx-color-muted: #4b5563;
--rx-color-bg: #ffffff;
--rx-color-surface: #f9fafb;
--rx-color-border: #e5e7eb;
--rx-color-link: #075985;
--rx-color-link-hover: #0c4a6e;
--rx-color-focus: #2563eb;
--rx-font-system:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Helvetica Neue",
Arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji";
--rx-font-serif:
Georgia,
Cambria,
"Times New Roman",
Times,
serif;
--rx-font-mono:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
--rx-line-height-base: 1.6;
--rx-line-height-heading: 1.2;
--rx-radius-sm: 0.25rem;
--rx-radius-md: 0.5rem;
--rx-radius-lg: 0.75rem;
--rx-shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.35);
--rx-container-width: 1200px;
--rx-content-width: 760px;
--rx-space-1: 0.25rem;
--rx-space-2: 0.5rem;
--rx-space-3: 0.75rem;
--rx-space-4: 1rem;
--rx-space-5: 1.25rem;
--rx-space-6: 1.5rem;
--rx-space-8: 2rem;
--rx-space-10: 2.5rem;
--rx-space-12: 3rem;
}
html {
font-size: 100%;
line-height: var(--rx-line-height-base);
color-scheme: light;
}
body {
font-family: var(--rx-font-system);
font-size: 1rem;
line-height: var(--rx-line-height-base);
color: var(--rx-color-text);
background-color: var(--rx-color-bg);
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
color: #ffffff;
background-color: var(--rx-color-focus);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: var(--rx-line-height-heading);
text-wrap: balance;
}
h1 {
font-size: clamp(2rem, 4vw, 3.5rem);
}
h2 {
font-size: clamp(1.75rem, 3vw, 2.75rem);
}
h3 {
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}
h4 {
font-size: clamp(1.25rem, 2vw, 1.75rem);
}
h5 {
font-size: 1.125rem;
}
h6 {
font-size: 1rem;
}
p,
li,
blockquote,
figcaption {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
a {
color: var(--rx-color-link);
}
a:hover {
color: var(--rx-color-link-hover);
}
a:not([class]) {
text-decoration: underline;
}
img {
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 0.75rem;
}
figure {
max-width: 100%;
}
figcaption {
margin-top: 0.5rem;
color: var(--rx-color-muted);
font-size: 0.9375rem;
}
blockquote {
padding-inline-start: 1rem;
border-inline-start: 4px solid var(--rx-color-border);
}
mark {
padding: 0.1em 0.2em;
color: inherit;
background-color: #fef3c7;
}
code {
padding: 0.125em 0.25em;
border-radius: var(--rx-radius-sm);
background-color: var(--rx-color-surface);
}
pre code {
padding: 0;
background: transparent;
}
}
/* ==========================================================================
04. Accessibility Reset
========================================================================== */
@layer rx-accessibility {
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--rx-color-focus);
outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
box-shadow: var(--rx-shadow-focus);
}
.screen-reader-text,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.screen-reader-text:focus,
.sr-only:focus {
position: absolute !important;
z-index: 100000 !important;
top: 0.5rem !important;
left: 0.5rem !important;
width: auto !important;
height: auto !important;
padding: 0.75rem 1rem !important;
margin: 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
color: #ffffff !important;
background: #111827 !important;
border-radius: var(--rx-radius-md);
text-decoration: none;
}
.skip-link {
position: absolute;
z-index: 100000;
top: 1rem;
left: 1rem;
transform: translateY(-200%);
padding: 0.75rem 1rem;
color: #ffffff;
background: #111827;
border-radius: var(--rx-radius-md);
text-decoration: none;
}
.skip-link:focus {
transform: translateY(0);
}
[aria-disabled="true"] {
cursor: not-allowed;
}
[aria-hidden="true"] {
speak: never;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
}
/* ==========================================================================
05. Form Reset and Base
========================================================================== */
@layer rx-base {
input,
button,
textarea,
select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
input,
textarea,
select {
width: 100%;
max-width: 100%;
}
input,
textarea,
select,
button {
border-radius: var(--rx-radius-md);
}
input,
textarea,
select {
padding: 0.65rem 0.75rem;
border: 1px solid var(--rx-color-border);
background-color: #ffffff;
}
textarea {
min-height: 8rem;
resize: vertical;
}
select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 1rem) 50%,
calc(100% - 0.7rem) 50%;
background-size:
0.3rem 0.3rem,
0.3rem 0.3rem;
background-repeat: no-repeat;
padding-inline-end: 2.25rem;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 2.75rem;
padding: 0.65rem 1rem;
border: 1px solid transparent;
color: #ffffff;
background-color: var(--rx-color-link);
text-align: center;
text-decoration: none;
line-height: 1.2;
user-select: none;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background-color: var(--rx-color-link-hover);
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
min-width: 1rem;
height: 1rem;
padding: 0;
accent-color: var(--rx-color-focus);
}
input[type="file"] {
padding: 0.5rem;
}
input[type="search"] {
appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
appearance: none;
}
input[type="number"] {
appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
fieldset {
min-width: 0;
padding: 1rem;
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-md);
}
legend {
padding-inline: 0.35rem;
font-weight: 700;
}
label {
display: inline-block;
font-weight: 600;
}
::placeholder {
color: rgb(75 85 99 / 0.8);
opacity: 1;
}
:disabled {
opacity: 0.65;
}
}
/* ==========================================================================
06. Tables
========================================================================== */
@layer rx-base {
table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
caption {
margin-bottom: 0.75rem;
color: var(--rx-color-muted);
text-align: start;
font-weight: 600;
}
th,
td {
padding: 0.75rem;
border: 1px solid var(--rx-color-border);
text-align: start;
vertical-align: top;
}
th {
font-weight: 700;
background-color: var(--rx-color-surface);
}
thead th {
vertical-align: bottom;
}
}
/* ==========================================================================
07. Lists and Content Flow Helpers
========================================================================== */
@layer rx-base {
.rx-content ul,
.entry-content ul,
.wp-block-post-content ul {
list-style: disc;
padding-inline-start: 1.5rem;
}
.rx-content ol,
.entry-content ol,
.wp-block-post-content ol {
list-style: decimal;
padding-inline-start: 1.5rem;
}
.rx-content li + li,
.entry-content li + li,
.wp-block-post-content li + li {
margin-top: 0.35rem;
}
.rx-content > * + *,
.entry-content > * + *,
.wp-block-post-content > * + * {
margin-top: 1.25rem;
}
.rx-content > h2,
.entry-content > h2,
.wp-block-post-content > h2 {
margin-top: 2.25rem;
}
.rx-content > h3,
.entry-content > h3,
.wp-block-post-content > h3 {
margin-top: 1.75rem;
}
.rx-content > h4,
.entry-content > h4,
.wp-block-post-content > h4 {
margin-top: 1.5rem;
}
}
/* ==========================================================================
08. Layout Safety Defaults
========================================================================== */
@layer rx-base {
#page,
.site,
.rx-site {
min-height: 100vh;
min-height: 100dvh;
}
.rx-container,
.site-container,
.container {
width: min(100% - 2rem, var(--rx-container-width));
margin-inline: auto;
}
.rx-content-width,
.content-width {
width: min(100% - 2rem, var(--rx-content-width));
margin-inline: auto;
}
.rx-full-width,
.alignfull {
width: 100%;
max-width: none;
}
.rx-breakout,
.alignwide {
width: min(100% - 2rem, var(--rx-container-width));
max-width: var(--rx-container-width);
margin-inline: auto;
}
.rx-clearfix::after {
display: block;
clear: both;
content: "";
}
.rx-hidden {
display: none !important;
}
.rx-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.rx-no-scroll {
overflow: hidden;
}
}
/* ==========================================================================
09. WordPress Core Classes
========================================================================== */
@layer rx-wordpress {
.alignleft {
float: left;
margin-inline-end: 1.5rem;
margin-block-end: 1rem;
}
.alignright {
float: right;
margin-inline-start: 1.5rem;
margin-block-end: 1rem;
}
.aligncenter {
display: block;
margin-inline: auto;
}
.alignnone {
margin: 0;
}
.wp-caption {
max-width: 100%;
}
.wp-caption img {
margin-inline: auto;
}
.wp-caption-text,
.gallery-caption {
margin-top: 0.5rem;
color: var(--rx-color-muted);
font-size: 0.9375rem;
text-align: center;
}
.bypostauthor {
display: block;
}
.sticky {
display: block;
}
.updated:not(.published) {
display: none;
}
.page-content,
.entry-content,
.entry-summary {
overflow-wrap: break-word;
}
.entry-content::after,
.comment-content::after {
display: table;
clear: both;
content: "";
}
.comment-content a {
word-wrap: break-word;
}
.comment-list,
.comment-list .children {
list-style: none;
}
.comment-list .children {
margin-inline-start: 1.5rem;
}
.nav-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
}
.nav-previous,
.nav-next {
max-width: 48%;
}
.nav-next {
margin-inline-start: auto;
text-align: end;
}
}
/* ==========================================================================
10. WordPress Block Editor Frontend Support
========================================================================== */
@layer rx-wordpress {
.wp-block-image img {
height: auto;
}
.wp-block-image figcaption {
color: var(--rx-color-muted);
font-size: 0.9375rem;
text-align: center;
}
.wp-block-gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.wp-block-cover,
.wp-block-cover-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 20rem;
overflow: hidden;
}
.wp-block-cover img,
.wp-block-cover video,
.wp-block-cover-image img,
.wp-block-cover-image video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.wp-block-cover__inner-container {
position: relative;
z-index: 1;
width: min(100% - 2rem, var(--rx-content-width));
margin-inline: auto;
}
.wp-block-table {
overflow-x: auto;
}
.wp-block-table table {
min-width: 100%;
}
.wp-block-quote {
padding-inline-start: 1rem;
border-inline-start: 4px solid var(--rx-color-border);
}
.wp-block-pullquote {
padding: 2rem 1rem;
border-block: 4px solid var(--rx-color-border);
text-align: center;
}
.wp-block-separator {
border: 0;
border-top: 1px solid var(--rx-color-border);
}
.wp-block-code {
padding: 1rem;
overflow-x: auto;
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-md);
background-color: var(--rx-color-surface);
}
.wp-block-preformatted {
overflow-x: auto;
white-space: pre-wrap;
}
.wp-block-embed {
max-width: 100%;
}
.wp-block-embed__wrapper {
position: relative;
}
.wp-block-video video {
width: 100%;
}
.wp-block-audio audio {
width: 100%;
}
.wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.75rem 1.25rem;
border-radius: var(--rx-radius-md);
text-decoration: none;
}
.wp-block-search__inside-wrapper {
display: flex;
gap: 0.5rem;
}
.wp-block-search__input {
min-width: 0;
}
.wp-block-search__button {
flex-shrink: 0;
}
.wp-block-calendar table {
width: 100%;
}
.wp-block-calendar caption {
font-weight: 700;
}
}
/* ==========================================================================
11. Embedded Media and Responsive Ratios
========================================================================== */
@layer rx-base {
.rx-responsive-embed,
.embed-responsive,
.wp-has-aspect-ratio {
position: relative;
overflow: hidden;
}
.rx-responsive-embed::before,
.embed-responsive::before {
display: block;
padding-top: 56.25%;
content: "";
}
.rx-responsive-embed > iframe,
.rx-responsive-embed > video,
.rx-responsive-embed > object,
.rx-responsive-embed > embed,
.embed-responsive > iframe,
.embed-responsive > video,
.embed-responsive > object,
.embed-responsive > embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"],
iframe[src*="dailymotion.com"] {
width: 100%;
aspect-ratio: 16 / 9;
}
}
/* ==========================================================================
12. Modern CSS Safety Helpers
========================================================================== */
@layer rx-base {
:where(article, aside, nav, section) h1 {
font-size: clamp(2rem, 4vw, 3.5rem);
}
:where(h1, h2, h3, h4, h5, h6) a {
color: inherit;
text-decoration: none;
}
:where(h1, h2, h3, h4, h5, h6) a:hover {
text-decoration: underline;
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
max-width: 100%;
}
:where(button, input, textarea, select) {
font-family: inherit;
}
:where(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
touch-action: manipulation;
}
:where([role="list"]) {
list-style: none;
}
:where([data-rx-clickable]) {
cursor: pointer;
}
:where([data-rx-disabled]) {
cursor: not-allowed;
opacity: 0.65;
}
}
/* ==========================================================================
13. Mobile and Touch Improvements
========================================================================== */
@layer rx-base {
html {
-webkit-tap-highlight-color: transparent;
}
body {
overflow-x: clip;
}
input,
textarea,
select,
button {
font-size: 1rem;
}
@supports (-webkit-touch-callout: none) {
input,
textarea,
select {
font-size: 16px;
}
}
@media (max-width: 767px) {
.alignleft,
.alignright {
float: none;
display: block;
margin-inline: auto;
margin-block-end: 1rem;
}
.nav-previous,
.nav-next {
max-width: 100%;
}
.nav-links {
flex-direction: column;
}
.wp-block-search__inside-wrapper {
flex-direction: column;
}
.wp-block-search__button {
width: 100%;
}
}
}
/* ==========================================================================
14. Dark Mode Safe Defaults
========================================================================== */
@layer rx-base {
@media (prefers-color-scheme: dark) {
:root {
--rx-color-text: #f9fafb;
--rx-color-muted: #d1d5db;
--rx-color-bg: #111827;
--rx-color-surface: #1f2937;
--rx-color-border: #374151;
--rx-color-link: #7dd3fc;
--rx-color-link-hover: #bae6fd;
--rx-color-focus: #60a5fa;
color-scheme: dark;
}
input,
textarea,
select {
color: var(--rx-color-text);
background-color: #111827;
border-color: var(--rx-color-border);
}
mark {
color: #111827;
background-color: #fde68a;
}
code {
background-color: #1f2937;
}
}
}
/* ==========================================================================
15. High Contrast and Forced Color Mode
========================================================================== */
@layer rx-accessibility {
@media (forced-colors: active) {
*,
*::before,
*::after {
forced-color-adjust: auto;
}
button,
input,
textarea,
select {
border: 1px solid ButtonText;
}
:focus-visible {
outline: 2px solid Highlight;
}
}
@media (prefers-contrast: more) {
:root {
--rx-color-border: currentColor;
}
a {
text-decoration-thickness: 0.12em;
}
}
}
/* ==========================================================================
16. Print Reset
========================================================================== */
@layer rx-print {
@media print {
*,
*::before,
*::after {
color: #000000 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
html {
font-size: 12pt;
}
body {
min-height: auto;
background: #ffffff !important;
}
a,
a:visited {
color: #000000 !important;
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 90%;
}
a[href^="#"]::after,
a[href^="javascript:"]::after,
.site-title a::after,
.custom-logo-link::after {
content: "";
}
pre,
blockquote {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
nav,
.site-navigation,
.main-navigation,
.comment-respond,
.sidebar,
.widget-area,
.pagination,
.post-navigation,
.no-print {
display: none !important;
}
.rx-container,
.site-container,
.container,
.entry-content,
.wp-block-post-content {
width: 100% !important;
max-width: none !important;
}
}
}
/* ==========================================================================
17. Browser-Specific Cleanups
========================================================================== */
@layer rx-reset {
::-webkit-file-upload-button {
font: inherit;
appearance: button;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
::-webkit-calendar-picker-indicator {
cursor: pointer;
}
::-moz-focus-inner {
padding: 0;
border-style: none;
}
:-moz-ui-invalid {
box-shadow: none;
}
}
/* ==========================================================================
18. Safe Animation Defaults
========================================================================== */
@layer rx-base {
[data-rx-animate] {
animation-fill-mode: both;
}
[data-rx-transition] {
transition-property: color, background-color, border-color, opacity, transform, box-shadow;
transition-duration: 200ms;
transition-timing-function: ease;
}
}
/* ==========================================================================
19. RX Utility Reset Classes
========================================================================== */
@layer rx-base {
.rx-list-reset {
list-style: none;
padding: 0;
margin: 0;
}
.rx-button-reset {
padding: 0;
border: 0;
color: inherit;
background: transparent;
font: inherit;
cursor: pointer;
}
.rx-link-reset {
color: inherit;
text-decoration: none;
}
.rx-img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.rx-img-contain {
width: 100%;
height: 100%;
object-fit: contain;
}
.rx-text-balance {
text-wrap: balance;
}
.rx-text-pretty {
text-wrap: pretty;
}
.rx-overflow-auto {
overflow: auto;
}
.rx-overflow-hidden {
overflow: hidden;
}
.rx-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rx-no-decoration {
text-decoration: none;
}
.rx-full-bleed {
width: 100vw;
margin-inline-start: 50%;
transform: translateX(-50%);
}
}Use this file only as the reset/foundation file.
Recommended loading order:
assets/css/rx-reset.css
assets/css/rx-variables.css
assets/css/rx-base.css
assets/css/rx-layout.css
assets/css/rx-components.css
assets/css/rx-utilities.css
assets/css/rx-wordpress.css
assets/css/rx-responsive.css
assets/css/rx-dynamic.cssIn functions.php, enqueue it first:
wp_enqueue_style(
'rx-reset',
get_template_directory_uri() . '/assets/css/rx-reset.css',
array(),
wp_get_theme()->get('Version')
);