/* ======================================================================== TTTS Shop — design system (revised) Bone/ink/sage umbrella palette · Cormorant Garamond + JetBrains Mono. Editorial, restrained, NeXT-era. Per-brand theme overrides shift accents inside the TTTS frame; OSPOS ships a full night-mode override. Tweak hooks live on : data-wayfinding = index | directory (catalog layout) data-hero = stacked | split (product layout) data-stock = in | out (product availability) data-cart = full | empty (cart state) data-theme = day | night (OSPOS night-mode preview) plus CSS vars --accent / --accent-deep / --display-scale set inline. ======================================================================== */ /* ======================================================================== SKINS — one umbrella, each brand its own language. html[data-skin="ttts"] TTTS umbrella: warm white, blueprint grid, high-contrast Cormorant, pure monochrome html[data-skin="folinique"] Folinique: bone/sage, Cormorant Garamond, grain html[data-skin="ospos"] OSPOS: night mode The router sets data-skin per view (product → its brand; chrome → ttts). ======================================================================== */ :root{ /* TTTS umbrella (default) */ --bone:#f6f4ee; --bone-2:#efece2; --bone-3:#e6e2d4; --ink:#1b1a17; --ink-soft:#4a4945; --ink-faint:#8c8a82; --rule:#dcd8cc; --rule-soft:#e8e4d8; --warn:#a8542c; --accent:#75736a; /* umbrella "accent" = warm gray → stays monochrome */ --accent-deep:#56544d; --paper:rgba(255,255,255,.40); --display-scale:1; --serif:"Cormorant Garamond", serif; --display:"Cormorant Garamond", serif; --wash-1:transparent; --wash-2:transparent; --grain:rgba(28,31,26,.02); } /* ---- Folinique skin — bone/sage, Cormorant Garamond, dotted grain ---- */ html[data-skin="folinique"]{ --bone:#f5f1e8; --bone-2:#efe9da; --bone-3:#e7dfca; --ink:#1c1f1a; --ink-soft:#3a3d36; --ink-faint:#6f7165; --rule:#cdc6b3; --rule-soft:#ded7c4; --accent:#8a9c6e; --accent-deep:#6e8255; --serif:"Cormorant Garamond", serif; --display:"Cormorant Garamond", serif; --wash-1:rgba(138,156,110,.10); --wash-2:rgba(181,154,85,.06); --grain:rgba(28,31,26,.035); } /* ---- OSPOS skin — night mode ---- */ html[data-skin="ospos"]{ --bone:#14161a; --bone-2:#1b1e23; --bone-3:#23272d; --ink:#edefe8; --ink-soft:#b7bcb0; --ink-faint:#868b80; --rule:#33383f; --rule-soft:#262a30; --accent:#a6ba83; --accent-deep:#c0cf97; --paper:rgba(255,255,255,.035); --serif:"Cormorant Garamond", serif; --display:"Cormorant Garamond", serif; --wash-1:rgba(166,186,131,.10); --wash-2:rgba(205,176,106,.05); --grain:rgba(255,255,255,.022); } *{box-sizing:border-box;margin:0;padding:0} html,body{ background:var(--bone);color:var(--ink); font-family:var(--serif);font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } body{ min-height:100vh;position:relative;overflow-x:hidden;background:var(--bone); transition:background-color .4s ease, color .4s ease; } /* umbrella + ospos: faint blueprint grid */ html[data-skin="ttts"] body, html[data-skin="ospos"] body{ background: linear-gradient(var(--rule-soft) 1px, transparent 1px) -1px -1px / 88px 88px, linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) -1px -1px / 88px 88px, var(--bone); } /* folinique: radial washes + dotted grain */ html[data-skin="folinique"] body{ background: radial-gradient(1200px 600px at 18% -10%, var(--wash-1), transparent 60%), radial-gradient(900px 500px at 112% 28%, var(--wash-2), transparent 60%), var(--bone); } body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;display:none} html[data-skin="folinique"] body::before{ display:block; background-image:radial-gradient(var(--grain) 1px, transparent 1px); background-size:3px 3px;mix-blend-mode:multiply; } /* ---- Shellstock skin — marine/petrol on a ruled-ledger ground ---- */ html[data-skin="shellstock"]{ --bone:#eef0ea; --bone-2:#e5e8df; --bone-3:#d9ddce; --ink:#15201d; --ink-soft:#3b4a45; --ink-faint:#7a877e; --rule:#ccd3c6; --rule-soft:#dde2d5; --accent:#2f6d63; --accent-deep:#234f48; --paper:rgba(255,255,255,.42); --serif:"Cormorant Garamond", serif; --display:"Cormorant Garamond", serif; } html[data-skin="shellstock"] body{ background: linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0 / 100% 38px, var(--bone); } a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--bone)} /* ======================================================== shared atoms */ .mono{font-family:"JetBrains Mono", monospace} .eyebrow{ font-family:"JetBrains Mono", monospace;font-size:11px;letter-spacing:.28em; text-transform:uppercase;color:var(--accent-deep); display:flex;gap:.9em;align-items:center;flex-wrap:wrap; } .eyebrow span:not(:last-child)::after{content:"·";margin-left:.9em;color:var(--rule)} .wordmark{ font-family:"Cormorant Garamond", serif;font-weight:500; line-height:.92;letter-spacing:-.02em; } .wordmark .ac{color:var(--accent)} .wordmark em,.ac em{font-style:italic;font-weight:500} .lede{font-size:22px;line-height:1.5;color:var(--ink);max-width:38ch} .divider{ height:1px;border:0; background:linear-gradient(to right, transparent, var(--rule) 18%, var(--rule) 82%, transparent); } .disclaimer{ font-size:12px;line-height:1.65;color:var(--ink-soft);font-style:italic; font-family:"JetBrains Mono", monospace;letter-spacing:.01em; } /* spec strip — the breathing version */ .spec-strip{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:26px 0;gap:14px; } .spec-strip .cell{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px} .spec-strip .cell + .cell{border-left:1px solid var(--rule)} .spec-strip .num{ font-family:"Cormorant Garamond", serif;font-weight:500; font-size:38px;line-height:1;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em;white-space:nowrap; } .spec-strip .num em{color:var(--accent);font-style:italic;font-size:21px;margin-left:2px;letter-spacing:0} .spec-strip .lbl{ font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.22em; text-transform:uppercase;color:var(--ink-soft);line-height:1.55; } /* feature / narrative rows */ .features{display:flex;flex-direction:column;gap:30px} .feature{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start} .feature .glyph{ width:48px;height:48px;border:1px solid var(--rule); display:flex;align-items:center;justify-content:center;color:var(--accent-deep);flex-shrink:0; } .feature .glyph svg{width:18px;height:18px} .feature h3{ font-family:"JetBrains Mono", monospace;font-weight:500;font-size:12px; letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:10px; } .feature p{font-size:17px;line-height:1.55;color:var(--ink-soft)} /* restrained CTA panels (à la Folinique landing) */ .cta-stack{display:flex;flex-direction:column;gap:14px} .cta{ display:flex;justify-content:space-between;align-items:center;gap:20px; background:var(--ink);color:var(--bone);padding:24px 26px; font-family:"Cormorant Garamond", serif;font-style:italic;font-size:22px; border:1px solid var(--ink);transition:background .25s ease, transform .25s ease, border-color .25s ease; } html[data-skin="ospos"] .cta{color:var(--bone-2)} .cta.secondary{background:transparent;color:var(--ink);border-color:var(--ink)} .cta:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bone);transform:translateY(-1px)} .cta .label-mono{ font-family:"JetBrains Mono", monospace;font-style:normal;font-size:10px; letter-spacing:.24em;text-transform:uppercase;opacity:.66;display:block;margin-bottom:5px; } .cta .arr{font-style:normal;font-size:18px;opacity:.8} /* status chips */ .status{ font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.22em; text-transform:uppercase;padding:5px 11px;border:1px solid var(--rule); color:var(--ink-soft);white-space:nowrap; } .status--open{border-color:var(--accent);color:var(--accent-deep)} .status--soon{border-style:dashed;color:var(--ink-faint)} /* buttons */ .btn{ display:inline-flex;justify-content:center;align-items:center;gap:10px; background:var(--ink);color:var(--bone);border:1px solid var(--ink); padding:18px 28px;font-family:"Cormorant Garamond", serif;font-style:italic; font-size:19px;cursor:pointer;text-decoration:none; transition:background .2s ease, transform .2s ease, border-color .2s ease, opacity .2s ease; } .btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bone);transform:translateY(-1px)} .btn.secondary{background:transparent;color:var(--ink)} .btn.secondary:hover{background:var(--ink);color:var(--bone)} .btn.full{width:100%} .btn .arr{font-style:normal} .btn[disabled]{opacity:.5;pointer-events:none} /* ======================================================== shell */ .topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--rule); background:color-mix(in srgb, var(--bone) 88%, transparent); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);} .topbar-inner{ max-width:1140px;margin:0 auto;padding:18px 32px; display:flex;justify-content:space-between;align-items:center;gap:24px; } .brand-link{display:flex;align-items:center;line-height:1} .wordmark-link{ font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.015em; color:var(--ink);white-space:nowrap; } .topnav{display:flex;gap:30px;align-items:center} .topnav a{ font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);padding:6px 2px;border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; } .topnav a:hover,.topnav a[aria-current="page"]{border-bottom-color:var(--ink);color:var(--ink)} .cart-link{display:inline-flex;align-items:center;gap:7px} .cart-count{ font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.05em; min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--ink);color:var(--bone);display:inline-flex;align-items:center;justify-content:center; } [data-cart="empty"] .cart-count{background:transparent;color:var(--ink-faint);border:1px solid var(--rule)} .content{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:64px 32px 88px} .content--narrow{max-width:720px} .footer{position:relative;z-index:2;border-top:1px solid var(--rule);margin-top:24px} .footer-inner{ max-width:1140px;margin:0 auto;padding:26px 32px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:var(--ink-soft); } .footer-inner .dim{color:var(--accent-deep)} /* page heading patterns */ .page-eyebrow{ font-family:"JetBrains Mono", monospace;font-size:11px;letter-spacing:.28em; text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px; } h1.page-title{ font-family:var(--display);font-weight:500; font-size:clamp(44px, calc(8vw * var(--display-scale)), 72px); line-height:.96;letter-spacing:-.015em;margin-bottom:14px; } h1.page-title em{color:var(--accent);font-style:italic} .page-subtitle{ font-family:"JetBrains Mono", monospace;font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--ink-soft);line-height:1.7; } .back-link{ font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--accent-deep);display:inline-block;margin-bottom:34px; } .back-link:hover{color:var(--ink)} /* ======================================================== view routing */ [data-view]{display:none} [data-view].is-active{display:block;animation:viewin .5s ease both} @keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ [data-view].is-active{animation:none} } /* ======================================================== CATALOG */ /* umbrella hero — centered, blueprint grid, high-contrast Cormorant */ .umbrella-hero{ min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:32px 0 72px;position:relative; } .logo-mark{position:relative;width:66px;height:58px;margin:0 auto 40px} .logo-mark i{position:absolute;width:42px;height:42px;border:1.5px solid var(--ink)} .logo-mark i:nth-child(1){left:0;bottom:0} .logo-mark i:nth-child(2){right:0;top:0} .umbrella-hero .eyebrow{justify-content:center;flex-wrap:nowrap;white-space:nowrap;margin-bottom:26px;letter-spacing:.32em} .umbrella-title{ width:100%;font-family:var(--display);font-weight:500; font-size:clamp(40px, calc(6vw * var(--display-scale)), 80px); line-height:1.1;letter-spacing:-.005em;color:var(--ink);margin-bottom:38px; } .umbrella-title span{display:block;white-space:nowrap} .umbrella-title em{display:block;font-style:italic;font-weight:500;color:var(--ink-soft);margin-top:.02em} .umbrella-lede{ font-family:var(--serif);font-size:21px;line-height:1.55;color:var(--ink-soft); max-width:34ch;margin:0 auto 40px; } .cta-solid{ display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bone); padding:17px 34px;font-family:"JetBrains Mono", monospace;font-size:11px; letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--ink);cursor:pointer;white-space:nowrap; transition:background .25s ease, transform .25s ease, border-color .25s ease; } .cta-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translateY(-1px)} .scroll-cue{ position:absolute;bottom:6px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:14px; font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.28em; text-transform:uppercase;color:var(--ink-faint); } .scroll-cue .line{width:1px;height:46px;background:var(--rule)} .directory-head{ display:flex;justify-content:space-between;align-items:baseline; margin:64px 0 8px;padding-bottom:16px;border-bottom:1px solid var(--ink); } .directory-head .t{ font-family:"JetBrains Mono", monospace;font-weight:500;font-size:12px; letter-spacing:.24em;text-transform:uppercase;color:var(--ink); } .directory-head .c{ font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-faint); } /* The rooms — one DOM, two layouts driven by [data-wayfinding] */ .directory{margin-top:0} /* each open room previews a whisper of its brand's language */ html[data-skin="ttts"] .room[data-brand="folinique"]{--accent:#8a9c6e;--accent-deep:#6e8255} html[data-skin="ttts"] .room[data-brand="shellstock"]{--accent:#2f6d63;--accent-deep:#234f48} [data-wayfinding="index"] .directory{display:flex;flex-direction:column} [data-wayfinding="directory"] .directory{ display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:24px; } .room{ position:relative;color:inherit; transition:background .25s ease, border-color .25s ease, transform .25s ease; } .room__index{display:flex;flex-direction:column;gap:6px} .room__no{ font-family:var(--display);font-weight:500;font-size:32px; line-height:1;color:var(--ink);letter-spacing:-.01em; } .room__disc{ font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.24em; text-transform:uppercase;color:var(--accent-deep); } .room__name{ font-family:var(--display);font-weight:500;font-size:31px; line-height:1.02;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px; } .room__name .ac{color:var(--accent)} .room__name em{font-style:italic} .room__blurb{font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:46ch} .room__showing{ font-family:"JetBrains Mono", monospace;font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-faint);margin-top:18px;line-height:1.7; } .room__showing b{font-weight:500;color:var(--accent-deep)} .room__showing .sep{color:var(--rule);margin:0 .3em} .room__showing .price{color:var(--ink)} .room__status{display:flex;align-items:center;gap:18px;padding-top:6px} .room__arr{font-size:20px;color:var(--ink);opacity:.55;transition:transform .25s ease, opacity .25s ease} a.room:hover .room__arr{opacity:1;transform:translateX(5px)} .room[data-status="soon"]{cursor:default} /* INDEX layout — printed table-of-contents rows */ [data-wayfinding="index"] .room{ display:grid;grid-template-columns:140px 1fr auto;gap:36px;align-items:start; padding:34px 12px;border-bottom:1px solid var(--rule); } [data-wayfinding="index"] .room:first-child{border-top:1px solid var(--rule-soft)} [data-wayfinding="index"] a.room:hover{background:var(--paper);transform:none} [data-wayfinding="index"] .room[data-status="soon"]{opacity:.62} [data-wayfinding="index"] .room[data-status="soon"] .room__no{color:var(--ink-faint)} /* DIRECTORY layout — gallery placards */ [data-wayfinding="directory"] .room{ display:flex;flex-direction:column;gap:16px; border:1px solid var(--rule);background:var(--paper);padding:28px 26px 24px; min-height:230px; } [data-wayfinding="directory"] .room__index{ flex-direction:row;justify-content:space-between;align-items:baseline; } [data-wayfinding="directory"] .room__body{flex:1} [data-wayfinding="directory"] .room__status{justify-content:space-between;margin-top:auto} [data-wayfinding="directory"] a.room:hover{border-color:var(--ink);transform:translateY(-2px)} [data-wayfinding="directory"] .room[data-status="open"]{grid-column:1 / -1} [data-wayfinding="directory"] .room[data-status="soon"]{opacity:.78} [data-wayfinding="directory"] .room[data-status="open"]{ background:linear-gradient(180deg, var(--bone-2), var(--paper)); } /* OSPOS room renders in its own night palette — proof of per-brand theming */ .room[data-brand="ospos"]{ --ink:#edefe8;--ink-soft:#b7bcb0;--ink-faint:#878c81; --accent:#a6ba83;--accent-deep:#c0cf97;--rule:#3a3f46;--paper:rgba(255,255,255,.04); background:#191c20;border-color:#34383f;color:#edefe8; } [data-wayfinding="index"] .room[data-brand="ospos"]{ padding-left:22px;padding-right:22px;border-bottom-color:#34383f; } .room[data-brand="ospos"] .room__no, .room[data-brand="ospos"] .room__name{color:#edefe8} .room[data-brand="ospos"] .room__blurb{color:#b7bcb0} .room[data-brand="ospos"] .status--soon{color:#878c81;border-color:#3a3f46} /* ======================================================== PRODUCT */ .product{display:grid;gap:0} [data-hero="split"] .product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start} [data-hero="stacked"] .product{grid-template-columns:1fr;max-width:680px;margin:0 auto} [data-hero="stacked"] .only-split{display:none} [data-hero="split"] .only-stacked{display:none} .product__media{position:sticky;top:92px} .when-out{display:none} [data-stock="out"] .when-in{display:none} [data-stock="out"] .when-out{display:inline} .product__lede{font-size:22px;line-height:1.5;color:var(--ink);max-width:40ch;margin:8px 0 0} /* image plates — designed for real photography */ .plates{display:flex;flex-direction:column;gap:14px} [data-hero="stacked"] .plates{margin:40px 0 8px} .plate{ position:relative;background:var(--bone-2);border:1px solid var(--rule);overflow:hidden; background-size:cover;background-position:center; } .plate.hero{aspect-ratio:4/5} /* Placeholder hero (no photo yet) is far shorter than a real image plate; real photos have no .ph child and keep the 4/5 ratio above. */ .plate.hero:has(.ph){aspect-ratio:auto;height:200px} .plate.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:none;border:0} .plate.row .plate{aspect-ratio:1/1} .plate .ph{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background-image:repeating-linear-gradient(135deg, transparent 0 11px, rgba(28,31,26,.04) 11px 12px); } .plate .ph .mk{font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)} .plate .ph .dia{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);opacity:.7} .product__meta-line{ font-family:"JetBrains Mono", monospace;font-size:11px;letter-spacing:.26em; text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;line-height:1.6; } .product__meta-line .sep{color:var(--rule);margin:0 .55em} .product__title{ font-family:var(--display);font-weight:500; font-size:clamp(46px, calc(7vw * var(--display-scale)), 72px); line-height:.92;letter-spacing:-.02em;margin-bottom:12px; } .product__title .ac{color:var(--accent)} .product__title em{font-style:italic} .product__sub{ font-family:"JetBrains Mono", monospace;font-size:12px;letter-spacing:.22em; text-transform:uppercase;color:var(--ink-soft);line-height:1.7;margin-bottom:30px; } .section-rule{margin:44px 0 30px} .section-label{ font-family:"JetBrains Mono", monospace;font-weight:500;font-size:11px; letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:22px; } /* acquire panel — restrained add-to-cart */ .acquire{ border:1px solid var(--ink);margin:40px 0 0;background:var(--paper); } .acquire__head{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:22px 24px 20px;border-bottom:1px solid var(--rule); } .acquire__name{font-family:"Cormorant Garamond", serif;font-size:21px;color:var(--ink)} .acquire__name small{ display:block;font-family:"JetBrains Mono", monospace;font-size:9px; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px; } .acquire__price{font-family:"Cormorant Garamond", serif;font-weight:500;font-size:30px;color:var(--ink)} .acquire__body{padding:20px 24px 24px;display:flex;gap:14px;align-items:stretch} .stepper{display:flex;align-items:stretch;border:1px solid var(--rule);background:var(--bone)} .stepper button{ width:46px;background:none;border:0;cursor:pointer;color:var(--ink-soft); font-family:"Cormorant Garamond", serif;font-size:22px;line-height:1; transition:background .15s ease, color .15s ease; } .stepper button:hover{background:var(--bone-3);color:var(--ink)} .stepper .q{ width:52px;display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono", monospace;font-size:15px;color:var(--ink); border-left:1px solid var(--rule);border-right:1px solid var(--rule); } .acquire .btn{flex:1} .acquire__note{ padding:0 24px 22px;font-family:"JetBrains Mono", monospace;font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep); display:flex;align-items:center;gap:8px; } .acquire__note .dia{width:6px;height:6px;background:var(--accent);transform:rotate(45deg)} /* out-of-stock / waitlist */ .waitlist{display:none;padding:20px 24px 24px} .waitlist p{font-size:16px;line-height:1.55;color:var(--ink-soft);font-style:italic;margin-bottom:16px} .waitlist form{display:flex;gap:10px} .field{ flex:1;padding:15px 16px;border:1px solid var(--rule);background:var(--bone); font-family:"Cormorant Garamond", serif;font-size:17px;color:var(--ink); } .field:focus{outline:none;border-color:var(--accent)} .field::placeholder{color:var(--ink-faint)} [data-stock="out"] .acquire__body, [data-stock="out"] .acquire__note{display:none} [data-stock="out"] .waitlist{display:block} [data-stock="out"] .acquire{border-color:var(--rule)} .stock-line{ font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.22em; text-transform:uppercase;color:var(--accent-deep); } [data-stock="out"] .stock-line{color:var(--warn)} .stock-line.is-preorder{color:var(--accent)} .acquire__head .stock-line{margin-top:8px} /* ======================================================== CART */ .cart-list{border-top:1px solid var(--ink)} .cart-row{ display:grid;grid-template-columns:1fr auto auto auto;gap:28px; padding:24px 0;border-bottom:1px solid var(--rule);align-items:center; } .cart-row .title{font-family:"Cormorant Garamond", serif;font-size:20px;color:var(--ink);line-height:1.3} .cart-row .title small{ display:block;font-family:"JetBrains Mono", monospace;font-size:9px; letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);margin-top:5px; } .cart-row .stepper{height:42px} .cart-row .stepper button{width:38px;font-size:19px} .cart-row .stepper .q{width:42px;font-size:13px} .cart-row .unit{font-family:"JetBrains Mono", monospace;font-size:12px;color:var(--ink-soft);white-space:nowrap} .cart-row .line{font-family:"JetBrains Mono", monospace;font-size:14px;color:var(--ink);letter-spacing:.04em;white-space:nowrap;min-width:70px;text-align:right} .cart-row .rm{ grid-column:1 / -1;justify-self:start;margin-top:-8px; font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-faint);background:none;border:0;cursor:pointer;padding:0; } .cart-row .rm:hover{color:var(--warn)} .cart-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-top:40px;flex-wrap:wrap} .ship-progress{flex:1;min-width:240px;max-width:360px} .ship-progress .bar{height:2px;background:var(--rule);position:relative;margin:14px 0 10px} .ship-progress .bar i{position:absolute;left:0;top:0;height:100%;background:var(--accent);transition:width .4s ease} .ship-progress .cap{ font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-soft);line-height:1.6; } .ship-progress .cap b{color:var(--accent-deep);font-weight:500} .cart-totals{display:flex;flex-direction:column;gap:6px;min-width:300px;margin-left:auto} .cart-totals .row{ display:flex;justify-content:space-between;align-items:baseline;padding:7px 0; font-family:"JetBrains Mono", monospace;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-soft); } .cart-totals .row .v{font-family:"Cormorant Garamond", serif;font-style:normal;font-size:19px;color:var(--ink);letter-spacing:0;text-transform:none} .cart-totals .row.muted .v{color:var(--ink-soft)} .cart-totals .ship-note{font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);text-align:right;margin-top:-2px} .cart-totals .row.total{padding-top:15px;border-top:1px solid var(--ink);margin-top:8px;color:var(--ink)} .cart-totals .row.total .v{font-size:25px;font-weight:500} .checkout-form{margin-top:30px} .checkout-msg{ font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;margin-top:14px;line-height:1.6;min-height:1.2em; } .checkout-msg.err{color:var(--warn)} .checkout-msg.load{color:var(--accent-deep)} .secure-line{ font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-faint);margin-top:16px;text-align:center; } /* cart vs empty */ [data-cart="full"] .cart-empty{display:none} [data-cart="empty"] .cart-when-full{display:none} .cart-empty{padding:64px 0} .empty-state{ border:1px solid var(--rule);background:var(--paper); padding:64px 40px;text-align:center; } .empty-state .mk{ font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.24em; text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px; } .empty-state p{font-family:"Cormorant Garamond", serif;font-style:italic;font-size:24px;color:var(--ink-soft);margin-bottom:8px;line-height:1.4} .empty-state .meta{font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:30px} /* ======================================================== ORDER */ .order-confirm{max-width:680px;margin:0 auto} .order-status-line{ display:inline-flex;align-items:center;gap:11px;padding:8px 16px; border:1px solid var(--accent);color:var(--accent-deep);margin-bottom:30px; font-family:"JetBrains Mono", monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase; } .order-status-line .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .order-meta{ display:flex;flex-wrap:wrap;gap:14px 34px;padding:20px 24px;background:var(--bone-2); border:1px solid var(--rule);margin-bottom:36px; } .order-meta > div{display:flex;flex-direction:column;gap:5px} .order-meta .k{font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep)} .order-meta .v{font-family:"JetBrains Mono", monospace;font-size:12px;color:var(--ink);letter-spacing:.04em} .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:36px 0;border:1px solid var(--rule)} .timeline .stage{padding:20px 18px;border-right:1px solid var(--rule);position:relative} .timeline .stage:last-child{border-right:0} .timeline .stage .n{font-family:"JetBrains Mono", monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;display:flex;align-items:center;gap:8px} .timeline .stage .n .dia{width:7px;height:7px;transform:rotate(45deg);background:var(--rule)} .timeline .stage.done .n{color:var(--accent-deep)} .timeline .stage.done .n .dia{background:var(--accent)} .timeline .stage .s{font-family:"Cormorant Garamond", serif;font-size:19px;color:var(--ink)} .timeline .stage.todo .s{color:var(--ink-faint)} .order-note{font-size:17px;line-height:1.6;color:var(--ink-soft);font-style:italic;text-align:center;margin-top:8px} /* ======================================================== STATES */ .center-state{max-width:560px;margin:40px auto;text-align:center;padding:40px 20px} .center-state .code{ font-family:"JetBrains Mono", monospace;font-size:11px;letter-spacing:.3em; text-transform:uppercase;color:var(--accent-deep);margin-bottom:20px; } .center-state h1{ font-family:var(--display);font-weight:500; font-size:clamp(46px,9vw,76px);line-height:.95;letter-spacing:-.015em;margin-bottom:16px; } .center-state h1 em{color:var(--accent);font-style:italic} .center-state p{font-size:19px;line-height:1.55;color:var(--ink-soft);font-style:italic;margin-bottom:30px;max-width:42ch;margin-left:auto;margin-right:auto} .center-state .btn{margin:0 auto} /* ======================================================== responsive */ @media (max-width:900px){ [data-hero="split"] .product{grid-template-columns:1fr;gap:36px;max-width:680px} [data-hero="split"] .plates{margin-bottom:8px} } @media (max-width:680px){ .content{padding:44px 22px 64px} /* topbar must fit wordmark + Directory + Cart [n] at 390px */ .topbar-inner{padding:14px 16px;gap:12px} .wordmark-link{font-size:15px;letter-spacing:.01em} .topnav{gap:16px} .topnav a{font-size:11px;letter-spacing:.14em} .cart-link{gap:5px} [data-wayfinding="directory"] .directory{grid-template-columns:1fr} /* rooms stack vertically — the 2-col TOC compromise gave each room a different index-column width (SUPPLEMENT vs ORGANIC FERTILIZER) and squeezed the blurbs into ragged columns */ [data-wayfinding="index"] .room{ display:flex;flex-direction:column;gap:12px;padding:30px 4px; } [data-wayfinding="index"] .room__index{ flex-direction:row;align-items:baseline;gap:14px; } [data-wayfinding="index"] .room__status{ justify-content:space-between;margin-top:2px;padding-top:0; } .room__no{font-size:20px} .room__name{font-size:27px;margin-bottom:6px} .room__blurb{font-size:16.5px;line-height:1.55;max-width:none} .room__showing{margin-top:12px;line-height:1.8} .spec-strip{padding:22px 0} .spec-strip .num{font-size:29px} .spec-strip .num em{font-size:17px} .spec-strip .cell{padding:0 4px} .acquire__body{flex-direction:column} .stepper{align-self:flex-start} .stepper button{width:52px;height:48px} .waitlist form{flex-direction:column} .cart-row{grid-template-columns:1fr auto;gap:10px 18px} .cart-row .title{grid-column:1 / -1} .cart-row .unit{display:none} .cart-row .line{grid-column:2;text-align:right;align-self:center} .cart-row .stepper{grid-column:1;justify-self:start;width:max-content} .secure-line{padding:0 8px;line-height:1.7} .cart-totals,.ship-progress{min-width:0;max-width:none;width:100%} .cart-foot{gap:28px} .timeline{grid-template-columns:1fr} .timeline .stage{border-right:0;border-bottom:1px solid var(--rule)} .timeline .stage:last-child{border-bottom:0} .cta{font-size:20px;padding:20px 22px} .feature{grid-template-columns:42px 1fr;gap:16px} .feature .glyph{width:40px;height:40px} } /* phones: stack the spec strip into ledger rows — three tight columns don't breathe below ~480px (labels were wrapping to three lines) */ @media (max-width:480px){ .spec-strip{grid-template-columns:1fr;gap:0;padding:8px 0} .spec-strip .cell{flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px;padding:16px 4px;border-left:0;text-align:left} .spec-strip .cell + .cell{border-top:1px solid var(--rule);border-left:0} .spec-strip .num{margin-bottom:0;font-size:27px} .spec-strip .num em{font-size:16px} .spec-strip .lbl{text-align:right;line-height:1.6} .spec-strip .lbl br{display:none} } @media (max-width:380px){ .wordmark-link{font-size:13.5px} .topnav{gap:12px} }