/* ========================================================================== TEANO — Redesign layer (cold light premium minimalism, à la bongio.com) Loaded AFTER storefront.css. Overrides the legacy teal/green look. Fonts (Jost + Hanken Grotesk) are linked from layout.php . ========================================================================== */ :root{ /* palette */ --te-bg:#f4f4f1; --te-surface:#ffffff; --te-warm:#e7e5df; --te-warm-2:#e3e1db; --te-ink:#1a1a18; --te-ink-2:#201f1c; --te-text:#4a473f; --te-muted:#6b675e; --te-muted-2:#57544c; --te-subtle:#9a978f; --te-border:#e2e0d8; --te-border-strong:#1a1a18; --te-border-input:#cbc9c0; --te-line-tile:#dddbd3; --te-hover:#6f6f6f; --te-selection:#dcdcd6; --te-footer-bg:#141412; --te-footer-text:#a7a291; --te-footer-heading:#6a6656; --te-footer-muted:#86816f; --te-on-dark:#f4f4f1; --te-on-dark-2:#ecebe4; --te-on-dark-subtle:#b6b09c; /* type */ --te-font-display:'Jost', system-ui, sans-serif; --te-font-body:'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* metrics */ --te-maxw:1440px; --te-pad:44px; --te-topbar-h:72px; } /* --------------------------------------------------------------- base */ html{ background:var(--te-bg); } body{ background:var(--te-bg) !important; color:var(--te-ink); font-family:var(--te-font-body); font-weight:300; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{ background:var(--te-selection); } .te-page{ background:var(--te-bg); } a{ color:inherit; text-decoration:none; transition:color .2s ease, border-color .2s ease, opacity .2s ease; } a:hover{ color:var(--te-hover); } img{ max-width:100%; } h1,h2,h3,h4{ font-family:var(--te-font-display); font-weight:300; color:var(--te-ink-2); } /* radius 0 everywhere — a defining trait */ .te-page :where(.sf-box, .sf-card, .sf-badge, .te-btn, input, select, textarea, button, .sf-card__image, .te-filters, .te-active-filters__chip, .sf-price-card, .te-picture-hero__frame, .sf-thumb, .sf-product__image, .siteFooter){ border-radius:0 !important; } /* generic label / overline */ .te-overline{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--te-subtle); margin:0; } /* width helper reused by content pages */ .te-shell{ max-width:var(--te-maxw); margin:0 auto; padding-left:var(--te-pad); padding-right:var(--te-pad); } /* main content spacing */ .sf-main-cart{ background:var(--te-bg); } /* --------------------------------------------------------------- loader */ .te-loader{ background:var(--te-bg); } .te-loader__logo{ filter:none; } .te-loader__line span{ background:var(--te-ink); } .te-loader__text{ color:var(--te-subtle); letter-spacing:.16em; text-transform:uppercase; font-size:11px; } /* --------------------------------------------------------------- topbar */ .te-topbar{ position:sticky; top:0; z-index:2600; background:var(--te-bg); border-bottom:1px solid var(--te-border); box-shadow:none; } .te-topbar__inner{ max-width:var(--te-maxw); margin:0 auto; padding:20px var(--te-pad); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; min-height:auto; } .te-brand{ justify-self:center; grid-column:2; display:inline-flex; align-items:center; } .te-brand__logo{ height:26px; width:auto; display:block; } /* search collapses to icon; the inline field is hidden, users use the overlay */ .te-topbar__inner .te-search{ display:none; } .te-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:22px; } .te-actions .te-icon{ width:auto; height:auto; padding:0; background:none; border:0; box-shadow:none; display:inline-flex; align-items:center; opacity:.85; } .te-actions .te-icon:hover{ opacity:1; background:none; } .te-actions .te-icon img{ width:19px; height:19px; filter:brightness(0); } /* keep language switch minimal, hide the redundant flag list, keep dropdown */ .te-language-switch{ display:none; } .te-lang-dropdown__trigger, .te-lang-dropdown__trigger:hover, .te-lang-dropdown__trigger:focus, .te-lang-dropdown__trigger:focus-visible{ background:none !important; border:0 !important; box-shadow:none !important; padding:0; display:inline-flex; align-items:center; gap:6px; } .te-lang-dropdown__trigger img{ width:20px; height:14px; object-fit:cover; } .te-lang-dropdown__arrow{ border-top-color:currentColor; } .te-lang-dropdown__panel{ background:var(--te-surface); border:1px solid var(--te-border); box-shadow:0 14px 30px rgba(0,0,0,.08); border-radius:0; } .te-lang-dropdown__item{ font-size:13px; } .te-lang-dropdown__item.is-active{ color:var(--te-ink); } .te-cart-link__count{ background:var(--te-ink); color:var(--te-on-dark); font-family:var(--te-font-body); font-weight:400; border-radius:0; } .te-user-menu__panel{ background:var(--te-surface); border:1px solid var(--te-border); box-shadow:0 14px 30px rgba(0,0,0,.08); border-radius:0; } /* menu trigger (opens full-screen overlay) — left side of topbar */ .te-menubtn{ grid-column:1; justify-self:start; display:inline-flex; align-items:center; gap:12px; background:none; border:0; padding:0; cursor:pointer; color:var(--te-ink); font-family:var(--te-font-body); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:300; } .te-menubtn__icon{ display:inline-flex; flex-direction:column; gap:4px; width:20px; } .te-menubtn__icon span{ height:1.5px; background:currentColor; display:block; transition:transform .2s ease; } .te-menubtn:hover{ color:var(--te-hover); } @media (max-width:560px){ .te-menubtn__label{ display:none; } } /* full-screen navigation overlay */ .te-menu-overlay{ position:fixed; inset:0; z-index:4000; background:var(--te-footer-bg); color:var(--te-on-dark); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .35s ease, transform .35s ease, visibility .35s; overflow-y:auto; } .te-menu-overlay.is-open{ opacity:1; visibility:visible; transform:none; } body.is-menu-open{ overflow:hidden; } .te-menu-overlay__bar{ max-width:var(--te-maxw); margin:0 auto; padding:20px var(--te-pad); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; } .te-menu-overlay__close{ justify-self:start; background:none; border:0; padding:0; cursor:pointer; color:var(--te-on-dark-2); font-family:var(--te-font-body); font-size:12px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; } .te-menu-overlay__close:hover{ color:#fff; } .te-menu-overlay__brand{ justify-self:center; } .te-menu-overlay__brand img{ height:24px; filter:brightness(0) invert(1); display:block; } .te-menu-overlay__inner{ max-width:var(--te-maxw); margin:0 auto; padding:clamp(30px,6vh,64px) var(--te-pad) 60px; display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(32px,5vw,64px); } .te-menu-overlay__lab{ margin:0 0 22px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--te-footer-muted); } .te-menu-overlay__cats{ display:flex; flex-direction:column; } .te-menu-overlay__cats a{ font-family:var(--te-font-display); font-weight:300; font-size:clamp(28px,4vw,44px); line-height:1.3; color:var(--te-on-dark); text-decoration:none; transition:color .2s ease; } .te-menu-overlay__cats a:hover{ color:var(--te-footer-muted); } .te-menu-overlay__cols{ columns:2; column-gap:28px; } .te-menu-overlay__cols a{ display:block; font-size:14px; color:var(--te-on-dark-2); text-decoration:none; padding:6px 0; } .te-menu-overlay__cols a:hover{ color:#fff; } .te-menu-overlay__links{ margin-top:34px; padding-top:22px; border-top:1px solid #2a2a24; display:flex; flex-wrap:wrap; gap:24px; } .te-menu-overlay__links a{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--te-footer-muted); text-decoration:none; } .te-menu-overlay__links a:hover{ color:#fff; } @media (max-width:820px){ .te-menu-overlay__inner{ grid-template-columns:1fr; gap:40px; } } @media (prefers-reduced-motion:reduce){ .te-menu-overlay{ transition:opacity .01s; transform:none; } } /* ---- homepage: transparent header floating over the hero video ---- */ body.te-homepage .te-topbar{ position:absolute; top:0; left:0; right:0; background:transparent; border-bottom:0; box-shadow:none; } body.te-homepage .te-topbar__inner, body.te-homepage .te-menubtn, body.te-homepage .te-actions{ color:var(--te-on-dark); } body.te-homepage .te-brand__logo{ filter:brightness(0) invert(1); } body.te-homepage .te-actions .te-icon img{ filter:brightness(0) invert(1); opacity:.9; } body.te-homepage .te-topnav a:hover, body.te-homepage .te-actions a:hover{ color:#cfccc3; } /* homepage: hide the category mega-bar so the hero stays clean (prototype has no bar here) */ body.te-homepage .menu-main-wrap{ display:none; } /* --------------------------------------------------------------- category menu bar Prefixed with .te-page to out-specify the legacy inline