/* Toronto Scalp Micropigmentation Studio — sitewide styles (hosted 1) Moved out of the Hostinger sitewide code. Order is the original order. */ /* ---- style ---- */ /* Image copy/drag protection */ img { -webkit-user-drag: none; user-drag: none; } #copy-protect-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background-color: #1a1a1a; color: #ffffff; border: 1px solid #ffffff; padding: 12px 20px; border-radius: 8px; font-family: 'Rubik', sans-serif; font-size: 14px; z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; max-width: 90%; text-align: center; } #copy-protect-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================ CENTRED CONTENT SECTIONS Caps these sections' inner wrapper at the site content width and keeps it centred. DO NOT add a section here that also appears in the FULL-BLEED list below. Both blocks use !important, the full-bleed block comes later, so its "margin-left/right: 0" beats this block's "margin: 0 auto" and the section ends up full width AND left aligned. #meetyoursmptechnician was in both lists and was removed from here — it is a full-bleed section. Pick one list per section, never both. ============================================ */ @media screen and (min-width: 920px) { #zTqCc1 div:nth-of-type(2), #z977Pw div:nth-of-type(2), #zWd963 div:nth-of-type(2), #zuxMcn div:nth-of-type(2), #zfStjj div:nth-of-type(2), #zGk66z div:nth-of-type(2), #zHFsVy div:nth-of-type(2), #zwj04U div:nth-of-type(2) { max-width: 1600px !important; width: 100% !important; padding-inline: 20px !important; margin: 0 auto !important; } } @media screen and (max-width: 919px) { #zTqCc1 div:nth-of-type(2), #z977Pw div:nth-of-type(2), #zWd963 div:nth-of-type(2), #zuxMcn div:nth-of-type(2), #zfStjj div:nth-of-type(2), #zGk66z div:nth-of-type(2), #zHFsVy div:nth-of-type(2), #zwj04U div:nth-of-type(2) { max-width: none !important; width: 100% !important; padding-inline: 0 !important; margin: 0 auto !important; } } /* ============================================ FULL-BLEED SECTIONS — #zY6DNo + #zDrl2_ + #zn9hU9 + #meetyoursmptechnician + #zP6fYk + #zSlRzL (mobile hero) + #zHwSH4 + #z3gnM- + #zbOlz0 + #meetyourtechnician + #beforeaftergallery + #smp-hero-d + #zL4bpn + #zqPuue + #desktopresults + #zhaPOA + #zxiymh + #zM_jrS + #z6JenY + #zAcfjk The builder caps its sections at a content width and adds side padding. This pulls these sections out to the full viewport and strips the padding off their inner wrappers so the embeds inside can run edge to edge. ============================================ */ #zY6DNo, #zDrl2_, #zn9hU9, #meetyoursmptechnician, #zP6fYk, #zSlRzL, #zHwSH4, #z3gnM-, #zbOlz0, #meetyourtechnician, #beforeaftergallery, #smp-hero-d, #zL4bpn, #zqPuue, #desktopresults, #zhaPOA, #zxiymh, #zM_jrS, #z6JenY, #zAcfjk { max-width: 100vw !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden; } #zY6DNo > div, #zY6DNo > div > div, #zY6DNo > div > div > div, #zDrl2_ > div, #zDrl2_ > div > div, #zDrl2_ > div > div > div, #zn9hU9 > div, #zn9hU9 > div > div, #zn9hU9 > div > div > div, #meetyoursmptechnician > div, #meetyoursmptechnician > div > div, #meetyoursmptechnician > div > div > div, #zP6fYk > div, #zP6fYk > div > div, #zP6fYk > div > div > div, #zSlRzL > div, #zSlRzL > div > div, #zSlRzL > div > div > div, #zHwSH4 > div, #zHwSH4 > div > div, #zHwSH4 > div > div > div, #z3gnM- > div, #z3gnM- > div > div, #z3gnM- > div > div > div, #zbOlz0 > div, #zbOlz0 > div > div, #zbOlz0 > div > div > div, #meetyourtechnician > div, #meetyourtechnician > div > div, #meetyourtechnician > div > div > div, #beforeaftergallery > div, #beforeaftergallery > div > div, #beforeaftergallery > div > div > div, #smp-hero-d > div, #smp-hero-d > div > div, #smp-hero-d > div > div > div, #zL4bpn > div, #zL4bpn > div > div, #zL4bpn > div > div > div, #zqPuue > div, #zqPuue > div > div, #zqPuue > div > div > div, #desktopresults > div, #desktopresults > div > div, #desktopresults > div > div > div, #zhaPOA > div, #zhaPOA > div > div, #zhaPOA > div > div > div, #zxiymh > div, #zxiymh > div > div, #zxiymh > div > div > div, #zM_jrS > div, #zM_jrS > div > div, #zM_jrS > div > div > div, #z6JenY > div, #z6JenY > div > div, #z6JenY > div > div > div, #zAcfjk > div, #zAcfjk > div > div, #zAcfjk > div > div > div { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } #zY6DNo iframe, #zDrl2_ iframe, #zn9hU9 iframe, #meetyoursmptechnician iframe, #zP6fYk iframe, #zSlRzL iframe, #zHwSH4 iframe, #z3gnM- iframe, #zbOlz0 iframe, #meetyourtechnician iframe, #beforeaftergallery iframe, #smp-hero-d iframe, #zL4bpn iframe, #zqPuue iframe, #desktopresults iframe, #zhaPOA iframe, #zxiymh iframe, #zM_jrS iframe, #z6JenY iframe, #zAcfjk iframe { width: 100% !important; max-width: none !important; display: block; border: 0; } /* Mobile hero (#zSlRzL): also drop the builder's top/bottom padding and keep the section black so no light edge shows around the head scan. */ #zSlRzL { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; background: #000 !important; } #zSlRzL > div, #zSlRzL > div > div, #zSlRzL > div > div > div { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* ============================================ HEADING → PARAGRAPH SPACING (5px sitewide) The builder floors its block spacing at 8px. These rules cover the case where the heading and the paragraph live in the SAME block. Where they are two separate builder blocks, the script further down measures the real gap and pulls it back to 5px. Our own components are excluded so their spacing stays as designed. ============================================ */ h1 + p:not(.tf-addr), h2 + p:not(.tf-addr), h3 + p:not(.tf-addr), h4 + p:not(.tf-addr), h5 + p:not(.tf-addr), h6 + p:not(.tf-addr) { margin-top: 5px !important; } h1:has(+ p), h2:has(+ p), h3:has(+ p), h4:has(+ p), h5:has(+ p), h6:has(+ p) { margin-bottom: 0 !important; } /* our own blocks keep their own rhythm */ .tf .tf-type { margin-bottom: revert !important; } /* ============================================ CUSTOM HEADER + MENU Desktop (>=1180px): classic inline nav, hover mega panels. Mobile (<1180px): logo + MENU button, full-screen plate. ============================================ */ /* hide the native builder header */ .block-header, body > header, header[class*="header"], [data-testid*="header"] { display: none !important; } :root{ --tsmp-ink:#000000; --tsmp-brand:#1a1a1a; --tsmp-paper:#ededed; --tsmp-steel:#8b93a1; --tsmp-hair:rgba(255,255,255,.09); --tsmp-hair2:rgba(255,255,255,.16); --tsmp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --tsmp-h:74px; --tsmp-max:1600px; } @media(min-width:1180px){ :root{ --tsmp-h:88px; } } .tsmp-shell *,.tsmp-plate *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .tsmp-shell,.tsmp-plate{font-family:'Rubik',system-ui,sans-serif} body.tsmp-lock{overflow:hidden !important} /* ---- sticky shell ---- */ .tsmp-shell{ position:sticky;top:0;z-index:999998; background:var(--tsmp-ink); /* black, so the bar melts into the top of the hero image */ border-bottom:1px solid #000; transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1); will-change:opacity,transform;backface-visibility:hidden; } /* scrolling down hides it outright — no half-states */ .tsmp-shell.tsmp-gone{ opacity:0;transform:translateY(-100%);pointer-events:none; } .tsmp-bar{ max-width:var(--tsmp-max);margin:0 auto; height:var(--tsmp-h); display:flex;align-items:center;gap:10px; padding:0 16px; } @media(min-width:1180px){ .tsmp-bar{padding:0 24px;gap:18px} } .tsmp-logo{display:flex;align-items:center;flex:none} /* Phones: the logo takes whatever width the icons leave — 184px = 16+16 bar padding, 3x30 icons, 4 gap, 38 menu, 2x10 gaps — up to 250px wide / 50px tall. Roughly the old size on a 390px iPhone, noticeably larger on 414-430px phones. */ .tsmp-logo{min-width:0} .tsmp-logo img{display:block;width:min(250px, calc(100vw - 184px));height:auto;max-height:50px} @media(min-width:1180px){ .tsmp-logo img{width:auto;height:50px} } /* ---- desktop inline nav ---- */ .tsmp-desknav{display:none} @media(min-width:1180px){ .tsmp-desknav{ display:flex;align-items:center;gap:24px; margin:0 auto;height:100%; } } /* keep the expanded desktop nav on one line at narrower widths */ @media(min-width:1180px) and (max-width:1359px){ .tsmp-desknav{gap:13px} } .tsmp-navitem{position:relative;height:100%;display:flex;align-items:center} .tsmp-navlink{ display:inline-flex;align-items:center;gap:7px; color:var(--tsmp-paper);text-decoration:none; font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;padding:6px 0; border-bottom:1px solid transparent; transition:border-color .25s,opacity .25s; background:none;border-top:0;border-left:0;border-right:0;cursor:pointer; font-family:'Rubik',sans-serif; } .tsmp-navlink:hover,.tsmp-navitem.on .tsmp-navlink{border-bottom-color:#fff} /* the booking item lives in the menu now — a standing underline keeps it reading as the action without turning it back into a button */ .tsmp-navlink.tsmp-navbook{border-bottom-color:rgba(255,255,255,.38)} .tsmp-navlink.tsmp-navbook:hover{border-bottom-color:#fff} /* submenu indicator — micro-dot instead of a caret */ .tsmp-navlink .tsmp-caret{ flex:none;width:3px;height:3px;border-radius:50%; background:currentColor;opacity:.5; transition:opacity .25s ease,transform .25s ease; } .tsmp-navlink:hover .tsmp-caret, .tsmp-navitem.on .tsmp-navlink .tsmp-caret{ opacity:1;transform:scale(1.7); } /* ============================================ MOBILE MENU ICON — FOLLICLE GRID A 3x3 grid of dots: the same impressions SMP places on the scalp. At rest a slow diagonal ripple passes through it every few seconds. Inside the open menu the same grid folds into an X — edge dots fade, corner dots draw in — so the icon appears to transform as the menu draws down over it. ============================================ */ .tsmp-toggle, .tsmp-close{ appearance:none;-webkit-appearance:none;background:transparent;border:0;cursor:pointer; flex:none;width:38px;height:38px;padding:0;margin:0;border-radius:2px; display:flex;align-items:center;justify-content:center; color:var(--tsmp-paper); } .tsmp-toggle{margin-left:auto} @media(min-width:1180px){ .tsmp-toggle{display:none} } .tsmp-toggle:focus-visible, .tsmp-close:focus-visible{outline:2px solid var(--tsmp-steel);outline-offset:3px} .tsmp-toggle,.tsmp-close{flex-direction:column;gap:5px} .tsmp-mlabel{ display:block;font-family:var(--tsmp-mono);font-size:8px;line-height:1; letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase; color:var(--tsmp-paper);opacity:.6;pointer-events:none; } .tsmp-dots{display:grid;grid-template-columns:repeat(3,4px);grid-auto-rows:4px;gap:4px;pointer-events:none;transition:transform .15s ease} .tsmp-dots i{ display:block;width:4px;height:4px;border-radius:50%;background:currentColor; transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .3s ease; } /* idle ripple — header icon only, runs from the top-left corner */ .tsmp-toggle .tsmp-dots i{animation:tsmp-ripple 5.2s ease-in-out infinite} .tsmp-toggle .tsmp-dots i:nth-child(2), .tsmp-toggle .tsmp-dots i:nth-child(4){animation-delay:.09s} .tsmp-toggle .tsmp-dots i:nth-child(3), .tsmp-toggle .tsmp-dots i:nth-child(5), .tsmp-toggle .tsmp-dots i:nth-child(7){animation-delay:.18s} .tsmp-toggle .tsmp-dots i:nth-child(6), .tsmp-toggle .tsmp-dots i:nth-child(8){animation-delay:.27s} .tsmp-toggle .tsmp-dots i:nth-child(9){animation-delay:.36s} @keyframes tsmp-ripple{0%,9%,100%{opacity:1}4.5%{opacity:.22}} /* no ripple while the bar is hidden or the menu is open */ .tsmp-shell.tsmp-gone .tsmp-dots i, .tsmp-open .tsmp-toggle .tsmp-dots i{animation-play-state:paused} @media(hover:hover){ .tsmp-toggle:hover .tsmp-dots i{animation:none;opacity:1} } .tsmp-toggle:active .tsmp-dots{transform:scale(.9)} /* the fold into an X, played inside the menu once it has drawn in */ .tsmp-open .tsmp-close .tsmp-dots i{transition-delay:.26s} .tsmp-open .tsmp-close .tsmp-dots i:nth-child(2n){opacity:0;transform:scale(.2)} .tsmp-open .tsmp-close .tsmp-dots i:nth-child(1){transform:translate(1px,1px)} .tsmp-open .tsmp-close .tsmp-dots i:nth-child(3){transform:translate(-1px,1px)} .tsmp-open .tsmp-close .tsmp-dots i:nth-child(7){transform:translate(1px,-1px)} .tsmp-open .tsmp-close .tsmp-dots i:nth-child(9){transform:translate(-1px,-1px)} @media(prefers-reduced-motion:reduce){ .tsmp-dots i{animation:none !important;transition:none !important} } /* ---- mobile tap-to-call, beside the menu icon ---- */ /* Call / text / email. No box: the icons sit quietly at reduced opacity and only show a faint plate while pressed. Each is 30px wide so the three fit beside a larger logo. */ .tsmp-contact{margin-left:auto;flex:none;display:flex;align-items:center} .tsmp-cbtn{ flex:none;width:30px;height:40px;border-radius:2px; display:flex;align-items:center;justify-content:center; color:var(--tsmp-paper);opacity:.68;text-decoration:none; transition:opacity .2s,background .2s; } .tsmp-cbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .tsmp-cbtn:active{opacity:1;background:rgba(255,255,255,.08)} @media(hover:hover){ .tsmp-cbtn:hover{opacity:1} } .tsmp-cbtn:focus-visible{opacity:1;outline:2px solid var(--tsmp-steel);outline-offset:-2px} .tsmp-contact + .tsmp-toggle{margin-left:4px} @media(min-width:1180px){ .tsmp-contact{display:none} } /* ---- desktop mega panels ---- */ .tsmp-mega{ display:none;position:absolute;top:100%;left:0;right:0; background:var(--tsmp-ink); border-bottom:1px solid var(--tsmp-hair); box-shadow:0 24px 50px rgba(0,0,0,.55); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .28s ease,transform .28s ease,visibility .28s; } @media(min-width:1180px){ .tsmp-mega{display:block} } .tsmp-shell.mega-on .tsmp-mega{opacity:1;visibility:visible;transform:translateY(0)} .tsmp-panel{display:none;max-width:var(--tsmp-max);margin:0 auto;padding:26px 24px 28px} .tsmp-panel.on{display:block} .tsmp-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px} .tsmp-card{ display:flex;align-items:center;gap:12px;text-decoration:none; padding:10px;border:1px solid transparent;border-radius:2px; transition:background .25s,border-color .25s; } .tsmp-card:hover{background:#101010;border-color:var(--tsmp-hair)} .tsmp-card img{ width:54px;height:54px;flex:none;object-fit:cover;border-radius:2px; border:1px solid var(--tsmp-hair);background:#111; } .tsmp-card-b{min-width:0;display:flex;flex-direction:column;gap:3px} .tsmp-card-n{font-family:var(--tsmp-mono);font-size:7.5px;letter-spacing:.18em;color:var(--tsmp-steel)} .tsmp-card-t{font-size:12.5px;font-weight:500;color:var(--tsmp-paper);line-height:1.25} .tsmp-card-p{font-family:var(--tsmp-mono);font-size:9px;letter-spacing:.06em;color:rgba(237,237,237,.5)} .tsmp-concerns{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin-top:18px;padding-top:16px;border-top:1px solid var(--tsmp-hair); } .tsmp-concerns-l{ font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.2em; text-transform:uppercase;color:var(--tsmp-steel);margin-right:6px; } .tsmp-plist{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 40px} /* Locations panel: one stacked column instead of 2 + 1 */ .tsmp-plist.tsmp-plist-one{grid-template-columns:1fr;max-width:560px} .tsmp-prow{ display:flex;align-items:baseline;gap:14px;text-decoration:none; padding:10px 12px;border-bottom:1px solid var(--tsmp-hair); transition:background .25s; } .tsmp-prow:hover{background:#101010} .tsmp-prow b{flex:1;font-size:12.5px;font-weight:400;color:var(--tsmp-paper);letter-spacing:.02em} .tsmp-prow span{font-family:var(--tsmp-mono);font-size:11px;color:#fff;letter-spacing:.04em} /* pricing panel: one-line summary of how pricing works (Oct 9) */ .tsmp-pnote{margin:14px 12px 0;font-family:var(--tsmp-mono);font-size:9px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--tsmp-steel)} .tsmp-glist{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px} .tsmp-glink{ display:block;text-decoration:none;color:rgba(237,237,237,.82); font-size:11.5px;line-height:1.35;padding:7px 8px;border-radius:2px; transition:background .2s,color .2s; } .tsmp-glink:hover{background:#101010;color:#fff} .tsmp-glink.tsmp-all{color:var(--tsmp-steel);font-family:var(--tsmp-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase} .tsmp-foot-row{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin-top:18px;padding-top:15px;border-top:1px solid var(--tsmp-hair); } /* ---- mobile plate ---- */ .tsmp-plate{ position:fixed;top:0;left:0;right:0; height:100dvh;z-index:1000000;background:var(--tsmp-ink); display:flex;flex-direction:column; font-family:'Rubik',system-ui,sans-serif; clip-path:inset(0 0 100% 0); transition:clip-path .68s cubic-bezier(.22,1,.36,1); pointer-events:none; } /* the menu carries its own bar, so closing never depends on the page header being visible underneath it */ .tsmp-platebar{ flex:none;height:var(--tsmp-h); display:flex;align-items:center;justify-content:space-between; padding:0 16px;border-bottom:1px solid var(--tsmp-hair); } .tsmp-open .tsmp-plate{clip-path:inset(0 0 0 0);pointer-events:auto} @media(min-width:1180px){ .tsmp-plate{display:none} } .tsmp-filter{border-bottom:1px solid var(--tsmp-hair);flex:none} .tsmp-field{display:flex;align-items:center;gap:10px;padding:14px 16px} .tsmp-field svg{width:14px;height:14px;stroke:var(--tsmp-steel);fill:none;stroke-width:1.6;flex:none} .tsmp-field input{ flex:1;min-width:0;background:transparent;border:0;color:var(--tsmp-paper); font-family:inherit;font-size:14px;padding:0; } .tsmp-field input::placeholder{color:rgba(237,237,237,.32)} .tsmp-field input:focus{outline:none} .tsmp-chips{display:flex;gap:6px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none} .tsmp-chips::-webkit-scrollbar{display:none} .tsmp-chip{ flex:none;text-decoration:none; background:transparent;border:1px solid var(--tsmp-hair);border-radius:2px; color:rgba(237,237,237,.62);font-family:var(--tsmp-mono);font-size:8.5px; letter-spacing:.14em;text-transform:uppercase;padding:8px 11px; transition:background .25s,color .25s,border-color .25s;white-space:nowrap; } .tsmp-chip:hover,.tsmp-chip:active{background:var(--tsmp-paper);color:#000;border-color:var(--tsmp-paper)} .tsmp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(132px + env(safe-area-inset-bottom))} .tsmp-label{ font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase; color:var(--tsmp-steel);padding:16px 16px 7px;margin:0; } .tsmp-row{ display:flex;align-items:stretch;text-decoration:none;color:var(--tsmp-paper); border-top:1px solid var(--tsmp-hair); opacity:0;transform:translateY(12px); transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),background .25s; } .tsmp-open .tsmp-row{opacity:1;transform:none} .tsmp-row-main{flex:1;min-width:0;padding:10px 9px 10px 16px;display:flex;flex-direction:column;gap:3px;justify-content:center} .tsmp-row-n{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.16em;color:var(--tsmp-steel)} .tsmp-row-t{font-size:13px;font-weight:500;line-height:1.2;letter-spacing:.01em} .tsmp-row-p{font-family:var(--tsmp-mono);font-size:9px;letter-spacing:.07em;color:rgba(237,237,237,.45)} .tsmp-row-img{ width:52px;height:52px;flex:none;object-fit:cover; align-self:center;margin-right:14px;border-radius:2px; border:1px solid var(--tsmp-hair);background:#111; } .tsmp-row:active{background:#0e0e0e} .tsmp-link{ display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tsmp-paper); padding:10px 16px;border-top:1px solid var(--tsmp-hair); font-size:11.5px;letter-spacing:.085em;text-transform:uppercase;font-weight:400;line-height:1.25; opacity:0;transform:translateY(12px); transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),background .25s; } .tsmp-open .tsmp-link{opacity:1;transform:none} .tsmp-link i{width:6px;height:6px;border-right:1px solid var(--tsmp-steel);border-top:1px solid var(--tsmp-steel);transform:rotate(45deg);margin-left:auto;flex:none} .tsmp-link:active{background:#0e0e0e} .tsmp-link.tsmp-sub{ padding-left:30px;font-size:10.75px;text-transform:none;letter-spacing:.05em; color:rgba(237,237,237,.68); } .tsmp-link.tsmp-all{color:var(--tsmp-steel);font-family:var(--tsmp-mono);font-size:9px;letter-spacing:.18em} /* small address / area note on the right of a location row */ .tsmp-link-p{ margin-left:auto;font-family:var(--tsmp-mono);font-size:8.5px; letter-spacing:.06em;text-transform:none;color:rgba(237,237,237,.4); white-space:nowrap; } .tsmp-link-p + i{margin-left:10px} /* guides: a compact list — no per-row rules, sentence case, tight rows */ .tsmp-link.tsmp-guide{ padding-top:6px;padding-bottom:6px;border-top:0; font-size:12px;line-height:1.3;letter-spacing:.01em;text-transform:none; color:rgba(237,237,237,.8); } .tsmp-link.tsmp-guide i{width:5px;height:5px;opacity:.7} /* mobile guides: 7 shown, 5 more on request, the rest only via search or the guides page */ .tsmp-plate:not(.guides-open):not(.tsmp-searching) .tsmp-guide.tsmp-more{display:none} .tsmp-plate:not(.tsmp-searching) .tsmp-guide.tsmp-rest{display:none} .tsmp-plate.guides-open .tsmp-moreguides{display:none} .tsmp-link.tsmp-moreguides{ appearance:none;-webkit-appearance:none;width:100%;margin:0;cursor:pointer; background:transparent;border:0;font-family:inherit;text-align:left; justify-content:flex-start;gap:7px;min-height:44px;color:var(--tsmp-paper); } .tsmp-link.tsmp-moreguides span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .tsmp-link.tsmp-moreguides svg{flex:none;opacity:.8} /* the "SMP Guides" heading links to the guides page */ a.tsmp-label.tsmp-label-link{ display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none; } a.tsmp-label.tsmp-label-link span{color:var(--tsmp-paper);letter-spacing:.16em} a.tsmp-label.tsmp-label-link:active span{color:#fff} .tsmp-link.tsmp-guide.tsmp-all{ margin-top:6px;padding-top:11px;padding-bottom:11px; border-top:1px solid var(--tsmp-hair); font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--tsmp-steel); } /* ---- Locations accordion: sub items stay hidden until opened ---- */ .tsmp-link.tsmp-accbtn{ appearance:none;-webkit-appearance:none; width:100%;margin:0;text-align:left;cursor:pointer; background:transparent;border:0;border-top:1px solid var(--tsmp-hair); font-family:inherit; } .tsmp-link.tsmp-accbtn i{transform:rotate(135deg);transition:transform .3s cubic-bezier(.22,1,.36,1)} .tsmp-acc.on .tsmp-accbtn i, .tsmp-acc.force .tsmp-accbtn i{transform:rotate(-45deg)} .tsmp-link.tsmp-accbtn:focus-visible{outline:2px solid var(--tsmp-steel);outline-offset:-2px} .tsmp-accpanel{ display:grid;grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1); } .tsmp-acc.on .tsmp-accpanel, .tsmp-acc.force .tsmp-accpanel{grid-template-rows:1fr} .tsmp-accin{ overflow:hidden;min-height:0;background:#070707; visibility:hidden;transition:visibility 0s linear .38s; } .tsmp-acc.on .tsmp-accin, .tsmp-acc.force .tsmp-accin{visibility:visible;transition-delay:0s} /* ---- mobile action bar: booking first, calling second ---- */ .tsmp-foot{ position:absolute;left:0;right:0;bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--tsmp-ink); border-top:1px solid var(--tsmp-hair2); display:grid;gap:8px; } .tsmp-mbook, .tsmp-mcall{ display:flex;align-items:center;justify-content:center;gap:9px; font-family:'Rubik',sans-serif;font-weight:500; text-transform:uppercase;text-decoration:none;border-radius:2px; transition:background .25s,color .25s,border-color .25s; } .tsmp-mbook{ height:48px;background:var(--tsmp-paper);color:#000; font-size:11px;letter-spacing:.14em; } .tsmp-mbook span{font-size:16px;line-height:1} .tsmp-mbook:active{background:#fff} .tsmp-mcall{ height:44px;background:transparent;color:var(--tsmp-paper); border:1px solid var(--tsmp-hair2); font-size:11px;letter-spacing:.1em; } .tsmp-mcall svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .tsmp-mcall:active{background:#141414;border-color:var(--tsmp-paper)} .tsmp-mbook:focus-visible, .tsmp-mcall:focus-visible{outline:2px solid var(--tsmp-steel);outline-offset:3px} /* phone + consultation link share one type scale */ .tsmp-tel, .tsmp-consult{ display:inline-flex;align-items:center;gap:8px; font-family:'Rubik',sans-serif;font-weight:500;font-size:10px; letter-spacing:.04em;text-transform:uppercase; color:#fff;text-decoration:none; padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.28); transition:border-color .3s,gap .3s; } .tsmp-tel:hover,.tsmp-consult:hover{border-bottom-color:#fff} .tsmp-consult{margin-left:auto} .tsmp-consult span{font-size:13px;line-height:1;transition:transform .3s} .tsmp-consult:hover{border-bottom-color:#fff;gap:11px} .tsmp-consult:hover span{transform:translateX(2px)} .tsmp-empty{ padding:28px 16px;font-family:var(--tsmp-mono);font-size:10px; letter-spacing:.12em;color:var(--tsmp-steel);text-transform:uppercase;display:none; } @media(prefers-reduced-motion:reduce){ .tsmp-shell *,.tsmp-plate *,.tsmp-plate,.tsmp-mega,.tsmp-shell{transition-duration:.01ms !important} } /* ============================================ CUSTOM FOOTER — follicle field + live console ============================================ */ /* hide the native builder footer */ .block-footer:not(.tf), body > footer:not(.tf), footer[class*="footer"]:not(.tf), [data-testid*="footer"]:not(.tf) { display: none !important; } .tf{ position:relative;overflow:hidden;background:var(--tsmp-ink); font-family:'Rubik',system-ui,sans-serif;color:var(--tsmp-paper); } .tf *{box-sizing:border-box} .tf a{text-decoration:none;color:inherit} .tf-in{position:relative;z-index:2;max-width:var(--tsmp-max);margin:0 auto;padding:0 18px} @media(min-width:1180px){ .tf-in{padding:0 36px} } /* --- live status rail --- */ .tf-status{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 0;border-bottom:1px solid var(--tsmp-hair); font-family:var(--tsmp-mono);font-size:8.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--tsmp-steel); } @media(min-width:1180px){ .tf-status{font-size:9px;gap:12px} } .tf-status b{color:var(--tsmp-paper);font-weight:500} .tf-status .sep{opacity:.28} .tf-dot{ width:6px;height:6px;border-radius:50%;background:#4ade80;flex:none; animation:tf-ping 2.6s infinite; } .tf-dot.shut{background:var(--tsmp-steel);animation:none} @keyframes tf-ping{ 0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)} 70%{box-shadow:0 0 0 7px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} } /* --- statement --- */ .tf-top{padding:26px 0 22px} @media(min-width:1180px){ .tf-top{padding:38px 0 30px} } .tf-kicker{ margin:0 0 14px;font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.24em; text-transform:uppercase;color:var(--tsmp-steel); } .tf-type{ margin:0;font-weight:200;font-size:clamp(12px,4vw,17px);line-height:1.12; letter-spacing:-.015em;text-transform:uppercase;min-height:1.25em; text-shadow:none; } /* Desktop: the statement is sized to sit on ONE line. min() against the viewport keeps it fitting at every desktop width; the 56px cap stops it growing past the footer wrapper on wide screens. nowrap is desktop-only — mobile still wraps normally. */ @media(min-width:1180px){ .tf-type{ font-size:min(3.5vw,56px); min-height:1.25em; max-width:none; white-space:nowrap; } } .tf-caret{ display:inline-block;width:.5ch;height:.82em;background:var(--tsmp-paper); margin-left:3px;vertical-align:-.08em;animation:tf-blink 1s steps(1) infinite; } @keyframes tf-blink{50%{opacity:0}} .tf-top .tf-cta{margin-top:18px} .tf-cta{ display:inline-flex;align-items:center;gap:8px; font-family:'Rubik',sans-serif;font-weight:500;font-size:10px; letter-spacing:.04em;text-transform:uppercase;color:#fff; padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.28); transition:border-color .3s,gap .3s; } .tf-cta i{font-style:normal;font-size:13px;line-height:1;transition:transform .3s} .tf-cta:hover{border-bottom-color:#fff;gap:11px} .tf-cta:hover i{transform:translateX(2px)} /* --- studio modules --- Each module is a map: a drawn street network (inline SVG, cropped rather than stretched), a faint survey grid over it, a scrim for legibility, then the copy. --- */ .tf-mods{ position:relative;z-index:2;display:grid;gap:1px;background:var(--tsmp-hair); border-top:1px solid var(--tsmp-hair);border-bottom:1px solid var(--tsmp-hair); } @media(min-width:1180px){ .tf-mods{grid-template-columns:1fr 1fr} } .tf-mod{ position:relative;overflow:hidden; background:#0c1013; /* faint blue-grey base so the coloured map reads */ padding:26px 20px;min-height:210px; display:flex;align-items:flex-end; transition:background .3s; } @media(min-width:1180px){ .tf-mod{padding:34px 38px;min-height:270px;} } .tf-mapbg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} /* the drawn network fills the panel and crops at the edges */ .tf-mapbg svg{ position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1; } /* survey grid, sitting over the streets */ .tf-mapbg::after{ content:'';position:absolute;inset:0;z-index:2; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:46px 46px; } /* a real map screenshot, if one is supplied, replaces the drawn art */ .tf-mapbg img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; filter:grayscale(1) brightness(.5);opacity:.9; } /* pin — white core, dark disc, hairline ring, soft glow */ .tf-mapbg i{ position:absolute;top:34%;left:24%;width:9px;height:9px;border-radius:50%; background:#fff;z-index:3; box-shadow: 0 0 0 7px rgba(8,8,8,.9), 0 0 0 8px rgba(255,255,255,.5), 0 0 24px rgba(255,255,255,.35); } .tf-mod:nth-child(2) .tf-mapbg i{top:42%;left:72%} .tf-mapbg i::after{ content:'';position:absolute;inset:-8px;border-radius:50%; border:1px solid rgba(255,255,255,.4);animation:tf-ring 3s ease-out infinite; } @keyframes tf-ring{0%{transform:scale(.55);opacity:1}100%{transform:scale(2.9);opacity:0}} /* legibility scrim over the map — dark only where the copy sits (bottom), lighter above so the map detail shows through on phones */ .tf-mod::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(to top, rgba(6,6,6,.84) 0%, rgba(6,6,6,.62) 34%, rgba(6,6,6,.26) 66%, rgba(6,6,6,.06) 100%); } .tf-mod-b{min-width:0;position:relative;z-index:2} /* DESKTOP: the studio copy sits in the middle of its map panel. Placed after the scrim rule above so these overrides win. */ @media(min-width:1180px){ .tf-mod{ align-items:center; justify-content:center; text-align:center; } .tf-mod-b{max-width:330px} .tf-mod .tf-acts{justify-content:center} /* an even scrim rather than a bottom-weighted one, so centred type stays legible over the middle of the map */ .tf-mod::after{ background:radial-gradient(125% 105% at 50% 50%, rgba(6,6,6,.88) 0%, rgba(6,6,6,.76) 44%, rgba(6,6,6,.44) 78%, rgba(6,6,6,.24) 100%); } /* move the pins clear of the centred copy */ .tf-mapbg i{top:20%;left:15%} .tf-mod:nth-child(2) .tf-mapbg i{top:78%;left:85%} } .tf-acts{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap} .tf-acts .tf-cta{font-size:10px;letter-spacing:.04em} /* --- link columns --- */ .tf-cols{display:grid;gap:22px;padding:22px 0 18px} .tf-cols > div{min-width:0} /* lets the one-line payment row shrink to fit instead of widening the column */ @media(min-width:1180px){ .tf-cols{grid-template-columns:1fr 1.15fr .95fr;gap:34px;padding:30px 0 22px} } .tf-label{ margin:0 0 9px;font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.22em; text-transform:uppercase;color:var(--tsmp-steel); } .tf-li{ display:block;padding:4px 0;font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:rgba(237,237,237,.82); transition:color .2s,transform .25s cubic-bezier(.22,1,.36,1); } .tf-li:hover{color:#fff;transform:translateX(3px)} .tf-gd{ display:block;padding:3px 0;font-size:11px;line-height:1.35; color:rgba(237,237,237,.58); transition:color .2s,transform .25s cubic-bezier(.22,1,.36,1); } .tf-gd:hover{color:#fff;transform:translateX(3px)} /* "View All SMP Guides" — same treatment as the header's own all-link */ .tf-gd.tf-all{ margin-top:8px;padding-top:10px;border-top:1px solid var(--tsmp-hair); font-family:var(--tsmp-mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;color:var(--tsmp-steel); } .tf-gd.tf-all:hover{color:#fff} .tf-addr{margin:0;font-size:11px;line-height:1.6;color:rgba(237,237,237,.58)} .tf-addr b{ display:block;font-size:11.5px;font-weight:500;color:var(--tsmp-paper); letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px; } .tf-hours{ font-family:var(--tsmp-mono);font-size:8.5px;letter-spacing:.08em; color:var(--tsmp-steel);margin-top:6px;display:block; } /* contact column now carries the Menu column's type scale so the phone and email read at the same weight as the rest of the footer links */ .tf-contact .tf-li{color:rgba(237,237,237,.82)} .tf-contact .tf-li:hover{color:#fff} .tf-contact .tf-mail{text-transform:none;letter-spacing:.04em} .tf-contact .tf-label.tf-follow{margin-top:16px;margin-bottom:8px} .tf-socials{display:flex;flex-wrap:wrap;gap:6px} /* social boxes: warm grey accent (#a7a19a) with near-black letters */ .tf-socials a{ width:32px;height:32px;display:flex;align-items:center;justify-content:center; border:1px solid #a7a19a;border-radius:2px;background:#a7a19a; font-family:var(--tsmp-mono);font-size:8px;font-weight:500;letter-spacing:.04em; color:#0a0a0a;transition:background .25s,color .25s,border-color .25s; } .tf-socials a:hover{background:var(--tsmp-paper);color:#000;border-color:var(--tsmp-paper)} /* --- payment strip, under the social row --- The artwork is shown exactly as supplied: no filter, no opacity shift, no hover treatment. Sentence-case note above it, sized to read rather than to sit as a mono micro-label. */ .tf-contact .tf-paynote{ margin:16px 0 8px;font-size:11px;line-height:1.55; color:rgba(237,237,237,.72);max-width:36ch; } /* Payment methods as mono chips, matching the social row. Full-colour brand marks fought the rest of the footer, and the Afterpay badge carries its own pale background which cannot be removed in CSS. */ /* Warm grey chips (#a7a19a) on ONE line at every width: the chips share the row, and the footer script shrinks --pay-fs a little at a time until they fit (8.5px down to 5.5px). */ .tf-pay{--pay-fs:8.5px;display:flex;flex-wrap:nowrap;gap:4px;width:100%;overflow:hidden} .tf-pay span{ flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center; height:26px;padding:0 calc(var(--pay-fs) * .7); border:1px solid #a7a19a;border-radius:2px;background:#a7a19a; font-family:var(--tsmp-mono);font-size:var(--pay-fs);font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:#0a0a0a;white-space:nowrap; } /* --- bottom rail --- */ .tf-rail{ border-top:1px solid var(--tsmp-hair); display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:14px 0 calc(16px + env(safe-area-inset-bottom)); } .tf-rail img{height:34px;width:auto;display:block;opacity:.85} @media(min-width:1180px){ .tf-rail img{height:40px} } .tf-legal{ font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.12em; text-transform:uppercase;color:rgba(237,237,237,.32); } .tf-legal a{color:rgba(237,237,237,.5)} .tf-legal a:hover{color:#fff} @media(min-width:1180px){ .tf-rail .tf-legal.push{margin-left:auto} } @media(prefers-reduced-motion:reduce){ .tf-dot,.tf-mapbg i::after,.tf-caret{animation:none !important} .tf *{transition-duration:.01ms !important} } /* Back-to-top button + scroll progress ring */ #back-to-top-btn { position: fixed; bottom: 24px; right: 24px; height: 56px; min-width: 56px; padding: 0 14px; border-radius: 28px; background-color: #1a1a1a; color: #ffffff; border: 0; box-shadow: none; font-family: 'Rubik', sans-serif; font-weight: 400; font-size: 14px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 9999; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, min-width 0.3s ease, padding 0.3s ease, bottom 0.3s ease; overflow: visible; white-space: nowrap; } /* stays in the layout while fading so it can animate out over the footer */ #back-to-top-btn.armed { display: flex; } #back-to-top-btn.visible { display: flex; opacity: 1; transform: translateY(0); } #back-to-top-btn:not(.visible) { pointer-events: none; } #back-to-top-btn .btt-ring { position: absolute; top: 0; left: 0; width: 56px; height: 56px; transform: rotate(-90deg); pointer-events: none; transition: opacity 0.25s ease; } #back-to-top-btn .btt-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 3; } #back-to-top-btn .btt-ring-fill { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; } #back-to-top-btn .btt-icon { font-size: 18px; display: inline-flex; position: relative; z-index: 1; } #back-to-top-btn .btt-label { max-width: 0; opacity: 0; overflow: hidden; position: relative; z-index: 1; transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease; } #back-to-top-btn:hover { background-color: #171717; color: #ffffff; padding: 0 18px; } #back-to-top-btn:hover .btt-ring { opacity: 0; } #back-to-top-btn:hover .btt-label { max-width: 120px; opacity: 1; margin-left: 8px; } @media (max-width: 768px) { #back-to-top-btn { bottom: 16px; right: 16px; height: 50px; min-width: 50px; padding: 0; border-radius: 50%; } #back-to-top-btn .btt-ring { width: 50px; height: 50px; } #back-to-top-btn .btt-icon { font-size: 16px; } #back-to-top-btn .btt-label { display: none; } #back-to-top-btn:hover { padding: 0; } } /* ============================================ BUTTONS — base plate Resting look only. Every interaction layer (shade, sweep, bracket frame, press, first-view pass) lives in Button System v2 below. ============================================ */ .grid-button{ position:relative !important; isolation:isolate; overflow:hidden; display:inline-flex !important; align-items:center; justify-content:center; background:#1a1a1a !important; border:0 !important; border-radius:2px !important; color:#ededed !important; font-family:'Rubik',sans-serif !important; font-weight:500 !important; font-size:10px !important; letter-spacing:.14em !important; text-transform:uppercase !important; line-height:1; -webkit-tap-highlight-color:transparent; transition:color .18s ease, transform .15s ease; } .grid-button:focus-visible{ outline:2px solid #8b93a1; outline-offset:3px; } /* light sections — add class smp-btn-light to the section wrapper. Hover, press and the first-view pass now come from Button System v2. */ .smp-btn-light .grid-button{ background:transparent !important; color:#1a1a1a !important; } /* Phone-only: close any hairline where an embed iframe meets the section below it. Subpixel rounding on a 3x display can leave a sliver even with no border present. */ @media (max-width: 768px){ section iframe{ display: block !important; vertical-align: bottom !important; border: 0 !important; } section:has(> div iframe), section:has(iframe){ font-size: 0 !important; line-height: 0 !important; } } /* ---- id="tsmp-footer-book" ---- */ .tf.tf-hasbook .tf-top .tf-cta{display:none} /* the booking block is its own page section, sitting just above the footer */ .tfb-sec{position:relative;background:var(--tsmp-ink)} .tfb-sec *{box-sizing:border-box} /* ============================================ SECTION SEAMS Replaces the two full-bleed 1px borders (top of the booking block, top of the footer), which ran edge to edge and read as stray lines. Each seam is now a deliberate mark: a hairline held to the content width that fades out at both ends, broken in the middle by a small registration cross — the same mono/scan language as the rest of the footer. Drawn as one 9px strip of background layers, so it never overflows the footer's overflow:hidden. ============================================ */ .tfb-sec::before, .tf::before{ content:'';position:absolute;top:0;z-index:3;height:9px;pointer-events:none; left:max(16px, calc(50% - var(--tsmp-max) / 2 + 16px)); right:max(16px, calc(50% - var(--tsmp-max) / 2 + 16px)); background: linear-gradient(var(--tsmp-steel),var(--tsmp-steel)) center / 1px 9px no-repeat, linear-gradient(var(--tsmp-steel),var(--tsmp-steel)) center / 9px 1px no-repeat, linear-gradient(var(--tsmp-ink),var(--tsmp-ink)) center / 25px 9px no-repeat, linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent 100%) center / 100% 1px no-repeat; } @media(min-width:1180px){ .tfb-sec::before, .tf::before{ left:max(36px, calc(50% - var(--tsmp-max) / 2 + 36px)); right:max(36px, calc(50% - var(--tsmp-max) / 2 + 36px)); } } #tsmpBook{ --ink:var(--tsmp-paper);--mut:var(--tsmp-steel);--sub:rgba(237,237,237,.62); --line:var(--tsmp-hair2);--line2:var(--tsmp-hair);--srf:#0b0b0b;--sel:#161616;--dark:#000; display:block;padding:44px 0 48px; color:var(--ink);font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased; } @media(min-width:1180px){ #tsmpBook{padding:72px 0 80px} } #tsmpBook *{box-sizing:border-box} #tsmpBook button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:inherit;-webkit-tap-highlight-color:transparent} #tsmpBook a{color:#c9ced6;text-decoration:underline;text-underline-offset:3px} #tsmpBook a:hover{color:#fff} #tsmpBook :focus-visible{outline:1px solid var(--mut);outline-offset:2px} /* layout: stacked on mobile, side + main on desktop */ #tsmpBook .tb-cols{display:flex;flex-direction:column} @media(min-width:1180px){ #tsmpBook .tb-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:56px;align-items:start} #tsmpBook .tb-main > :first-child{margin-top:0} } #tsmpBook .tb-kick{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.22em;color:#a7a19a;text-transform:uppercase} /* step label in the warm grey accent (#a7a19a) */ #tsmpBook .tb-h{margin:8px 0 0;font-family:'Rubik',system-ui,sans-serif;color:var(--ink);font-size:19px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;text-shadow:none} #tsmpBook .tb-lede{margin:6px 0 0;font-size:11px;color:var(--sub);line-height:1.45} #tsmpBook .tb-lede-1, #tsmpBook .tb-lede-2{display:block;text-wrap:balance} @media(min-width:1180px){ #tsmpBook .tb-kick{font-size:9px} #tsmpBook .tb-h{font-size:24px} #tsmpBook .tb-lede{font-size:12px} } /* format toggle */ #tsmpBook .tb-fmt{margin-top:16px;background:var(--srf);display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));border:1px solid var(--line);border-radius:2px} #tsmpBook .tb-fmt button{min-height:44px;padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;transition:background .2s,color .2s} #tsmpBook .tb-fmt button+button{border-left:1px solid var(--line)} #tsmpBook .tb-fmt b{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase} #tsmpBook .tb-fmt span{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.06em;color:var(--mut);text-transform:uppercase} #tsmpBook .tb-fmt [aria-pressed="true"]{background:var(--ink);color:#000} #tsmpBook .tb-fmt [aria-pressed="true"] span{color:#444} #tsmpBook .tb-one{margin-top:16px;font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase} @media(min-width:1180px){ #tsmpBook .tb-fmt{margin-top:24px} #tsmpBook .tb-fmt button{min-height:52px;padding:10px 12px} #tsmpBook .tb-fmt b{font-size:11px} #tsmpBook .tb-fmt span{font-size:9px} } /* date rail */ #tsmpBook .tb-mh{margin:18px 0 6px;display:flex;justify-content:space-between;align-items:center} #tsmpBook .tb-mh strong{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.1em} #tsmpBook .tb-arw{display:flex;gap:6px} #tsmpBook .tb-arw button{width:32px;height:32px;background:var(--srf);border:1px solid var(--line);border-radius:2px;display:grid;place-items:center;transition:border-color .2s,opacity .2s} #tsmpBook .tb-arw button:disabled{opacity:.25;cursor:default} #tsmpBook .tb-rail{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px;margin:0 -6px;-webkit-overflow-scrolling:touch} #tsmpBook .tb-rail::-webkit-scrollbar{display:none} #tsmpBook .tb-day{position:relative;flex:0 0 50px;height:56px;scroll-snap-align:start;scroll-margin-left:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--srf);border:1px solid var(--line2);border-radius:2px;color:#c9ced6;transition:background .2s,border-color .2s,color .2s} #tsmpBook .tb-day .d{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.12em;opacity:.7} #tsmpBook .tb-day .n{font-family:var(--tsmp-mono);font-size:17px;font-weight:500;line-height:1} #tsmpBook .tb-day[aria-pressed="true"]{background:var(--sel);border-color:rgba(255,255,255,.28);color:var(--ink)} #tsmpBook .tb-day i{position:absolute;width:10px;height:10px;border:0 solid var(--ink);opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s} #tsmpBook .tb-day i:nth-of-type(1){top:-5px;left:-5px;border-top-width:1px;border-left-width:1px} #tsmpBook .tb-day i:nth-of-type(2){top:-5px;right:-5px;border-top-width:1px;border-right-width:1px} #tsmpBook .tb-day i:nth-of-type(3){bottom:-5px;left:-5px;border-bottom-width:1px;border-left-width:1px} #tsmpBook .tb-day i:nth-of-type(4){bottom:-5px;right:-5px;border-bottom-width:1px;border-right-width:1px} #tsmpBook .tb-day[aria-pressed="true"] i{opacity:1;transform:none} #tsmpBook .tb-prog{margin:16px 0 10px;height:1px;background:var(--tsmp-hair2);position:relative} #tsmpBook .tb-prog span{position:absolute;left:0;top:-1px;height:3px;width:30%;background:#a7a19a;transition:left .12s linear,width .12s linear} /* date-rail scroll bar in the warm grey accent (#a7a19a) */ #tsmpBook .tb-dl{margin-bottom:10px;font-family:var(--tsmp-mono);font-size:8.5px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase} @media(min-width:1180px){ #tsmpBook .tb-mh strong{font-size:11px} #tsmpBook .tb-arw button{width:36px;height:36px} #tsmpBook .tb-rail{gap:8px} #tsmpBook .tb-day{flex-basis:62px;height:68px;gap:6px} #tsmpBook .tb-day .d{font-size:9px} #tsmpBook .tb-day .n{font-size:21px} #tsmpBook .tb-prog{margin:20px 0 12px} #tsmpBook .tb-dl{font-size:9px} } /* times */ #tsmpBook .tb-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #tsmpBook .tb-t{min-height:38px;display:flex;align-items:center;justify-content:center;background:var(--srf);border:1px solid var(--line);border-radius:2px;font-family:var(--tsmp-mono);font-size:12px;color:#e6e8eb;transition:background .15s,color .15s,border-color .15s} #tsmpBook .tb-t[aria-pressed="true"]{background:var(--ink);color:#000;border-color:var(--ink)} #tsmpBook .tb-more{ width:100%;min-height:40px;margin-top:6px; display:flex;align-items:center;justify-content:center;gap:10px; border:1px dashed var(--line);border-radius:2px; font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#c9ced6; transition:border-color .2s,color .2s,background .2s; } #tsmpBook .tb-more:active{background:var(--srf)} @media(hover:hover){ #tsmpBook .tb-more:hover{border-color:rgba(255,255,255,.4);color:#fff} } @media(min-width:1180px){ #tsmpBook .tb-more{min-height:44px;margin-top:8px;font-size:11px} } @media(hover:hover){ #tsmpBook .tb-t:hover,#tsmpBook .tb-day:hover,#tsmpBook .tb-arw button:not(:disabled):hover{border-color:rgba(255,255,255,.4)} } @media(min-width:1180px){ #tsmpBook .tb-times{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} #tsmpBook .tb-t{min-height:44px;font-size:13px} } /* summary bar */ #tsmpBook .tb-bar{margin-top:12px;padding:10px 10px 10px 12px;background:var(--srf);border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;gap:14px} #tsmpBook .tb-bar .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} #tsmpBook .tb-bar .l span{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #tsmpBook .tb-bar .l strong{font-size:14px;font-weight:500} #tsmpBook .tb-bar .l strong.dim{color:#5b5f66} #tsmpBook .tb-cta{min-height:40px;padding:0 16px;background:var(--ink);color:#000;border-radius:2px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:opacity .2s,transform .2s} #tsmpBook .tb-cta:disabled{opacity:.3;cursor:default} #tsmpBook .tb-cta:not(:disabled):active{transform:scale(.98)} @media(min-width:1180px){ #tsmpBook .tb-bar{margin-top:16px;padding:12px 12px 12px 16px} #tsmpBook .tb-bar .l span{font-size:9px} #tsmpBook .tb-bar .l strong{font-size:17px} #tsmpBook .tb-cta{min-height:46px;padding:0 22px;font-size:11px} } /* details */ #tsmpBook .tb-sum{margin-top:16px;padding:10px 12px;background:var(--srf);border:1px solid var(--line);border-radius:2px;display:flex;align-items:center;gap:12px} #tsmpBook .tb-sum .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} #tsmpBook .tb-sum .l span{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase} #tsmpBook .tb-sum .l strong{font-size:13px;font-weight:500} #tsmpBook .tb-sum button{min-height:36px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;color:#c9ced6} #tsmpBook .tb-form{margin-top:12px;padding:12px;background:var(--srf);border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;gap:10px} #tsmpBook .tb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #tsmpBook .tb-f{display:flex;flex-direction:column;gap:5px;font-size:8px;letter-spacing:.12em;color:var(--sub);text-transform:uppercase} #tsmpBook .tb-f em{font-style:normal;color:var(--mut)} #tsmpBook .tb-f input,#tsmpBook .tb-f select,#tsmpBook .tb-f textarea{width:100%;height:42px;padding:0 12px;background:#000;color:var(--ink);border:1px solid var(--line);border-radius:2px;font:400 16px 'Rubik',system-ui,sans-serif;letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none;box-shadow:none} #tsmpBook .tb-f textarea{height:96px;padding:10px 12px;resize:vertical} #tsmpBook .tb-f select{background-image:linear-gradient(45deg,transparent 50%,#8b93a1 50%),linear-gradient(135deg,#8b93a1 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat} #tsmpBook .tb-f select option{background:#1a1a1a;color:var(--ink)} #tsmpBook .tb-f input::placeholder,#tsmpBook .tb-f textarea::placeholder{color:#5b5f66} #tsmpBook .tb-f input:focus,#tsmpBook .tb-f select:focus,#tsmpBook .tb-f textarea:focus{outline:none;border-color:rgba(255,255,255,.45)} #tsmpBook .tb-checks{display:flex;flex-direction:column;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink)} #tsmpBook .tb-checks label{display:flex;gap:10px;align-items:center;min-height:36px} #tsmpBook .tb-checks input{width:18px;height:18px;accent-color:#f2f2f2} #tsmpBook .tb-err{font-size:12px;line-height:1.4;color:#ffb4a8} #tsmpBook .tb-err:empty{display:none} #tsmpBook .tb-note{font-size:10px;color:var(--mut);line-height:1.45} #tsmpBook .tb-go{width:100%;margin-top:4px} @media(min-width:1180px){ #tsmpBook .tb-sum{margin-top:24px;padding:12px 14px} #tsmpBook .tb-sum .l span{font-size:9px} #tsmpBook .tb-sum .l strong{font-size:15px} #tsmpBook .tb-form{margin-top:0;padding:18px;gap:12px} #tsmpBook .tb-f{font-size:9px} #tsmpBook .tb-f input,#tsmpBook .tb-f select{height:46px} #tsmpBook .tb-note{font-size:11px} } /* confirmed */ #tsmpBook .tb-card{position:relative;margin-top:18px;padding:14px;background:var(--srf);border:1px solid var(--line);border-radius:2px} #tsmpBook .tb-card i{position:absolute;width:12px;height:12px;border:0 solid var(--ink)} #tsmpBook .tb-card i:nth-of-type(1){top:-6px;left:-6px;border-top-width:1px;border-left-width:1px} #tsmpBook .tb-card i:nth-of-type(2){top:-6px;right:-6px;border-top-width:1px;border-right-width:1px} #tsmpBook .tb-card i:nth-of-type(3){bottom:-6px;left:-6px;border-bottom-width:1px;border-left-width:1px} #tsmpBook .tb-card i:nth-of-type(4){bottom:-6px;right:-6px;border-bottom-width:1px;border-right-width:1px} #tsmpBook .tb-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)} #tsmpBook .tb-rows div{background:#000;padding:10px;display:flex;flex-direction:column;gap:4px} #tsmpBook .tb-rows span{font-family:var(--tsmp-mono);font-size:8px;letter-spacing:.14em;color:var(--mut)} #tsmpBook .tb-rows strong{font-size:12px;font-weight:500} #tsmpBook .tb-links{margin-top:14px;display:flex;gap:18px;font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase} @media(min-width:1180px){ #tsmpBook .tb-card{margin-top:0;padding:20px} #tsmpBook .tb-rows strong{font-size:13px} #tsmpBook .tb-links{font-size:10px} } /* loading */ #tsmpBook .tb-sk{background:rgba(255,255,255,.05);border-radius:2px;animation:tfb-p 1.2s ease-in-out infinite} @keyframes tfb-p{50%{opacity:.45}} #tsmpBook .tb-in{animation:tfb-in .35s ease both} @keyframes tfb-in{from{opacity:0;transform:translateY(6px)}} @media(prefers-reduced-motion:reduce){ #tsmpBook *{animation:none !important;transition:none !important} } /* ---- id="smp-faq-dark" ---- */ /* !important throughout: the FAQ block ships its own