/* ============================================================ AGC GLASS — Core Color & Type Foundations Luxury frameless shower doors · warm minimalist atelier ------------------------------------------------------------ Fonts are loaded from Google Fonts (see @import below). SUBSTITUTION NOTE: No brand font files were provided, so we selected the nearest luxe matches — Cormorant Garamond for display (high-contrast warm serif, echoes the boutique "Warm" logotype) and Jost for UI/body (clean humanist- geometric sans). Swap in licensed brand fonts when available. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap'); :root { /* ---------- BRAND PALETTE ---------------------------------- */ /* Warm earthy neutral base — never pure white, never pure black */ /* Surfaces — clean cool neutrals (near-white → light stone-grey) */ --alabaster: #FBFCFC; /* lightest surface / page bg */ --cream: #F2F5F4; /* default cool surface */ --linen: #EAEFEE; /* card / raised surface */ --travertine: #DBE3E1; /* tonal block, stone wash */ --greige: #BFC9C6; /* muted divider / quiet fill */ --clay: #8CA09B; /* mid neutral, captions (cool sage) */ /* Ink — deep cool near-blacks with a faint teal undertone */ --espresso: #16211F; /* primary text */ --bark: #33443F; /* secondary text */ --taupe-deep: #5E6E6A; /* tertiary text / muted headings */ /* Brand teal — the primary accent (from AGC logo) */ --brass: #09B399; /* brand teal — primary accent */ --brass-deep: #078C79; /* teal hover / pressed */ --brass-light: #71C8B6; /* mint tint / highlight */ --matte-black: #16211F; /* deep teal-charcoal (dark sections) */ --matte-black-soft: #24322F; /* Stone — dramatic feature tones (use sparingly, as accents) */ --quartzite: #4C5E63; /* blue quartzite */ --quartzite-deep: #354549; --marble-vein: #2C2926; /* veined black marble */ /* ---------- SEMANTIC COLOR ROLES -------------------------- */ --bg: var(--alabaster); --bg-warm: var(--cream); --surface: #FFFFFFEE; /* near-white glass surface */ --surface-raised: var(--linen); --fg1: var(--espresso); /* primary text */ --fg2: var(--bark); /* secondary text */ --fg3: var(--taupe-deep); /* tertiary / muted */ --fg-faint: var(--clay); /* captions, meta */ --accent: var(--brass); --accent-hover: var(--brass-deep); --on-accent: #F4FBF9; --hardware: var(--matte-black); --divider: #DBE3E1; /* cool hairline */ --divider-soft: #EAEFEE; /* ---------- TYPE FAMILIES --------------------------------- */ --serif-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif; --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; --label: 'Jost', system-ui, sans-serif; /* tracked all-caps labels */ /* ---------- TYPE SCALE (fluid-ish, px) -------------------- */ --fs-display: clamp(56px, 7vw, 104px); --fs-h1: clamp(40px, 5vw, 68px); --fs-h2: clamp(30px, 3.4vw, 46px); --fs-h3: 28px; --fs-h4: 21px; --fs-body-lg: 19px; --fs-body: 17px; --fs-small: 15px; --fs-label: 12.5px; /* tracked caps */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.62; --tracking-label: 0.22em; --tracking-caps: 0.08em; /* ---------- SPACING (8pt base, organic rhythm) ------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- RADII (organic & rounded; glass stays crisp) -- */ --r-xs: 6px; --r-sm: 12px; --r-md: 20px; --r-lg: 32px; --r-xl: 48px; --r-pill: 999px; /* Crisp edge used ONLY for glass/metal motifs */ --r-crisp: 2px; /* ---------- SHADOWS (soft, warm, diffuse — never harsh) --- */ --shadow-sm: 0 1px 2px rgba(16, 33, 30, 0.04), 0 2px 8px rgba(16, 33, 30, 0.05); --shadow-md: 0 4px 14px rgba(16, 33, 30, 0.06), 0 12px 32px rgba(16, 33, 30, 0.07); --shadow-lg: 0 8px 24px rgba(16, 33, 30, 0.07), 0 28px 70px rgba(16, 33, 30, 0.10); --shadow-brass: 0 8px 28px rgba(9, 179, 153, 0.24); /* ---------- MOTION ---------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.33, 0, 0.1, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms; } /* ============================================================ SEMANTIC ELEMENT DEFAULTS ============================================================ */ .agc-display { font-family: var(--serif-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg1); } h1, .agc-h1 { font-family: var(--serif-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--fg1); } h2, .agc-h2 { font-family: var(--serif-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg1); } h3, .agc-h3 { font-family: var(--serif-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; color: var(--fg1); } h4, .agc-h4 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; color: var(--fg1); } p, .agc-body { font-family: var(--sans); font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); text-wrap: pretty; } .agc-body-lg { font-family: var(--sans); font-weight: 300; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg2); } .agc-lede { font-family: var(--serif-display); font-weight: 400; font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; color: var(--fg3); } .agc-label { font-family: var(--label); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); } .agc-small { font-family: var(--sans); font-weight: 400; font-size: var(--fs-small); line-height: 1.5; color: var(--fg3); } a { color: var(--accent); text-decoration: none; }