/* ============================================================================ * Tasselora® — shared site chrome (header + footer + back-to-top + buttons). * Self-contained: defines its own palette so it renders correctly on every * template (Catalogue, Color Intelligence, single product, default pages). * Colour overrides from Theme Settings are injected as :root vars in . * ========================================================================== */ :root{ --bg:#0B0A07; --bg2:#100D08; --line:#2B2316; --line-2:#3A2F1D; --ink:#F1E9D8; --muted:#998C72; --faint:#5B5040; --gold:#C7A24A; --gold-bright:#E6CC82; --gold-deep:#8A6C2A; --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Jost','DM Sans',system-ui,-apple-system,sans-serif; } .tslc-wrap{max-width:1320px;margin:0 auto;padding:0 24px;position:relative;} /* ── HEADER ─────────────────────────────────────────────────────────────── */ .tslc-header{ position:relative; top:0; z-index:80; width:100%; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:linear-gradient(180deg,rgba(11,10,7,.94),rgba(11,10,7,.74)); border-bottom:1px solid var(--line); } .tslc-header.tslc-sticky{position:sticky;} .tslc-bar{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:18px;} .tslc-brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;} .tslc-logo{max-height:42px;width:auto;display:block;align-self:center;} .tslc-mark{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:.02em;color:var(--ink);line-height:1;} .tslc-reg{font-size:10px;color:var(--gold);vertical-align:super;margin-left:1px;} .tslc-tag{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line-2);padding-left:10px;align-self:center;} .tslc-nav .tslc-menu{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0;} .tslc-nav .tslc-menu li{margin:0;} .tslc-nav .tslc-menu a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s;display:inline-block;} .tslc-nav .tslc-menu a:hover, .tslc-nav .tslc-menu .current-menu-item>a{color:var(--gold-bright);} /* Mobile burger */ .tslc-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;} .tslc-burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s;} .tslc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .tslc-burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .tslc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(max-width:760px){ .tslc-tag{display:none;} .tslc-burger{display:flex;} .tslc-nav{position:absolute;top:100%;left:0;right:0;background:rgba(11,10,7,.98);border-bottom:1px solid var(--line); max-height:0;overflow:hidden;transition:max-height .35s ease;} .tslc-nav.tslc-open{max-height:60vh;} .tslc-nav .tslc-menu{flex-direction:column;gap:0;padding:8px 24px 16px;} .tslc-nav .tslc-menu li{width:100%;} .tslc-nav .tslc-menu a{padding:14px 0;width:100%;border-bottom:1px solid var(--line);letter-spacing:.18em;} } /* ── FOOTER ─────────────────────────────────────────────────────────────── */ .tslc-footer{border-top:1px solid var(--line);padding:56px 0 60px;text-align:center;position:relative;z-index:1;} .tslc-foot-brand{font-family:var(--serif);font-size:30px;color:var(--ink);font-weight:400;letter-spacing:.02em;} .tslc-foot-brand b{color:var(--gold);font-weight:400;} .tslc-foot-text{color:var(--muted);font-size:12px;margin:12px auto 0;letter-spacing:.04em;line-height:1.7;max-width:760px;} .tslc-foot-links .tslc-foot-menu{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none;} .tslc-foot-links .tslc-foot-menu li{margin:0;} .tslc-foot-links .tslc-foot-menu a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s;} .tslc-foot-links .tslc-foot-menu a:hover{color:var(--gold-bright);} .tslc-social{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:20px;} .tslc-social a{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-decoration:none;transition:color .3s;} .tslc-social a:hover{color:var(--gold-bright);} .tslc-copy{margin-top:26px;font-size:10.5px;letter-spacing:.12em;color:var(--faint);} /* ── BACK TO TOP ────────────────────────────────────────────────────────── */ .tslc-totop{position:fixed;bottom:26px;right:26px;z-index:90;width:46px;height:46px;border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--bg);border:none;cursor:pointer; font-size:18px;box-shadow:0 10px 26px -10px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;} .tslc-totop.tslc-show{opacity:1;pointer-events:auto;} .tslc-totop:hover{transform:translateY(-3px);} /* ── Shared button (so single-product / CI pages have a styled link too) ─── */ .tslc-btn{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; padding:13px 24px;border-radius:999px;cursor:pointer;text-decoration:none;border:1px solid var(--gold); background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--bg);font-weight:500;transition:all .3s cubic-bezier(.22,.61,.36,1);} .tslc-btn:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--gold-deep);} .tslc-btn.tslc-ghost{background:transparent;color:var(--gold-bright);border-color:var(--gold-deep);} .tslc-btn.tslc-ghost:hover{filter:none;}