// BASE: Reset
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba($black, 0);
}
// stylelint-disable-next-line selector-list-comma-newline-after
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
// Body
body {
margin: 0;
font-family: $eps-font-family;
font-size: $eps-body-font-size;
font-weight: $eps-font-weight-base;
line-height: $eps-line-height-base;
color: var(--body-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--body-bg);
}
::selection {
background-color: rgba(theme-colors(cta), $opacity-05);
}
[tabindex="-1"]:focus:not(:focus-visible) {
outline: 0 !important;
}
// Typography
// Reset header Tags
h1, h2, h3, h4, h5, h6 {
font-size:100%;
margin:0;
padding:0;
line-height:inherit;
font-weight:normal;
}
// Reset margins on paragraphs
p {
margin-top: 0;
margin-bottom: $eps-paragraph-margin-bottom;
}
b,
strong {
font-weight: $eps-font-weight-bold; // Add the correct font weight in Chrome, Edge, and Safari
}
small {
font-size: $eps-small-font-size; // Add the correct font size in all browsers
}
// Links
a {
--eps-link-color: $eps-link-color;
color: var(--eps-link-color);
background-color: transparent; // Remove the gray background on active links in IE 10.
&,
&:active,
&:hover,
&:focus {
text-decoration: $eps-link-decoration;
}
&:focus,
&:hover {
--eps-link-color: $eps-link-hover-color;
text-decoration: $eps-link-hover-decoration;
}
}
a:not([href]) {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
}
// Code
pre,
code,
kbd,
samp {
font-family: $font-family-monospace;
font-size: 1em;
}
// Figures
figure {
// Apply a consistent margin strategy (matches our type styles).
margin: 0 0 0;
}
// Images and content
img {
vertical-align: middle;
border-style: none; // Remove the border on images inside links in IE 10-.
}
svg {
overflow: hidden;
vertical-align: middle;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
input {
overflow: visible; // Show the overflow in Edge
}
button,
select {
text-transform: none; // Remove the inheritance of text transform in Firefox
}
[role="button"] {
cursor: pointer;
}
select {
word-wrap: normal;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Opinionated: add "hand" cursor to non-disabled button elements.
button,
[type="button"],
[type="reset"],
[type="submit"] {
&:not(:disabled) {
cursor: pointer;
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
textarea {
overflow: auto;
resize: vertical;
}
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
[hidden] {
display: none !important;
}
// Opinionated resets:
hr {
border: 0 none;
border-bottom: 1px solid var(--hr-color);
}