/* ============================================================ BENDER EXPORTS — THEME & VARIABLES css/theme.css ✏️ EDIT THIS FILE to change colors, fonts, and spacing across the ENTIRE website at once. ============================================================ */ /* ── COLOR PALETTE ─────────────────────────────────────── */ :root { /* Background colors */ --black: #0b0805; /* Deepest background (footer, darkest sections) */ --dark: #160e06; /* Main dark background */ --brown-dark: #2b1a09; /* Impact section background */ --brown: #4a2e10; /* Accent brown */ --sienna: #7a4520; /* Muted brown for tags, labels */ /* Brand accent — GOLD */ --gold: #c49a35; /* Primary gold (buttons, accents) */ --gold-light: #dbb655; /* Lighter gold (hover states, headings on dark) */ --gold-pale: #f2dfa0; /* Very pale gold (subtle backgrounds) */ /* Light backgrounds */ --cream: #f8f3eb; /* Main light section background */ --warm: #fdfaf5; /* Slightly warmer white for alternating sections */ --fog: #e8dfd2; /* Borders and dividers on light backgrounds */ /* Text colors */ --text: #1e130a; /* Main body text color */ --muted: #705442; /* Muted/secondary text */ } /* ── TYPOGRAPHY ─────────────────────────────────────────── */ :root { /* Font family — Poppins loaded in index.html */ --font: 'Poppins', sans-serif; /* Font sizes (fluid — scales between mobile and desktop) */ --fs-hero: clamp(3rem, 7vw, 6.8rem); --fs-h2: clamp(2.2rem, 4.5vw, 4rem); --fs-h2-sm: clamp(1.9rem, 3.2vw, 3rem); --fs-h3: clamp(1.6rem, 2.8vw, 2.6rem); --fs-body: 0.97rem; --fs-small: 0.82rem; --fs-label: 0.65rem; } /* ── SPACING ────────────────────────────────────────────── */ :root { /* Section vertical padding */ --pad: clamp(80px, 9vw, 130px); --pad-sm: clamp(55px, 7vw, 85px); /* Horizontal page padding */ --side: 6%; } /* ── TRANSITIONS ────────────────────────────────────────── */ :root { --ease: 0.25s ease; --ease-slow: 0.75s ease; } /* ── BUTTON STYLES ──────────────────────────────────────── */ /* Filled gold button */ .btn-fill { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: var(--gold); color: var(--dark); font-family: var(--font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: background var(--ease), transform var(--ease); } .btn-fill:hover { background: var(--gold-light); transform: translateY(-2px); } /* Ghost / outline button */ .btn-line { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); font-family: var(--font); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: border-color var(--ease), color var(--ease); } .btn-line:hover { border-color: #fff; color: #fff; } /* ── SECTION LABEL (chip above headings) ───────────────── */ .chip { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; } .chip-line { width: 24px; height: 2px; background: var(--gold); } .chip-text { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } /* Light version (on dark backgrounds) */ .chip-light .chip-text { color: var(--gold-light); } .chip-light .chip-line { background: var(--gold-light); } /* ── HEADINGS ───────────────────────────────────────────── */ .sec-title { font-size: var(--fs-h2); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--dark); } .sec-title em { font-style: italic; font-weight: 300; color: var(--brown); } .sec-title.light { color: #fff; } .sec-title.light em { color: var(--gold-light); } /* ── BODY TEXT ──────────────────────────────────────────── */ .sec-body { font-size: var(--fs-body); font-weight: 300; line-height: 1.85; color: var(--muted); max-width: 580px; } .sec-body.lt { color: rgba(255, 255, 255, 0.48); } /* ── SCROLL REVEAL ANIMATION ────────────────────────────── */ .rv { opacity: 0; transform: translateY(28px); transition: opacity var(--ease-slow), transform var(--ease-slow); } .rv.in { opacity: 1; transform: none; } /* Stagger delays */ .d1 { transition-delay: 0.12s; } .d2 { transition-delay: 0.22s; } .d3 { transition-delay: 0.32s; } .d4 { transition-delay: 0.42s; }