@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-regular); color: var(--color-ink); background: var(--color-white); font-size: var(--text-body); line-height: 1.5; } /* Elementor puts its Global Kit class on and sets font-family there at (0,1,0), which the bare `body` rule above cannot beat. The attribute selector makes this (0,1,1) without hardcoding the kit id, which changes if the kit is ever recreated. Theme content already sets its own font via .gia-header / main / .gia-footer; this covers anything rendered as a direct child of body (cookie banner, Elementor popup), so the page uses one typeface throughout. */ body[class] { font-family: var(--font-display); color: var(--color-ink); /* Sticky footer: on a short page the footer would otherwise sit mid-screen with blank space beneath it. main takes the slack (see below). The attribute selector is reused here for the same reason as the font — a bare `body` rule ties with hello-elementor's reset and loses on load order. */ display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, p { margin: 0; } .container { max-width: 1920px; margin-inline: auto; padding-inline: var(--space-section-x); } /* Visible to screen readers only — WordPress's standard pattern. Kept out of `display:none` so assistive tech still announces it. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Elementor's Global Kit sets font-family on at (0,1,0), which outranks a bare `body` selector. Declaring on our own containers instead wins regardless of specificity: a direct rule always beats an inherited value. */ .gia-header, .gia-footer, main { font-family: var(--font-display); } /* Only `main`: .gia-footer declares its own light-on-black color, and .gia-header is a dark bar whose children set their own colors — applying ink here would have depended on stylesheet order to not turn footer text near-invisible. */ main { color: var(--color-ink); } /* hello-elementor's reset sets margin-block-start:.5rem / end:1rem on all headings at (0,0,1), tying with the bare reset above and winning on load order. Two element selectors = (0,0,2), which takes it outright. */ main h1, main h2, main h3, main h4, main h5, main h6, main p, .gia-footer p { margin: 0; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: var(--font-weight-medium); font-size: var(--text-body); border-radius: var(--radius-md); border: none; cursor: pointer; text-align: center; /* hello-elementor's reset underlines every `a` at (0,0,1) and loads after base.css, so it beat the bare `a` rule above — the CTA labels rendered underlined at rest. A class selector (0,1,0) settles it. */ text-decoration: none; } /* Doubled class = (0,2,0), needed to outrank Elementor's Global Kit, which styles bare `a` and `button` at (0,1,1). Every property the kit sets must be answered here, not just color — it also sets font-size/weight, text-transform, letter-spacing, border and padding on `button`, which otherwise turn the submit button into a transparent outlined box. */ .btn.btn--primary { background: var(--color-brand-red); color: var(--color-white); font-family: var(--font-display); font-size: var(--text-body); font-weight: var(--font-weight-medium); text-transform: none; letter-spacing: normal; line-height: 1.5; border: none; border-radius: var(--radius-md); padding: 1rem 2rem; } /* The kit also has `.elementor-kit-15145 button:hover, :focus` at (0,2,1) setting background-color and a 1px border — higher than the resting rule above, so the hover state must be answered separately or the button grows a border on hover. */ .btn.btn--primary:hover, .btn.btn--primary:focus { background: var(--color-brand-red); border: none; filter: brightness(1.1); }