/* * ══════════════════════════════════════════════════ * Memory Binding — Heirloom Design System * site.css · Shared across all pages * ══════════════════════════════════════════════════ */ /* ── TOKENS ── */ :root { --teal: #173B33; --teal-dk: #0F2820; --teal-md: #2B5546; --gold: #D4A84B; --gold-warm: #C48A00; --ivory: #FBF7EE; --cream: #F7F2E9; --cream-dk: #EDE5D4; --line: #E6DCCF; --charcoal: #1C2420; --slate: #5B6963; --terra: #8B4A3A; --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 13px; color: var(--charcoal); background: var(--ivory); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* ── GOOGLE FONTS ── */ /* Load in each page's with: */ /* ═══════════════════════════════════════ SITE NAV Two variants: full (.site-nav) and minimal (.site-nav--flow) ═══════════════════════════════════════ */ .site-nav { height: 60px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; position: sticky; top: 0; background: var(--ivory); z-index: 100; gap: 24px; } /* Logo */ .site-nav .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .site-nav .nav-logo img { height: 28px; width: auto; } /* Nav links */ .site-nav .nav-links { display: flex; align-items: center; gap: 28px; flex: 1; } .site-nav .nav-links a { font-size: 12px; color: var(--slate); letter-spacing: 0.04em; transition: color 0.2s; white-space: nowrap; } .site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: var(--charcoal); } .site-nav .nav-links a.active { font-weight: 600; } /* Primary CTA */ .site-nav .nav-cta { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 20px; background: var(--charcoal); color: var(--ivory); transition: background 0.2s; white-space: nowrap; flex-shrink: 0; } .site-nav .nav-cta:hover { background: #2d3a36; } /* Nav right (sign in / auth context) */ .site-nav .nav-right { font-size: 12px; color: var(--slate); flex-shrink: 0; } .site-nav .nav-right a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } /* Hamburger (mobile) */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; flex-shrink: 0; } .nav-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--charcoal); transition: all 0.2s; } /* Mobile drawer */ .mobile-nav { display: none; flex-direction: column; padding: 16px 24px 24px; border-bottom: 1px solid var(--line); background: var(--ivory); gap: 2px; } .mobile-nav.open { display: flex; } .mobile-nav a { padding: 10px 0; font-size: 14px; font-family: var(--sans); color: var(--charcoal); border-bottom: 1px solid var(--line); } .mobile-nav a:last-child { border-bottom: none; } .mobile-nav-cta { margin-top: 10px; display: inline-block; background: var(--charcoal); color: var(--ivory) !important; padding: 12px 24px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } /* ── Flow nav (minimal — used on contributor, checkout, thankyou, confirmation) ── */ .site-nav--flow .nav-links, .site-nav--flow .nav-cta { display: none; } .nav-flow-context { font-size: 11px; color: var(--slate); letter-spacing: 0.06em; } /* ── Auth nav (login / signup) ── */ .site-nav--auth .nav-links { display: none; } .site-nav--auth .nav-cta { display: none; } /* ── Responsive ── */ @media (max-width: 780px) { .site-nav .nav-links, .site-nav .nav-cta { display: none; } .nav-hamburger { display: flex; } } /* ═══════════════════════════════════════ SITE FOOTER ═══════════════════════════════════════ */ .site-footer { background: var(--teal-dk); color: rgba(251,247,238,0.6); padding: 56px 60px 32px; border-top: 1px solid rgba(212,168,75,0.18); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; } .footer-brand-logo img { height: 22px; filter: brightness(0) invert(1); opacity: 0.7; margin-bottom: 16px; } .footer-tagline { font-family: var(--serif); font-size: 13px; font-style: italic; color: rgba(251,247,238,0.4); line-height: 1.65; max-width: 220px; } .footer-col-title { font-size: 9px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .footer-col a { display: block; font-size: 13px; color: rgba(251,247,238,0.5); margin-bottom: 10px; transition: color 0.18s; } .footer-col a:hover { color: var(--ivory); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(251,247,238,0.28); } .footer-legal { display: flex; gap: 20px; } .footer-legal a { color: rgba(251,247,238,0.28); transition: color 0.18s; } .footer-legal a:hover { color: rgba(251,247,238,0.65); } /* ── Minimal footer (flow pages) ── */ .site-footer--minimal { padding: 28px 40px; border-top: 1px solid var(--line); background: var(--cream); display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--slate); } .site-footer--minimal a { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; transition: color 0.18s; } .site-footer--minimal a:hover { color: var(--charcoal); } .site-footer--minimal .footer-links { display: flex; gap: 18px; } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .site-footer { padding: 40px 24px 24px; } .site-footer--minimal { flex-direction: column; gap: 10px; text-align: center; } } /* ═══════════════════════════════════════ BUTTONS (shared) ═══════════════════════════════════════ */ .btn-fill { display: inline-block; background: var(--charcoal); color: var(--ivory); padding: 14px 32px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); border: none; cursor: pointer; transition: background 0.2s; } .btn-fill:hover { background: #2d3a36; } .btn-outline-dark { display: inline-block; border: 1px solid var(--charcoal); color: var(--charcoal); padding: 13px 28px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); background: transparent; cursor: pointer; transition: background 0.15s; } .btn-outline-dark:hover { background: var(--cream); } .btn-teal { display: inline-block; background: var(--teal); color: var(--ivory); padding: 14px 32px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); border: none; cursor: pointer; transition: background 0.2s; } .btn-teal:hover { background: var(--teal-dk); } /* ═══════════════════════════════════════ FORM INPUTS (shared) ═══════════════════════════════════════ */ .input-field { width: 100%; padding: 11px 14px; border: 1px solid var(--line); background: var(--ivory); font-family: var(--sans); font-size: 13px; color: var(--charcoal); outline: none; transition: border-color 0.2s; } .input-field:focus { border-color: var(--charcoal); } /* ═══════════════════════════════════════ SECTION EYEBROW (shared) ═══════════════════════════════════════ */ .eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-warm); font-weight: 600; } /* ═══════════════════════════════════════ SPINNER (shared) ═══════════════════════════════════════ */ .spinner { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: site-spin 0.7s linear infinite; } @keyframes site-spin { to { transform: rotate(360deg); } }