Reset

The reset is a global stylesheet that clears all default browser styles. It doesn’t generate any .f--* utility classes — instead, it applies base styles that serve as a clean starting point for your layout and components.

---

What it does

The reset foundation:

• Removes default margins and paddings
• Sets box-sizing: border-box for all elements
• Normalizes typography and element spacing
• Ensures consistent rendering across browsers
• Clears inherited inconsistencies (e.g., button styles, form inputs, lists)

---

Reset file

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    scroll-behavior: smooth;
}

:focus {
    outline: 0;
}
*:focus-visible {
    outline: 2px solid map-get($color-options, h);
}

html {
    overscroll-behavior: none;
    @extend .f--background-b;
}

body {
    @extend .f--background-a;
    @extend .f--font-e;
    @extend .f--color-d;
}

b,
strong {
    font-weight: 600;
}

ul,
ol {
    list-style: none;
}
img {
    max-width: 100%;
}
fieldset {
    border: none;
}

// input[type=search]::-webkit-search-decoration,
// input[type=search]::-webkit-search-results-button,
// input[type=search]::-webkit-search-results-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=text],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
input[type=email],
input[type=search],
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week],
input[type=file],
input[type=checkbox],
input[type=radio],
input[type=submit],
input[type=button],
input[type=reset],
select,
textarea,
button {
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
}

textarea {
    resize: vertical;
}

select,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    // background: transparent;
}

button {
    cursor: pointer;
    background: transparent;
}

// remove dotted outline/border in Firefox
select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 $color-a !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid map-get($color-options, b);
    -webkit-text-fill-color: map-get($color-options, b);
    color: map-get($color-options, b);
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

// hide recaptcha
.grecaptcha-badge {
    display: none;
}

---

Why it’s important

Without a reset layer, each browser applies its own default styles — which can result in:

• Unintended spacing or font sizing
• Inconsistent button/input behavior
• Elements that behave differently across devices

The reset ensures that every component starts from the same baseline, making the rest of your foundation (spacing, grid, typography) predictable and stable.