base.css

:root {
  --minima-property-navigation: 4.5rem;
  --minima-property-container: 1200px;
  --minima-property-spacer-xs: 0.25rem;
  --minima-property-spacer-sm: 0.5rem;
  --minima-property-spacer-md: 1rem;
  --minima-property-spacer-lg: 2rem;
  --minima-property-spacer-xl: 4rem;
  --minima-property-spacer-xxl: 8rem;
  --minima-property-radius-inner: 0.25rem;
  --minima-property-radius-outer: 0.5rem;
  --minima-property-transition: 80ms ease;
  --minima-property-container-padding: 7.5vw;
  --minima-property-layer-background: -1;
  --minima-property-layer-base: 1;
  --minima-property-layer-sticky: 2;
  --minima-property-layer-fixed: 3;
  --minima-property-layer-backdrop: 4;
  --minima-property-layer-modal: 5;
  --minima-property-layer-popup: 6;
  --minima-property-layer-tooltip: 7;
  --minima-property-line-height-heading: 1.2;
  --minima-property-line-height-base: 1.4;
  --minima-color-grey-000: #1E2227;
  --minima-color-grey-100: #272D33;
  --minima-color-grey-200: #363A42;
  --minima-color-grey-300: #7F8091;
  --minima-color-grey-400: #AAB2C7;
  --minima-color-grey-500: #E9ECF4;
  --minima-color-white: #FFFFFF;
  --minima-color-black: #000000;
  --minima-color-primary: #F97200;
  --minima-color-secondary: #99A29E;
  --minima-color-title: #FFFFFF;
  --minima-color-body: #CCCCCC;
  --minima-color-link: #FFFFFF;
  --minima-color-background: #1A1A1A;
  --minima-color-danger: red;
  --minima-color-warning: orange;
  --minima-color-success: green;
  --minima-font-heading: "untitled_sansbold", "Gotham", "Helvetica", "Arial", sans-serif;
  --minima-font-body: "untitled_sansregular", "Gotham", "Helvetica", "Arial", sans-serif;
}

