/* Anti-FOUC: the page is hidden until this stylesheet loads (see layout ) */ html { visibility: visible; } /* Defensive base reset — mirrors the Tailwind preflight shipped in the Vite bundle (resources/css/app.css). Keeps core styling (link colour, box sizing, element margins) working even if that later stylesheet is slow or dropped on a real device. Removing this would leave UA-default blue links and spacing. */ *, *::before, *::after { box-sizing: border-box; } a { color: inherit; text-decoration: inherit; } body { margin: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } img, video { max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; } /* Font vertical-metric normalisation: overrides how the browser lays out this font (the custom font's built-in metrics made pill/button labels sit slightly HIGH and can differ between OS/device). Tune the values below on a real tablet. line-gap removed; descent capped near a typical value. */ @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/HelveticaNeueLTStd-Lt.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/helvetica-neue-lt-std-roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/Helvetica Neue LT Std 65 Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/Helvetica Neue LT Std 75 Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; } @font-face { font-family: "Helvetica Neue LT Std"; src: url("../fonts/HelveticaNeueLTStd-Hv.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; } :root { --black: #121212; --white: #ffffff; --off-white: #faf7f2; --grey: #666; --light-grey: #888888; --beige: #F5E0A4; --orange: #e69e6c; --purple: #a86d88; --red: #d40036; --light-green: #119391; --dark-green: #2b6f79; --light-blue: #5b89b4; --dark-blue: #185f93; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; --spacing-3xl: 5rem; --spacing-4xl: 6rem; --spacing-5xl: 7rem; --spacing-6xl: 8rem; --content-width: min(90%, 1600px); } html { scroll-behavior: smooth; } html, body { min-height: 100vh; overflow-x: hidden; background-color: var(--off-white); font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0.1em; line-height: 1.5; scroll-behavior: smooth; } body { display: flex; flex-direction: column; } main { flex: 1; } .txt-xs { font-size: clamp(0.6rem, 1vw, 0.8rem); line-height: 1.2; } .txt-sm { font-size: clamp(0.7rem, 1.2vw, 1rem); line-height: 1.25; } /* Medium */ .txt-md { font-size: clamp(0.8rem, 1.5vw, 1.25rem); line-height: 1.3; } .txt-lg { font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.35; } .txt-xl { font-size: clamp(1.1rem, 2.5vw, 1.75rem); line-height: 1.4; } .txt-2xl { font-size: clamp(1.25rem, 3.5vw, 2.5rem); line-height: 1.3; } .txt-3xl { font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.25; } .txt-4xl { font-size: clamp(1.75rem, 5vw, 3.5rem); line-height: 1.2; } /* Large */ .txt-5xl { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.15; } .txt-6xl { font-size: clamp(2.25rem, 7vw, 5rem); line-height: 1.1; } p { margin-top: 1rem; margin-bottom: 1rem; } h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin: 0; } a p { margin: 0; } /* Responsive styles */ /* For desktops */ @media (min-width: 1201px) and (max-width: 1400px) { } /* For tablets */ @media (min-width: 769px) and (max-width: 1200px) { } /* For mobile devices */ @media (max-width: 768px) { }