/* * globals.css — Global layout & reset rules * * Linked by every page after tokens.css. * Do NOT redeclare container or section padding in component CSS. * Adjust layout behaviour by overriding the tokens in tokens.css. */ /* ── Base font size ────────────────────────────────────────────────────────── * Sets 1rem = 10px so token values map directly to px (e.g. 1.6rem = 16px). * ──────────────────────────────────────────────────────────────────────────── */ html { font-size: 62.5%; } /* ── Section ───────────────────────────────────────────────────────────────── * Semantic full-width wrapper. Owns the gutter padding and section spacing. * Apply background colours and images to .section, never to .container. * ──────────────────────────────────────────────────────────────────────────── */ .section { display: flex; flex-direction: column; width: 100%; row-gap: var(--space-l); padding-top: var(--section-m); padding-right: var(--space-s); padding-bottom: var(--section-m); padding-left: var(--space-s); } /* ── Container ──────────────────────────────────────────────────────────────── * Inner wrapper inside every
. Centres content, constrains width, * and establishes the flex column context for components stacked inside. * ──────────────────────────────────────────────────────────────────────────── */ .container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1320px; row-gap: var(--space-l); column-gap: var(--space-l); margin-left: auto; margin-right: auto; } div { width: 100%; } /* ── Heading defaults ───────────────────────────────────────────────────────── * Zero browser margins (Bricks adds them). Set fluid size tokens as defaults * so unstyled headings are readable. Component CSS can always override. * ──────────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text); } h1 { font-size: var(--heading-l); } h2 { font-size: var(--heading-m); } h3 { font-size: var(--heading-s); } h4 { font-size: var(--heading-xs); } h5 { font-size: var(--heading-2xs); } h6 { font-size: var(--heading-2xs); } /* ── Paragraph defaults ─────────────────────────────────────────────────────── * Zero browser margins. Set base font size so the 62.5% html root doesn't * make unstyled text tiny. Component CSS can always override. * ──────────────────────────────────────────────────────────────────────────── */ p { margin: 0; font-size: var(--text-m); line-height: var(--leading-relaxed); } p:last-child { margin-bottom: var(--space-s); } /* ── Entrance Animations ────────────────────────────────────────────────────── * Progressive enhancement — all rules scoped to .js-animations so the page * is fully visible and functional without JavaScript. * animation.js adds .js-animations to synchronously, then uses * IntersectionObserver to add .is-visible as elements enter the viewport. * ──────────────────────────────────────────────────────────────────────────── */ @keyframes anim-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes anim-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes anim-slide-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } .js-animations [data-animate] { opacity: 0; will-change: opacity, transform; } .js-animations [data-animate="fade-up"] { transform: translateY(24px); } .js-animations [data-animate="slide-up"] { transform: translateY(32px); } .js-animations [data-animate].is-visible { animation-fill-mode: both; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-duration: 0.55s; } .js-animations [data-animate="fade-up"].is-visible { animation-name: anim-fade-up; } .js-animations [data-animate="fade-in"].is-visible { animation-name: anim-fade-in; } .js-animations [data-animate="slide-up"].is-visible { animation-name: anim-slide-up; } .js-animations [data-animate-order="0"] { animation-delay: 0ms; } .js-animations [data-animate-order="1"] { animation-delay: 80ms; } .js-animations [data-animate-order="2"] { animation-delay: 160ms; } .js-animations [data-animate-order="3"] { animation-delay: 240ms; } .js-animations [data-animate-order="4"] { animation-delay: 320ms; } .js-animations [data-animate-order="5"] { animation-delay: 400ms; } .js-animations [data-animate-order="6"] { animation-delay: 480ms; } .js-animations [data-animate-order="7"] { animation-delay: 560ms; } @media (prefers-reduced-motion: reduce) { .js-animations [data-animate], .js-animations [data-animate].is-visible { animation: none !important; opacity: 1 !important; transform: none !important; } }