/* ------------------------------------------------------------------ * * Marrow & Vale — shared chrome. * * Everything that has to look identical on the homepage, the two * category pages and the fifteen generated product pages lives here: * the palette, the header/nav, the product card, the size selector, * the buy button and the footer. Page-specific layout (the homepage * hero and pinned carousels, the product page's two-column split) * stays with its own page. * ------------------------------------------------------------------ */ :root{ --ink:#241C15; --ivory:#F7F2EC; --camel:#B79C7E; --wine:#7A4B3A; --gray:#8A7862; --card:#FFFDFA; --line:#E4DACB; --body:#3A3128; --placeholder:#EFE7DA; --gutter:clamp(20px,4vw,56px); --card-w:clamp(228px,24vw,292px); --gap:clamp(16px,2vw,28px); /* Same scale site.css uses, so the two stacks can be merged later. */ --z-sticky:20; --z-fixed:40; --z-overlay:60; --z-dialog:70; --z-skip-link:100; color-scheme:light; } /* The footer's theme, contrast and motion controls set these three attributes on . The names and the localStorage keys deliberately match site.css / site.js so the integration pass can collapse the two systems instead of reconciling them. */ :root[data-theme="dark"]{ --ink:#F2EAE0; --ivory:#181310; --camel:#C9B094; --wine:#D79C82; --gray:#A8977F; --card:#221B16; --line:#392F26; --body:#D8CDBF; --placeholder:#2B231C; color-scheme:dark; } :root[data-contrast="high"]{ --gray:#4A3F33; --line:#8A7862; --body:#241C15; } :root[data-theme="dark"][data-contrast="high"]{ --gray:#E4DACB; --line:#BFB09B; --body:#F2EAE0; } /* Explicit "reduce motion" override, independent of the OS setting. The automatic prefers-reduced-motion handling stays where it is; this is the manual switch on top of it. */ :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;transition-delay:0s!important; scroll-behavior:auto!important; } :root[data-motion="reduce"]{scroll-behavior:auto;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{margin:0;background:var(--ivory);color:var(--ink);font-family:'Jost',sans-serif;} a{color:inherit;} img{max-width:100%;display:block;} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ivory);color:var(--ink); padding:12px 18px;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;} .skip:focus{left:12px;top:12px;} .eyebrow{font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gray);margin:0;} /* ---------- Header + primary navigation ---------- */ /* The homepage overlays this on its hero and turns it solid on scroll (see index.html). Every other page opens with it already solid, so `.site-head--solid` is the default state there. */ .site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between; gap:16px;padding:18px var(--gutter);color:var(--ivory); transition:background-color .35s ease,color .35s ease,border-color .35s ease; border-bottom:1px solid transparent;} .site-head.is-stuck,.site-head--solid{background:var(--ivory);color:var(--ink);border-bottom-color:var(--line);} .site-head .wordmark{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,2.6vw,26px); letter-spacing:0.04em;margin:0;white-space:nowrap;} .site-head .wordmark a{text-decoration:none;} .site-head .wordmark .amp{font-style:italic;} .site-head.is-stuck .wordmark .amp,.site-head--solid .wordmark .amp{color:var(--wine);} .site-head nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:clamp(12px,2vw,26px);} .site-head nav a{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none; padding:6px 0 3px;border-bottom:1px solid transparent;} .site-head nav a:hover{border-bottom-color:currentColor;} .site-head nav a[aria-current="page"]{border-bottom-color:currentColor;} @media (prefers-reduced-motion:reduce){ .site-head{transition:none;} } /* ---------- Buttons ---------- */ .btn{display:inline-block;margin-top:30px;padding:15px 34px;font-size:11px;letter-spacing:0.22em; text-transform:uppercase;text-decoration:none;background:var(--ivory);color:var(--ink); border:1px solid var(--ivory);transition:background-color .25s ease,color .25s ease;} .btn:hover{background:transparent;color:var(--ivory);} .btn--ink{background:var(--ink);color:var(--ivory);border-color:var(--ink);} .btn--ink:hover{background:transparent;color:var(--ink);} @media (prefers-reduced-motion:reduce){ .btn{transition:none;} } button.buy{appearance:none;border:1px solid var(--ink);background:transparent;color:var(--ink); font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase; padding:12px 14px;min-height:44px;cursor:pointer;transition:background .2s,color .2s; text-align:center;} button.buy:hover:not(:disabled){background:var(--ink);color:var(--ivory);} button.buy:disabled{opacity:.5;cursor:default;} button.buy.is-busy{opacity:.7;} @media (prefers-reduced-motion:reduce){ button.buy{transition:none;} } /* The grid/carousel equivalent of the buy button for anything that has sizes to choose: it is a link to the product page, not a purchase. */ a.buy{display:block;border:1px solid var(--ink);background:transparent;color:var(--ink); font-size:11px;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none; padding:14px 14px;min-height:44px;text-align:center;transition:background .2s,color .2s;} a.buy:hover{background:var(--ink);color:var(--ivory);} @media (prefers-reduced-motion:reduce){ a.buy{transition:none;} } /* ---------- Product card ---------- */ .pcard{position:relative;width:var(--card-w);flex:none;background:var(--card);border:1px solid var(--line); display:flex;flex-direction:column;} .pcard .thumb{aspect-ratio:4/5;overflow:hidden;background:var(--placeholder);} .pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1);} .pcard:hover .thumb img{transform:scale(1.05);} .pcard .info{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;} .pcard .name{font-size:13.5px;line-height:1.5;margin:0 0 10px;flex:1;} /* The card is one big link with the buy control sitting on top of it: the name's ::after covers the card, and the action is lifted clear. */ .pcard .name a{text-decoration:none;} .pcard .name a::after{content:"";position:absolute;inset:0;z-index:1;} .pcard .name a:hover{border-bottom:1px solid var(--camel);} .pcard .price{font-family:'Cormorant Garamond',serif;font-size:19px;margin:0 0 14px;} .pcard .price .was{color:var(--gray);text-decoration:line-through;font-size:14px;margin-right:8px;} .pcard .sizes{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gray); margin:0 0 12px;} .pcard .buy{position:relative;z-index:2;} @media (prefers-reduced-motion:reduce){ .pcard .thumb img{transition:none;} .pcard:hover .thumb img{transform:none;} } .shop-state{text-align:center;padding:48px var(--gutter);color:var(--gray);font-size:14px;line-height:1.7; width:100%;list-style:none;} .shop-state a{border-bottom:1px solid var(--camel);text-decoration:none;color:var(--ink);} /* ---------- Breadcrumbs ---------- */ .crumbs{padding:clamp(20px,3vw,32px) var(--gutter) 0;font-size:11px;letter-spacing:0.16em; text-transform:uppercase;color:var(--gray);} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;} .crumbs li::after{content:"/";margin-left:8px;color:var(--line);} .crumbs li:last-child::after{content:"";} .crumbs a{text-decoration:none;} .crumbs a:hover{border-bottom:1px solid var(--camel);} .crumbs [aria-current="page"]{color:var(--ink);} /* ---------- Page head (category + product + generic) ---------- */ .page-head{padding:clamp(28px,4vw,44px) var(--gutter) clamp(24px,3vw,36px);max-width:760px;} .page-head h1{font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(32px,5.2vw,64px);line-height:1.04;margin:10px 0 0;} .page-head p.lede{font-size:15px;line-height:1.75;color:var(--body);margin:18px 0 0;max-width:54ch;} /* ---------- Category grid ---------- */ .catalog{padding:0 var(--gutter) clamp(64px,8vw,104px);} .catalog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:clamp(18px,2.4vw,32px);list-style:none;margin:0;padding:0;} .catalog__grid .pcard{width:auto;} .catalog__count{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray); margin:0 0 clamp(18px,2.4vw,28px);} /* ---------- Product detail ---------- */ .pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px); padding:clamp(20px,3vw,36px) var(--gutter) clamp(64px,8vw,104px);align-items:start;} .pdp__gallery{margin:0;} .pdp__gallery .main{aspect-ratio:4/5;overflow:hidden;background:var(--placeholder);border:1px solid var(--line);} .pdp__gallery .main img{width:100%;height:100%;object-fit:cover;} .pdp__thumbs{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:10px 0 0;padding:0;} .pdp__thumbs button{appearance:none;border:1px solid var(--line);background:none;padding:0;cursor:pointer; width:72px;aspect-ratio:4/5;overflow:hidden;} .pdp__thumbs button[aria-current="true"]{border-color:var(--ink);} .pdp__thumbs img{width:100%;height:100%;object-fit:cover;} .pdp__info h1{font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(28px,3.8vw,46px);line-height:1.08;margin:10px 0 0;} .pdp__price{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,2.6vw,30px);margin:18px 0 0;} .pdp__price .was{color:var(--gray);text-decoration:line-through;font-size:0.68em;margin-right:10px;} .pdp__stock{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gray);margin:10px 0 0;} .pdp__stock[data-stock="out"]{color:var(--wine);} .pdp__sizes{border:0;margin:28px 0 0;padding:0;} .pdp__sizes legend{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray); padding:0;margin:0 0 12px;} .pdp__sizelist{display:flex;flex-wrap:wrap;gap:10px;} .size-opt{appearance:none;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.12em; text-transform:uppercase;min-width:56px;min-height:44px;padding:0 14px;cursor:pointer; background:var(--card);color:var(--ink);border:1px solid var(--line); transition:border-color .2s,background .2s,color .2s;} .size-opt:hover:not(:disabled){border-color:var(--ink);} .size-opt[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink);} .size-opt:disabled{cursor:not-allowed;color:var(--gray);opacity:.55; background:linear-gradient(to top left,transparent calc(50% - 1px), var(--line) 50%,transparent calc(50% + 1px));} @media (prefers-reduced-motion:reduce){ .size-opt{transition:none;} } .pdp__buy{margin:26px 0 0;} .pdp__buy .buy{width:100%;padding:17px 14px;font-size:12px;letter-spacing:0.22em;} .pdp__note{font-size:12px;line-height:1.8;color:var(--gray);margin:14px 0 0;} .pdp__note a{text-decoration:none;border-bottom:1px solid var(--camel);color:var(--ink);} .pdp__details{margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--line);} .pdp__details h2{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray); font-weight:500;margin:0 0 12px;} .pdp__details p{font-size:14px;line-height:1.8;color:var(--body);margin:0 0 12px;} /* ---------- Related strip ---------- */ .related{padding:0 var(--gutter) clamp(64px,8vw,104px);} .related h2{font-family:'Cormorant Garamond',serif;font-weight:400; font-size:clamp(24px,3.4vw,40px);line-height:1.1;margin:0 0 clamp(20px,3vw,32px);} .related ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:clamp(16px,2vw,26px);list-style:none;margin:0;padding:0;} .related .pcard{width:auto;} /* ---------- Contact + footer ---------- */ .contact-block{max-width:640px;margin:0 auto;padding:0 var(--gutter) clamp(56px,7vw,88px);text-align:center;} .contact-block p.body-copy{font-size:15px;line-height:1.75;color:var(--body);margin:0 0 14px;} .contact-block .contact{font-size:14px;} .contact-block .contact a{border-bottom:1px solid var(--camel);text-decoration:none;} footer{padding:36px var(--gutter) 56px;text-align:center;font-size:12px;color:var(--gray); border-top:1px solid var(--line);} footer nav a{margin:0 10px;text-decoration:none;color:var(--gray);display:inline-block;padding:6px 0;} footer nav{margin-bottom:16px;} @media (max-width:820px){ .pdp{grid-template-columns:1fr;} } @media (max-width:520px){ .site-head nav{gap:10px;} .site-head nav a{font-size:10px;letter-spacing:0.12em;} } /* ------------------------------------------------------------------ * * Extended footer: accessibility + language preferences * * Footer only, by the owner's instruction — none of this belongs in the * header. The controls write the same `data-theme` / `data-contrast` * attributes and the same localStorage keys site.js already uses, so * the later integration pass can delete one of the two implementations * rather than reconcile them. * ------------------------------------------------------------------ */ .site-prefs{border-top:1px solid var(--line);margin:0 0 28px;padding:28px var(--gutter) 4px; display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);justify-content:center;text-align:left;} .site-prefs__group{margin:0;padding:0;border:0;min-width:0;} .site-prefs__group legend{font-size:10px;letter-spacing:0.24em;text-transform:uppercase; color:var(--gray);padding:0;margin:0 0 10px;} .site-prefs__row{display:flex;flex-wrap:wrap;gap:8px;} .pref{appearance:none;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.14em; text-transform:uppercase;min-height:44px;padding:0 14px;cursor:pointer; background:transparent;color:var(--gray);border:1px solid var(--line); transition:border-color .2s,color .2s,background .2s;} .pref:hover{border-color:var(--ink);color:var(--ink);} .pref[aria-pressed="true"]{background:var(--ink);color:var(--ivory);border-color:var(--ink);} .site-prefs__note{flex-basis:100%;text-align:center;font-size:11px;line-height:1.7; color:var(--gray);margin:4px 0 0;} @media (prefers-reduced-motion:reduce){ .pref{transition:none;} } /* ------------------------------------------------------------------ * * Cookie notice * * A notice, not a consent gate: this site sets only the strictly * necessary cookies privacy.html describes, so there is no category to * opt out of and no fake "Reject" button here. It never covers the page * content or blocks checkout — it is a bar, not an overlay. * ------------------------------------------------------------------ */ .cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card); border-top:1px solid var(--line);padding:16px var(--gutter); display:flex;flex-wrap:wrap;align-items:center;gap:14px; box-shadow:0 -6px 24px rgba(36,28,21,.10);} .cookie[hidden]{display:none;} .cookie p{font-size:13px;line-height:1.7;color:var(--body);margin:0;flex:1 1 320px;min-width:0;} .cookie a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--camel);} .cookie__actions{display:flex;gap:10px;flex:none;margin-left:auto;} .cookie__accept{appearance:none;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.18em; text-transform:uppercase;min-height:44px;padding:0 22px;cursor:pointer; background:var(--ink);color:var(--ivory);border:1px solid var(--ink);} .cookie__close{appearance:none;width:44px;min-height:44px;cursor:pointer;background:transparent; border:1px solid var(--line);color:var(--gray);font-size:18px;line-height:1;} .cookie__close:hover{border-color:var(--ink);color:var(--ink);} /* ------------------------------------------------------------------ * * Newsletter dialog * ------------------------------------------------------------------ */ .nl{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;} .nl[hidden]{display:none;} .nl__scrim{position:absolute;inset:0;background:rgba(24,19,16,.62);} .nl__panel{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto; background:var(--card);border:1px solid var(--line);padding:clamp(26px,4vw,40px);} .nl__close{position:absolute;top:8px;right:8px;width:44px;height:44px;appearance:none;cursor:pointer; background:transparent;border:0;color:var(--gray);font-size:20px;line-height:1;} .nl__close:hover{color:var(--ink);} .nl__panel h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(24px,3.4vw,34px); line-height:1.1;margin:8px 0 0;} .nl__panel p.body-copy{font-size:14px;line-height:1.75;color:var(--body);margin:12px 0 0;} .nl__form{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;} .nl__form label{flex-basis:100%;font-size:10px;letter-spacing:0.22em;text-transform:uppercase; color:var(--gray);} .nl__form input{flex:1 1 200px;min-width:0;min-height:48px;padding:0 14px;font-family:'Jost',sans-serif; font-size:14px;color:var(--ink);background:var(--ivory);border:1px solid var(--line);} .nl__form input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;} .nl__form button{appearance:none;flex:none;font-family:'Jost',sans-serif;font-size:11px; letter-spacing:0.18em;text-transform:uppercase;min-height:48px;padding:0 24px; cursor:pointer;background:var(--ink);color:var(--ivory);border:1px solid var(--ink);} .nl__form button:disabled{opacity:.55;cursor:default;} .nl__msg{font-size:13px;line-height:1.7;margin:14px 0 0;min-height:1.2em;} .nl__msg[data-state="ok"]{color:var(--ink);} .nl__msg[data-state="error"]{color:var(--wine);} .nl__fine{font-size:11px;line-height:1.7;color:var(--gray);margin:16px 0 0;} .nl__open{background:none;border:0;padding:6px 0;margin:0 10px;cursor:pointer;color:var(--gray); font-family:'Jost',sans-serif;font-size:12px;} .nl__open:hover{color:var(--ink);}