/* ============================================================================
site-chrome.css — single source of truth for the shared HEADER + FOOTER look
----------------------------------------------------------------------------
The canonical nav + footer live visually here. Every non-home, non-admin page
links this file and uses the matching markup:
• PHP (order/*) → includes/site-header.php + includes/site-footer.php
• static (*.html) → the same markup inlined, with this file linked
Home (index.html) is the design reference and keeps its own inline copy; if
you re-skin the chrome, mirror the change there too.
Markup contract:
Self-contained: defines the brand tokens so it also works on pages that don't
(e.g. 404.html). Assumes Fraunces + Jost are loaded by the page .
========================================================================== */
:root{
--burgundy:#5C1A2B; --burgundy-deep:#3F0F1D;
--ivory:#FBF6EE; --cream:#F3E7D6; --cream-warm:#EAD9C2;
--saffron:#C8881F; --saffron-soft:#D9A441; --saffron-text:#915E0A;
--ink:#2A1117; --muted:#7A5A52; --line:rgba(92,26,43,0.14);
--serif:'Fraunces',Georgia,serif;
--sans:'Jost',-apple-system,sans-serif;
}
/* ============ HEADER ============
Solid/frosted by default (the home nav's "scrolled" state) since sub-pages
have no hero to float over. Sticky so it pins like the home nav but stays
legible. */
.site-nav{
position:sticky;top:0;z-index:50;
display:flex;align-items:center;justify-content:space-between;
gap:16px;margin:0;border:0;
padding:14px 32px;
background:rgba(251,246,238,0.92);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 8px 30px -18px rgba(63,15,29,0.4);
}
.site-nav .logo{display:inline-flex;align-items:center;line-height:1;text-decoration:none}
.site-nav .logo-lockup{height:56px;width:auto;display:block}
.site-nav .nav-links{display:flex;gap:26px;align-items:center}
.site-nav .nav-links a{
font-family:var(--sans);font-size:13.5px;letter-spacing:0.08em;text-transform:uppercase;
font-weight:400;color:var(--ink);text-decoration:none;transition:color .25s;position:relative;
}
.site-nav .nav-links a:not(.nav-cta)::after{
content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--saffron);transition:width .3s;
}
.site-nav .nav-links a:not(.nav-cta):hover::after{width:100%}
.site-nav .nav-links a:hover{text-decoration:none}
.site-nav .nav-account{color:var(--ink)}
.site-nav .nav-cta{
background:var(--burgundy);color:var(--ivory)!important;padding:10px 22px;border-radius:100px;
font-size:12.5px;letter-spacing:0.06em;transition:all .3s;
}
.site-nav .nav-cta:hover{background:var(--saffron);transform:translateY(-1px);text-decoration:none}
/* Tablet/small-laptop: collapse the section anchors so logo + Account + Order
pill never crowd. Account link and the CTA pill stay. */
@media(max-width:980px){
.site-nav .nav-links a:not(.nav-cta):not(.nav-account){display:none}
}
/* Mobile: flat row (logo · Account · Order pill), no drawer/hamburger. */
@media(max-width:760px){
.site-nav{
padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));
}
.site-nav .logo-lockup{height:44px}
.site-nav .nav-links{flex-direction:row;align-items:center;justify-content:flex-end;gap:14px}
.site-nav .nav-links a:not(.nav-cta):not(.nav-account){display:none}
.site-nav .nav-cta{padding:11px 18px;font-size:12.5px;min-height:44px;display:inline-flex;align-items:center}
.site-nav .nav-account{display:inline-flex;align-items:center;min-height:44px;font-size:12px;padding:0 2px}
}
/* ============ FOOTER ============ */
.site-footer{background:var(--burgundy-deep);color:var(--cream);padding:72px 0 32px;text-align:left;font-family:var(--sans)}
.site-footer .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.site-footer .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}
.site-footer .foot-logo{width:100%;max-width:300px;height:auto;display:block;margin-bottom:18px;border-radius:12px}
.site-footer .foot-brand p{color:rgba(243,231,214,0.65);font-size:14.5px;max-width:300px}
.site-footer .foot-col h4{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--saffron-soft);margin-bottom:18px;font-family:var(--sans);font-weight:500}
.site-footer .foot-col a,.site-footer .foot-col p{display:block;color:rgba(243,231,214,0.72);font-size:14.5px;margin-bottom:11px;text-decoration:none;transition:color .25s}
.site-footer .foot-col a:hover{color:var(--saffron-soft);text-decoration:none}
.site-footer .foot-col p strong{color:var(--saffron-soft);font-weight:500;letter-spacing:0.06em;text-transform:uppercase;font-size:11px}
.site-footer .foot-bottom{border-top:1px solid rgba(243,231,214,0.12);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.site-footer .foot-bottom p{font-size:12.5px;color:rgba(243,231,214,0.5)}
.site-footer .foot-fssai{font-size:12.5px;color:rgba(243,231,214,0.5);letter-spacing:0.04em}
.site-footer .foot-fssai a{color:rgba(243,231,214,0.7);text-decoration:underline}
.site-footer .foot-fssai a:hover{color:var(--saffron-soft)}
@media(max-width:760px){
.site-footer .foot-grid{grid-template-columns:1fr;gap:34px}
.site-footer .foot-logo{margin-left:auto;margin-right:auto}
}