@font-face {
  font-family: "untitled_sansregular";
  src: url("/fonts/untitled_sans_regular-webfont.woff2") format("woff2"), url("/fonts/untitled_sans_regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-named-instance: "Regular";
}
@font-face {
  font-family: "untitled_sansbold";
  src: url("/fonts/untitled_sans_bold-webfont.woff2") format("woff2"), url("/fonts/untitled_sans_bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: bold;
  font-named-instance: "Bold";
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;
  font-size: clamp(16px, 0.75rem + 1vw, 20px);
  scrollbar-width: thin;
  scrollbar-color: var(--minima-color-primary, #F97200) var(--minima-color-background, #1A1A1A);
  scrollbar-gutter: stable;
  scroll-padding-top: var(--minima-property-spacer-xxl, 8rem);
  scroll-padding-bottom: var(--minima-property-spacer-xxl, 8rem);
  font-family: var(--minima-font-body, "untitled_sansregular", "Gotham", "Helvetica", "Arial", sans-serif);
  color-scheme: dark light;
}

body {
  margin: unset;
  line-height: var(--minima-property-line-height-base, 1.4);
  background: var(--minima-color-background, #1A1A1A);
  color: var(--minima-color-body, #CCCCCC);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

[hidden] {
  display: none;
  visibility: hidden;
}

:root {
  accent-color: var(--minima-color-primary, #F97200);
}

:focus,
:focus-visible {
  outline-color: var(--minima-color-primary, #F97200);
}

::-moz-selection {
  background-color: var(--minima-color-primary, #F97200);
  color: var(--minima-color-white, #FFFFFF);
}

::selection {
  background-color: var(--minima-color-primary, #F97200);
  color: var(--minima-color-white, #FFFFFF);
}

::marker,
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  color: var(--minima-color-primary, #F97200);
}

picture,
img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

img {
  width: 100%;
  image-rendering: auto;
}

picture {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

svg {
  fill: currentColor;
}

.container {
  width: 100%;
  max-width: var(--minima-property-container, 1200px);
}
@supports (margin-inline: auto) {
  .container {
    margin-inline: auto;
  }
}
@supports not (margin-inline: auto) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
}
@supports (padding-inline: var(--minima-property-spacer-lg, 2rem)) {
  .container {
    padding-inline: var(--minima-property-spacer-lg, 2rem);
  }
}
@supports not (padding-inline: var(--minima-property-spacer-lg, 2rem)) {
  .container {
    padding-left: var(--minima-property-spacer-lg, 2rem);
    padding-right: var(--minima-property-spacer-lg, 2rem);
  }
}
@media only screen and (max-width: 767px) {
  @supports (padding-inline: var(--minima-property-container-padding, 7.5vw)) {
    .container {
      padding-inline: var(--minima-property-container-padding, 7.5vw);
    }
  }
  @supports not (padding-inline: var(--minima-property-container-padding, 7.5vw)) {
    .container {
      padding-left: var(--minima-property-container-padding, 7.5vw);
      padding-right: var(--minima-property-container-padding, 7.5vw);
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: unset;
  margin-bottom: var(--minima-property-spacer-md, 1rem);
  font-family: var(--minima-font-heading, "untitled_sansbold", "Gotham", "Helvetica", "Arial", sans-serif);
  line-height: var(--minima-property-line-height-heading, 1.2);
}

h1 {
  font-size: 2.125rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.375rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

a {
  color: currentColor;
}

input,
select,
textarea {
  padding: var(--minima-property-spacer-md, 1rem);
  -webkit-transition: border var(--minima-property-transition, 80ms ease);
  transition: border var(--minima-property-transition, 80ms ease);
  background-color: transparent;
  font-family: inherit;
  width: 100%;
}
@media only screen and (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
  input,
select,
textarea {
    border: 1px solid var(--minima-color-grey-200, #363A42);
  }
}
@media only screen and (prefers-color-scheme: dark) {
  input,
select,
textarea {
    color: var(--minima-color-white, #FFFFFF);
    border: 1px solid;
  }
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--minima-color-primary, #F97200);
  outline: unset;
}
input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--minima-color-grey-400, #AAB2C7);
  cursor: not-allowed;
}
input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: var(--minima-color-white, #FFFFFF);
}
input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--minima-color-white, #FFFFFF);
}
input:-ms-input-placeholder, select:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: var(--minima-color-white, #FFFFFF);
}
input::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder {
  color: var(--minima-color-white, #FFFFFF);
}
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--minima-color-white, #FFFFFF);
}
input + label,
select + label,
textarea + label {
  cursor: pointer;
}

label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Pending testing: taken from another project, unsure if fully working on Safari, however with the latest Safari version, gap issues should no longer be an issue */
}
@supports (gap: 1rem) {
  label {
    grid-gap: var(--minima-property-spacer-sm, 0.5rem);
    gap: var(--minima-property-spacer-sm, 0.5rem);
  }
}

select {
  color: var(--minima-color-white, #FFFFFF);
}
select:checked {
  color: var(--minima-color-primary, #F97200);
}
select option {
  background-color: var(--minima-color-grey-100, #272D33);
  color: var(--minima-color-white, #FFFFFF);
}

textarea {
  max-width: 100%;
  width: 100% !important;
}

[type=radio],
[type=checkbox] {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: unset;
  margin: unset;
  cursor: pointer;
}
[type=radio]:checked,
[type=checkbox]:checked {
  color: var(--minima-color-primary, #F97200);
}
[type=radio]:after,
[type=checkbox]:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: var(--minima-property-spacer-sm, 0.5rem);
  height: var(--minima-property-spacer-sm, 0.5rem);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  border-radius: 100%;
}

[type=radio] {
  width: var(--minima-property-spacer-md, 1rem);
  height: var(--minima-property-spacer-md, 1rem);
  border-radius: 100%;
}
[type=radio]:checked {
  border-width: calc(var(--minima-property-spacer-xs, 0.25rem) / 2);
}
[type=radio]:checked:after {
  background: var(--minima-color-primary, #F97200);
}

[type=checkbox] {
  width: var(--minima-property-spacer-md, 1rem);
  height: var(--minima-property-spacer-md, 1rem);
  border-radius: 2px;
}
[type=checkbox]:checked {
  border-color: var(--minima-color-primary, #F97200);
  background-color: var(--minima-color-primary, #F97200);
}
[type=checkbox]:checked:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9' fill='none'%3E%3Cpath d='M9.3125 0.1875L3.64583 6.10054L1.3125 3.66576L0.3125 4.70924L3.64583 8.1875L10.3125 1.23098L9.3125 0.1875Z' fill='var(--minima-color-white, #FFFFFF)'/%3E%3C/svg%3E");
  background-position: 0% 50%;
}

input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

form {
  display: -ms-grid;
  display: grid;
  grid-gap: var(--minima-property-spacer-md, 1rem);
  gap: var(--minima-property-spacer-md, 1rem);
}