[padding-block/inline] > .container [max-width] ============================================================ */ /* === RESET === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; /* 1rem = 10px */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-size: var(--text-m); line-height: var(--text-line-height); color: var(--text-dark); background-color: var(--bg-ultra-light); -webkit-font-smoothing: antialiased; /* Must be `clip`, never `hidden`. With `hidden` on one axis the browser computes the other axis as `auto`, which turns into a scroll container and silently breaks every `position: sticky` on the page. `html` already clips the x axis, so this is belt-and-braces only. */ overflow-x: clip; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } ul[role="list"], ol[role="list"] { list-style: none; } /* === BASE ELEMENTS === */ h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); letter-spacing: var(--heading-letter-spacing); text-wrap: balance; } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: var(--h4); } h5 { font-size: var(--h5); } h6 { font-size: var(--h6); } p { max-width: 65ch; } a { color: var(--link-color); text-decoration: none; transition: color var(--duration-fast) ease; } a:hover { color: var(--link-color-hover); } ::selection { background: var(--primary); color: var(--text-light); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-xs); } /* === LAYOUT: SECTION + CONTAINER MODEL === */ section, .section { padding-block: var(--section-space-m); padding-inline: var(--container-gap); } .container { max-width: var(--container-width); margin-inline: auto; } .container--narrow { max-width: var(--container-width-narrow); } .container--wide { max-width: var(--container-width-wide); } /* Section spacing variants */ .pad-section--xs { padding-block: var(--section-space-xs); } .pad-section--s { padding-block: var(--section-space-s); } .pad-section--m { padding-block: var(--section-space-m); } .pad-section--l { padding-block: var(--section-space-l); } .pad-section--xl { padding-block: var(--section-space-xl); } /* === TEXT GROUPS (content blocks own their rhythm via gap) === */ .content { display: flex; flex-direction: column; gap: var(--content-gap); } .title-group { display: flex; flex-direction: column; gap: var(--space-xs); } .accent { font-size: var(--text-s); font-weight: var(--accent-font-weight); letter-spacing: var(--accent-letter-spacing); text-transform: uppercase; line-height: 1; color: var(--primary); } .accent--light { color: var(--accent); } .lead { font-size: var(--text-l); color: var(--text-dark-muted); } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: var(--btn-padding-block) var(--btn-padding-inline); border-radius: var(--btn-border-radius); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); letter-spacing: var(--btn-letter-spacing); text-transform: var(--btn-text-transform); line-height: var(--btn-line-height); border: var(--btn-border-width) solid transparent; cursor: pointer; transition: var(--transition); } .btn--primary { background: var(--primary); color: var(--text-light); } .btn--primary:hover { background: var(--primary-hover); color: var(--text-light); box-shadow: var(--shadow-glow-primary); transform: translateY(-2px); } .btn--outline { background: transparent; color: var(--text-dark); border-color: var(--base-trans-20); } .btn--outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); } .btn--light { background: var(--bg-ultra-light); color: var(--tertiary); } .btn--light:hover { background: var(--accent-ultra-light); color: var(--tertiary); transform: translateY(-2px); } .btn--outline-light { background: transparent; color: var(--text-light); border-color: hsl(33 60% 97% / 0.35); } .btn--outline-light:hover { border-color: var(--text-light); color: var(--text-light); transform: translateY(-2px); } /* Text-link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 0.8rem; font-weight: 600; font-size: var(--text-s); color: var(--secondary); } .link-arrow::after { content: "→"; transition: transform var(--duration-fast) ease; } .link-arrow:hover::after { transform: translateX(4px); } /* === GRID / FLEX UTILITIES === */ .grid { display: grid; gap: var(--grid-gap); } .grid--2 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); } .flex--row { display: flex; flex-direction: row; } .flex--col { display: flex; flex-direction: column; } .flex--wrap { flex-wrap: wrap; } .align-items--center { align-items: center; } .align-items--end { align-items: flex-end; } .justify-content--between { justify-content: space-between; } .justify-content--center { justify-content: center; } .gap--xs { gap: var(--space-xs); } .gap--s { gap: var(--space-s); } .gap--m { gap: var(--space-m); } .gap--l { gap: var(--space-l); } /* === TEXT UTILITIES === */ .text--xs { font-size: var(--text-xs); } .text--s { font-size: var(--text-s); } .text--m { font-size: var(--text-m); } .text--l { font-size: var(--text-l); } .text--xl { font-size: var(--text-xl); } .text--xxl { font-size: var(--text-xxl); } .text-center { text-align: center; } .text--light { color: var(--text-light); } .text--light-muted { color: var(--text-light-muted); } .text--dark { color: var(--text-dark); } .text--dark-muted { color: var(--text-dark-muted); } .text--primary { color: var(--primary); } .text-weight--500 { font-weight: 500; } .text-weight--600 { font-weight: 600; } .text-weight--700 { font-weight: 700; } .text-uppercase { text-transform: uppercase; } .text-italic { font-style: italic; } .font--display { font-family: var(--font-display); } /* === BACKGROUND UTILITIES === */ .bg--primary { background-color: var(--primary); } .bg--secondary { background-color: var(--secondary); } .bg--tertiary { background-color: var(--tertiary); } .bg--accent { background-color: var(--accent); } .bg--ultra-light { background-color: var(--bg-ultra-light); } .bg--light { background-color: var(--bg-light); } .bg--semi-light { background-color: var(--bg-semi-light); } .bg--dark { background-color: var(--bg-dark); } .bg--ultra-dark { background-color: var(--bg-ultra-dark); } /* === RADIUS / SHADOW UTILITIES === */ .radius--s { border-radius: var(--radius-s); } .radius--m { border-radius: var(--radius-m); } .radius--l { border-radius: var(--radius-l); } .radius--xl { border-radius: var(--radius-xl); } .radius--round { border-radius: var(--radius-round); } .radius--arch { border-radius: var(--radius-arch); } .shadow--m { box-shadow: var(--shadow-m); } .shadow--l { box-shadow: var(--shadow-l); } .shadow--xl { box-shadow: var(--shadow-xl); } /* === MISC === */ .relative { position: relative; } .overflow--hidden { overflow: hidden; } .width--full { width: 100%; } .logo--white { filter: brightness(0) invert(1); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* === RESPONSIVE (mobile-first collapse helpers) === */ @media (max-width: 767px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 991px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* === ACCESSIBILITY === */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }