/** Shopify CDN: Minification failed
Line 1803:0 Unexpected "}"
**/
/* Website fonts */
/* Body Font "Space Grotesk" */
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Medium.woff2?v=1772518413') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-SemiBold.woff2?v=1772518413') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Regular.woff2?v=1772518413') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Bold.woff2?v=1772518413') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Space Grotesk';
src: url('/cdn/shop/files/SpaceGrotesk-Light.woff2?v=1772518412') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Heading Font 'Inter Tight' */
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Light.woff2?v=1772521040') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Bold.woff2?v=1772521040') format('woff2');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Regular.woff2?v=1772521040') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-Medium.woff2?v=1772521040') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter Tight';
src: url('/cdn/shop/files/InterTight-SemiBold.woff2?v=1772521175') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
p{
font-family: 'Inter Tight';
font-weight: 400;
letter-spacing:0px !important;
}
.announcement {
border-radius: 0 0 10px 10px;
}
.announcement p {
font-size: 14px;
line-height:20px;
font-family: 'Space Grotesk';
letter-spacing: 0px;
font-weight: 400;
}
.navtext {
font-size: 14px;
line-height: 18px;
font-weight: bold;
}
.navlink {
padding: 0;
}
.header__menu__inner {
gap: 20px;
}
.header__inner .wrapper--full {
padding-top: 20px;
padding-bottom: 20px;
}
/* Hide Weglot entirely — translation is disabled on this theme. We'll run our own
translation pipeline later. The and carry `wg-notranslate` + `translate="no"`
so Weglot's JS skips the whole page, but we also hide any switcher UI it tries to inject. */
.weglot-container,
#weglot-switcher-1,
.weglot_switcher,
[class^="weglot-"],
[id^="weglot-"],
[class*=" weglot-"],
.language-option.active-language {
display: none !important;
}
/* Native language switcher alignment */
.header__desktop__bar__r {
gap: 10px;
align-items: center;
}
.header__desktop__bar__r .toolbar__elements {
display: flex;
align-items: center;
align-self: center;
margin: 0;
padding: 0;
}
.header__desktop__bar__r .toolbar__elements .popout__toggle {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
line-height: 1;
}
.header__desktop__bar__r .toolbar__elements .popout__toggle img,
.header__desktop__bar__r .toolbar__elements .popout__toggle svg {
vertical-align: middle;
}
.header__desktop__bar__r .header__desktop__buttons {
display: flex;
align-items: center;
}
.header__desktop__bar__r .toolbar__elements,
.header__desktop__bar__r .header__desktop__buttons {
margin-top: auto;
margin-bottom: auto;
}
.theme__header {
border: none ;
}
.tri-hero-banner .wrapper .section__inner {
border-radius: 20px;
overflow: hidden ;
}
/* Fix duplicate logo: pointer:coarse in theme.css shows both mobile+desktop headers.
Let the JS class js__show__mobile control the toggle instead. */
@media (pointer: coarse) and (min-width: 480px) {
.header__mobile {
display: none;
}
.header__desktop {
display: flex;
}
/* When JS determines mobile is needed, restore it */
.js__show__mobile .header__mobile {
display: grid;
}
.js__show__mobile .header__desktop {
display: none;
}
}
.btn.btn--large, .btn.btn--long {
font-size: 18px;
line-height: 22px;
padding: 14px 25px;
font-family: Inter Tight;
letter-spacing: 0px !important;
font-weight: 600;
margin: 24px 12px 0 0;
}
.btn.btn--long{
padding: 11px 25px !important;
min-width:fit-content;
}
.hover__bar {
bottom: 27px;
background-color: rgb(34 34 34);
}
.hero__title p {
font-size: 50px;
line-height: 56px;
letter-spacing: -1px !important;
color: #fff;
}
.header__desktop__buttons {
display: flex;
gap: 10px;
}
/* A mirror, reimagined. */
.tri-a-mirror .brick__section {
background: #222222;
padding: 75px;
border-radius: 20px;
}
.tri-a-mirror ul {
margin: 30px 0px !important;
padding: 10px;
list-style: none !important;
border-left: 2px solid #fff;
font-size: 16px;
letter-spacing: 0;
font-style: normal;
line-height: 20px;
}
.tri-a-mirror .btn.btn--long{
margin:0px;
}
.tri-a-mirror .standard__heading {
background: linear-gradient(90deg, #fff, #999);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 40px;
line-height: 51px;
letter-spacing: -.75px;
margin-bottom: 20px;
font-family: 'Space Grotesk';
}
.tri-a-mirror p {
font-size: 20px;
line-height: 28px;
}
.tri-a-mirror .image__hero__frame {
border-radius: 10px;
}
/* Collection Grid Css */
.tri-collection-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 220px 210px 220px;
gap: 20px;
max-width: 100% !important;
margin: 0 auto;
}
.tri-collection-grid .grid__item {
background: #eee;
border-radius: 8px;
overflow: hidden;
}
.tri-collection-grid .grid__item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.tri-collection-grid .grid__item:nth-child(1) .image__hero__frame, .tri-collection-grid .grid__item:nth-child(2) .image__hero__frame, .tri-collection-grid .grid__item:nth-child(3) .image__hero__frame, .tri-collection-grid .grid__item:nth-child(4) .image__hero__frame {
aspect-ratio: 690 / 450;
padding: 0px;
height: 100% !important;
width:100% ;
}
.tri-collection-grid .grid__item:nth-child(2) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.tri-collection-grid .grid__item:nth-child(3) {
grid-column: 4 / 5;
grid-row: 1 / 2;
}
.tri-collection-grid .grid__item:nth-child(4) {
grid-column: 3 / 5;
grid-row: 2 / 4;
}
.tri-collection-grid .grid__item:nth-child(5) {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.tri-collection-grid .grid__item:nth-child(5) .collection-grid-item__title {
max-width: 400px;
padding-top :24px;
}
.tri-collection-grid .grid__item:nth-child(5) .collection-grid-item__subtitle {
background: #fff;
position: relative;
top: 0;
right: 0;
}
.tri-collection-grid .collection-grid-item__subtitle {
right: inherit;
}
.tri-collection-grid .grid__item:nth-child(5) .hero__content__wrapper {
justify-content: center !important;
}
.tri-collection-grid .grid__item:nth-child(5) .collection-grid-item__btn {
background: #222;
color: #fff;
}
.tri-collection-grid .grid__item:nth-child(5) .text-btn-arrow-right:after {
background-image: url(/cdn/shop/files/arrow-wht.svg?v=1772537386);
}
.tri-collection-grid .grid__item {
width: 100% !important;
margin: 0 !important;
padding: 0px !important;
}
.tri-collection-grid .collection-grid-item {
height: 100%;
}
.tri-collection-grid .collection-grid-item__title {
font-weight: 600 !important;
font-size: 24px;
line-height: 30px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
text-align: left;
padding-bottom:15px;
}
.tri-collection-grid .hero__content__wrapper {
justify-content: flex-end !important;
}
.tri-collection-grid .collection-grid-item__btn {
width: fit-content;
padding: 9px 48px 9px 20px;
background: #fff;
color: #222222;
border-radius: 50px;
font-size: 16px;
font-family: 'Inter Tight';
line-height: 19px;
text-transform: capitalize;
}
.tri-collection-grid .text-btn-arrow-right:after {
width: 18px;
height: 18px;
background-image: url(/cdn/shop/files/btn-arrow.svg?v=1772536285);
right: 20px;
}
.tri-designed-for .column__image > div {
aspect-ratio: 40 / 25;
border-radius: 10px;
}
.tri-designed-for .index__column {
padding-bottom: 0px !important;
position: relative;
}
.tri-designed-for .column__content {
position: absolute;
bottom: 20px;
left: 25px;
width: calc(100% - 35px);
text-align: left;
color: #fff;
}
.tri-designed-for .column__content .accent-title-large {
font-size: 24px;
line-height: 30px;
letter-spacing: -.75px;
font-family: 'Space Grotesk';
text-transform: uppercase;
margin-bottom: 8px;
}
.tri-designed-for .column__content p {
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
font-family: 'Inter Tight';
}
.tri-designed-for .column__image{
margin:0px !important;
}
.tri-designed-for .column-wrapper {
padding: 100px 83px;
background: #F4F4F4;
border-radius: 20px;
}
/* ============================================================
Image gradient overlays (per-block setting on Text columns
with images). Used when text is overlaid on a photo and the
bright sky / high-key image kills contrast — see the
.tri-designed-for "Awareness / Confidence / Freedom" cards.
============================================================ */
.column__image .has-gradient-soft,
.column__image .has-gradient-dark {
position: relative;
}
.column__image .has-gradient-soft::after,
.column__image .has-gradient-dark::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.column__image .has-gradient-soft::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0) 55%);
}
.column__image .has-gradient-dark::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 65%);
}
/* Keep the overlaid title above the gradient layer */
.tri-designed-for .index__column .column__content { z-index: 2; }
/* Section-logos title — bigger, heavier than the default tiny kicker
so the heading carries equal visual weight to the logos below it
(otherwise an awards strip with a small italic title looks bottom-heavy). */
.section-logos h2.kicker-flourished {
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.5px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Space Grotesk', sans-serif;
font-style: normal;
color: #222;
text-align: center;
margin-bottom: 28px;
}
.section-logos h2.kicker-flourished::after {
display: none;
}
/* Hero image: prevent the "loads small first, then expands" effect.
The Pipeline image element has `transition: all` (default — touches
width/height/opacity etc.). When the responsive `srcset` resolves
from a smaller candidate to a larger one as the browser figures out
the layout width, the transition animates the size change — looking
like the image grows on load. Killing the transition on hero images
makes the load feel instant.
Also locks the image to fill its scale container at 100% from the
first paint so any pre-layout width settling doesn't cascade into
a visible scale change. Scoped to `.tri-hero-banner` so it doesn't
affect other heroes that might rely on the transition (e.g. for
intentional fade-in effects). */
.tri-hero-banner .image__hero__frame,
.tri-hero-banner .image__hero__pane,
.tri-hero-banner .image__hero__scale {
min-height: 100%;
transition: none !important;
}
/* The Pipeline `singles()` function in theme.js (line ~210) runs after
content loads and sets `min-height: calc({tallest+padding}px + var(--menu-height))`
inline on the section and image frame. On desktop this resolves to
~661px (vs the height-class's 66vh = ~600px), so the frame appears
to "expand" by ~60px when JS runs.
Strategy: pre-seed the expected post-JS height in CSS so the INITIAL
paint already matches. JS-set min-height then either matches or comes
in slightly smaller (no-op) — no visible expansion either way.
IMPORTANT: scope this to desktop. On mobile, the content stack is
shorter (text wraps differently, awards image is capped at 220px) so
the JS-computed min-height is much smaller (~470px). If we apply the
desktop pre-seed on mobile, the hero loads taller than it should and
then SHRINKS when JS runs — the same CLS, mirrored. */
@media (min-width: 768px) {
.tri-hero-banner.js-overflow-container,
.tri-hero-banner [data-overflow-background] {
min-height: calc(540px + var(--menu-height, 78px));
}
}
/* Mobile pre-seed: the hero's `.use_pixels_650` rule from this file sets
the frame to 450px on mobile, but the heading wraps to many lines on
narrow viewports so the content stack ends up taller than 450px. The
Pipeline `singles()` JS then bumps min-height after first paint — the
user sees the hero load short then jump tall. Pre-seeding the visible
viewport height (svh excludes browser UI chrome) keeps initial paint
matched to the post-JS state. !important overrides JS's inline value. */
@media (max-width: 767px) {
.tri-hero-banner.js-overflow-container,
.tri-hero-banner [data-overflow-background] {
min-height: calc(100svh - var(--menu-height, 78px)) !important;
}
.tri-hero-banner .image__hero__frame[class*="use_pixels_"] {
height: calc(100svh - var(--menu-height, 78px));
}
}
/* When the hero uses a fixed-height utility (use_screen_*, use_pixels_*),
force `aspect-ratio: auto` so the height class wins immediately on first
paint. Otherwise Tailwind's `aspect-[--wh-ratio]` competes with the height
class — whichever loses gets *animated* into the winner because the
theme's default `transition: all` is on these elements. That animation
IS the "loads smaller first then expands" desktop CLS. */
.tri-hero-banner .image__hero__frame[class*="use_screen_"],
.tri-hero-banner .image__hero__frame[class*="use_pixels_"] {
aspect-ratio: auto !important;
}
/* The `image` snippet adds an extra inner wrapper around the IMG with
classes `relative block w-full h-full overflow-hidden aspect-[--wh-ratio]`.
Pipeline's default `transition: all` on this wrapper means a late-loading
sibling (e.g. the awards img inside the hero) reflowing the hero text
stack triggers a frame-size animation on the hero image wrapper. Kill
transitions on EVERY descendant of the scale element to prevent this. */
.tri-hero-banner .image__hero__scale,
.tri-hero-banner .image__hero__scale * {
transition: none !important;
}
/* Also kill transition on the inner aspect-ratio wrapper around the IMG
so the hero image's effective box doesn't animate when the awards img
below loads (which can trigger a layout pass on the hero text stack). */
.tri-hero-banner .image__hero__scale > [class*="aspect-["] {
aspect-ratio: auto !important;
}
.tri-hero-banner .image__hero__scale img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: none !important;
}
/* Awards image inside hero blocks: same load-time animation issue.
The image snippet sets HTML width/height attrs to a default 600×200
while the actual asset is 320×106 — the browser allocates the larger
box first, then the CSS width:320px wrapper + object-fit kicks in,
and `transition: all` animates the box collapse. Lock it. */
.tri-text-banner .standard__image,
.tri-text-banner .standard__image *,
.tri-text-banner .standard__image img {
transition: none !important;
}
/* Hide Judge.me's medals/badges row site-wide.
The medals strip (Verified Reviews, Monthly Record, Bronze
Authenticity, etc.) was visually noisy: 6 laurel-wreath badges
with mixed micro-typography, two of them with oversized count
numbers (870, 57) that dropped out of the wreath at 3-4× the
badge text. Trust signal job is already covered by the hero
rating chip (★4.79 · 1,002 reviews) + customer photo grid +
per-review widget below. The medals were a third repetition
without adding meaning. */
.jdgm-medals-wrapper,
.jdgm-medals {
display: none !important;
}
/* Hero-embedded awards strip — mobile sizing tweak.
The Liquid image block uses `image_max_limit: 320` which is the
right size for a desktop hero (`.standard__image` style="width:
320px"). On a phone viewport the content area is ~334px wide, so
320px = essentially full-bleed and the awards read as a banner
image rather than a small credential badge. Capping to 220px on
narrow viewports gives the badge breathing room above the CTAs.
Targeting `.tri-text-banner .standard__image` so this only
applies to the cycling/homepage-style hero, not other heroes. */
@media (max-width: 680px) {
.tri-text-banner .standard__image {
max-width: 220px !important;
margin-top: 10px !important;
}
}
/* Logo-bar block image inversion — used when a white-on-transparent
logo (e.g. the existing Awards strip designed for the dark footer)
needs to be rendered on a light section background.
The `!important` on opacity overrides the theme's lazy-load
`.transition-opacity` initial state, which never resolves to opacity
1 for images that render with a CSS filter (the filter changes the
compositor path and the load handler that flips opacity doesn't
fire). Without this override the logos render as a flat gray block.
GPU layer promotion (`transform: translateZ(0)` + `will-change: filter`)
isolates the filter into its own composite layer so it's rasterized
once instead of on every scroll paint — without it, the filter re-runs
on every frame during scroll and causes scroll jank on long pages. */
/* Hero rating chip — clickable link to the reviews section. We
don't want the harsh default underline (heavy on a hero), so we
use a subtle dotted underline that sharpens on hover. */
.section-hero a[href="#reviews"],
[data-section-type*="hero"] a[href="#reviews"] {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
padding-bottom: 1px;
transition: border-color 0.15s ease;
cursor: pointer;
}
.section-hero a[href="#reviews"]:hover,
[data-section-type*="hero"] a[href="#reviews"]:hover {
border-bottom-color: rgba(255, 255, 255, 1);
}
.logo-bar__item--invert img {
filter: invert(1) brightness(0.85) contrast(1.1);
opacity: 1 !important;
transform: translateZ(0);
will-change: filter;
backface-visibility: hidden;
/* Hint to the browser to use a sharper interpolation when scaling
the image down on mobile (the awards strip is laid out at native
600px and resamples down to viewport width on phones). */
image-rendering: -webkit-optimize-contrast;
}
/* Section-logos subtitle — small caption line under the logo strip. */
.section-logos__subtitle {
text-align: center;
font-size: 12px;
letter-spacing: 0.4px;
color: #666;
margin: 18px auto 0;
max-width: 720px;
line-height: 1.5;
padding: 0 16px;
}
/* Mobile sizing for the awards strip: the block.width setting clamps the
max width on desktop, but mobile viewports are narrower than that
value — let the image scale down to viewport width with margin. */
@media (max-width: 640px) {
.logo-bar__item--invert {
--width: 100% !important;
width: 100% !important;
max-width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
.logo-bar__item--invert img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: none !important;
}
/* Center the single logo block on mobile (default flex layout in the
theme can left-align unless we tell it otherwise) */
.section-logos .logo-bar {
justify-content: center;
}
.section-logos h2.kicker-flourished {
font-size: 22px;
margin-bottom: 18px;
padding: 0 16px;
}
.section-logos__subtitle {
font-size: 11px;
margin-top: 14px;
}
}
.tri-three-collection .collection-grid-item .image__hero__frame {
padding-top: 110%;
aspect-ratio: 454 / 500;
border-radius: 10px;
}
.collection-grid-item {
border-radius: 10px;
}
.tri-three-collection p.collection-grid-item__title {
max-width: 420px;
font-weight: 600;
font-size: 40px;
line-height: 51px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
text-align: left;
padding-top: 52px;
}
.collection-grid-item__btn {
font-weight: 600;
font-size: 18px;
line-height: 24px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
text-align: left;
width: 100%;
padding-right: 20px;
transform: translateY(0);
opacity: 1;
}
.collection-grid-item__subtitle {
text-transform: uppercase;
font-family: 'Inter Tight' !important;
font-weight: 500 !important;
font-size: 14px;
line-height: 17px;
padding: 4px 10px;
border-radius: 50px;
background: rgb(34 34 34 / 80%);
width: fit-content;
position: absolute;
top: 20px;
right: 20px;
transform: translateY(0);
opacity: 1;
}
.align-space-between-vertical {
align-items: flex-start;
}
.text-btn-arrow-right:after {
content: "";
width: 19px;
height: 19px;
border-width: 0px !important;
background-image: url(/cdn/shop/files/Vector.svg?v=1772533228);
}
.section-heading .kicker-flourished, .try-tech-section .standard__heading p, .image-with-txt-collection h2 {
font-size: 40px;
line-height: 51px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: 'Space Grotesk';
margin: 0px;
padding-bottom: 10px;
}
.section-heading .kicker-flourished:after {
display:none;
}
.subheading, .try-tech-section .rte p{
text-align: center;
font-size: 18px;
line-height: 25px;
font-weight: 400;
}
.section-heading {
margin-bottom: 40px;
}
.tri-wherever-you-go .align-space-between-vertical {
justify-content: flex-end;
}
.tri-wherever-you-go .image__hero__frame {
aspect-ratio: 335 / 400;
}
/* -------- */
.section-icons .icon__column__icon{
width:50px;
height:50px;
}
.section-icons .icon__column__heading {
font-weight: 700 !important;
font-size: 18px;
line-height: 24px;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
}
.section-icons .icon__column__text .rte p {
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: #222 !important;
}
.section-icons .grid__item.medium-up--one-third {
max-width: 345px;
width: 100% !important;
}
.section-icons .float-grid {
max-width: 1252px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.section-icons .float-grid:after{
display:none;
}
/* --- */
footer.footer {
border-radius: 20px 20px 0 0;
}
.footer__container {
max-width: 1252px;
margin: 0 auto;
}
.shopify-section-group-group-footer .section-padding.wrapper {
max-width: 1252px;
margin: 0 auto;
border-top: 1px solid rgb(255 255 255 / 20%);
}
.footer__newsletter__body {
padding: 0px !important;
}
.footer__newsletter h3, .footer__title {
font-size: 18px;
line-height: 24px;
font-family: 'Space Grotesk';
letter-spacing: 0px;
color: #fff;
text-transform: uppercase;
}
.footer__column .rte p {
font-size: 14px;
line-height: 18px;
}
.footer__column .rte {
margin: 30px 0;
}
.footer__newsletter h3 {
margin: 0px;
}
.footer__newsletter .rte {
margin: 20px 0;
}
.footer__aside {
display: flex;
flex: 0 0 360px !important;
max-width: 360px !important;
margin-left: 80px !important;
padding: 80px 0 !important;
align-items: flex-start;
}
.newsletter-block .input-group--inner-button {
background: #ffffff1a;
border-radius: 50px;
border: none !important;
padding: 7px 7px 7px 20px;
}
.input-group-button button {
background: #fff;
color: #222 !important;
padding: 11px 25px !important;
border-radius: 50px;
font-size: 16px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0px;
}
.footer__content__inner .float-grid {
display: grid !important;
grid-template-columns: 310px 220px 220px;
align-items: start;
row-gap: 0;
column-gap: 80px;
width: 100%;
}
.footer__content__inner .float-grid .grid__item:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.footer__content__inner .float-grid .grid__item:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.footer__content__inner .float-grid .grid__item:nth-child(3) {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.footer__content__inner .float-grid .grid__item:last-child {
grid-column: 3 / 4;
grid-row: 2 / 3;
margin-top: -40px;
}
.footer__content__inner .medium-up--one-half {
width: 100%;
padding: 0px !important;
}
.footer__quicklinks a {
font-size: 14px;
line-height: 17px;
font-family: 'Inter Tight';
font-weight: 300;
}
span.subfooter__copyright {
font-size: 14px;
line-height: 17px;
font-family: Inter Tight;
font-weight: 300;
}
.footer__icon--social {
margin: 0px !important;
}
/* Specification Css */
.specifations-wrapper .lens-grid {
display: flex;
gap: 50px;
align-items: flex-start;
}
.try-specifications-section .column-wrapper {
padding: 100px 74px;
background: #2222220d;
border-radius: 20px;
}
.specifations-wrapper .lens-grid > div {
flex: 1;
}
@media (max-width: 768px) {
.float-grid {
grid-template-columns: 1fr;
text-align: center;
}
}
/* Product Page Css */
.product-single .product__inner {
max-width: 100% !important;
}
.product__icon-item {
display: flex;
align-items: center;
gap: 7px;
padding: 10px;
border-radius: 5px;
background: rgb(0 0 0 / 5%);
flex:1;
}
.product__icon-item p {
font-size: 12px;
line-height: 16px;
letter-spacing: 0px;
}
.product__icon-item .icon-holder {
max-width: 16px;
}
/* Reserve 16x16 for icon-list icons to prevent CLS lower down on the
product page when lazy-loaded images resolve during scroll. The
image.liquid snippet only reserves aspect-ratio when wh_ratio is
passed, and the icon_list block at sections/product.liquid:449
doesn't pass it. Without reserved space, each icon wrapper is 0x0
until the ![]()
loads, then jumps to 16px — shifting everything
below. Diagnosed via Playwright WebKit run showing height change
59->75 on .product__icon-list during scroll phases. */
.product__icon-item .icon-holder,
.product__icon-item .icon-holder > *,
.product__icon-item .icon-holder img,
.product__icon-item .icon-holder svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.product__icon-list {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.product__block__description button.accordion__title {
font-size: 14px !important;
line-height: 18px !important;
letter-spacing: 0px;
font-family: Space Grotesk;
text-transform: uppercase;
}
.product__inner .shopify-product-form {
max-width: 100% !important;
}
a#more-payment-options-link {
display: none;
}
.btn--add-to-cart {
border-radius: 10px;
font-size: 18px;
line-height: 20px;
font-family: 'Inter Tight';
margin-bottom:12px;
}
input.quantity__input {
border-radius: 10px;
font-weight: 700 !important;
}
.product__block__quantity {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.product__submit__quick .shopify-payment-button, .product__submit__quick .shopify-payment-button shopify-accelerated-checkout {
border-radius: 10px;
overflow: hidden;
margin: 0px !important;
}
.media__thumb:after {
display:none;
}
.media__thumb img {
border-radius: 5px;
}
.media__thumb.is-activated img {
border: 1px solid #222;
}
.product__grid.product__grid--slides {
border-radius:10px;
overflow:hidden;
}
h1.product__title {
font-size: 30px;
line-height: 38px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-family: Space Grotesk;
}
.title-price-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.tri-text-banner .hero__title p {
font-size: 40px;
line-height: 51px;
letter-spacing: -1px !important;
}
.tri-text-banner .hero__description p {
font-size: 20px;
line-height: 28px;
font-weight: 300;
max-width: 512px;
}
.tri-text-banner .section__inner:after {
content: '';
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(32, 32, 32, 1) 0%, rgba(32, 32, 32, 0.1) 40%);
}
.tri-text-banner .hero__content {
padding: 50px 83px;
margin: 0px !important;
}
.tri-text-banner .hero__description {
margin-top: 20px !important;
}
.tri-text-banner .standard__image {
margin: 0px;
}
.tech-features {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 40px;
}
.tech-feature {
max-width: calc(100% / 4 - 15px);
width: 100%;
border-radius: 5px;
background: #fff;
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
border: 1px solid rgb(34 34 34 / 10%);
}
img.tech-feature-icon {
width: 30px;
height: 30px;
}
.tech-feature-text {
font-size: 18px;
line-height: 24px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-family: Space Grotesk;
font-weight: 700;
}
.innovation-card {
aspect-ratio: 40 / 45;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.innovation-content {
position: absolute;
bottom: 0;
left: 0px;
padding: 20px;
color: #fff;
}
.innovation-content h3 {
font-size: 24px;
line-height: 31px;
letter-spacing: -1px !important;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin-bottom: 15px;
}
.innovation-content p {
font-size: 18px;
line-height: 26px;
}
.innovation-overlay {
background: linear-gradient(0deg, #222222, #22222200 100%);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.try-innovation-section .column-wrapper {
padding: 100px 74px;
background: rgb(34 34 34 / 5%);
border-radius: 20px 20px 0 0;
}
.try-tech-section .container-layout{
padding: 0 74px 100px 74px;
background: rgb(34 34 34 / 5%);
border-radius: 0 0 20px 20px;
}
/* } */
/* Weglot switcher list styles removed */
/* Lense Slider CSS Start */
#sync1 .item {
padding: 40px 0 0 0;
margin: 0;
color: #fff;
border-radius: 0;
text-align: center;
}
#sync2 .item {
padding: 0px;
margin: 0;
color: #fff;
text-align: center;
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 50px;
position: relative;
}
#sync2 .item h1 {
font-size: 18px;
}
#sync2 .current .item {
background: #0c83e7;
}
/* Owl Nav Reset */
.owl-theme .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-theme .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
/* Arrows for first carousel */
#sync1.owl-theme {
position: relative;
}
#sync1.owl-theme .owl-next, .innovation-cards .owl-next,
#sync1.owl-theme .owl-prev, .innovation-cards .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
#sync1.owl-theme .owl-prev {
left: -75px;
}
#sync1.owl-theme .owl-next {
right: -75px;
}
.innovation-cards .owl-prev {
left: -60px;
}
.innovation-cards .owl-next {
right: -60px;
}
.tri-leans-slider .lens-grid {
display: flex;
gap: 15px;
align-items: flex-start;
}
.tri-leans-slider .lens-content {
max-width: 33%;
width: 100%;
}
.lens-image img {
width: 100%;
height: 100% !important;
object-fit: cover !important;
}
.image-tags span>span, .lens-badge {
font-size: 12px;
background: #222c;
padding: 5px 15px;
border-radius: 30px;
display: inline-block;
line-height: 16px;
color: #fff;
font-family: Inter Tight;
text-transform: uppercase;
letter-spacing: 0.25px;
}
.card-content {
text-align: left;
padding: 20px;
}
.image-tags {
display: flex;
position: absolute;
bottom: 32px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
z-index: 2;
}
.lens-image {
border-radius : 10px;
overflow: hidden;
flex: 1;
position: relative;
}
.image-tags > span {
flex: 1;
}
.tri-leans-slider .lens-image:after {
content: '';
width: 50%;
background: rgb(34 34 34 / 20%);
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.lens-content img {
aspect-ratio: 400 / 230;
border-radius: 10px;
overflow: hidden;
object-fit: cover;
}
.lens-content h3 {
font-size: 24px;
line-height: 31px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin: 0;
text-align: left;
padding:15px 0 ;
}
.lens-content p {
font-size: 18px;
line-height: 25px;
font-weight: 400;
color: #222;
text-align: left;
}
.lens-thumb, .lens-dot {
height: 100%;
width: 100%;
display: block;
border-radius: 50px;
}
.tri-leans-thumbnail .owl-item {
width: 45px !important;
cursor:pointer;
}
.tri-leans-thumbnail .owl-item:after {
content: '';
position: absolute;
width: 55px;
height: 55px;
border: 2px solid transparent;
top: -5px;
left: -5px;
border-radius: 50px;
opacity: 1;
/* No transition — Owl Carousel's transform on .owl-item fights with
pseudo-element transitions and keeps border-color stuck at the start
state. Snap-change is fine here. (2026-05-01) */
}
.tri-leans-thumbnail .owl-item.current:after{
border-color: #ff5000;
}
.tri-leans-thumbnail .owl-stage {
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
justify-content: center;
padding: 10px 0;
}
/* Gap between Full Sun lenses and the Variable (photochromic) group.
The first Variable item that FOLLOWS a non-Variable item gets the
margin — this correctly creates a single visual break regardless of
how many Variable lenses exist. Falls back to nothing in browsers
without :has() support (Chromium <105, Safari <15.4, Firefox <121). */
.tri-leans-thumbnail .owl-stage .owl-item:not(:has(.lens-item--variable)) + .owl-item:has(.lens-item--variable) {
margin-left: 30px;
}
/* Fallback for older browsers: at least the final item gets the gap */
.tri-leans-thumbnail .owl-stage .owl-item:last-child {
margin-left: 30px;
}
/* When :has() IS supported and triggers the gap above, reset the
last-child margin so we don't double it on the final Variable item. */
.tri-leans-thumbnail .owl-stage:has(.lens-item--variable) .owl-item:last-child {
margin-left: 0;
}
.tri-leans-thumbnail .owl-stage:has(.lens-item--variable) .owl-item:not(:has(.lens-item--variable)) + .owl-item:has(.lens-item--variable) {
margin-left: 30px;
}
.thumbnail-spactrum span {
font-size: 14px;
line-height: 18px;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
}
.thumbnail-spactrum {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 400px;
margin: 0 auto;
gap:40px;
}
.left-sp {
display: flex;
align-items: center;
gap: 10px;
flex:1;
}
span.sp-line {
height: 1px;
background: #222222;
display: inline-block;
flex: 1;
}
.try-leans-section .column-wrapper {
max-width: 1236px;
margin: 0 auto;
}
.try-innovation-section div[data-grid] {
position: relative;
width: 100% !important;
margin: 0px;
}
.try-leans-section .tri-leans-wrapper .owl-nav button, .innovation-cards .owl-nav button {
width: 45px !important;
height: 45px !important;
background: #fff !important;
border: 1px solid rgb(34 34 34 / 20%) !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 100px !important;
box-shadow: 0 4px 6px #20202014;
margin: 0px !important;
}
.try-leans-section .section-heading {
margin-bottom: 15px;
}
.try-leans-section .owl-carousel .owl-stage:after{
display:none;
}
/* Leans Slder CSS End */
.lens-card img {
width: 18px;
height: 18px;
}
.lens-card h5 {
font-size: 14px;
line-height: 17px;
font-family: Inter Tight;
font-weight: 700;
color: #222;
margin: 0;
text-transform: capitalize;
}
.lens-card p, .lens-card span {
font-size: 12px;
line-height: 14px;
letter-spacing: 0;
}
.lens-specs .leans-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid rgb(34 34 34 / 15%);
}
.lens-specs .icon-title-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.lens-specs .lens-card {
padding: 15px;
background: #fff;
border-radius: 5px;
overflow: hidden;
}
.lens-specs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lens-specs > div {
max-width:calc(100% / 2 - 5px);
width:100%;
}
.spectrum span {
width: 6px;
height: 6px;
background: rgb(34 34 34 / 15%);
display: inline-block;
border-radius: 10px;
}
.spectrum span.active{
background: rgb(34 34 34 / 100%);
}
.lens-col li.icon-item {
display: flex;
align-items: center;
gap: 12px;
max-width: 210px;
width: 100%;
}
.lens-col .icon-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px 35px;
margin-top: 24px;
}
.specifations-wrapper h4 {
margin: 20px 0 ;
padding: 0;
font-size: 24px;
line-height: 31px;
}
.specifations-wrapper .lens-text p {
margin: 16px 0;
font-size: 18px;
line-height: 25px;
}
.lens-text ul {
display: flex;
gap: 6px;
}
.lens-text ul li:not(:first-child) {
font-size: 14px;
line-height: 18px;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
font-family: 'Space Grotesk';
color: #fff;
background: #222;
margin:0px;
}
.lens-text ul li:first-child {
font-size: 18px;
line-height: 20px;
font-weight: 600;
font-family: 'Space Grotesk';
margin: 0 6px 0 0 ;
}
.lens-col li.icon-item span {
font-size: 14px;
font-family: 'Inter Tight';
font-weight: 600;
margin: 0;
}
.size-specs {
display: flex;
align-items: flex-start;
gap: 20px;
}
.size-card {
padding: 25px;
border-radius: 16px;
background: #fff;
flex: 1;
}
.size-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid rgb(34 34 34 / 70%);
gap:10px;
}
.size-header h3 {
font-size: 16px;
line-height: 20px;
font-weight: 500 !important;
font-family: 'Space Grotesk';
margin: 0px;
flex:1;
}
.size-header > div{
flex:1;
}
button.unit {
font-size: 12px;
line-height: 15px;
padding: 2px 12px;
border-radius: 20px;
text-transform: uppercase;
font-family: Space Grotesk;
color: #222;
background: transparent;
margin: 0;
}
button.unit.active {
color: #fff;
background: #222;
}
.size-toggle {
width: fit-content;
border: 1px solid rgb(34 34 34 / 20%);
padding: 2px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 0;
}
.spec-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid rgb(34 34 34 / 15%);
}
.spec-list li > span {
flex: 1;
font-size: 14px;
line-height: 20px;
font-family: 'Inter Tight';
color: rgb(34 34 34 / 70%);
}
.spec-list li > span:nth-child(2) {
font-weight: 500;
color: #222;
}
.btn--add-to-cart {
border-radius: 10px;
font-size: 18px;
line-height: 20px;
font-family: 'Inter Tight';
}
}
p.size-desc {
font-size: 12px;
line-height: 17px;
color: #222222;
font-weight: 500;
}
.product__block__title, .product__block__price {
padding: 0px !important;
}
.size-image img {
width: 100%;
flex: 1;
max-width: 200px;
margin: 0 auto;
}
.size-image {
margin-bottom: 20px;
}
.size-image {
margin-bottom: 20px;
display: flex;
gap: 10px;
}
.size-image span {
flex: 1;
}
.why-cards {
display: flex;
gap: 15px;
width: 100%;
}
.why-cards img.innovation-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.try-innovation-section.why-section .column-wrapper {
padding: 0px 74px;
background: #fff;
border-radius: 0;
}
/* .section-icons.how-it-works-icon .float-grid {
max-width: 100%;
width: 100%;
display: flex;
justify-content: space-between;
background: rgb(34 34 34 / 5%);
padding: 100px 74px;
border-radius: 20px;
} */
.section-icons.how-it-works-icon .float-grid {
max-width: 100%;
width: 100%;
gap: 20px;
}
.section-icons.how-it-works-icon .icon-wrapper{
max-width: 100%;
width: 100%;
background: rgb(34 34 34 / 5%);
padding: 100px 74px;
border-radius: 20px;
}
.section-icons.how-it-works-icon .icon__column__icon {
width: 45px;
height: 45px;
margin: 0px;
}
.section-icons.how-it-works-icon .icon__column__heading {
font-size: 24px;
line-height: 31px;
color: #222222;
padding: 8px 0 10px 0;
}
.how-it-works-icon .grid__item {
padding: 20px;
border-radius: 5px;
background: #fff;
border: 1px solid rgb(34 34 34 / 10%);
}
.section-icons.how-it-works-icon .icon__column__text .rte p {
font-size: 18px;
line-height: 24px;
}
.image-with-txt-collection .brick__section {
padding: 0 74px;
}
.image-with-txt-collection .brick__block__image {
border-radius: 10px;
overflow: hidden;
}
.image-with-txt-collection .brick__block__text {
padding-right: 56px;
}
.image-with-txt-collection a.standard__cta {
padding: 12px 55px 12px 25px !important;
color: #fff;
font-size: 16px;
line-height: 19px;
}
.image-with-txt-collection .text-btn-arrow-right:after {
right: 25px;
}
.image-with-txt-collection h2 {
max-width: 420px;
}
.image-with-txt-collection .rte {
max-width: 550px;
}
.image-with-txt-collection.img-left .brick__block__text {
padding-right: 0;
padding-left: 56px;
}
.classic-pdp .thumbnail-spactrum {
max-width: 330px;
}
.faq-section .text__standard {
max-width: 897px;
margin: 0 auto;
}
.faq-section .accordion__wrapper {
border: none !important;
border-radius: 20px;
background: rgb(34 34 34 / 5%);
padding: 0 30px 0 30px;
margin-bottom: 20px;
}
.faq-section .accordion__title {
font-size: 24px;
padding:30px 0 25px 0 ;
line-height: 100%;
letter-spacing: -1px !important;
color: #222;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
}
.faq-section .accordion__body {
padding: 0 0 30px 0;
}
.faq-section .accordion__body p {
font-size: 18px;
line-height: 26px;
color: #222222;
}
.short-container {
background: #222;
padding: 100px 74px;
border-radius: 20px;
}
.image-with-faq-wrapper {
display: flex;
align-items: stretch;
justify-content: space-between;
}
.image-with-faq-wrapper > div{
flex: 1;
}
.image-wth-faq .section-heading h2, .image-wth-faq .section-heading p {
color: #fff;
}
.faq-image img {
border-radius: 10px;
width:100%;
height:100%;
object-fit:cover;
}
.faq-image {
padding-right: 58px;
}
.faq-section.image-wth-faq .accordion__wrapper {
background: rgb(255 255 255 / 10%);
}
.faq-section.image-wth-faq .accordion__title {
color: #fff;
}
.faq-section.image-wth-faq .accordion__body p {
color: #ffffff;
}
.image-wth-faq .accordion__title:after {
border-color: #ffffff;
}
.collection-tabs .product-grid-item__images {
aspect-ratio: 400 / 250;
}
.collection-tabs .product-grid-item__images img.product-grid-item__image {
width: 100%;
margin: 0 auto;
object-fit: contain;
}
.collection-tabs .product-grid-item__images .aspect-\[--wh-ratio\] {
aspect-ratio: 400 / 250;
background: rgb(0 0 0 / 5%);
border-radius: 10px;
overflow: hidden;
}
.product__badge {
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 50px;
border: 1px solid rgb(34 34 34 / 10%);
}
.collection-tabs .product__grid__title {
font-size: 18px;
line-height: 24px;
letter-spacing: -1px !important;
color: #222;
text-align: left;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin: 0;
padding: 10px 0;
}
.collection-tabs .product__grid__title__wrapper {
display: flex;
align-items: center;
flex-direction: row !important;
justify-content: space-between !important;
}
.collection-tabs .product__grid__price {
justify-content: center;
font-size: 18px;
line-height: 24px;
letter-spacing: -1px !important;
color: #222;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-family: Space Grotesk;
margin: 0;
justify-content: flex-end;
max-width: 120px;
}
.collection-tabs .tab-content {
padding: 0 74px !important;
}
.collection-tabs button.flickity-button {
margin: 0px !important;
}
.collection-tabs .flickity-prev-next-button.next {
right: -60px !important;
}
.collection-tabs .flickity-prev-next-button.previous {
left: -60px !important;
}
.flickity-force-arrows-top [data-carousel] .flickity-button, .wrapper--full [data-carousel] .flickity-button {
top: 50% !important;
transform:translateY(-50%);
}
.collection-tabs .flickity-prev-next-button {
width: 45px !important;
height: 45px !important;
background: #fff !important;
border: 1px solid rgb(34 34 34 / 20%) !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 100px !important;
box-shadow: 0 4px 6px #20202014;
margin: 0 !important;
}
nav.breadcrumb a, nav.breadcrumb span {
text-transform: uppercase;
font-family: Space Grotesk;
font-size: 12px;
font-weight: 300;
}
nav.breadcrumb {
margin-bottom: 20px;
display: flex !important;
align-items: center;
gap: 5px;
}
.tab-content .product__rating {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row-reverse;
}
.text-center .grid__swatch__container {
justify-content: left;
}
.tabs.tabs--center.tabs--pill {
width: fit-content;
margin: 0 auto;
background: #F4F4F4;
border-radius: 50px;
padding: 8px;
}
button.tab-link span {
text-transform: uppercase;
}
.tabs--pill>.tab-link.current {
background: #fff !important;
box-shadow: 0 4px 4px hsl(0deg 0% 13% / 10%);
}
button.tab-link {
padding: 12px 24px 8px !important;
}
button.tab-link span {
text-transform: uppercase;
font-size: 16px;
line-height: 100%;
}
.collection-banner {
margin-top: 7px;
}
.jdgm-widget:not(.jdgm-review-widget--small,.jdgm-review-widget--medium) .jdgm-row-media {
flex-direction: row;
width: 100% !important;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.grid__item.product__media__wrapper {
position: sticky;
top: 100px;
}
}
.tri-a-mirror .btn.btn--long {
margin: 0;
color: #000 !important;
}
@media (max-width:1400px){
.tri-three-collection p.collection-grid-item__title {
font-size: 30px;
line-height: 34px;
padding-top: 44px;
}
.hero__title p {
font-size: 42px;
line-height: 48px;
}
.section-heading .kicker-flourished, .try-tech-section .standard__heading p, .image-with-txt-collection h2 {
font-size: 36px;
line-height: 46px;
}
.tri-a-mirror .brick__section {
padding: 50px;
border-radius: 20px;
}
.tri-a-mirror .standard__heading {
font-size: 36px;
line-height: 46px;
}
.tri-collection-grid .collection-grid-item__title {
font-size: 20px;
line-height: 24px;
}
.tri-designed-for .column-wrapper {
padding: 80px 50px;
}
.tri-designed-for .column__content .accent-title-large {
margin-bottom: 0px;
}
.footer__container.footer__container--reversed {
flex-direction: column;
gap: 0;
}
.footer__content__inner .float-grid {
display: flex !important;
row-gap: 0;
column-gap: 40px;
width: 100%;
justify-content: space-between;
margin: 0px;
}
.footer__content__inner .float-grid .grid__item:last-child {
margin-top: 0;
}
.footer .float-grid:after{
display:none;
}
.footer__aside {
display: flex;
flex: auto !important;
max-width: 360px !important;
margin-left: 0px !important;
padding: 0 !important;
align-items: flex-start;
margin-bottom: 80px;
}
.tri-text-banner .hero__content {
padding: 50px 40px;
margin: 0 !important;
}
.tri-text-banner .hero__title p {
font-size: 36px;
line-height: 40px;
}
.try-innovation-section .column-wrapper {
padding: 80px 40px;
background: #2222220d;
border-radius: 20px 20px 0 0;
}
.innovation-content p {
font-size: 14px;
line-height: 20px;
}
.innovation-content h3 {
font-size: 20px;
line-height: 22px;
letter-spacing: -0.5px !important;
margin-bottom: 7px;
}
.try-tech-section .container-layout {
padding: 0 40px 80px;
background: #2222220d;
border-radius: 0 0 20px 20px;
margin-top:-1px;
}
.tech-feature-text {
font-size: 16px;
line-height: 20px;
text-align: left;
}
.tech-features {
display: flex;
gap: 12px;
margin-top: 30px;
}
.try-tech-section .standard__heading p{
padding:0px;
}
.try-innovation-section .column-wrapper {
padding: 80px 40px 50px;
}
.innovation-cards .owl-next {
right: -25px;
}
.innovation-cards .owl-next {
right: -25px;
}
.tri-leans-slider .lens-content {
max-width: 30%;
width: 100%;
}
.try-leans-section .section-padding {
padding-top: 80px;
padding-bottom: 60px;
}
.try-specifications-section .column-wrapper {
padding: 80px 40px;
}
.specifations-wrapper .lens-grid {
gap: 20px;
}
}
@media (max-width:1100px){
.tri-designed-for .column-wrapper {
padding: 80px 20px;
}
.tri-three-collection .grid__item {
max-width: calc(100% / 3) !important;
}
.tri-three-collection p.collection-grid-item__title {
font-size: 24px;
line-height: 28px;
padding-top: 42px;
}
.tri-three-collection .section-heading {
display: none;
margin: 0px !important;
}
.lens-content h3 {
font-size: 20px;
line-height: 24px;
padding: 10px 0;
}
.lens-content p {
font-size: 16px;
line-height: 22px;
}
.tri-leans-slider {
padding: 0 30px;
}
#sync1.owl-theme .owl-next {
right: -25px;
}
#sync1.owl-theme .owl-prev {
left: -25px;
}
.try-innovation-section.why-section .column-wrapper {
padding: 0;
}
.section-icons.how-it-works-icon .icon-wrapper {
padding: 80px 20px;
}
.how-it-works-icon .grid__item {
padding: 15px;
}
.section-icons.how-it-works-icon .float-grid {
gap: 15px;
}
.section-icons.how-it-works-icon .icon__column__heading {
font-size: 20px;
line-height: 24px;
}
.section-icons.how-it-works-icon .icon__column__text .rte p {
font-size: 16px;
line-height: 22px;
}
.collection-tabs .tab-content {
padding: 0 40px !important;
}
.collection-tabs .flickity-prev-next-button.next {
right: -25px !important;
}
.collection-tabs .flickity-prev-next-button.previous {
left: -25px !important;
}
.collection-tabs .product__grid__title {
font-size: 16px;
line-height: 20px;
}
.collection-tabs .product__grid__price {
font-size: 16px;
line-height: 20px;
max-width: 90px;
}
.short-container {
padding: 80px 20px;
}
.faq-image {
padding-right: 24px;
}
.faq-section .accordion__title {
font-size: 20px;
}
.image-with-txt-collection .brick__section {
padding: 0px;
}
}
@media (max-width:1023px){
.header__mobile__button {
min-width: 32px;
}
.hero__content {
max-width: 100%;
}
.tri-three-collection p.collection-grid-item__title {
font-size: 20px;
line-height: 24px;
padding-top: 36px;
}
.collection-grid-item__subtitle {
font-size: 10px;
line-height: 16px;
padding: 2px 10px;
top: 12px;
}
.tri-a-mirror .brick__section {
padding: 20px;
border-radius: 20px;
}
.tri-a-mirror .standard__heading {
font-size: 30px;
line-height: 34px;
}
.tri-a-mirror p {
font-size: 18px;
line-height: 24px;
}
.tri-a-mirror ul {
margin: 20px 0 !important;
padding: 6px;
font-size: 16px;
}
.tri-collection-grid {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px 180px 150px;
gap: 10px;
}
.tri-collection-grid .hero__content__wrapper {
justify-content: flex-end !important;
padding: 12px;
}
.tri-collection-grid .collection-grid-item__title {
font-size: 18px;
line-height: 20px;
}
.specifations-wrapper .lens-grid {
gap: 40px;
flex-direction: column;
}
.try-specifications-section .column-wrapper {
padding: 80px 20px;
}
.tri-leans-slider .lens-grid {
flex-direction: column;
}
.tri-leans-slider .lens-content {
max-width: 100%;
width: 100%;
display: flex;
}
.tri-leans-slider .card-content {
text-align: left;
padding: 0 0 0 24px;
}
.lens-content img, .lens-content > div {
flex: 1;
}
.tri-text-banner .hero__content {
padding: 20px 20px;
margin: 0 !important;
}
.tech-feature {
max-width: calc(100% / 2 - 6px);
}
.how-it-works-icon .grid__item {
max-width: calc(100% / 2 - 8px) !important;
width: 100% !important;
}
.section-icons.how-it-works-icon .float-grid {
flex-wrap: wrap;
}
.tab-content [data-grid][data-grid-medium] [data-item] {
width: calc(100% / 2);
}
button.tab-link span {
font-size: 14px;
}
.faq-section .accordion__title {
font-size: 16px;
letter-spacing: 0 !important;
padding: 20px 0 20px;
}
.faq-section .accordion__wrapper {
border-radius: 12px;
padding: 0 20px;
}
.faq-section .accordion__body p {
font-size: 16px;
line-height: 22px;
}
.faq-section .accordion__body {
padding: 0 0 20px;
}
.image-with-txt-collection h2 {
line-height: 38px;
}
}
@media (max-width:768px){
.footer__content__inner .float-grid {
text-align: left;
}
.footer__content__inner .float-grid > div:first-child {
max-width: 300px;
width: 100%;
flex: 0 0 300px;
padding-right: 30px !important;
}
}
@media (max-width:834px){
.header__mobile {
display: flex !important;
justify-content: space-between;
}
}
@media (min-width:768px){
.desktop-hide {
display: none !important;
}
[data-thumbnails-left] .media__thumb__wrapper {
display: flex;
flex-direction: column;
gap: 0px;
}
}
@media (max-width:767px){
.grid__item.product__media__wrapper {
position: static;
top: 0;
}
.tri-three-collection .grid__item {
max-width: calc(100% / 1) !important;
margin: 0px !important;
width: 100% !important;
}
.footer__content__inner .float-grid {
text-align: left;
flex-direction: column;
gap: 40px;
}
.footer__content__inner {
padding-bottom: 40px;
}
.footer__container {
display: flex;
flex-direction: column-reverse !important;
}
.section-icons .float-grid {
flex-direction: column;
}
.jdgm-widget:not(.jdgm-medals-wrapper) .jdgm-medals .jdgm-medal, .jdgm-widget:not(.jdgm-medals-wrapper) .jdgm-medals .jdgm-medal__mono svg {
width: 40px !important;
height: 40px !important;
}
.hero__content {
padding: 0px !important;
}
.hero__title p {
font-size: 26px;
line-height: 120%;
}
.btn.btn--large, .btn.btn--long {
font-size: 14px;
line-height: 20px;
padding: 12px 15px;
letter-spacing: 0.25px !important;
margin: 16px 10px 0 0;
}
.hero__cta__wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.section-no-slider-mobile [data-grid] {
width: 100%;
gap:20px;
}
.tri-three-collection p.collection-grid-item__title {
font-size: 25px;
line-height: 28px;
padding-top: 36px;
max-width: 260px;
}
.tri-a-mirror .brick__section {
padding: 48px 20px;
border-radius: 20px;
flex-direction: column;
}
.tri-a-mirror .image__hero__frame {
border-radius: 8px;
aspect-ratio: 1;
}
.tri-a-mirror .standard__heading {
font-size: 25px;
line-height: 28px;
}
.tri-a-mirror .text__standard.text-left {
padding-top: 0;
}
.section-heading .kicker-flourished, .try-tech-section .standard__heading p, .image-with-txt-collection h2 {
font-size: 25px;
line-height: 30px;
}
.subheading, .try-tech-section .rte p {
font-size: 14px;
line-height: 20px;
}
.section-no-slider-mobile .grid__item {
margin: 0px !important;
width: 100% !important;
}
.tri-designed-for .grid__item {
width: 100% !important;
}
.tri-designed-for div[data-grid] {
flex-direction: column !important;
gap: 20px;
padding: 0 20px;
}
.tri-designed-for div[data-grid] .grid__item{
margin:0px;
}
.tri-designed-for .column-wrapper {
padding: 50px 20px 30px;
}
.section-heading {
margin-bottom: 30px;
}
.section-icons .icon__column__icon {
width: 45px;
height: 45px;
}
.grid__item:not(:first-child) .icon__column {
padding-top: 50px;
}
.section-icons {
padding: 50px 0;
}
.subfooter__items {
gap: 20px;
}
.subfooter .wrapper {
padding: 20px;
}
.footer__content__inner .float-grid>div:first-child {
max-width: 100%;
width: 100%;
flex: 0 0 100%;
padding-right: 0px !important;
}
.footer__title {
padding: 0;
border: none !important;
}
.footer__title svg{
display:none !important;
}
.footer__accordion__body {
padding: 20px 0 0 0;
}
.footer__aside {
margin-bottom: 60px;
width: 100%;
}
.tri-wherever-you-go .image__hero__frame {
aspect-ratio: 1;
}
.tri-designed-for .column__content {
bottom: 20px;
left: 20px;
width: calc(100% - 40px);
}
.tri-designed-for .column__content .accent-title-large {
font-size: 20px;
line-height: 24px;
}
.mobile-hide{
display:none;
}
.tri-discover-inovation div[data-grid] {
flex-direction: column !important;
display: flex;
gap: 20px;
padding: 0px;
margin: 0 auto;
max-width: 335px !important;
width: 100% !important;
}
.tri-discover-inovation div[data-grid] .grid__item {
margin: 0;
width: 100%;
padding: 30px 24px;
border-radius: 8px;
}
.tri-discover-inovation .accent-title-large {
font-weight: 900;
font-size: 20px;
line-height: 100%;
letter-spacing: -.75px !important;
font-family: Space Grotesk;
text-transform: uppercase;
}
.tri-discover-inovation .rte p {
font-size: 14px;
line-height: 20px;
}
.tri-discover-inovation .column__image {
position: relative;
margin-bottom: 40px;
}
.tri-discover-inovation div[data-grid] .grid__item:first-child {
background: linear-gradient(180deg, rgb(254 152 72 / 15%), hsl(4deg 70% 46% / 15%));
}
.tri-discover-inovation div[data-grid] .grid__item:nth-child(2) {
background: linear-gradient(180deg, rgb(194 197 207 / 20%), rgb(176 194 219 / 20%));
}
.tri-discover-inovation div[data-grid] .grid__item:nth-child(3) {
background: linear-gradient(180deg, rgb(243 237 161 / 50%), rgb(229 212 124 / 50%));
}
.tri-discover-inovation div[data-grid] .grid__item:nth-child(4) {
background: linear-gradient(180deg, rgb(164 117 112 / 15%), rgb(140 105 103 / 15%));
}
.tri-discover-inovation .column__image img {
mix-blend-mode: darken;
box-shadow: none !important;
overflow: hidden !important;
width: calc(100% + 4px) !important;
margin-left: -2px;
height: calc(100% + 4px) !important;
margin-top: -2px;
}
.tri-discover-inovation .wrapper {
padding-top: 50px;
padding-bottom: 50px;
}
.use_pixels_650 {
height: 450px;
}
.header__mobile__button {
min-width: 32px;
}
.tri-discover-inovation .section-padding {
padding-bottom: 30px;
}
.announcement p {
font-size: 12px;
line-height: 16px;
}
/* Drawer Css */
.announcement {
display: none;
}
.drawer__content {
top: 78px;
}
.drawer__menu .sliderow {
border: none !important;
}
.drawer__menu .sliderow__title {
font-size: 16px;
line-height: 100%;
font-weight: 900;
font-family: 'Space Grotesk';
}
/* ═══════════════════════════════════════════
CART DRAWER REDESIGN — 4-Zone Layout
═══════════════════════════════════════════ */
/* Zone 1: Header */
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #e8e8e8;
min-height: 56px;
}
.cart__drawer__title {
font-family: 'Inter Tight', 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.cart-drawer-header__count {
font-weight: 400;
font-size: 14px;
color: #666;
margin-left: 4px;
}
/* Zone 2: Free Shipping Progress */
.cart-drawer-progress {
padding: 12px 20px 0;
}
.shipping-progress {
padding-bottom: 12px;
border-bottom: 1px solid #e8e8e8;
}
.shipping-progress__bar-track {
width: 100%;
height: 4px;
background: #e8e8e8;
border-radius: 2px;
overflow: hidden;
}
.shipping-progress__bar-fill {
height: 100%;
background: #222;
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 0;
}
.shipping-progress__bar-fill--qualified {
background: #22c55e;
}
.shipping-progress__message {
font-size: 12px;
line-height: 1.4;
color: #444;
margin-top: 8px;
text-align: center;
}
.shipping-progress__icon {
color: #22c55e;
font-weight: 700;
margin-right: 4px;
}
/* Zone 3: Scrollable Body */
.cart-drawer-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 20px;
}
/* Zone 4: Sticky Footer */
.cart-drawer-footer {
border-top: 1px solid #e8e8e8;
padding: 16px 20px 20px;
background: inherit;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.cart-drawer-footer__subtotal [data-cart-subtotal] {
margin-bottom: 4px;
}
.cart-drawer-footer__total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
margin-bottom: 4px;
}
.cart-drawer-footer__total-label {
font-family: 'Inter Tight', 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.cart-drawer-footer__total-price {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 700;
}
.cart-drawer-footer__tax-note {
font-size: 11px;
color: #888;
margin: 0 0 12px;
}
.cart-drawer-footer__form {
margin: 0;
}
.cart-drawer-footer__checkout {
width: 100%;
height: 48px;
border-radius: 8px;
font-family: 'Inter Tight', 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #222;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.15s;
}
.cart-drawer-footer__checkout:hover {
background: #000;
}
.cart-drawer-footer__checkout-dot {
font-size: 18px;
line-height: 1;
opacity: 0.5;
}
/* Express checkout (Shop Pay, Apple Pay) */
.cart-drawer-footer__express {
margin-top: 10px;
}
.cart-drawer-footer__express .additional-checkout-buttons {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Trust signals */
.cart-trust {
margin-top: 16px;
text-align: center;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.cart-trust__text {
font-size: 11px;
color: #888;
margin: 0 0 8px;
letter-spacing: 0.3px;
}
.cart-trust__icons {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.cart-trust__icon {
width: 38px;
height: 24px;
opacity: 0.55;
transition: opacity 0.15s;
}
.cart-trust__icon:hover {
opacity: 0.8;
}
/* Cart notes in footer */
.cart-drawer-footer .drawer__bottom__notes {
margin-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 12px;
}
.cart-drawer-footer .accordion__title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 600;
color: #666;
}
.cart-drawer-footer .drawer__notes__input {
font-size: 13px;
padding: 8px;
border: 1px solid #e8e8e8;
border-radius: 6px;
min-height: 60px;
resize: vertical;
}
/* Ensure drawer uses flexbox for sticky footer */
.cart__drawer .drawer__content {
display: flex;
flex-direction: column;
height: 100%;
}
.cart__drawer .drawer__top {
flex-shrink: 0;
}
.cart__drawer .drawer__body,
.cart__drawer .cart-drawer-body {
flex: 1;
min-height: 0;
}
.cart__drawer .drawer__bottom,
.cart__drawer .cart-drawer-footer {
flex-shrink: 0;
}
/* Line item addons render with the same template as regular items.
The .cart-item--addon class is kept on the row for data/JS purposes
(e.g. analytics, future bundle handling) but no longer styles the row
any differently — bold product title + lighter variant text from the
default .cart__items__title / .cart__items__meta rules apply. */
/* Stock-aware quantity stepper: dim the wrapper at max stock,
visually disable the + button, surface a small "no more in stock" line. */
.quantity__button[disabled],
.quantity__button[aria-disabled="true"] {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.quantity__wrapper[data-at-max-stock="true"] {
position: relative;
}
.cart__stock-msg {
display: block;
font-size: 11px;
line-height: 1.2;
color: #999;
margin-top: 4px;
white-space: nowrap;
text-align: center;
}
/* Mobile touch targets */
@media only screen and (max-width: 768px) {
.cart-drawer-header {
padding: 12px 16px;
}
.cart-drawer-progress {
padding: 10px 16px 0;
}
.cart-drawer-body {
padding: 0 16px;
}
.cart-drawer-footer {
padding: 14px 16px 16px;
}
.cart-drawer-footer__checkout {
min-height: 48px;
}
/* Full-viewport cart drawer on mobile.
Pipeline wraps a position:fixed .drawer__content inside a static .drawer
outer element. Sizing the OUTER causes it to take its full height in
document flow (even when closed) — which pushed all page content down.
Target the INNER .drawer__content (the actual sliding panel) instead. */
#drawer-cart .drawer__content {
width: 100% !important;
max-width: 100% !important;
height: 100vh !important;
height: 100dvh !important; /* iOS: excludes home-indicator bar */
max-height: 100vh !important;
max-height: 100dvh !important;
}
/* Visible grab-handle at the top */
#drawer-cart .drawer__top.cart-drawer-header {
position: relative;
padding-top: 24px;
}
#drawer-cart .drawer__top.cart-drawer-header::before {
content: '';
position: absolute;
top: 8px; left: 50%; transform: translateX(-50%);
width: 40px; height: 4px;
background: #d0d0d0; border-radius: 2px;
pointer-events: none;
}
/* Tappable hit area covering only the grab handle — deliberately narrow and
centered so it never overlaps the close (X) button in the header corner. */
#drawer-cart .cart-drawer-swipe-zone {
position: absolute;
top: 0;
left: 50%; transform: translateX(-50%);
width: 120px; height: 24px;
z-index: 2;
cursor: grab;
touch-action: pan-y;
}
}
/* ═══ End Cart Drawer Redesign ═══ */
/* Drawer Css End*/
.specifations-wrapper .lens-grid>div {
flex: 1;
width: 100%;
}
.size-specs {
flex-direction: column;
}
.try-specifications-section .column-wrapper {
padding: 60px 20px;
}
.tri-leans-slider .lens-content {
flex-direction: column;
gap: 15px;
}
.card-content {
padding: 0;
}
.tri-leans-slider {
padding: 0;
}
.try-leans-section .tri-leans-wrapper .owl-nav button, .innovation-cards .owl-nav button {
width: 32px !important;
height: 32px !important;
}
#sync1.owl-theme .owl-prev {
left: -8px;
}
#sync1.owl-theme .owl-next {
right: -8px;
}
#sync2 .item {
width: 30px;
height: 30px;
}
.tri-leans-thumbnail .owl-item:after {
width: 36px;
height: 36px;
top: -3px;
left: -3px;
}
.tri-leans-thumbnail .owl-stage {
gap: 12px;
}
.thumbnail-spactrum {
max-width: 270px;
}
.specifations-wrapper h4 {
margin: 20px 0 10px;
font-size: 20px;
line-height: 24px;
letter-spacing: -0.5px;
}
.specifations-wrapper .lens-text p {
margin: 16px 0;
font-size: 16px;
line-height: 22px;
}
.try-innovation-section .column-wrapper {
padding: 60px 20px 30px;
}
.try-tech-section .container-layout {
padding: 0 20px 60px;
}
.try-innovation-section div[data-grid] {
padding-left: 0px;
}
.tri-text-banner .hero__content__wrapper {
padding: 20px;
}
.tri-text-banner .hero__description p {
font-size: 16px;
line-height: 22px;
}
/* [data-thumbnails-left] .media__thumb__wrapper {
display: flex;
flex-direction: row;
gap: 0px;
} */
.media__thumb {
width: 60px;
height: 60px;
margin-right: 10px !important;
margin-block-end: 0px;
}
.why-cards {
flex-direction: column;
}
.try-innovation-section .section-padding {
padding-bottom: 0px;
}
.section-icons.how-it-works-icon .icon-wrapper {
padding: 60px 20px;
}
.how-it-works-icon .grid__item {
max-width: 100% !important;
width: 100% !important;
}
button.tab-link {
padding: 8px 12px 4px !important;
}
.collection-tabs .tab-content {
padding: 0 0px !important;
}
.tab-content [data-grid][data-grid-medium] [data-item] {
width: 100%;
}
.collection-tabs .flickity-grid.flickity-disabled-mobile {
padding: 0px;
width: 100%;
margin: 0px;
}
.short-container {
padding: 60px 20px;
}
.image-with-faq-wrapper {
flex-direction: column;
gap: 10px;
}
.faq-image {
padding-right: 0px;
}
.image-with-txt-collection .text__standard {
padding-top: 20px;
padding-bottom: 0px;
}
.tri-collection-grid {
display: flex !important;
}
}
@media (max-width:512px){
.lens-specs>div {
max-width: calc(100% - 0px);
width: 100%;
}
.tech-feature {
max-width: calc(100% - 1px);
}
.px-btn {
max-width: 52px !important;
padding: 4px !important;
min-height:52px;
}
.btn--add-to-cart {
font-size: 16px;
line-height: 20px;
}
}
/* Mobile product page: kill ALL sticky + smooth-scroll to prevent bounce/jitter */
@media (max-width: 767px) {
html {
scroll-behavior: auto !important;
}
.product-single .is-sticky,
.grid__item.product__media__wrapper {
position: relative !important;
top: auto !important;
}
/* Neutralize the sticky header entirely on mobile.
The theme's Sticky JS (theme.js:2492) toggles .js__header__stuck and
.js__header__stuck--animated on scroll, which caused two separate
mobile bugs:
1. position: fixed (from .js__header__stuck) removes the header
from document flow — when the class is added past the scroll
threshold, content below jumps up by the header's height.
That's the "tiny jump as I scroll" behavior.
2. The hide-on-scroll transform (theme.css:14677) toggles 4 times
during iOS rubber-band settle at the top of the page.
We force the sticky state to be a visual no-op on mobile: position
stays static (in flow), and the transform/transition are disabled.
The JS still toggles its classes, but they have no layout impact.
Header scrolls with content — the conventional mobile UX. */
.js__header__stuck {
position: static !important;
width: auto !important;
}
.js__header__stuck--animated .theme__header,
.js__header__stuck--animated.js__header__stuck--trigger-animation .theme__header {
transform: none !important;
transition: none !important;
}
/* Kill backdrop-filter churn on sticky header.
Site is in "sticky" mode (sections/group-header.json). At iOS
scroll-top, rubber-band oscillation crosses stickUp/stickDown ~4
times (theme.js:2509), toggling .js__header__stuck on each
crossing. The theme.css:14644-14649 rule applies
backdrop-filter: blur(0) + 500ms transition on every toggle,
causing iOS Safari's GPU compositor to re-allocate the backdrop
layer 4 times — visible as a 4-beat vertical jiggle matching
the "4 times" symptom.
The :after pseudo-element at theme.css:14651-14660 also has its
own opacity transition that fires per toggle.
This block kills the backdrop-filter and its transitions only on
mobile. Desktop keeps the glassy blur effect. Does NOT touch
overscroll-behavior (that caused the sluggish feel last time). */
.js__header__stuck .theme__header,
.js__header__stuck.js__header__stuck__backdrop .theme__header {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transition: none !important;
}
.js__header__stuck .theme__header:after,
.js__header__stuck.js__header__stuck__backdrop .theme__header:after {
transition: none !important;
}
/* Collapse Klaviyo's scroll-triggered fade-in animations to ~0ms on
mobile (instead of suppressing them outright).
History — two-step lesson:
v1: { animation: none; transition: none } on every kl-private-reset-css
descendant. Killed the jiggle, but blocked the CLOSE animation —
popup became undismissable on mobile (tap X did nothing because
animationend never fired).
v2: animation: none, but only on elements with klaviyo-fadein /
klaviyo-fadeinup applied inline. Close worked, but body scroll
stayed locked after close — Klaviyo's open-state machine listens
for animationend on the OPEN animation to mark the popup "fully
open"; without that, the close handler skipped the body-overflow
cleanup step.
v3 (current): keep the animation, just set its duration to ~0. The
visual fade-in collapses to imperceptible (no jiggle), but
animationend still fires, so Klaviyo's state machine and the
scroll-lock cleanup both run normally. */
[class*="kl-private-reset-css"][style*="klaviyo-fadein"],
[class*="kl-private-reset-css"] [style*="klaviyo-fadein"] {
animation-duration: 0.001ms !important;
animation-delay: 0s !important;
}
/* SITE-WIDE ROOT CAUSE: GPU compositor layer jiggle on scroll direction
change. Diagnosed via Playwright WebKit: identity transforms and
will-change declarations create persistent GPU compositor layers
that iOS Safari re-composites on scroll direction change, causing
a visible 2-5px lag.
Primary offender: .ticker--animated (theme.css:15242) runs a
continuous infinite CSS animation with will-change: transform on
the announcement bar. Every page has it. The persistent animation
keeps a GPU layer permanently alive → iOS scroll compositor has to
re-balance on every direction change → visible jiggle.
Secondary: [data-aos] elements. AOS runs in "once" mode (theme.js
:10973) but leaves residual transform: translate3d(0,0,0) identity
transforms that still promote GPU layers.
Fix: de-promote these elements from GPU layers on mobile. Animations
on desktop are unaffected. The announcement ticker still scrolls on
mobile — we only remove will-change, which lets the browser decide
layer promotion based on actual animation needs rather than
preemptive declaration. */
.ticker--animated,
.toolbar__text.ticker--animated {
/* will-change: auto alone doesn't help — the *running* animation
itself keeps the element on a GPU layer. We have to actually
pause the animation on mobile. The announcement text stops
scrolling on mobile, which is acceptable UX (most mobile
announcement bars are static anyway). */
animation-play-state: paused !important;
will-change: auto !important;
}
[data-aos] {
will-change: auto !important;
}
[data-aos].aos-animate {
transform: none !important;
}
}
/* Mobile product page: title + lens above gallery, tight spacing */
@media (max-width: 767px) {
.product__media__wrapper > .px-lens {
padding: 0 15px 10px;
}
/* Desktop-only 3-section layout — hide on mobile (mobile uses scroll-snap carousel).
Defensive: if viewport is resized desktop→mobile without triggering a gallery
rebuild, these rules hide the stale desktop DOM. */
.trieye-gallery__main,
.trieye-gallery__lifestyle {
display: none !important;
}
/* .trieye-gallery__thumbs is already hidden on mobile via the existing
@media (max-width: 767px) rule further down this file (line ~3539). */
/* Title moved above gallery */
.trieye-mobile-title {
padding: 0 15px 0;
}
.trieye-mobile-title .product__block__title {
padding-bottom: 0 !important;
--PB: 0px !important;
}
.trieye-mobile-title .product__title {
margin-bottom: 0;
font-size: 28px;
}
.trieye-mobile-title .product__block__price {
margin-bottom: 4px;
}
.trieye-mobile-title .product__headline {
margin-bottom: 0;
}
/* "From" prefix handled globally now */
/* Remove dead space in/below gallery */
.trieye-gallery {
margin-bottom: 0;
height: auto !important;
}
.trieye-gallery__dots {
padding: 6px 0 2px;
}
/* Kill any ratio padding from theme wrapper + its viewport child. Pipeline's
theme.css sets `padding-bottom: var(--default-ratio)` on .flickity-viewport
where --default-ratio is inline `100.0%` — that reserves 100vw of blank
space BEFORE trieye-gallery JS hides the slideshow. If the JS runs late
(or fails to resolve state.color and returns early), the user sees a huge
empty area above product content. These !important overrides zero it out. */
.product__media__wrapper .flickity-lock-height,
.product__media__wrapper .product__grid--slides,
.product__media__wrapper .product__grid--slides .flickity-viewport {
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* Belt-and-suspenders: once trieye-gallery is in the DOM, the theme slideshow
is redundant — hide it. Guards against partial JS runs where JS built the
gallery but didn't apply inline display:none to the slideshow. */
.product__media__wrapper:has(.trieye-gallery) .product__grid--slides {
display: none !important;
}
/* Tighter spacing between gallery and model section */
.product__main__content .product__inner {
padding-top: 0;
}
.px-wrap {
margin-top: 0;
}
.px-wrap > .px-block:first-of-type,
#px-color-title {
margin-top: 4px !important;
}
/* Hide the original title in the configurator panel (moved above on mobile) */
.product__main__content .title-price-wrapper {
display: none;
}
/* === Compact type picker (mobile) ===
trieye-product.css mobile rule sets buttons to max-width 50% (2x2). Override
that here so the 4-column grid fills properly. */
.px-lens--swatches .px-groups {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.px-lens--swatches .px-groups button.px-group {
max-width: 100%;
width: auto;
flex: initial;
padding: 10px 2px;
min-height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.px-lens .px-group .lens-card {
padding: 0;
width: 100%;
text-align: center;
}
.px-lens .px-group .lens-card__icon {
display: none;
}
.px-lens .px-group .lens-card__name {
font-size: 9.5px;
font-weight: 700;
white-space: nowrap;
line-height: 1.1;
letter-spacing: -0.1px;
display: block;
}
.px-lens .px-group .lens-card__price {
font-size: 10px;
font-weight: 600;
opacity: 0.8;
display: block;
margin-top: 3px;
}
/* === Compact lens info panel (mobile) ===
Flatten the two-row card (header + bar-wrap) into a single flex row by
using display:contents on the two intermediate wrappers. The best-for
text flexes left; the UV400 badge is pushed right with margin-left:auto. */
.px-lens .lens-detail__pointer,
.px-lens .lens-detail__desc,
.px-lens .lens-detail__bar-label,
.px-lens .lens-detail__bar,
.px-lens .lens-detail__category {
display: none;
}
.px-lens .lens-detail {
margin-top: 8px;
}
.px-lens .lens-detail__card {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
background: transparent;
box-shadow: none;
padding: 0;
border: 0;
}
.px-lens .lens-detail__header,
.px-lens .lens-detail__bar-wrap {
display: contents;
}
.px-lens .lens-detail__best-for {
flex: 1 1 auto;
font-size: 11px;
color: #666;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.px-lens .lens-detail__best-for::after {
content: ' · ' attr(data-vlt);
opacity: 0.9;
}
.px-lens .lens-detail__bar-values {
margin-left: auto;
display: flex;
align-items: center;
}
.px-lens .lens-detail__bar-values > span:first-child {
display: none;
}
.px-lens .lens-detail__bar-uv {
background: #e6f4ea;
color: #137333;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
}
/* === Stack title / model / price vertically (mobile), left-aligned ===
Override global .title-price-wrapper flex-row (line 882) AND the deeper
.product__title__wrapper which is flex-row by default in Pipeline. */
.trieye-mobile-title.title-price-wrapper,
.trieye-mobile-title {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left;
}
.trieye-mobile-title > *,
.trieye-mobile-title .product__title__wrapper {
width: 100%;
text-align: left;
}
.trieye-mobile-title .product__title__wrapper {
display: block !important;
}
.trieye-mobile-title .product__title,
.trieye-mobile-title .product__price__wrap,
.trieye-mobile-title .product__price__main {
display: block;
width: auto;
text-align: left;
}
.px-model-line {
display: block;
width: 100%;
text-align: left;
}
/* Color-section header: hide the color title (redundant with Model line),
push Size Guide button to the right so it doesn't orphan-left. */
#px-color-title {
display: none !important;
}
/* Size Guide is moved into .px-size-info by JS on mobile.
The now-empty .px-model-header and .block-parent collapse.
Classic's .sizeguidebtn has class "hidden" by intent — honor it. */
.px-wrap .px-model-header,
.px-wrap .block-parent:empty,
.sizeguidebtn.hidden {
display: none !important;
}
.px-wrap .px-size-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.px-wrap .px-size-info .sizeguidebtn {
margin-left: auto;
white-space: nowrap;
/* Visual chip so "Size Guide" reads as a distinct action,
not as part of the variant name (e.g. "Medium (145mm) Size Guide"). */
padding: 4px 10px;
border: 1px solid #222;
border-radius: 999px;
text-decoration: none;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
background: transparent;
color: #222;
}
.px-wrap .px-size-info .sizeguidebtn:hover,
.px-wrap .px-size-info .sizeguidebtn:focus {
background: #222;
color: #fff;
}
/* Match lens-picker side inset to the rest of the configurator (swatches, mirror).
trieye-product.css sets .px-wrap horizontal padding; we zero the extra
15px padding on .px-lens so the buttons align with swatch/mirror edges. */
.product__media__wrapper > .px-lens,
.px-wrap > .px-lens {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* === Model line under the product title (mobile only) === */
.px-model-line {
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #666;
line-height: 1.4;
margin: 2px 0 4px;
}
.px-model-line:empty {
display: none;
}
/* === Tighter section rhythm (mobile) === */
.px-wrap > .px-block {
margin-top: 16px;
}
.px-wrap > .px-lens {
padding: 0 15px 12px;
}
.trieye-mobile-title {
margin-bottom: 8px;
}
}
/* "From" price prefix — works on both mobile and desktop */
[data-product-price]::before {
content: 'From ';
font-weight: 400;
font-size: 0.85em;
}
/* Desktop: ensure mobile elements don't show in gallery area */
@media (min-width: 768px) {
.product__media__wrapper > .title-price-wrapper,
.product__media__wrapper > .px-lens {
display: none !important;
}
.product__main__content .title-price-wrapper {
display: flex !important;
}
/* Hide theme's native Flickity + sidebar thumbs on desktop ONLY when
the custom .trieye-gallery is present (configurator products: View,
Classic, Clip, Spare Lens). Other products (accessories, sale,
replacement parts) have no custom gallery and rely on Flickity to
display images. The unscoped version of this rule was hiding gallery
images on those products entirely. */
.product__media__wrapper:has(.trieye-gallery) [data-product-slideshow],
.product__media__wrapper:has(.trieye-gallery) [data-thumbs-holder] {
display: none !important;
}
/* Override sticky on media wrapper — stacked grid scrolls naturally */
.product__media__wrapper {
position: relative !important;
top: auto !important;
}
/* Make right column sticky so product info stays visible while scrolling images */
.product__main__content {
position: sticky !important;
top: 100px;
align-self: flex-start;
}
}
/* TriEye Custom Gallery — replaces Flickity for filtered variant images */
.trieye-gallery {
position: relative;
width: 100%;
margin-bottom: 10px;
}
/* Desktop: 3-section layout — vertical thumb column on left + main hero on right,
with lifestyle grid spanning the full width below.
Uses CSS grid-template-areas so visual order (thumbs left of main) doesn't
need to match DOM order (JS builds main before thumbs). */
@media (min-width: 768px) {
.trieye-gallery {
display: grid;
grid-template-columns: 88px 1fr;
grid-template-areas:
"thumbs main"
"lifestyle lifestyle";
gap: 12px;
align-items: start;
}
.trieye-gallery__main { grid-area: main; }
.trieye-gallery__thumbs { grid-area: thumbs; }
.trieye-gallery__lifestyle { grid-area: lifestyle; }
.trieye-gallery__dots {
display: none;
}
/* Legacy grid track (kept in case old layout ever renders) */
.trieye-gallery__track {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
overflow: visible;
scroll-snap-type: none;
}
/* Legacy first-slide hero — scoped to __track so it doesn't affect the
new .trieye-gallery__lifestyle grid's first child */
.trieye-gallery__track > .trieye-gallery__slide:first-child {
grid-column: 1 / -1;
aspect-ratio: 4 / 3;
}
/* Generic slide (used by lifestyle grid + legacy track) */
.trieye-gallery__slide {
display: block;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1 / 1;
background: #f8f8f8;
}
.trieye-gallery__slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 10px;
}
/* Video slide */
.trieye-gallery__slide--video {
position: relative;
cursor: pointer;
}
.trieye-gallery__slide--video iframe,
.trieye-gallery__slide--video video {
width: 100%;
aspect-ratio: 1/1;
border-radius: 10px;
display: block;
}
.trieye-gallery__slide--video .trieye-play-overlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.trieye-play-overlay svg {
width: 24px; height: 24px;
fill: white;
margin-left: 3px;
}
/* ── Main hero image (section 1) ──
Source images are 1×1 (square) but the product only occupies the middle
band of the vertical space. We crop ~12% off the top and bottom via CSS
(aspect-ratio 4:3 + object-fit:cover) so the product fills more of the
visible area without altering the underlying image file.
This crop applies ONLY to the main hero — thumbnails and lifestyle grid
render the full uncropped image. */
.trieye-gallery__main {
position: relative;
aspect-ratio: 4 / 3;
background: #f7f7f7;
border-radius: 10px;
overflow: hidden;
cursor: zoom-in;
/* margin-bottom removed — grid `gap` now handles spacing to lifestyle row */
}
.trieye-gallery__main img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.2s ease;
}
.trieye-gallery__main:hover img {
transform: scale(1.015);
}
/* ── Technical thumbnail column (section 2) ──
Vertical stack on the left of the main hero. Each thumb is 80×80,
same width as the parent grid column (~88px) minus the 2px border.
`align-self: center` centers the stack vertically against the taller
main-hero column without stretching the thumbs container itself. */
.trieye-gallery__thumbs {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
align-self: center;
}
.trieye-gallery__thumb {
/* Kept as 1:1 squares — crop only applies to the main hero, thumbs show
the full image so the user can see the actual shot they're selecting. */
width: 80px;
height: 80px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
background: #f7f7f7;
border: 2px solid transparent;
padding: 0;
flex-shrink: 0;
transition: border-color 0.15s ease, transform 0.15s ease;
appearance: none;
-webkit-appearance: none;
}
.trieye-gallery__thumb:hover { transform: translateY(-1px); }
.trieye-gallery__thumb.is-active { border-color: #111; }
.trieye-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
border-radius: 0;
}
.trieye-gallery__thumb:focus-visible {
outline: none;
border-color: #EF4136;
}
/* ── Lifestyle grid (section 3) ── */
.trieye-gallery__lifestyle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* Lifestyle slides inherit .trieye-gallery__slide styling above;
no first-child full-width override (we keep a clean 2-col grid). */
/* Placeholder slots — visible "coming soon" style */
.trieye-gallery__slide--placeholder {
background: #f5f5f5;
border: 2px dashed #d0d0d0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
}
/* ── TriEye Lightbox (fullscreen gallery overlay) ── */
.trieye-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
}
.trieye-lightbox.is-open {
display: flex;
}
.trieye-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
}
.trieye-lightbox__content {
position: relative;
z-index: 1;
width: 90vw;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.trieye-lightbox__media {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.trieye-lightbox__img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 4px;
user-select: none;
-webkit-user-drag: none;
/* Pinch + drag-to-pan handled by JS; touch-action: none stops iOS
Safari from intercepting the pinch as a page-zoom. */
touch-action: none;
will-change: transform;
transition: transform 0.2s ease;
cursor: zoom-in;
}
.trieye-lightbox__img:active { cursor: grabbing; }
.trieye-lightbox__video {
width: 80vw;
height: 70vh;
max-width: 960px;
max-height: 540px;
border: none;
border-radius: 4px;
}
/* Nav buttons */
.trieye-lightbox__close,
.trieye-lightbox__prev,
.trieye-lightbox__next {
position: absolute;
z-index: 2;
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 12px;
opacity: 0.8;
transition: opacity 0.2s;
}
.trieye-lightbox__close:hover,
.trieye-lightbox__prev:hover,
.trieye-lightbox__next:hover {
opacity: 1;
}
.trieye-lightbox__close {
top: 16px;
right: 16px;
font-size: 32px;
line-height: 1;
font-weight: 300;
}
.trieye-lightbox__prev {
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.trieye-lightbox__next {
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.trieye-lightbox__counter {
position: absolute;
z-index: 2;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Gallery slides cursor hint */
@media (min-width: 768px) {
.trieye-gallery__slide {
cursor: zoom-in;
}
}
/* Mobile: horizontal scroll-snap carousel */
@media (max-width: 767px) {
.trieye-gallery__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
border-radius: 14px;
/* Prevent tallest slide from stretching all others (e.g. a 1:1 image
stretching landscape slides and leaving empty space below them). */
align-items: flex-start;
}
.trieye-gallery__track::-webkit-scrollbar {
display: none;
}
.trieye-gallery__slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
/* Force a consistent 4:3 frame on mobile so mixed aspect ratios
(some 4:3, some 1:1) don't create visual jumps between slides. */
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.trieye-gallery__slide img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
border-radius: 14px;
}
.trieye-gallery__thumbs {
display: none;
}
.trieye-gallery__dots {
display: flex;
justify-content: center;
gap: 6px;
padding: 10px 0;
}
.trieye-gallery__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0,0,0,0.2);
cursor: pointer;
transition: background 0.2s;
}
.trieye-gallery__dot.is-active {
background: #000;
}
}
/* ─── Classic — Included spare lens card + explainer modal ─────────────── */
/* Self-contained styles: the base .addon-category-btn CSS lives inside a