/* Fonts are loaded via + stylesheet in each page's (faster than @import, which is render-blocking and request-chained). */ /* ── Tokens ─────────────────────────────────────────── */ :root { --black: #0e0e0d; --off-white: #f7f5f2; --warm-mid: #c8c4bc; --warm-muted: #9a968f; --accent: #8a7f6e; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --max: 1200px; --nav-h: 64px; } /* ── Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--black); background: var(--off-white); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ── Typography ─────────────────────────────────────── */ h1, h2, h3, .display { font-family: var(--serif); font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; } .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-muted); } /* ── Nav ────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; transition: background 0.3s, border-color 0.3s; } .nav.scrolled { background: rgba(247, 245, 242, 0.95); backdrop-filter: blur(8px); border-bottom: 0.5px solid var(--warm-mid); } .nav-logo { font-family: var(--serif); font-size: 20px; font-weight: 300; letter-spacing: 0.02em; color: var(--off-white); transition: color 0.3s; } .nav.scrolled .nav-logo { color: var(--black); } .nav-links { display: flex; gap: 2.5rem; align-items: center; } .nav-links a { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 245, 242, 0.85); transition: color 0.2s; } .nav.scrolled .nav-links a { color: var(--warm-muted); } .nav-links a:hover, .nav.scrolled .nav-links a:hover { color: var(--black); } .nav-links a.active { color: var(--off-white); } .nav.scrolled .nav-links a.active { color: var(--black); } .nav-cta { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 20px; border: 0.5px solid rgba(247,245,242,0.5); color: var(--off-white) !important; transition: background 0.2s, color 0.2s, border-color 0.2s !important; } .nav.scrolled .nav-cta { background: var(--black); border-color: var(--black); color: var(--off-white) !important; } .nav-cta:hover { background: var(--off-white); color: var(--black) !important; } .nav.scrolled .nav-cta:hover { background: #333; border-color: #333; color: var(--off-white) !important; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav-hamburger span { display: block; width: 22px; height: 1px; background: var(--off-white); transition: background 0.3s; } .nav.scrolled .nav-hamburger span { background: var(--black); } /* Mobile nav */ .nav-mobile { display: none; position: fixed; inset: 0; background: var(--off-white); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--serif); font-size: 32px; font-weight: 300; color: var(--black); } .nav-mobile .close-btn { position: absolute; top: 1.5rem; right: 2.5rem; font-size: 28px; cursor: pointer; background: none; border: none; color: var(--black); line-height: 1; } /* ── Buttons ────────────────────────────────────────── */ .btn { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 32px; border: 0.5px solid var(--black); color: var(--black); transition: background 0.2s, color 0.2s; cursor: pointer; background: transparent; } .btn:hover { background: var(--black); color: var(--off-white); } .btn-light { border-color: var(--off-white); color: var(--off-white); } .btn-light:hover { background: var(--off-white); color: var(--black); } /* ── Page wrapper ───────────────────────────────────── */ .page-content { padding-top: var(--nav-h); } /* ── Section spacing ────────────────────────────────── */ .section { padding: 7rem 2.5rem; } .section-sm { padding: 4rem 2.5rem; } .container { max-width: var(--max); margin: 0 auto; } /* ── Section header ─────────────────────────────────── */ .section-header { margin-bottom: 3.5rem; } .section-header h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 0.5rem; } /* ── Divider line ───────────────────────────────────── */ .rule { width: 40px; height: 0.5px; background: var(--accent); margin: 1.5rem 0; } /* ── Footer ─────────────────────────────────────────── */ footer { padding: 3rem 2.5rem; border-top: 0.5px solid var(--warm-mid); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .footer-logo { font-family: var(--serif); font-size: 22px; font-weight: 300; letter-spacing: 0.02em; } .footer-links { display: flex; gap: 2rem; } .footer-links a { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-muted); transition: color 0.2s; } .footer-links a:hover { color: var(--black); } .footer-copy { font-size: 12px; color: var(--warm-muted); } /* ── Stagger children ───────────────────────────────── */ [data-stagger] > .fade-in:nth-child(1) { transition-delay: 0ms; } [data-stagger] > .fade-in:nth-child(2) { transition-delay: 110ms; } [data-stagger] > .fade-in:nth-child(3) { transition-delay: 220ms; } [data-stagger] > .fade-in:nth-child(4) { transition-delay: 330ms; } [data-stagger] > .fade-in:nth-child(5) { transition-delay: 440ms; } [data-stagger] > .fade-in:nth-child(6) { transition-delay: 550ms; } /* ── Responsive ─────────────────────────────────────── */ @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .section { padding: 5rem 1.5rem; } .section-sm { padding: 3rem 1.5rem; } .nav { padding: 0 1.5rem; } }