/* ========================================================================== BaseLinePeptide — Luxury brand layer (ADDITIVE) Link this LAST in . Restyles the shared chrome + typography to the brand look on top of the existing page. Removing this one line fully undoes it. ========================================================================== */ @import url("https://use.typekit.net/lvn0eze.css"); @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=EB+Garamond:wght@400;500;600;700&family=Bodoni+Moda:ital,opsz@0,6..96;1,6..96&display=swap"); :root{ --paper:#f7f5f0; --ink:#0d0d0c; --accent:#1c2d24; --muted:#4a4a45; --hairline:rgba(13,13,12,.14); --didone:"lust-didone-fine","Bodoni Moda","Didot",Georgia,serif; --cabrito:"cabrito-didone-condensed","Bodoni Moda","Didot",Georgia,serif; --caps:"aviano","DM Sans",sans-serif; --wordmark:"aviano-didone","aviano","EB Garamond",Georgia,serif; --serif:"waverly-cf","EB Garamond",Georgia,serif; --sans:"DM Sans",system-ui,-apple-system,sans-serif; } /* ---- palette ---- */ html{ font-size:120%; } body{ background:var(--paper) !important; color:var(--ink); font-family:var(--sans); } .bg-white{ background:var(--paper) !important; } [style*="#F8F8F8"],[style*="#f8f8f8"]{ background:#f1eee7 !important; } /* ---- header + announce: removed — now live SOLELY in bp-header.css (loaded last). Do not re-add header rules here. ---- */ /* ---- typography ---- */ h1,h2,.section-heading,.section-title{ font-family:var(--didone) !important; font-weight:400 !important; letter-spacing:.005em; } h3{ font-family:var(--cabrito) !important; font-weight:400 !important; } .tracking-\[0\.18em\]{ font-family:var(--caps) !important; color:var(--accent) !important; } /* ---- buttons — sitewide square-inside-square ---- */ /* solid / primary buttons */ a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], a[style*="background-color: #111111"], a[style*="background-color:#111111"], button[type="submit"], input[type="submit"], .rounded-full.bg-black, .rounded-lg.bg-black, .rounded-md.bg-black, .btn-primary, .btn-dark{ background:var(--accent) !important; color:var(--paper) !important; border-radius:0 !important; font-family:var(--caps) !important; letter-spacing:.06em !important; text-transform:uppercase; font-weight:700 !important; outline:1px solid rgba(247,245,240,.45) !important; outline-offset:-4px !important; } /* kill pill/rounded shape on any branded button */ a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], button[type="submit"], input[type="submit"]{ border-radius:0 !important; } /* ghost / outline buttons */ .btn-outline, a.border.border-black, button.border.border-black, a.border-black, button.border-black{ background:transparent !important; color:var(--ink) !important; border-color:rgba(13,13,12,.22) !important; border-radius:0 !important; font-family:var(--caps) !important; letter-spacing:.18em; text-transform:uppercase; font-weight:400 !important; outline:1px solid rgba(13,13,12,.14) !important; outline-offset:-4px !important; } .btn-outline:hover, a.border-black:hover, button.border-black:hover{ background:var(--ink) !important; color:var(--paper) !important; } /* ---- footer ---- */ footer{ background:var(--paper) !important; border-top:1px solid var(--hairline) !important; } footer .font-semibold.text-black, footer span.font-semibold{ font-family:var(--wordmark); letter-spacing:.05em; font-weight:500; } footer a{ color:var(--ink) !important; font-family:var(--caps); font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; } footer a:hover{ color:var(--accent) !important; } footer .font-extrabold{ font-family:var(--caps); letter-spacing:.08em; font-weight:400; } /* ---- mobile drawer ---- */ .bp-drawer-panel{ background:var(--paper) !important; } .bp-drawer-nav a{ color:var(--ink) !important; font-family:var(--sans); letter-spacing:.14em; text-transform:uppercase; font-size:15.5px; } /* ---- nav: auto-collapse to hamburger ---- */ /* Desktop nav visible above 820px; hamburger takes over below it — applies to all pages. */ .bp-header-row--desktop{ display:grid !important; } .bp-header-row--mobile{ display:none !important; } @media (max-width: 820px) { .bp-header-row--desktop{ display:none !important; } .bp-header-row--mobile{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; height:5rem; padding:0 1rem; } } /* ---- responsive scaling ---- */ /* All font-size, letter-spacing, and layout values use em/rem/clamp so they scale automatically. These breakpoints only handle the few pixel-specific details that don't auto-scale. */ @media (max-width: 768px) { a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], button[type="submit"], input[type="submit"], .btn-primary, .btn-dark { outline-offset: -3px !important; letter-spacing: .05em !important; } } @media (max-width: 480px) { a.bg-black, button.bg-black, .bg-black.text-white, .bg-\[\#111\], .bg-\[\#111111\], button[type="submit"], input[type="submit"], .btn-primary, .btn-dark { outline-offset: -2px !important; letter-spacing: .04em !important; } } /* ---- sitewide footer (index is the template; same height everywhere) ---- */ .bp-footer{ border-top:1px solid var(--hairline) !important; background:var(--paper) !important; padding:48px 40px 52px !important; } .bp-footer .foot-inner{ max-width:1000px; margin:0 auto; text-align:center; } .bp-footer .foot-brand{ font-family:var(--wordmark); font-size:clamp(1.05rem,4.6vw,1.5rem); letter-spacing:.03em; color:#000; margin-bottom:20px; font-weight:700; } .bp-footer .foot-year{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; color:var(--muted); margin-left:8px; font-weight:400; } .bp-footer .foot-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:13px 26px; margin-bottom:22px; } .bp-footer .foot-links a{ font-family:var(--caps); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink) !important; text-decoration:none; transition:color .2s; } .bp-footer .foot-links a:hover{ color:var(--accent) !important; } .bp-footer .foot-contact{ font-family:var(--serif); font-size:18px; color:var(--muted); margin-bottom:26px; } .bp-footer .foot-contact a{ color:inherit !important; text-decoration:none; border-bottom:1px solid var(--hairline); } .bp-footer .foot-ruo{ font-family:var(--sans); font-size:13px; line-height:1.65; color:#9a978f; max-width:830px; margin:0 auto; padding-top:22px; border-top:1px solid var(--hairline); } .bp-footer .foot-ruo strong{ color:var(--muted); font-weight:600; } @media (max-width:480px){ .bp-footer{ padding:40px 18px 48px !important; } .bp-footer .foot-links{ gap:11px 18px; } .bp-footer .foot-ruo{ font-size:12px; } } /* header + announce now live solely in bp-header.css (loaded last on every page) */