, not

; nested containers restart the count; * `elementor-hidden-mobile` uses display:none, which :nth-of-type still counts; * and any injected section shifts every variant below it. * * So the variant is explicit state on our own wrapper instead. The theme assigns * it round-robin at render time when the widget is left on "auto". */ [data-tsf-depth] { position: relative; isolation: isolate; } [data-tsf-depth]::before, [data-tsf-depth]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; } [data-tsf-depth]::after { background-image: var(--tsf-grain); background-size: 180px 180px; opacity: var(--tsf-grain-opacity); } [data-tsf-depth="1"]::before { background-image: radial-gradient(55% 60% at 12% 0%, rgba(227, 30, 36, 0.10) 0%, transparent 70%), linear-gradient(160deg, rgba(255, 255, 255, 0.03) 0%, transparent 45%); } [data-tsf-depth="2"]::before { background-image: radial-gradient(60% 70% at 92% 40%, rgba(168, 19, 24, 0.14) 0%, transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 18px); } [data-tsf-depth="3"]::before { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 55%), radial-gradient(70% 55% at 50% 110%, rgba(227, 30, 36, 0.09) 0%, transparent 70%); } [data-tsf-depth="4"]::before { background-image: radial-gradient(50% 60% at 8% 90%, rgba(227, 30, 36, 0.09) 0%, transparent 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 90px); } /* A real opt-out. The source defined .no-depth as `isolation: auto`, which only dropped the stacking context and left both pseudo layers painting. */ [data-tsf-depth="none"]::before, [data-tsf-depth="none"]::after { content: none; } /* ----------------------------------------------------------------- texture */ .tsf-pitch { background-image: radial-gradient(ellipse at center, rgba(227, 30, 36, 0.12) 0%, transparent 60%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 80px); } .tsf-glow { background-image: var(--tsf-hero-glow); } /* ----------------------------------------------------------------- buttons */ .tsf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--tsf-radius-pill); padding: 0.75rem 2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.2s var(--tsf-ease), background-color 0.2s var(--tsf-ease), color 0.2s var(--tsf-ease), border-color 0.2s var(--tsf-ease); } .tsf-btn--brand { background-color: var(--tsf-brand); color: var(--tsf-on-brand); border: 1px solid transparent; } .tsf-btn--brand:hover { background-color: var(--tsf-brand-bright); transform: translateY(-2px); } .tsf-btn--ghost { background-color: transparent; color: var(--tsf-fg); border: 1px solid var(--tsf-border-strong); } .tsf-btn--ghost:hover { background-color: var(--tsf-fg); color: var(--tsf-bg); } /* The quieter outline used beside a solid red primary. */ .tsf-btn--outline { background-color: transparent; color: var(--tsf-fg); border: 1px solid rgba(255, 255, 255, 0.25); } .tsf-btn--outline:hover { border-color: var(--tsf-brand); color: var(--tsf-brand); } .tsf-btn svg, .tsf-btn i { width: 1em; height: 1em; font-size: 1rem; flex: none; } .tsf-btn:focus-visible { outline: 2px solid var(--tsf-brand-bright); outline-offset: 3px; } /* -------------------------------------------------------------------- media */ /* Art-directed crops are per-image in the source (object-[53%_38%] and friends). Widgets expose it as a focal-point control writing --tsf-focal. */ .tsf-scope .tsf-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--tsf-focal, 50% 50%); } /* ----------------------------------------------------------------- motion */ @keyframes tsf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes tsf-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tsf-scope *, .tsf-scope *::before, .tsf-scope *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Site header ========================================================================== */ .tsf-nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.3s var(--tsf-ease), backdrop-filter 0.3s var(--tsf-ease), border-color 0.3s var(--tsf-ease); } /* Transparent over the hero, blurred once the page moves. Elementor sticky headers cannot express this: Effects Offset only adds a class, and no backdrop-filter control exists anywhere in the product. */ .tsf-nav.is-scrolled { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); border-bottom-color: rgba(255, 255, 255, 0.05); } .tsf-nav.is-open { background-color: transparent; backdrop-filter: none; border-bottom-color: transparent; } .tsf-nav__bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; } .tsf-nav__logo { display: block; flex: none; line-height: 0; } /* .tsf-scope prefix, not decoration: WooCommerce puts `woocommerce-page` on the body and ships `.woocommerce-page img { height: auto }`, which matches every image on a storefront page -- site logo included -- and its sheet loads after this one. The extra class breaks the tie. */ .tsf-scope .tsf-nav__logo img { height: 3rem; width: auto; } .tsf-nav__wordmark { font-family: var(--tsf-font-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1; color: var(--tsf-fg); } .tsf-nav__links { display: none; } .tsf-nav__links a { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, 0.8); transition: color 0.2s var(--tsf-ease); } .tsf-nav__links a.is-current { color: var(--tsf-brand); } @media (hover: hover) { .tsf-nav__links a:hover { color: var(--tsf-brand); } } .tsf-nav__cta { display: none; border-radius: var(--tsf-radius-pill); background-color: var(--tsf-brand); color: var(--tsf-on-brand); padding: 0.625rem 1.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: transform 0.2s var(--tsf-ease), background-color 0.2s var(--tsf-ease); } @media (hover: hover) { .tsf-nav__cta:hover { transform: translateY(-2px); background-color: var(--tsf-brand-bright); } } /* ---- the right-hand controls ---- * * One flex group, not three loose children of the bar. The bar is * justify-content: space-between, which shares its free space between every * child -- so the button and the icons ended up a word's width apart. */ .tsf-nav__actions { display: flex; align-items: center; gap: 0.25rem; flex: none; } @media (min-width: 1024px) { .tsf-nav__actions { gap: 0.5rem; } .tsf-nav__cta { margin-right: 0.25rem; } } /* Icon controls: the basket and the account. Icon only on every screen -- the note below records that the bar overflows once the menu passes about eight items, and a labelled control would spend that headroom. */ .tsf-nav__cart, .tsf-nav__account { position: relative; display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--tsf-radius-pill); color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: background-color 0.2s var(--tsf-ease), color 0.2s var(--tsf-ease); } .tsf-nav__cart svg, .tsf-nav__account svg { width: 1.2rem; height: 1.2rem; } @media (hover: hover) { .tsf-nav__cart:hover, .tsf-nav__account:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--tsf-fg); } } .tsf-nav__cart:focus-visible, .tsf-nav__account:focus-visible { outline: 2px solid var(--tsf-brand-bright); outline-offset: 2px; } /* The count. Hidden while the basket is empty: a badge reading zero is noise on a page where most visitors are not mid-purchase. */ .tsf-nav__cart-count { position: absolute; top: 0.15rem; right: 0.1rem; display: grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding-inline: 0.25rem; border-radius: var(--tsf-radius-pill); background-color: var(--tsf-brand); color: var(--tsf-on-brand); font-family: var(--tsf-font-sans); font-size: 0.625rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .tsf-nav__cart-count.is-empty { display: none; } .tsf-nav__toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 0; border-radius: var(--tsf-radius-pill); background: transparent; color: var(--tsf-fg); cursor: pointer; transition: background-color 0.2s var(--tsf-ease); } .tsf-nav__toggle svg { width: 1.625rem; height: 1.625rem; grid-area: 1 / 1; } .tsf-nav__icon-close { display: none; } .tsf-nav.is-open .tsf-nav__toggle { background-color: var(--tsf-brand); color: var(--tsf-on-brand); } .tsf-nav.is-open .tsf-nav__icon-open { display: none; } .tsf-nav.is-open .tsf-nav__icon-close { display: block; width: 1.375rem; height: 1.375rem; } .tsf-nav__toggle:focus-visible, .tsf-nav__links a:focus-visible, .tsf-nav__cta:focus-visible, .tsf-nav__logo:focus-visible { outline: 2px solid var(--tsf-brand-bright); outline-offset: 3px; } @media (min-width: 1024px) { .tsf-scope .tsf-nav__logo img { height: 3.5rem; } .tsf-nav__links { display: flex; align-items: center; gap: 1.5rem; } .tsf-nav__cta { display: inline-block; } .tsf-nav__toggle { display: none; } } /* The bar overflows between 1024 and 1280 once the menu passes about 8 items. */ @media (min-width: 1280px) { .tsf-nav__links { gap: 2rem; } } /* ---- full-screen panel ---- */ .tsf-nav__panel { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden; background-color: rgba(0, 0, 0, 0.95); backdrop-filter: blur(4px); } .tsf-nav__panel[hidden] { display: none; } .tsf-nav__blob { position: absolute; width: 20rem; height: 20rem; border-radius: var(--tsf-radius-pill); pointer-events: none; } .tsf-nav__blob--a { right: -6rem; top: -6rem; background: radial-gradient(circle, rgba(227, 30, 36, 0.32) 0%, transparent 70%); } .tsf-nav__blob--b { bottom: -8rem; left: -6rem; background: radial-gradient(circle, rgba(168, 19, 24, 0.22) 0%, transparent 70%); } .tsf-nav__panel-inner { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 6rem 1.5rem 2rem; } /* The panel takes focus when it opens so no link has to. It is a container, not a control, so it draws no ring of its own -- the links still do. */ .tsf-nav__panel:focus, .tsf-nav__panel:focus-visible { outline: none; } .tsf-nav__panel-link { font-family: var(--tsf-font-display); text-transform: uppercase; font-size: 7.5vw; line-height: 1; text-decoration: none; color: var(--tsf-fg); transition: color 0.2s var(--tsf-ease); /* Per-item delay, computed in PHP the way the source computes it in JS. */ animation: tsf-fade-up 0.35s ease-out var(--tsf-stagger, 0s) both; } .tsf-nav__panel-link.is-current { color: var(--tsf-brand); } @media (hover: hover) { .tsf-nav__panel-link:hover { color: var(--tsf-brand); } } @media (min-width: 640px) { .tsf-nav__panel-inner { gap: 1.25rem; } .tsf-nav__panel-link { font-size: 2.25rem; } } .tsf-nav__panel-socials { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; animation: tsf-fade-up 0.35s ease-out var(--tsf-stagger, 0s) both; } .tsf-nav__panel-socials a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--tsf-radius-pill); color: var(--tsf-fg); transition: border-color 0.2s var(--tsf-ease), background-color 0.2s var(--tsf-ease), color 0.2s var(--tsf-ease); } .tsf-nav__panel-socials svg { width: 1rem; height: 1rem; } @media (hover: hover) { .tsf-nav__panel-socials a:hover { border-color: var(--tsf-brand); background-color: var(--tsf-brand); color: var(--tsf-on-brand); } } .tsf-nav__panel-cta { margin-top: 1.5rem; border-radius: var(--tsf-radius-pill); background-color: var(--tsf-brand); color: var(--tsf-on-brand); padding: 0.75rem 2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; animation: tsf-fade-up 0.35s ease-out var(--tsf-stagger, 0s) both; } .tsf-nav__panel a:focus-visible { outline: 2px solid var(--tsf-brand-bright); outline-offset: 4px; } @media (min-width: 1024px) { .tsf-nav__panel { display: none; } } /* ========================================================================== Site footer ========================================================================== */ .tsf-footer { border-top: 2px solid var(--tsf-brand); background-color: var(--tsf-surface-2); padding-top: 5rem; padding-bottom: 2.5rem; } .tsf-footer__grid { display: grid; gap: 3rem; } @media (min-width: 1024px) { .tsf-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .tsf-footer__logo { display: inline-block; line-height: 0; } .tsf-scope .tsf-footer__logo img { height: 4rem; width: auto; } @media (min-width: 1024px) { .tsf-scope .tsf-footer__logo img { height: 5rem; } } .tsf-footer__blurb { margin: 1rem 0 0; max-width: 20rem; font-size: 0.875rem; line-height: 1.625; color: var(--tsf-muted-fg); } .tsf-footer__socials { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; } .tsf-footer__socials a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--tsf-radius-pill); color: var(--tsf-fg); transition: border-color 0.2s var(--tsf-ease), background-color 0.2s var(--tsf-ease), color 0.2s var(--tsf-ease); } .tsf-footer__socials svg { width: 1rem; height: 1rem; } @media (hover: hover) { .tsf-footer__socials a:hover { border-color: var(--tsf-brand); background-color: var(--tsf-brand); color: var(--tsf-on-brand); } } .tsf-footer__title { margin: 0 0 1.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--tsf-brand); } .tsf-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); } .tsf-footer__list--icons { gap: 1rem; } .tsf-footer__list a { color: inherit; text-decoration: none; transition: color 0.2s var(--tsf-ease); } .tsf-footer__list--icons li, .tsf-footer__list--icons a { display: inline-flex; align-items: flex-start; gap: 0.5rem; } .tsf-footer__list--icons svg { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 0.25rem; color: var(--tsf-brand); } @media (hover: hover) { .tsf-footer__list a:hover { color: var(--tsf-brand); } } .tsf-footer__list a:focus-visible, .tsf-footer__socials a:focus-visible { outline: 2px solid var(--tsf-brand-bright); outline-offset: 3px; } .tsf-footer__legal { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-top: 4rem; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } @media (min-width: 640px) { .tsf-footer__legal { flex-direction: row; align-items: center; } } /* ------------------------------------------------------- elementor seams */ /* Elementor puts 20px between every widget. Our sections set their own rhythm with --tsf-band-y, so that gap just shows the page background at each seam. */ .tsf-scope .elementor-widget:not(:last-child) { --kit-widget-spacing: 0; } /* Elementor's only rule for these is `height: 1em` -- it never sets a fill, because each of its own widgets sets one. Ours do not, and an SVG with no fill paints black. currentColor makes each icon take the colour its context already sets, so one rule covers white card tags and brand-red stat icons alike, and it stays correct if those colours ever change. */ .tsf-scope .e-font-icon-svg, .tsf-scope svg.e-font-icon-svg path { fill: currentColor; } /* --------------------------------------------------- plain page content */ /* * singular.php wraps non-Elementor content in .tsf-entry-content, and index.php * in .tsf-entry. Nothing styled either: every rule in this design system is * class-scoped on purpose, which is why nothing has drifted, but it also means * ordinary editor content arrived with no typography at all. The terms page and * the privacy policy are the first pages on this site made of plain prose. */ .tsf-scope .tsf-entry-content, .tsf-scope .tsf-entry { /* A comfortable measure for prose. WooCommerce's own screens do their own layout inside this wrapper and are released from it below. */ max-width: 68ch; color: var(--tsf-muted-fg); font-size: 1rem; line-height: 1.75; } .tsf-scope .tsf-entry-content > * + * { margin-top: 1.15rem; } .tsf-scope .tsf-entry-content h2, .tsf-scope .tsf-entry-content h3, .tsf-scope .tsf-entry-content h4 { font-family: var(--tsf-font-display); font-weight: 400; letter-spacing: var(--tsf-display-tracking); line-height: 1.15; text-transform: uppercase; color: var(--tsf-fg); text-wrap: balance; } .tsf-scope .tsf-entry-content h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-top: 2.5rem; } .tsf-scope .tsf-entry-content h3 { font-size: 1.1rem; margin-top: 2rem; } .tsf-scope .tsf-entry-content h4 { font-size: 0.95rem; margin-top: 1.75rem; } .tsf-scope .tsf-entry-content strong { color: var(--tsf-fg); font-weight: 600; } .tsf-scope .tsf-entry-content a { color: var(--tsf-brand); text-underline-offset: 2px; } .tsf-scope .tsf-entry-content a:hover { color: var(--tsf-brand-bright); } .tsf-scope .tsf-entry-content ul, .tsf-scope .tsf-entry-content ol { padding-left: 1.25rem; } .tsf-scope .tsf-entry-content li + li { margin-top: 0.4rem; } .tsf-scope .tsf-entry-content blockquote { margin-inline: 0; padding: 0.75rem 0 0.75rem 1.25rem; border-left: 3px solid var(--tsf-brand); color: var(--tsf-fg); } .tsf-scope .tsf-entry-content hr { border: 0; border-top: 1px solid var(--tsf-border); margin-block: 2.5rem; } .tsf-scope .tsf-entry-content img { max-width: 100%; height: auto; border-radius: var(--tsf-radius-lg); } .tsf-scope .tsf-entry-content table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tsf-scope .tsf-entry-content th, .tsf-scope .tsf-entry-content td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--tsf-border); text-align: left; } /* Cart, checkout and the account pages lay themselves out and need the full container width, not a reading measure. */ .tsf-scope.woocommerce-cart .tsf-entry-content, .tsf-scope.woocommerce-checkout .tsf-entry-content, .tsf-scope.woocommerce-account .tsf-entry-content, .tsf-scope.woocommerce-page .tsf-entry-content { max-width: none; } /* --------------------------------------------------------- reCAPTCHA */ /* * The floating badge is hidden and replaced by the attribution line next to * each button -- which is what Google's own terms allow in exchange. */ .grecaptcha-badge { visibility: hidden; } .tsf-recaptcha { display: none; } .tsf-scope .tsf-recaptcha__note { margin: 0.75rem 0 0; font-size: 0.6875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.45); } .tsf-scope .tsf-recaptcha__note a { color: rgba(255, 255, 255, 0.7); text-underline-offset: 2px; } .tsf-scope .tsf-recaptcha__note a:hover { color: var(--tsf-brand-bright); }