/* ================================================================ QUALZY — Global Styles Reset · Variables · Typography · Layout utilities · Animations ================================================================ */ /* FONTS ---------------------------------------------------------------- */ /* Google Fonts are loaded via in each HTML for non-blocking delivery. Do NOT add an @import here — it chains requests and blocks rendering. */ /* CSS VARIABLES ---------------------------------------------------------------- */ :root { /* Brand / accent */ --o: #FA5802; /* orange — primary accent */ --o2: #A23E10; /* orange secondary / deep */ --ol: #FB7A35; /* orange light */ --op: #FEF1EA; /* orange pale (tinted background) */ --om: #FDEADF; /* orange muted */ /* Neutrals */ --dk: #333333; /* darkest — headlines, dark text */ --d2: #1A1915; /* dark 2 — footer background */ --mid: #555555; /* mid — body copy */ --mu: #7A7870; /* muted — captions, labels */ --rule: #E2DDD8; /* rule — borders */ --wh: #FAFAF8; /* off-white — page background */ /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-quote: 'DM Sans', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* Transitions */ --t-fast: 0.15s ease; --t-base: 0.2s ease; --t-slow: 0.6s ease; } /* RESET ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } /* BASE ---------------------------------------------------------------- */ body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; background: var(--wh); color: var(--dk); overflow-x: hidden; } /* LAYOUT UTILITIES ---------------------------------------------------------------- */ .pad { padding: 100px 80px; } .inn { max-width: 1200px; margin: 0 auto; } /* TYPOGRAPHIC COMPONENTS (shared across all pages) ---------------------------------------------------------------- */ .slbl { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--o); margin-bottom: 16px; } .stit { font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px); font-weight: 900; line-height: 1.1; color: var(--dk); margin-bottom: 20px; } .stit em { font-style: italic; color: var(--o); } .sbod { font-size: 18px; color: var(--mid); line-height: 1.7; font-weight: 300; max-width: 700px; margin-left: auto; margin-right: auto; } /* SCROLL REVEAL ANIMATION ---------------------------------------------------------------- */ .fu { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow), transform var(--t-slow); } .fu.vis { opacity: 1; transform: translateY(0); } /* ANIMATION KEYFRAMES ---------------------------------------------------------------- */ @keyframes pu { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } /* RESPONSIVE — BASE ---------------------------------------------------------------- */ @media (max-width: 900px) { .pad { padding: 60px 24px; } }