/* Lime Brand Hub · generated from the ChompSaw hub CSS (custom_css post 18683, block BRAND HUB BANNER) on 2026-09-15. Scoped to body.lime-hub (added by the plugin on enabled brand archives). Brand tokens and images are set inline per brand. */ /* ===== BRAND HUB BANNER · Lime 2026-09-10 · all .id- prefixed · safe to delete this whole block ===== */ .id-bnr{position:relative;min-height:300px;max-height:420px;border-radius:6px;overflow:hidden;display:flex;align-items:center;margin:0 0 22px;background-image:linear-gradient(90deg,rgba(10,20,35,.90) 0%,rgba(10,20,35,.68) 46%,rgba(10,20,35,.12) 100%),var(--id-bg,none);background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat} .id-bnr-in{position:relative;z-index:2;padding:34px 38px;max-width:580px} .id-bnr-logo-wrap{margin:0 0 15px} .id-bnr-logo{display:block;height:48px;width:auto;background:rgba(255,255,255,.96);border-radius:5px;padding:7px 12px;box-shadow:0 3px 14px rgba(0,0,0,.22)} .id-bnr-kick{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffd970;margin:0 0 7px;line-height:1.4} .id-bnr-h1{font-size:2.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.08;color:#fff;margin:0 0 10px;text-shadow:0 2px 14px rgba(0,0,0,.45)} .id-bnr-copy{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.94);margin:0 0 16px;text-shadow:0 1px 8px rgba(0,0,0,.5)} .id-bnr-cta{display:inline-block;background:#f5b800;color:#16161d !important;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:11px 19px;border-radius:4px;text-decoration:none;margin:0 8px 8px 0} .id-brand-trust{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:14px 0;border-top:1px solid #e6e9ef;border-bottom:1px solid #e6e9ef} .id-brand-trust > li{font-size:.73rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#f2f5fa;border:1px solid #dde4ee;border-radius:99px;padding:6px 13px;color:#3d4a5c} .id-brand-more{border:1px solid #e2e6ee;border-radius:5px;background:#fafbfd;margin:0 0 24px} .id-brand-more-h{font-size:.92rem;font-weight:600;padding:13px 17px;cursor:pointer;color:#1b3f7a;list-style:none} .id-brand-more-body{padding:0 17px 16px} .id-p{font-size:.93rem;line-height:1.62;margin:0 0 10px;color:#3a3f4a} .id-p:last-child{margin-bottom:0} @media (max-width:782px){.id-bnr{min-height:0;max-height:none}.id-bnr-in{padding:24px 22px;max-width:none}.id-bnr-h1{font-size:1.55rem}.id-bnr-copy{font-size:.9rem}} /* --- BRAND PAGE LAYOUT · scoped to body.tax-brand ONLY --- */ /* Verified 2026-09-10: /shop/ and /shop/?filter_brand=... carry body.woocommerce-shop and do NOT carry .tax-brand, so shop filters are untouched by these rules. */ body.lime-hub .sidebar-position-left .row > .sidebar-left{display:none !important} body.lime-hub .content.main-products-loop{width:100% !important;max-width:100% !important;flex:0 0 100% !important;left:0 !important;right:0 !important} /* --- END BRAND PAGE LAYOUT --- */ /* --- BANNER VIDEO + MOTION · Lime 2026-09-10 · additive, .id- prefixed --- */ /* Slow vertical drift of the banner photo. Range is deliberately small (44%-56%) so it reads as ambient motion, not a slideshow. Fully disabled for users who ask their OS for reduced motion. */ @keyframes id-bnr-drift{0%{background-position:center 44%,center 44%}50%{background-position:center 56%,center 56%}100%{background-position:center 44%,center 44%}} .id-bnr{animation:id-bnr-drift 26s ease-in-out infinite;justify-content:space-between;gap:26px} @media (prefers-reduced-motion:reduce){.id-bnr{animation:none}} .id-bnr-in{flex:1 1 auto} .id-bnr-media{position:relative;z-index:2;flex:0 0 42%;max-width:420px;margin-right:38px} /* Click-to-play facade. No YouTube code loads until the visitor presses play. */ .id-yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0b1320;box-shadow:0 14px 44px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2)} .id-yt-btn{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center} .id-yt-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0} .id-yt-play{position:relative;z-index:2;width:64px;height:45px;border-radius:12px;background:rgba(16,16,20,.78);display:flex;align-items:center;justify-content:center;transition:background .18s ease,transform .18s ease} .id-yt-play::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 16px;border-color:transparent transparent transparent #fff;margin-left:3px} .id-yt-btn:hover .id-yt-play,.id-yt-btn:focus-visible .id-yt-play{background:#f00000;transform:scale(1.06)} .id-yt-btn:focus-visible{outline:3px solid #ffd970;outline-offset:3px} .id-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:980px){ .id-bnr{flex-wrap:wrap;max-height:none;gap:0} .id-bnr-in{flex:1 1 100%;max-width:100%;min-width:0} .id-bnr-media{flex:1 1 100%;max-width:100%;min-width:0;margin:0 38px 32px} } @media (max-width:782px){.id-bnr-media{margin:0 22px 24px}} /* --- END BANNER VIDEO + MOTION --- */ /* --- HERO CARD · banner + trust strip welded into one unit · Lime 2026-09-10 --- */ /* .id-hero wraps .id-bnr and .id-brand-trust so the strip sits flush against the image with no gap and the whole thing rounds as a single card. */ .id-hero{border-radius:6px;overflow:hidden;margin:0 0 26px;box-shadow:0 3px 20px rgba(16,26,43,.11)} .id-hero .id-bnr{margin:0;border-radius:0} .id-hero .id-brand-trust{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;border:0;border-radius:0;background:#111d31;border-top:1px solid rgba(255,255,255,.10)} .id-hero .id-brand-trust > li{flex:1 1 0;min-width:168px;display:flex;align-items:center;gap:10px;margin:0;padding:14px 22px;font-size:.735rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.90);background:none;border:0;border-radius:0;border-left:1px solid rgba(255,255,255,.09)} .id-hero .id-brand-trust > li:first-child{border-left:0} /* tick drawn from borders, no image request */ .id-hero .id-brand-trust > li::before{content:"";flex:0 0 auto;width:6px;height:11px;border:solid #ffd970;border-width:0 2px 2px 0;transform:rotate(43deg);margin:0 5px 3px 0} @media (max-width:640px){ .id-hero .id-brand-trust > li{flex:1 1 100%;min-width:0;border-left:0;border-top:1px solid rgba(255,255,255,.09);padding:12px 20px} .id-hero .id-brand-trust > li:first-child{border-top:0} } /* --- MORE ABOUT · proper expandable instead of a thin grey bar --- */ .id-brand-more{border:1px solid #e4e8f0;border-radius:6px;background:#fff;margin:0 0 26px;overflow:hidden} .id-brand-more-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.95rem;font-weight:600;padding:15px 20px;cursor:pointer;color:#16233a;background:#f7f9fc;list-style:none;transition:background .16s ease} .id-brand-more-h::-webkit-details-marker{display:none} .id-brand-more-h:hover{background:#eaeff7} .id-brand-more-h::after{content:"";flex:0 0 auto;width:8px;height:8px;border:solid #5b6c85;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-4px;transition:transform .2s ease} .id-brand-more[open] .id-brand-more-h{background:#eef2f8;border-bottom:1px solid #e4e8f0} .id-brand-more[open] .id-brand-more-h::after{transform:rotate(-135deg);margin-top:2px} .id-brand-more-body{padding:18px 20px 20px} /* --- END HERO CARD --- */ /* --- MAKER BYLINE · Chompshop is the company, ChompSaw the product. The logo sits under the H1 behind a "by" so the two names read as maker + product instead of a contradiction. Only brand where they differ. --- */ .id-bnr-by{display:flex;align-items:center;gap:11px;margin:0 0 16px} .id-bnr-by > span{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:0 1px 6px rgba(0,0,0,.5)} .id-bnr-by .id-bnr-logo{height:34px;padding:6px 11px} /* --- END MAKER BYLINE --- */ /* --- BRAND ACCENT · per-brand colour, set inline as --id-accent --- */ .id-hero{border-top:4px solid var(--id-accent,#f5b800)} .id-hero .id-brand-trust{border-top-color:var(--id-accent,rgba(255,255,255,.10))} .id-brand-more[open] .id-brand-more-h{box-shadow:inset 3px 0 0 var(--id-accent,#f5b800)} /* --- END BRAND ACCENT --- */ /* --- NO ONE-SIDED BORDERS + BRAND PALETTE · Lime 2026-09-10 ------------------ Every single-edge rule is removed. The brand colour now arrives as a FILL on the trust strip rather than as an accent line, dividers are gone, and the open/closed split in the copy panel is done with background tone, not a rule. Colour comes from --id-accent / --id-accent-lt, set once on .id-brand. */ /* kill the accent edge on the hero card */ .id-hero{border-top:0} /* trust strip: brand fill, no top border, no dividers */ .id-hero .id-brand-trust{background:var(--id-accent,#111d31);border-top:0} .id-hero .id-brand-trust > li{border-left:0;border-top:0;color:#fff;padding:15px 24px} .id-hero .id-brand-trust > li::before{border-color:#fff} @media (max-width:640px){.id-hero .id-brand-trust > li{border-top:0;padding:12px 22px}} /* kicker keeps the brand's light tint against the photo */ .id-bnr-kick{color:var(--id-accent-lt,#ffd970)} /* --- MORE ABOUT · redesigned, no edge rules --- */ .id-brand-more{border:1px solid #e3e8f0;border-radius:8px;background:#fff;margin:0 0 26px;overflow:hidden;box-shadow:0 1px 3px rgba(16,26,43,.05)} .id-brand-more-h{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:1rem;font-weight:600;padding:16px 22px;cursor:pointer;color:#16233a;background:#fff;list-style:none;transition:background .16s ease} .id-brand-more-h:hover{background:#f7f9fc} .id-brand-more-h::after{border-color:var(--id-accent,#5b6c85)} /* open state separates by tone, not by a border-bottom */ .id-brand-more[open] .id-brand-more-h{background:#fff;box-shadow:none;border-bottom:0} .id-brand-more[open] .id-brand-more-body{background:#fbfcfe} .id-brand-more-body{padding:22px;display:flex;gap:26px;align-items:flex-start} .id-more-text{flex:1 1 auto;min-width:0} /* --- IMAGE TICKER ------------------------------------------------------------ Continuous marquee, masked to nothing at both edges so it melts into the panel instead of ending on a hard line. Images carry margin-right rather than the row carrying gap, so translating exactly -50% lands on a seamless loop point. Pauses on hover, individual image lifts on hover, stops entirely under prefers-reduced-motion. */ .id-more-media{flex:0 0 44%;min-width:0} .id-tick{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%)} .id-tick-row{display:flex;width:max-content;animation:id-tick-run 42s linear infinite} .id-tick-row img{display:block;height:154px;width:auto;margin:0 10px 0 0;border-radius:6px;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease} .id-tick-row img:hover{transform:scale(1.07);box-shadow:0 8px 24px rgba(16,26,43,.28)} .id-tick:hover .id-tick-row{animation-play-state:paused} @keyframes id-tick-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media (prefers-reduced-motion:reduce){.id-tick-row{animation:none}} @media (max-width:880px){ .id-brand-more-body{flex-direction:column;gap:20px;padding:18px} .id-more-media{flex:1 1 auto;width:100%} .id-tick-row img{height:130px} } /* --- END IMAGE TICKER --- */ /* --- SPEC PANEL · manufacturer detail, two columns, no edge rules --- */ .id-brand-more-body{display:block} .id-more-top{display:flex;gap:26px;align-items:flex-start} .id-specs{display:flex;gap:26px;margin:22px 0 0;padding:20px 0 0;background:none} .id-specs-col{flex:1 1 0;min-width:0} .id-specs-h{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--id-accent,#1b3f7a);margin:0 0 11px} .id-specs-list > div{display:flex;gap:12px;align-items:baseline;padding:8px 0;font-size:.88rem;line-height:1.5;color:#3a3f4a} .id-specs-list > div{background:none} .id-specs-list > div > span{flex:0 0 116px;font-weight:600;color:#16233a} @media (max-width:880px){ .id-more-top{flex-direction:column;gap:20px} .id-specs{flex-direction:column;gap:18px} .id-specs-list > div > span{flex:0 0 100px} } /* --- END SPEC PANEL --- */ /* --- LESSON RESOURCES · 39 hotlinked PDFs, grouped by grade band ------------- Files stay on Chompshop's CDN (verified: 200, application/pdf, CORS *, and no content-disposition so they render inline). Every link opens in a new tab, so this page stays put behind it. No one-sided borders anywhere. */ .id-res-intro{font-size:.92rem;line-height:1.62;color:#3a3f4a;margin:0 0 22px} .id-res-band{margin:0 0 24px} .id-res-band:last-child{margin-bottom:0} .id-res-band-h{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--id-accent,#1b3f7a);margin:0 0 12px} .id-lesson{background:#f6f8fc;border-radius:8px;padding:15px 18px;margin:0 0 10px} .id-lesson:last-child{margin-bottom:0} .id-lesson-h{font-size:.98rem;font-weight:600;color:#16233a;margin:0 0 3px;line-height:1.3} .id-lesson-q{font-size:.85rem;color:#5b6c85;margin:0 0 12px;line-height:1.45} .id-lesson-files{display:flex;flex-wrap:wrap;gap:8px} .id-lesson-files a{display:inline-flex;align-items:center;gap:6px;font-size:.79rem;font-weight:600;color:var(--id-accent,#1b3f7a) !important;background:#fff;border-radius:99px;padding:7px 14px;text-decoration:none !important;line-height:1.25;transition:background .15s ease,color .15s ease,transform .15s ease} .id-lesson-files a::after{content:"↗";font-size:.86em;opacity:.65} .id-lesson-files a:hover{background:var(--id-accent,#1b3f7a);color:#fff !important;transform:translateY(-1px)} .id-lesson-files a:hover::after{opacity:1} @media (max-width:880px){.id-lesson{padding:14px 15px}.id-lesson-files a{font-size:.76rem;padding:6px 12px}} /* --- END LESSON RESOURCES --- */ /* --- HERO SCALE-UP · title and maker mark given more presence --- */ .id-bnr-h1{font-size:2.65rem;line-height:1.04} .id-bnr-kick{font-size:.76rem;letter-spacing:.17em;margin:0 0 9px} .id-bnr-by > span{font-size:.74rem} .id-bnr-by .id-bnr-logo{height:44px;padding:8px 14px} @media (max-width:782px){.id-bnr-h1{font-size:1.95rem}.id-bnr-by .id-bnr-logo{height:38px}} /* --- END HERO SCALE-UP --- */ /* --- TRUST STRIP ICONS · Lime 2026-09-10 ------------------------------------- Replaces four identical CSS ticks with a real icon per claim. Each item names its icon with data-ico, so any brand can pick from the set without new CSS. Masked SVG files, tinted by currentColor, so they follow the strip's text colour on any brand fill. Falls back to the plain tick if data-ico is absent. */ .id-hero .id-brand-trust > li[data-ico]::before{ width:19px;height:19px;border:0;transform:none;margin:0 3px 0 0; background-color:currentColor; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .id-hero .id-brand-trust > li[data-ico="shield"]::before{-webkit-mask-image:url(icons/id-ico-shield.svg);mask-image:url(icons/id-ico-shield.svg)} /* only age, book, leaf and shield ever had artwork; award/units/ship are dead selectors that render a blank square. Added for brands that price in CAD. */ .id-hero .id-brand-trust > li[data-ico="cad"]::before{-webkit-mask-image:url(icons/id-ico-cad.svg);mask-image:url(icons/id-ico-cad.svg)} .id-hero .id-brand-trust > li[data-ico="age"]::before{-webkit-mask-image:url(icons/id-ico-age.svg);mask-image:url(icons/id-ico-age.svg)} .id-hero .id-brand-trust > li[data-ico="leaf"]::before{-webkit-mask-image:url(icons/id-ico-leaf.svg);mask-image:url(icons/id-ico-leaf.svg)} .id-hero .id-brand-trust > li[data-ico="book"]::before{-webkit-mask-image:url(icons/id-ico-book.svg);mask-image:url(icons/id-ico-book.svg)} /* --- END TRUST STRIP ICONS --- */ /* --- PANEL POLISH · Lime 2026-09-10 ----------------------------------------- Fixes: the two spec lists ran as bare columns of different heights so their rows never lined up and the block bottom looked ragged. They are now two self-contained cards, which removes the need for rows to align at all and gives the visual separation a divider would have. Copy gets a measure cap so it stops dropping a single word onto its own line. */ /* copy column: capped measure, stronger type, no widows */ .id-more-text{max-width:68ch} .id-brand-more .id-p{font-size:.95rem;font-weight:500;line-height:1.66;color:#2f3542;margin:0 0 13px;text-wrap:pretty} .id-brand-more .id-p:last-child{margin-bottom:0} /* spec lists as paired cards */ .id-specs{gap:20px;margin:24px 0 0;padding:0} .id-specs-col{background:#f6f8fc;border-radius:8px;padding:18px 20px 14px} .id-specs-h{margin:0 0 8px} .id-specs-list > div{padding:9px 10px;margin:0 -10px;border-radius:6px;transition:background .15s ease} .id-specs-list > div:hover{background:#fff} .id-specs-list > div > span{flex:0 0 124px} @media (max-width:880px){ .id-more-text{max-width:none} .id-specs-col{padding:16px 16px 12px} .id-specs-list > div > span{flex:0 0 104px} } /* --- END PANEL POLISH --- */ /* --- LESSONS CARD + DOWNLOADS MODAL · Lime 2026-09-10 ------------------------ Both worlds: the nine lesson names sit visible in the panel as plain indexable text, and the full 39-file list lives behind one button so it never buries the page. Modal markup is in the DOM either way. */ .id-brand-more-h{font-size:1.12rem} .id-lessons-card{background:#f6f8fc;border-radius:8px;padding:18px 20px 20px;margin:20px 0 0} .id-lessons-sub{font-size:.88rem;line-height:1.55;color:#5b6c85;margin:0 0 15px} .id-lessons-grid{display:flex;gap:22px;margin:0 0 17px} .id-lessons-col{flex:1 1 0;min-width:0} .id-lessons-col-h{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7a90;margin:0 0 9px} .id-lessons-col > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.89rem;font-weight:500;color:#2f3542;padding:6px 0;line-height:1.4} .id-lessons-col > div > span{flex:0 0 auto;font-size:.74rem;font-weight:600;color:#8996a8} .id-res-btn{display:inline-block;border:0;background:var(--id-accent,#1b3f7a);color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.03em;padding:11px 21px;border-radius:6px;cursor:pointer;font-family:inherit;transition:filter .15s ease,transform .15s ease} .id-res-btn:hover{filter:brightness(1.13);transform:translateY(-1px)} .id-res-btn:focus-visible{outline:3px solid var(--id-accent,#1b3f7a);outline-offset:3px} .id-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(10,20,35,.74)} .id-modal[hidden]{display:none} .id-modal-card{background:#fff;border-radius:10px;width:100%;max-width:920px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 26px 74px rgba(0,0,0,.42)} .id-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:#fff;flex:0 0 auto} .id-modal-t{font-size:1.06rem;font-weight:600;color:#16233a} .id-modal-x{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:8px;background:#f1f4f9;color:#3a4658;font-size:1.4rem;line-height:1;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease} .id-modal-x:hover{background:var(--id-accent,#1b3f7a);color:#fff} .id-modal-body{overflow-y:auto;padding:2px 22px 24px;flex:1 1 auto} @media (max-width:880px){ .id-lessons-grid{flex-direction:column;gap:16px} .id-modal{padding:12px} .id-modal-card{max-height:92vh} .id-res-btn{width:100%} } /* --- END LESSONS CARD + MODAL --- */ /* --- THREE-CARD DETAIL ROW · Lime 2026-09-10 -------------------------------- Box, specs and lessons now sit as three equal cards on one row instead of two rows, which is roughly a third of the previous height. In narrower columns the label/value pairs stack rather than sitting side by side, so long values like the cutting-mechanism line stop shredding into ragged wraps. */ .id-specs{gap:18px;align-items:stretch} .id-specs > .id-lessons-card,.id-specs-col{flex:1 1 0;min-width:0;margin:0;background:#f6f8fc;border-radius:8px;padding:18px 18px 16px} /* stacked label over value */ .id-specs-list > div{flex-direction:column;align-items:stretch;gap:1px;padding:7px 9px;margin:0 -9px} .id-specs-list > div > span{flex:0 0 auto;font-size:.83rem} .id-specs-list > div{font-size:.86rem;line-height:1.45} /* lessons become one narrow column, bands stacked */ .id-lessons-sub{font-size:.83rem;margin:0 0 13px} .id-lessons-grid{flex-direction:column;gap:13px;margin:0 0 15px} .id-lessons-col-h{font-size:.66rem;margin:0 0 5px} .id-lessons-col > div{font-size:.85rem;padding:3px 0} .id-lessons-col > div > span{font-size:.71rem} .id-res-btn{width:100%;text-align:center;padding:10px 14px;font-size:.79rem} @media (max-width:1100px){ .id-specs{flex-wrap:wrap} .id-specs > .id-lessons-card,.id-specs-col{flex:1 1 46%} } @media (max-width:880px){ .id-specs{flex-direction:column;flex-wrap:nowrap} .id-specs > .id-lessons-card,.id-specs-col{flex:1 1 auto} .id-lessons-grid{flex-direction:row;flex-wrap:wrap;gap:18px} .id-lessons-col{flex:1 1 40%} } /* --- END THREE-CARD DETAIL ROW --- */ /* --- HERO STACK SPACING · copy sits between headline and maker mark --- */ .id-bnr-copy{margin:0 0 18px} .id-bnr-by{margin:0} /* --- END HERO STACK SPACING --- */ /* --- TICKER BLEED · Lime 2026-09-10 ------------------------------------------ The ticker was a fixed 154px strip in a flex column, so whenever the copy ran taller it left dead space underneath. It is now absolutely positioned to the full height of the copy block, which means it always matches the text exactly, and it runs wider so it passes under the text. The mask fades it to nothing just before the copy starts, so it reads as tucked behind without ever sitting under a word. */ .id-more-top{position:relative;display:block;min-height:262px} .id-more-media{position:absolute;left:0;top:0;bottom:0;width:60%;flex:none;max-width:none;min-width:0} .id-tick{height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 44%,transparent 76%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 44%,transparent 76%)} .id-tick-row{height:100%;align-items:stretch} .id-tick-row img{height:100%;width:auto;border-radius:8px;margin:0 12px 0 0} .id-more-text{position:relative;z-index:2;margin-left:46%;width:54%;max-width:none} @media (max-width:880px){ .id-more-top{position:static;display:flex;flex-direction:column;gap:20px;min-height:0} .id-more-media{position:static;width:100%;height:auto} .id-tick{height:auto} .id-tick-row{height:auto} .id-tick-row img{height:132px} .id-more-text{margin-left:0;width:100%} } /* --- END TICKER BLEED --- */ /* --- TABBED DETAIL · Lime 2026-09-10 ----------------------------------------- Replaces the three side-by-side cards. Those were forced to equal height, so the shortest ran 182px of dead space while the longest had 16px, and the row cost ~470px of page whatever you did. One panel at a time removes the height mismatch by construction and cuts the footprint to roughly a third. All three panels stay in the DOM, so nothing is lost to search or to screen readers. */ .id-tabs{margin:24px 0 0} .id-tabbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .id-tab{border:0;background:#eef2f8;color:#3a4658;font-family:inherit;font-size:.85rem;font-weight:600;padding:11px 18px;border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease} .id-tab:hover{background:#e3e9f4} .id-tab[data-id-active]{background:var(--id-accent,#1b3f7a);color:#fff} .id-tab:focus-visible{outline:3px solid var(--id-accent,#1b3f7a);outline-offset:3px} .id-tabpanel{background:#f6f8fc;border-radius:8px;padding:20px 22px} .id-tabpanel[hidden]{display:none} /* full-width panel, so label and value sit side by side again */ .id-tabpanel .id-specs-list > div{flex-direction:row;align-items:baseline;gap:16px;padding:9px 10px;font-size:.9rem} .id-tabpanel .id-specs-list > div > span{flex:0 0 150px;font-size:.9rem} .id-tabpanel .id-lessons-grid{flex-direction:row;gap:26px;margin:0 0 16px} .id-tabpanel .id-lessons-sub{font-size:.89rem;margin:0 0 15px} .id-tabpanel .id-lessons-col-h{font-size:.7rem} .id-tabpanel .id-lessons-col > div{font-size:.89rem;padding:5px 0} .id-tabpanel .id-res-btn{width:auto;padding:11px 21px;font-size:.82rem} @media (max-width:880px){ .id-tab{flex:1 1 auto;text-align:center;font-size:.8rem;padding:10px 12px} .id-tabpanel{padding:16px} .id-tabpanel .id-specs-list > div{flex-direction:column;gap:1px} .id-tabpanel .id-specs-list > div > span{flex:0 0 auto} .id-tabpanel .id-lessons-grid{flex-direction:column;gap:16px} .id-tabpanel .id-res-btn{width:100%} } /* --- END TABBED DETAIL --- */ /* --- PANEL POLISH ROUND 2 · Lime 2026-09-10 --------------------------------- 1. Copy was top-aligned against a taller image column. .id-more-top is now a flex box whose only in-flow child is the copy (the ticker is absolute), so align-items:center genuinely centres it against the images. 2. Copy sized up. 3. Ticker widened so it carries further under the text. 4. The tab panels ran full width while a five-row list used only the left half, stranding a huge empty right side. Rows now flow into two balanced columns on wide screens. */ .id-more-top{display:flex;align-items:center;min-height:334px} .id-more-media{width:66%} .id-tick{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 46%,transparent 74%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 46%,transparent 74%)} .id-more-text{margin-left:50%;width:50%} .id-brand-more .id-p{font-size:1rem;line-height:1.68;margin:0 0 14px} @media (min-width:1100px){ .id-tabpanel .id-specs-list{columns:2;column-gap:46px} .id-tabpanel .id-specs-list > div{break-inside:avoid;-webkit-column-break-inside:avoid} } @media (max-width:880px){ .id-more-top{display:flex;flex-direction:column;align-items:stretch;min-height:0} .id-more-media{width:100%} .id-more-text{margin-left:0;width:100%} .id-brand-more .id-p{font-size:.95rem} .id-tabpanel .id-specs-list{columns:auto} } /* --- END PANEL POLISH ROUND 2 --- */ /* --- COPY SIZE · root font is 14px here, so these are px not rem --- */ .id-brand-more .id-p{font-size:15.5px;line-height:1.7;margin:0 0 15px} .id-tabpanel .id-specs-list > div{font-size:14.5px} .id-tabpanel .id-specs-list > div > span{font-size:14.5px} .id-tabpanel .id-lessons-col > div{font-size:14.5px} .id-tabpanel .id-lessons-sub{font-size:14px} @media (max-width:880px){.id-brand-more .id-p{font-size:14.5px}} /* --- END COPY SIZE --- */ /* --- TIGHTEN · Lime 2026-09-10 ----------------------------------------------- The detail block had grown taller than the product grid it sits above, which is backwards for a shop page. The tab bar moves into the copy column beside the image, using space that was empty, and the panel opens full width below. Padding and row rhythm pulled in throughout. */ .id-more-top{min-height:306px} .id-brand-more .id-p{margin:0 0 12px} .id-more-text .id-tabbar{margin:18px 0 0} .id-tabs{margin:14px 0 0} .id-tab{padding:9px 15px;font-size:13.5px} .id-tabpanel{padding:15px 18px} .id-tabpanel .id-specs-list > div{padding:6px 10px} .id-tabpanel .id-lessons-col > div{padding:4px 0} .id-tabpanel .id-lessons-sub{margin:0 0 12px} .id-tabpanel .id-lessons-grid{margin:0 0 13px} .id-brand-more-body{padding:18px 22px 20px} @media (max-width:880px){ .id-more-text .id-tabbar{margin:16px 0 0} .id-tabpanel{padding:14px} } /* --- END TIGHTEN --- */ /* --- LESSONS PANEL SLIMMED · Lime 2026-09-10 -------------------------------- Lessons is the panel that opens by default, so it is the one that has to earn its height. Intro condensed to one line, grade columns tightened, file counts pulled in beside the titles, button reduced to a link-weight control. */ .id-tabpanel[data-id-panel="lessons"]{padding:15px 18px 16px} .id-tabpanel .id-lessons-sub{font-size:13px;color:#6b7a90;margin:0 0 11px;line-height:1.5} .id-tabpanel .id-lessons-grid{gap:30px;margin:0 0 12px} .id-tabpanel .id-lessons-col-h{font-size:10.5px;letter-spacing:.11em;color:#8996a8;margin:0 0 6px} .id-tabpanel .id-lessons-col > div{font-size:13.5px;padding:3px 0;gap:12px} .id-tabpanel .id-lessons-col > div > span{font-size:11px;color:#98a4b4} .id-tabpanel .id-res-btn{background:none;color:var(--id-accent,#1b3f7a);padding:4px 0;font-size:13px;text-decoration:underline;text-underline-offset:3px} .id-tabpanel .id-res-btn:hover{background:none;filter:none;transform:none;opacity:.72} /* --- END LESSONS PANEL SLIMMED --- */ /* --- SHRINK TO MATCH HERO · Lime 2026-09-10 --------------------------------- Panel measured 630px against a 349px hero. The copy was the cause: 12 lines in a 725px column. Widening the column and easing the leading drops it to about 8, which is the bulk of the saving. Rest comes off padding and the lessons rhythm. */ .id-more-media{width:60%} .id-tick{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 48%,transparent 78%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 48%,transparent 78%)} .id-more-text{margin-left:44%;width:56%} .id-brand-more .id-p{font-size:15px;line-height:1.6;margin:0 0 11px} .id-more-top{min-height:258px} .id-more-text .id-tabbar{margin:15px 0 0} .id-brand-more-h{padding:13px 22px;font-size:1.06rem} .id-brand-more-body{padding:15px 22px 17px} .id-tabs{margin:12px 0 0} .id-tabpanel[data-id-panel="lessons"]{padding:13px 16px 14px} .id-tabpanel .id-lessons-sub{margin:0 0 9px} .id-tabpanel .id-lessons-grid{margin:0 0 10px;gap:26px} .id-tabpanel .id-lessons-col > div{padding:2px 0} @media (max-width:880px){ .id-more-media{width:100%} .id-more-text{margin-left:0;width:100%} .id-brand-more .id-p{font-size:14.5px} } /* --- END SHRINK TO MATCH HERO --- */ /* --- LESSONS PANEL, LEANER STILL · Lime 2026-09-10 -------------------------- The downloads control moves onto the intro line instead of holding a row of its own, and the grade rhythm tightens. Same nine lessons, same 39 files, roughly a third less height. */ .id-tabpanel .id-lessons-sub{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 20px;font-size:12.5px;margin:0 0 10px} .id-tabpanel .id-lessons-sub > .id-sub-t{flex:1 1 auto;min-width:0} .id-tabpanel .id-lessons-sub .id-btn-wrap{flex:0 0 auto} .id-tabpanel .id-lessons-sub .id-res-btn{font-size:12.5px;padding:0} .id-tabpanel .id-lessons-grid{gap:24px;margin:0} .id-tabpanel .id-lessons-col-h{font-size:10px;margin:0 0 4px} .id-tabpanel .id-lessons-col > div{font-size:13px;padding:1.5px 0} .id-tabpanel .id-lessons-col > div > span{font-size:10.5px} .id-tabpanel[data-id-panel="lessons"]{padding:12px 16px 13px} @media (max-width:880px){ .id-tabpanel .id-lessons-sub{justify-content:flex-start} } /* --- END LESSONS PANEL, LEANER STILL --- */ /* --- TRUST STRIP ALIGNMENT · Lime 2026-09-10 -------------------------------- Each claim sits in an equal-width cell but was left-aligned inside it, so the four read as ragged rather than evenly spaced. Icon and label are now centred as a pair within their own cell. Dividers are drawn as a positioned ::after rule between cells, not as a border on one side of an element. ::before is already the icon. They are dropped on mobile, where the cells stack. */ .id-hero .id-brand-trust > li{justify-content:center;position:relative} .id-hero .id-brand-trust > li::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:rgba(255,255,255,.24)} .id-hero .id-brand-trust > li:last-child::after{display:none} @media (max-width:640px){ .id-hero .id-brand-trust > li{justify-content:flex-start} .id-hero .id-brand-trust > li::after{display:none} } /* --- END TRUST STRIP ALIGNMENT --- */ /* --- MAX WIDTH ON BIG SCREENS · Lime 2026-09-10 ------------------------------ Removing the sidebar set the content to 100%, which on a 2560px monitor gave a 2455px hero and 178 characters per line of copy. The theme's own container caps at 1440px; this uses 1520 because the sidebar is gone and the space is ours, and caps the product grid on the same line so the hero and the tiles stay flush instead of one running wider than the other. Scoped to the brand page only, same as the sidebar rule it corrects. */ body.lime-hub .content.main-products-loop{max-width:1520px !important;margin-left:auto !important;margin-right:auto !important;float:none !important} /* belt and braces: copy never outruns a comfortable measure even if the cap moves */ .id-more-text{max-width:840px} .id-tabpanel .id-specs-list{max-width:1400px} /* --- END MAX WIDTH ON BIG SCREENS --- */ /* --- TAB BAR AIR · buttons were crowding the last line of copy --- */ .id-more-text .id-tabbar{margin:22px 0 0} /* --- END TAB BAR AIR --- */ /* --- LESSON LIST SIMPLIFIED · Lime 2026-09-10 -------------------------------- The file count was pushed to the far edge of a wide column by space-between, so it read as a stranded number rather than a property of the lesson beside it. It now sits directly after the title. Band headings shortened to match. Ticker height reduced with it. */ .id-more-top{min-height:212px} .id-tabpanel .id-lessons-col > div{justify-content:flex-start;gap:9px;align-items:baseline;padding:2.5px 0} .id-tabpanel .id-lessons-col > div > span{flex:0 0 auto;font-size:10.5px;font-weight:600;color:#9aa6b6;letter-spacing:.02em} .id-tabpanel .id-lessons-col-h{font-size:10.5px;letter-spacing:.13em;color:#8b98a9;margin:0 0 6px} .id-tabpanel .id-lessons-grid{gap:34px} /* --- END LESSON LIST SIMPLIFIED --- */ /* --- BUTTONS STACKED BESIDE THE COPY · Lime 2026-09-10 ---------------------- The tab bar moves out of the copy block and becomes its own column to the right, stacked vertically. .id-more-top gets padding-left instead of the copy carrying a margin, which keeps the absolutely positioned ticker pinned to the left edge (an abspos child resolves against the padding box, so padding does not shift it). */ .id-more-top{display:flex;align-items:center;gap:26px;padding-left:44%;min-height:212px} .id-more-text{margin-left:0;width:auto;flex:1 1 auto;min-width:0;max-width:820px} .id-more-top > .id-tabbar{flex:0 0 210px;flex-direction:column;align-items:stretch;gap:8px;margin:0} .id-more-top > .id-tabbar .id-btn-wrap{width:100%} .id-more-top > .id-tabbar .id-tab{width:100%;text-align:left;padding:11px 15px} @media (max-width:980px){ .id-more-top{flex-wrap:wrap} .id-more-top > .id-tabbar{flex:1 1 100%;flex-direction:row;margin:16px 0 0} .id-more-top > .id-tabbar .id-btn-wrap{width:auto} .id-more-top > .id-tabbar .id-tab{width:auto;text-align:center} } @media (max-width:880px){ .id-more-top{padding-left:0;flex-direction:column;align-items:stretch;gap:20px} .id-more-top > .id-tabbar{margin:0} .id-more-top > .id-tabbar .id-tab{flex:1 1 auto} } /* --- END BUTTONS STACKED BESIDE THE COPY --- */ /* --- AUTHORISED RESELLER BADGE · Lime 2026-09-10 ----------------------------- Sits on the byline row, directly after the maker's mark, because that is what it qualifies: this is their brand, and we are authorised to sell it. Confirmed by the client 2026-09-10 as true for every brand Andy carries, so this is a template element, not a ChompSaw one-off. Icon is a masked SVG tinted by the brand's light accent. */ .id-bnr-by{flex-wrap:wrap;gap:11px 13px} .id-bnr-auth{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.15);border-radius:99px;padding:7px 15px 7px 12px;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.35)} .id-bnr-auth::before{content:"";flex:0 0 auto;width:15px;height:15px;background-color:var(--id-accent-lt,#ffd970);-webkit-mask-image:url(icons/id-ico-verified.svg);mask-image:url(icons/id-ico-verified.svg);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} @media (max-width:782px){.id-bnr-auth{font-size:10px;padding:6px 12px 6px 10px}} /* --- END AUTHORISED RESELLER BADGE --- */ /* --- HERO SHOP CTA · Lime 2026-09-11 ---------------------------------------- There was no buying action in the hero at all. Sits under the copy, above the maker byline, in the brand's own colour. Scoped to .id-bnr so it cannot leak. */ .id-bnr-cta-wrap{margin:0 0 16px} .id-bnr .id-bnr-cta{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:inherit; background:var(--id-accent,#f5b800);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.04em; padding:13px 24px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.28); transition:filter .16s ease,transform .16s ease} .id-bnr .id-bnr-cta:hover{filter:brightness(1.12);transform:translateY(-1px)} .id-bnr .id-bnr-cta:focus-visible{outline:3px solid #fff;outline-offset:3px} .id-bnr .id-bnr-cta::after{content:"↓";font-size:1.05em;opacity:.85} @media (max-width:782px){.id-bnr .id-bnr-cta{width:100%;justify-content:center;padding:13px 18px}} /* --- END HERO SHOP CTA --- */ /* --- COMPARISON TABLE · Lime 2026-09-11 -------------------------------------- Fourth tab. All three ChompSaw listings carried the SAME description, so a buyer saw three prices with nothing to justify stepping up. Contents verified against Chompshop's own catalogue. Prices are NOT hardcoded here: the snippet reads them from the product tiles on this same page, so they can never disagree with a live promotion. */ .id-cmp-note{font-size:13px;line-height:1.55;color:#5b6c85;margin:0 0 14px} .id-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table.id-cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px} table.id-cmp thead th{text-align:center;padding:10px 12px;font-weight:700;color:#16233a;vertical-align:bottom;font-size:13.5px} table.id-cmp thead th:first-child{text-align:left;color:#6b7a90;font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase} table.id-cmp .id-cmp-price{display:block;font-weight:800;font-size:16px;color:var(--id-accent,#1b3f7a);margin-top:3px} table.id-cmp tbody th{text-align:left;font-weight:500;color:#2f3542;padding:10px 12px 10px 0;line-height:1.45} table.id-cmp tbody td{text-align:center;padding:10px 12px;color:#3a3f4a} table.id-cmp tbody tr:nth-child(odd) th,table.id-cmp tbody tr:nth-child(odd) td{background:#fff} table.id-cmp td span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} table.id-cmp td.id-y::before{content:"";display:inline-block;width:7px;height:12px;border:solid var(--id-accent,#1b3f7a);border-width:0 2.5px 2.5px 0;transform:rotate(43deg)} table.id-cmp td.id-n::before{content:"";display:inline-block;width:12px;height:2px;background:#c3cbd7;vertical-align:middle} /* .id-cmp-v: a visible detail under the tick, for bundles that differ by version rather than by presence (RA2 Pro vs RA3, 39 vs 59 inch). Plain cells keep the screen-reader-only label above. */ table.id-cmp td span.id-cmp-v{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin-top:5px;font-size:12.5px;line-height:1.3;color:#5b6472} @media (max-width:880px){table.id-cmp{font-size:12.5px}table.id-cmp thead th{padding:8px 8px}table.id-cmp tbody td{padding:8px}} /* --- END COMPARISON TABLE --- */ /* --- CTA ON THE BYLINE ROW · Lime 2026-09-11 --------------------------------- The Shop button sat on a row of its own between the copy and the byline, which read as stranded. It now sits inline with the maker mark and the reseller badge, so the hero has one row of credentials and actions instead of two competing blocks. Smaller than before, because it no longer has to carry a whole row. */ .id-bnr-by{align-items:center} .id-bnr .id-bnr-cta{padding:10px 20px;font-size:12.5px;box-shadow:0 3px 12px rgba(0,0,0,.26)} .id-bnr .id-bnr-cta::after{font-size:1em;margin-left:1px} @media (max-width:782px){ .id-bnr-by{gap:9px 10px} .id-bnr .id-bnr-cta{width:auto;padding:10px 18px} } /* --- END CTA ON THE BYLINE ROW --- */ /* --- BYLINE ROW FIT · Lime 2026-09-11 ---------------------------------------- Measured: "by" 15 + logo 154 + badge 191 + CTA 136 + gaps 39 = ~535px against a 504px content width, so the CTA wrapped onto its own line. Widening the copy block and tightening the badge brings it to ~500px and onto one row. */ .id-bnr-in{max-width:660px} .id-bnr-by{gap:10px 11px} .id-bnr-auth{font-size:10px;letter-spacing:.06em;padding:6px 12px 6px 10px} .id-bnr-auth::before{width:13px;height:13px} .id-bnr-by .id-bnr-logo{height:40px;padding:7px 12px} @media (max-width:980px){.id-bnr-in{max-width:none}} /* --- END BYLINE ROW FIT --- */ /* --- LOGO IS THE SHOP BUTTON · Lime 2026-09-11 ------------------------------- Two separate controls (logo pill + Shop Now button) read as clutter on one row. They are now a single control: the white pill holds the maker's mark and the action together, so it reads as "shop Chompshop" rather than as a logo sitting next to an unrelated button. */ .id-bnr-shop{display:inline-flex;align-items:center;gap:0;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.96);border-radius:6px;overflow:hidden;font-family:inherit; box-shadow:0 3px 14px rgba(0,0,0,.24);transition:transform .16s ease,box-shadow .16s ease} .id-bnr-shop:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.3)} .id-bnr-shop:focus-visible{outline:3px solid #fff;outline-offset:3px} /* the logo sits inside the control now, so it loses its own pill */ .id-bnr-shop .id-bnr-logo{height:26px;background:none;border-radius:0;padding:0;margin:0 0 0 14px;box-shadow:none} .id-bnr-shop-t{display:inline-flex;align-items:center;gap:7px;margin-left:13px;padding:11px 16px 11px 13px; background:var(--id-accent,#1b3f7a);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; align-self:stretch} .id-bnr-shop-t::after{content:"↓";font-size:1.05em;opacity:.85} .id-bnr-shop:hover .id-bnr-shop-t{filter:brightness(1.12)} @media (max-width:782px){ .id-bnr-shop .id-bnr-logo{height:23px;margin-left:11px} .id-bnr-shop-t{font-size:10.5px;padding:10px 13px 10px 11px;margin-left:10px} } /* --- END LOGO IS THE SHOP BUTTON --- */ /* --- RESELLER BADGE: TOP-LEFT CORNER · Lime 2026-09-11 ----------------------- Sitting in the byline row it competed with the Shop control, because one is a credential and the other is an action. It is now a corner stamp on the hero itself: flush to the top-left, squared on the corner it touches so it reads as attached to the card rather than floating on it. Direct child of .id-bnr, so it positions against the hero box and not the vertically-centred copy. */ .id-bnr-cred{position:absolute;top:0;left:0;z-index:4} .id-bnr-cred .id-bnr-auth{border-radius:0 0 7px 0;padding:9px 15px 9px 12px; background:rgba(255,255,255,.15);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); font-size:10px;letter-spacing:.1em} .id-bnr-cred .id-bnr-auth::before{width:13px;height:13px} /* the copy stack needs headroom so the H1 never runs under the stamp */ .id-bnr-in{padding-top:52px} @media (max-width:782px){ .id-bnr-cred .id-bnr-auth{font-size:9.5px;padding:8px 12px 8px 10px} .id-bnr-in{padding-top:46px} } /* --- END RESELLER BADGE CORNER --- */ /* --- 3-UP GRID + INSET BADGE · Lime 2026-09-11 ------------------------------- ChompSaw has 3 products in a 5-up grid, which left two empty slots on every row. Verified safe to do in CSS alone: the theme floats the tiles with plain percentage widths, there is no isotope/masonry JS positioning them and no inline styles to fight. Scoped to this one brand, so every other archive and the shop keep their 5-up layout. The badge also lifts off the corner and rounds fully, since an inset element reading as a squared-off tab makes no sense. */ body.lime-hub .products.row-count-5 > .product{ width:33.3333% !important;max-width:33.3333% !important;flex:0 0 33.3333% !important} @media (max-width:991px){ body.lime-hub .products.row-count-5 > .product{width:50% !important;max-width:50% !important;flex:0 0 50% !important} } @media (max-width:575px){ body.lime-hub .products.row-count-5 > .product{width:100% !important;max-width:100% !important;flex:0 0 100% !important} } .id-bnr-cred{top:16px;left:16px} .id-bnr-cred .id-bnr-auth{border-radius:99px;padding:9px 16px 9px 13px} .id-bnr-in{padding-top:64px} @media (max-width:782px){ .id-bnr-cred{top:12px;left:12px} .id-bnr-in{padding-top:56px} } /* --- END 3-UP GRID + INSET BADGE --- */ /* --- 3-UP GRID, CORRECTED SELECTOR · Lime 2026-09-11 ------------------------- The first attempt used a child combinator, but the theme wraps the tiles in an .ajax-content div, so .products > .product never matched. Descendant selector instead. Still scoped to this one brand. */ body.lime-hub .products .product{ width:33.3333% !important;max-width:33.3333% !important;flex:0 0 33.3333% !important} @media (max-width:991px){ body.lime-hub .products .product{width:50% !important;max-width:50% !important;flex:0 0 50% !important} } @media (max-width:575px){ body.lime-hub .products .product{width:100% !important;max-width:100% !important;flex:0 0 100% !important} } /* --- END 3-UP GRID CORRECTED --- */ /* --- HERO AWARDS + PANEL BACKGROUND + SPACING · Lime 2026-09-11 -------------- Awards are real and verifiable: TIME Best Inventions 2025 has a dedicated ChompSaw entry, Fast Company Innovation by Design 2025 is a listed win, and the 30,000+ figure is TIME's own reporting. Third-party credentials, not our claims, and no competitor in this market is using them. */ .id-bnr-awards{display:flex;flex-wrap:wrap;gap:7px 8px;margin:14px 0 0} .id-bnr-awards span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9); background:rgba(255,255,255,.13);border-radius:4px;padding:5px 10px;white-space:nowrap; text-shadow:0 1px 5px rgba(0,0,0,.4)} .id-bnr-awards span::before{content:"";flex:0 0 auto;width:4px;height:4px;border-radius:50%; background:var(--id-accent-lt,#ffd970)} @media (max-width:782px){.id-bnr-awards span{font-size:9.5px;padding:4px 8px}} /* the brand's own photo, faded almost out, so each hub feels distinct without costing legibility or another image request (this file is already cached from the hero) */ .id-brand-more{background-image:linear-gradient(rgba(255,255,255,.965),rgba(255,255,255,.975)),var(--id-bg-soft,none); background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat} .id-brand-more[open] .id-brand-more-body{background:rgba(255,255,255,.55)} .id-brand-more-h{background:transparent} .id-brand-more-h:hover{background:rgba(255,255,255,.6)} /* breathing room under the detail block now that it ends the page */ .id-below-loop{margin:34px 0 56px} .id-below-loop .id-brand-more{margin-bottom:0} @media (max-width:782px){.id-below-loop{margin:24px 0 40px}} /* --- END HERO AWARDS + PANEL BACKGROUND --- */ /* --- AWARD CHIPS ARE LINKS · Lime 2026-09-11 --------------------------------- All three claims verified at source 2026-09-11: TIME Best Inventions (Oct 9 2025, Leslie Horn Peterson), Fast Company Innovation by Design (Sep 15 2025, Mark Wilson), and the 30,000 figure from that same Fast Company piece ("a $250 creativity machine that's sold more than 30,000 units online"). The two awards now link to their sources, because an unlinked badge is an assertion and a linked one is evidence. "worldwide" was added to the units figure so it cannot read as our own sales. */ .id-bnr-awards a,.id-bnr-awards span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px; font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9) !important; background:rgba(255,255,255,.13);border-radius:4px;padding:5px 10px;white-space:nowrap; text-shadow:0 1px 5px rgba(0,0,0,.4);text-decoration:none !important;transition:background .15s ease} .id-bnr-awards a::before,.id-bnr-awards span::before{content:"";flex:0 0 auto;width:4px;height:4px; border-radius:50%;background:var(--id-accent-lt,#ffd970)} .id-bnr-awards a::after{content:"↗";font-size:.9em;opacity:.6;margin-left:1px} .id-bnr-awards a:hover{background:rgba(255,255,255,.26);color:#fff !important} .id-bnr-awards a:hover::after{opacity:1} .id-bnr-awards a:focus-visible{outline:2px solid #fff;outline-offset:2px} /* --- END AWARD CHIPS ARE LINKS --- */ /* --- HERO BREATHING ROOM · Lime 2026-09-11 ----------------------------------- Measured the cramping rather than guessing at it: text column 660px, minus 76px padding = 584px of usable width award chips need 725px -> wrapped onto two rows, looked broken and there were 352px of dead space sitting between the text and the video So the column widens into space that was already empty. Nothing is squeezed and the video is untouched. Hero also gains height: the stack is 275px of content in a 326px box with 64px of top padding, which is what made it feel stuffed. */ .id-bnr{min-height:404px} .id-bnr-in{max-width:880px;padding:60px 38px 34px} /* vertical rhythm through the stack */ .id-bnr-kick{margin:0 0 11px} .id-bnr-h1{margin:0 0 13px} .id-bnr-copy{margin:0 0 17px} .id-bnr-awards{margin:0 0 18px;gap:8px} .id-bnr-by{margin:0} @media (max-width:1200px){ .id-bnr-in{max-width:none} } @media (max-width:980px){ .id-bnr{min-height:0} .id-bnr-in{padding:58px 26px 26px} } /* --- END HERO BREATHING ROOM --- */ /* --- CHIP ICONS + 4-UP GRID · Lime 2026-09-11 -------------------------------- Three chips of pure uppercase text read as a wall. Each now carries a masked icon: a medal for the two awards, a shipping box for the units figure. Same mask-plus-currentColor approach as the trust strip, so the icons take the chip's own colour and need no per-brand CSS. Grid moves to 4-up because Andy added the Table Accessories Set today, which left an orphan tile on row two. */ .id-bnr-awards a[data-ico]::before,.id-bnr-awards span[data-ico]::before{ width:13px;height:13px;border-radius:0;background-color:var(--id-accent-lt,#ffd970); -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .id-bnr-awards [data-ico="award"]::before{-webkit-mask-image:url(icons/id-ico-award.svg);mask-image:url(icons/id-ico-award.svg)} .id-bnr-awards [data-ico="units"]::before{-webkit-mask-image:url(icons/id-ico-units.svg);mask-image:url(icons/id-ico-units.svg)} body.lime-hub .products .product{ width:25% !important;max-width:25% !important;flex:0 0 25% !important} @media (max-width:1200px){ body.lime-hub .products .product{width:33.3333% !important;max-width:33.3333% !important;flex:0 0 33.3333% !important} } @media (max-width:991px){ body.lime-hub .products .product{width:50% !important;max-width:50% !important;flex:0 0 50% !important} } @media (max-width:575px){ body.lime-hub .products .product{width:100% !important;max-width:100% !important;flex:0 0 100% !important} } /* --- END CHIP ICONS + 4-UP GRID --- */ /* 2026-09-18: the 4-up rule above is hardcoded for every hub. Follow the loop's own row-count instead, so `loop_columns` in a brand config (which sets row-count-N) takes effect. Hubs without it render row-count-5 and keep 4-up. The sticky product bar (.id-stuck) keeps its own layout. */ @media (min-width:1201px){ body.lime-hub .products.row-count-3:not(.id-stuck) .product{width:33.3333% !important;max-width:33.3333% !important;flex:0 0 33.3333% !important} body.lime-hub .products.row-count-2:not(.id-stuck) .product{width:50% !important;max-width:50% !important;flex:0 0 50% !important} } /* --- VIDEO HOVER PREVIEW + EXPAND · Lime 2026-09-11 -------------------------- Rest: poster only, no Google code. Hover: muted preview in place, with a subtle lift so it reads as interactive. Click: grows to fill the hero height and unmutes. The still is always the banner; the video is enhancement on top, per the video-hero-banner playbook. */ .id-bnr-media{transition:flex-basis .42s cubic-bezier(.16,1,.3,1),max-width .42s cubic-bezier(.16,1,.3,1)} .id-yt{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease} .id-yt-previewing{transform:scale(1.02);box-shadow:0 16px 48px rgba(0,0,0,.55)} .id-yt-previewing .id-yt-btn{opacity:0;pointer-events:none;transition:opacity .25s ease} /* click-to-expand: the video takes the hero's height, copy makes room */ .id-bnr-media--expanded{flex:0 0 56% !important;max-width:640px !important} .id-yt-expanded{transform:none;box-shadow:0 20px 60px rgba(0,0,0,.6)} .id-bnr-media--expanded + .id-bnr-in,.id-bnr-in:has(~ .id-bnr-media--expanded){max-width:880px} /* the poster must not sit above the playing frame */ .id-yt iframe{z-index:2} .id-yt-previewing .id-yt-btn img,.id-yt-expanded .id-yt-btn{opacity:0} @media (hover:none),(prefers-reduced-motion:reduce){ .id-yt-previewing{transform:none;box-shadow:0 14px 44px rgba(0,0,0,.5)} .id-bnr-media{transition:none} } @media (max-width:980px){ .id-bnr-media--expanded{flex:1 1 100% !important;max-width:100% !important} } /* hero copy: cap the measure so it stops dropping two words onto their own line */ .id-bnr-copy{max-width:660px;text-wrap:pretty} /* --- END VIDEO HOVER PREVIEW + EXPAND --- */ /* --- HERO POLISH R3 · Lime 2026-09-11 ---------------------------------------- 1. Video now fills the hero's full height when played. It stretches rather than being width-capped, so the 16:9 frame is driven by the hero height and the copy column yields. Before it was 640x360 in a 404px hero. 2. The reseller badge is OUR credential; the three chips are THIRD-PARTY awards. They were styled identically, which flattened that distinction. Ours is now solid in the brand colour with a white tick; theirs stay translucent with a link arrow. 3. The badge was 16px from the edge while all the copy starts at 38px. It now aligns to the same left edge as the kicker and headline. */ /* 1. full-height video on play */ .id-bnr-media--expanded{align-self:stretch !important;flex:0 0 auto !important;max-width:none !important; margin:14px 14px 14px 0 !important;display:flex;align-items:center} .id-yt-expanded{height:100%;width:auto;aspect-ratio:16/9;border-radius:8px} .id-bnr-media--expanded + .id-bnr-in,.id-bnr-in:has(~ .id-bnr-media--expanded){max-width:880px} /* 2. our credential reads as ours, not as a third-party award */ .id-bnr-cred .id-bnr-auth{background:var(--id-accent,#1b3f7a);color:#fff;font-size:10.5px; letter-spacing:.11em;padding:8px 15px 8px 12px;border-radius:5px; box-shadow:0 3px 12px rgba(0,0,0,.3);backdrop-filter:none;-webkit-backdrop-filter:none} .id-bnr-cred .id-bnr-auth::before{background-color:#fff;width:14px;height:14px} /* 3. aligned to the copy, not floating in the corner */ .id-bnr-cred{top:26px;left:38px} .id-bnr-in{padding-top:74px} @media (max-width:980px){ .id-bnr-media--expanded{align-self:auto !important;flex:1 1 100% !important;margin:0 !important} .id-yt-expanded{height:auto;width:100%} } @media (max-width:782px){ .id-bnr-cred{top:20px;left:22px} .id-bnr-in{padding-top:64px} .id-bnr-cred .id-bnr-auth{font-size:9.5px;padding:7px 12px 7px 10px} } /* --- END HERO POLISH R3 --- */ /* Video expand, final word. Drive a definite WIDTH and let aspect-ratio derive the height. The previous pass did the reverse (height:100% + width:auto) which is circular under flex: the wrapper sized from its content's max-content width, the content sized from the wrapper's height, and Chrome broke the loop with the poster's intrinsic 0, collapsing the video to a 4px full-height sliver. --id-yt-w is set inline by snippet 50 from the hero's rest height. */ .id-bnr-media--expanded{align-self:center !important;flex:0 0 auto !important; width:var(--id-yt-w,620px) !important;max-width:58% !important;min-width:0 !important; margin:14px 14px 14px 0 !important;display:block !important} .id-yt-expanded{width:100% !important;height:auto !important;aspect-ratio:16/9 !important; transform:none;box-shadow:0 20px 60px rgba(0,0,0,.6)} .id-bnr-media--expanded + .id-bnr-in,.id-bnr-in:has(~ .id-bnr-media--expanded){max-width:880px} /* During the muted preview the player must not take the pointer. It sits on top at z-index 2, so it was eating the click that should expand and unmute, and a click inside a controls=0 player just toggles pause. */ .id-yt-previewing:not(.id-yt-expanded) iframe{pointer-events:none} .id-yt-previewing:not(.id-yt-expanded){cursor:pointer} .id-yt-previewing:not(.id-yt-expanded)::after{content:"Click for sound";position:absolute; right:10px;bottom:10px;z-index:3;background:rgba(11,19,32,.82);color:#fff;font-size:11px; font-weight:600;letter-spacing:.04em;padding:5px 10px;border-radius:4px;pointer-events:none} /* Full-bleed hero band. The background photo and the blue trust strip run edge to edge, while the copy, the video and the trust items stay on the theme's content width so the hero still lines up with the product grid below it. --id-cw (content width) and --id-vw (viewport minus scrollbar) are published by snippet 50; the fallbacks keep this sane if that script does not run. --id-vw is used in place of 100vw because 100vw includes the scrollbar and would add a horizontal scrollbar of its own on classic-scrollbar platforms. */ .id-brand .id-hero{width:var(--id-vw,100vw); margin-left:calc(50% - var(--id-vw,100vw) / 2); margin-right:calc(50% - var(--id-vw,100vw) / 2); border-radius:0;box-shadow:none} .id-brand .id-hero .id-bnr{max-width:none;margin-left:0;margin-right:0; padding-left:max(0px,calc((100% - var(--id-cw,1490px)) / 2)); padding-right:max(0px,calc((100% - var(--id-cw,1490px)) / 2))} .id-brand .id-hero .id-brand-trust{padding-left:max(0px,calc((100% - var(--id-cw,1490px)) / 2)); padding-right:max(0px,calc((100% - var(--id-cw,1490px)) / 2))} @media (min-width:1025px){ .id-brand .id-hero .id-bnr-cred{left:calc(max(0px,(100% - var(--id-cw,1490px)) / 2) + 38px)} } /* The theme's breadcrumb strip repeats what the hero already says, and its 25px bottom margin was the white gap sitting above the full-bleed band. Hidden on this hub only, so every other archive keeps its breadcrumbs. */ body.lime-hub .page-heading{display:none} /* More air top and bottom. The band read as squeezed once the video grew. */ .id-brand .id-hero .id-bnr-in{padding-top:98px;padding-bottom:56px} .id-brand .id-hero .id-bnr-media{margin-top:24px;margin-bottom:24px} /* The band is pinned by a min-height, so the extra padding alone could not make it taller. Raised so the hero has real room above and below. */ .id-brand .id-hero .id-bnr{min-height:462px} /* The reseller badge sat 70px clear of the kicker, which read as floating. Drop it so it sits directly on top of the first line. Desktop only, the stacked layout below 1025px places it against the top edge on purpose. */ @media (min-width:1025px){ .id-brand .id-hero .id-bnr-cred{top:80px} } /* Maple leaf beside the tick. The badge is already an inline-flex row with a 7px gap, so the leaf is added as ::after and pulled in front of the text with order, giving check, leaf, wordmark with the existing spacing. Same icon the trust strip uses for Ships from Canada, so the set stays consistent. */ .id-brand .id-bnr-auth::before{order:-2} .id-brand .id-bnr-auth::after{content:"";order:-1;flex:0 0 auto;width:15px;height:15px; background-color:#fff; -webkit-mask:url(icons/id-ico-leaf.svg) center/contain no-repeat; mask:url(icons/id-ico-leaf.svg) center/contain no-repeat} /* Reseller badge, icon panel. Order is leaf then tick, with a hairline between them, and the icon side sits on Canadian red while the wordmark keeps the brand blue. The split is a hard colour stop rather than a second element, because the badge is a single span and both its pseudo-elements are already spent on the two icons. 69px = 12 pad + 15 leaf + 7 gap + 1 rule + 7 pad + 15 tick + 12 pad, so the red ends 12px past the tick, matching the 12px in front of the leaf, and the rule sits with 7px of air on both sides. */ .id-brand .id-bnr-auth{background:linear-gradient(90deg,#d52b1e 0 69px,var(--id-accent,#056db7) 69px)} /* The two source icons fill their 24x24 artboards very differently: the tick is a r=9.2 circle plus a 2px stroke, so ~85% of the box, while the leaf spans only y2.2 to y18, so ~66%, and its centre sits at y10.1 rather than 12. At equal box sizes the leaf therefore renders smaller and about 1.5px high. Scaling the leaf's mask to 130% and dropping its origin to 16% matches the two optically while both boxes stay 15px, so the layout does not move. */ .id-brand .id-bnr-auth::after{order:-2;width:15px;height:15px; -webkit-mask-size:130%;mask-size:130%; -webkit-mask-position:center 16%;mask-position:center 16%} .id-brand .id-bnr-auth::before{order:-1;width:15px;height:15px;box-sizing:content-box; padding:0 12px 0 7px;margin-right:7px;border-left:1px solid rgba(255,255,255,.45); -webkit-mask-origin:content-box;mask-origin:content-box; -webkit-mask-clip:content-box;mask-clip:content-box} /* Byline lifted onto the title's line, without touching the term description markup, so the hero HTML stays identical for the other 64 brands. Grid was the first attempt and sat the byline far right, because with two auto columns the copy and award rows that span them, not the word ChompSaw, decided column one's width. inline-block was the second attempt and broke to a new line, because copy and awards sit between the title and the byline in the DOM and are block level. So: grid again, but max-content for the title column and 1fr for the rest, which pins column one to the word. Below 1025px it stacks. */ @media (min-width:1025px){ .id-brand .id-bnr-in{display:grid;grid-template-columns:max-content 1fr;column-gap:22px; grid-template-areas:"kick kick" "h1 by" "copy copy" "awards awards"} .id-brand .id-bnr-kick{grid-area:kick} .id-brand .id-bnr-h1{grid-area:h1;align-self:center} .id-brand .id-bnr-copy{grid-area:copy;min-width:0} .id-brand .id-bnr-awards{grid-area:awards;min-width:0} .id-brand .id-bnr-by{grid-area:by;align-self:center;justify-self:start;margin-bottom:13px} } /* Comparison table: the label column sat 12px off the panel edge, which read as cramped, and the rows were tight vertically once the table gained a fourth row. Inset the outer columns and give every row a little more air. */ .id-brand .id-cmp th,.id-brand .id-cmp td{padding-top:12px;padding-bottom:12px} .id-brand .id-cmp th:first-child,.id-brand .id-cmp td:first-child{padding-left:24px} .id-brand .id-cmp th:last-child,.id-brand .id-cmp td:last-child{padding-right:24px} /* ===== Sections below the product grid (2026-09-14): reviews carousel + studio gallery ===== */ .id-brand .id-sec{margin:34px 0 0;border-radius:8px;overflow:hidden} .id-brand .id-sec-in{padding:40px 44px 36px;max-width:1120px;margin:0 auto;position:relative;z-index:1} .id-brand .id-sec-kick{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--id-accent-lt,#8FCBEE);margin:0 0 8px} .id-brand .id-sec-h{font-size:26px;font-weight:700;line-height:1.2;margin:0 0 8px} .id-brand .id-sec-sub{font-size:14px;line-height:1.55;max-width:680px;margin:0 0 22px;opacity:.9} .id-brand .id-sec-sub a{color:inherit;text-decoration:underline} /* reviews: photo with gradient so the quote reads, quotes fade in place */ .id-brand .id-rev{position:relative;color:#fff;background:var(--lh-rev-base,#0b1320) var(--id-rev-bg) center/cover no-repeat;min-height:380px} .id-brand .id-rev::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--lh-rev-shade,#08101c) 94%,transparent) 0%,color-mix(in srgb,var(--lh-rev-shade,#08101c) 86%,transparent) 48%,color-mix(in srgb,var(--lh-rev-shade,#08101c) 35%,transparent) 100%)} .id-brand .id-rev-track{position:relative;min-height:168px;max-width:720px} .id-brand .id-rev-card{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none} .id-brand .id-rev-card[data-id-active]{position:relative;opacity:1;pointer-events:auto} .id-brand .id-rev-stars{color:#ffd970;font-size:18px;letter-spacing:2px;margin:0 0 10px} .id-brand .id-rev-stars::before{content:"\2605\2605\2605\2605\2605"} .id-brand .id-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .id-brand .id-rev-q{font-size:20px;line-height:1.45;font-weight:500;margin:0 0 14px} .id-brand .id-rev-who{font-size:13px;font-weight:700;letter-spacing:.04em} .id-brand .id-rev-who span{display:block;font-weight:400;opacity:.8;letter-spacing:0;margin-top:2px} .id-brand .id-rev-dots{display:flex;gap:7px;margin:18px 0 0} .id-brand .id-rev-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);border:0;padding:0;cursor:pointer} .id-brand .id-rev-dot[data-id-on]{background:#fff} .id-brand .id-rev-note{margin:22px 0 0;padding:10px 14px;font-size:13px;line-height:1.5;background:rgba(255,255,255,.1);border-radius:6px;max-width:720px} /* gallery */ .id-brand .id-gal{background:#f4f7fb} .id-brand .id-gal .id-sec-kick{color:var(--id-accent,#056DB7)} .id-brand .id-gal .id-sec-h{color:#111d31} .id-brand .id-gal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .id-brand .id-gal-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#fff;display:block;box-shadow:0 2px 10px rgba(16,26,43,.08);transition:transform .25s ease} .id-brand .id-gal-grid img:hover{transform:scale(1.03)} @media (max-width:900px){ .id-brand .id-sec-in{padding:28px 22px} .id-brand .id-sec-h{font-size:22px} .id-brand .id-rev-q{font-size:17px} .id-brand .id-gal-grid{grid-template-columns:repeat(2,1fr)} } @media (prefers-reduced-motion:reduce){.id-brand .id-rev-card{transition:none}} /* awards: four chips read better as a deliberate 2x2 than a 3+1 wrap */ @media (min-width:1025px){ .id-brand .id-bnr-awards{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 10px;max-width:none} } /* reviews, simplified: logo, quote, name, photo. One small source line. */ .id-brand .id-rev{min-height:420px} .id-brand .id-rev .id-sec-in{padding:44px 52px 40px;max-width:1160px} .id-brand .id-rev-top{display:flex;align-items:center;gap:18px;margin:0 0 30px} .id-brand .id-rev-logo{width:150px;height:auto;display:block;opacity:.95} .id-brand .id-rev-src{font-size:12px;letter-spacing:.04em;color:#fff;text-decoration:none;opacity:.8;border-left:1px solid rgba(255,255,255,.35);padding-left:16px;line-height:1.3} .id-brand .id-rev-src:hover{opacity:1;text-decoration:underline} .id-brand .id-rev-track{max-width:760px;min-height:200px} .id-brand .id-rev-stars{font-size:16px;margin:0 0 14px} .id-brand .id-rev-q{font-size:27px;line-height:1.35;font-weight:500;margin:0 0 20px;letter-spacing:-.005em} .id-brand .id-rev-who{font-size:14px} .id-brand .id-rev-who span{font-size:12.5px;opacity:.7} .id-brand .id-rev-dots{margin-top:26px} @media (max-width:900px){.id-brand .id-rev .id-sec-in{padding:30px 22px}.id-brand .id-rev-q{font-size:20px}.id-brand .id-rev-logo{width:110px}} /* rating pill in the byline: stars, score, count; scrolls to the reviews block */ .id-brand .id-bnr-rating{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding:8px 13px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font:inherit;line-height:1;transition:background .18s ease,border-color .18s ease} .id-brand .id-bnr-rating:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)} .id-brand .id-bnr-rating:focus-visible{outline:3px solid #ffd970;outline-offset:2px} .id-brand .id-bnr-rating-stars{color:#ffd970;font-size:13px;letter-spacing:1px} .id-brand .id-bnr-rating-stars::before{content:"\2605\2605\2605\2605\2605"} .id-brand .id-bnr-rating-t{font-size:12.5px;font-weight:700;letter-spacing:.02em} .id-brand .id-bnr-rating-n{font-size:12px;opacity:.85;border-left:1px solid rgba(255,255,255,.3);padding-left:8px} @media (max-width:900px){.id-brand .id-bnr-rating{margin:10px 0 0}} /* gallery as a collage: one hero tile, four supporting, hover lifts + caption, click opens lightbox */ .id-brand .id-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px} .id-brand .id-gal-item{position:relative;overflow:hidden;border-radius:10px;background:#fff;cursor:zoom-in;box-shadow:0 2px 10px rgba(16,26,43,.08)} .id-brand .id-gal-big{grid-column:span 2;grid-row:span 2} .id-brand .id-gal-pic{height:100%} .id-brand .id-gal-item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto;border-radius:0;box-shadow:none;transition:transform .45s cubic-bezier(.16,1,.3,1)} .id-brand .id-gal-item:hover img{transform:scale(1.06)} .id-brand .id-gal-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease} .id-brand .id-gal-item:hover .id-gal-cap{opacity:1;transform:none} .id-brand .id-gal-item:focus-visible{outline:3px solid var(--id-accent,#056DB7);outline-offset:2px} @media (max-width:900px){.id-brand .id-gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.id-brand .id-gal-big{grid-column:span 2;grid-row:span 2}} /* lightbox */ .id-brand .id-lb{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px} .id-brand .id-lb[hidden]{display:none} .id-brand .id-lb-bg{position:absolute;inset:0;background:rgba(6,12,22,.86)} .id-brand .id-lb-card{position:relative;max-width:min(1100px,94vw);max-height:92vh;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)} .id-brand .id-lb-img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;margin:0 auto} .id-brand .id-lb-cap{padding:12px 16px;font-size:13px;color:#3d4a5c;text-align:center} .id-brand .id-lb-x{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:2} /* taller hero: more air above the fold, per Sehroz 2026-09-14 */ .id-brand .id-hero .id-bnr{min-height:540px} .id-brand .id-hero .id-bnr-in{padding-top:110px;padding-bottom:70px} /* hero air pass (2026-09-14): rating as plain text, more space between the left-column pieces */ .id-brand .id-bnr-rating{border:0;background:none;padding:0;margin:10px 0 0 2px;gap:9px} .id-brand .id-bnr-rating:hover{background:none;text-decoration:underline} .id-brand .id-bnr-rating-stars{font-size:14px} .id-brand .id-bnr-rating-t{font-size:13px} .id-brand .id-bnr-rating-n{border-left:1px solid rgba(255,255,255,.35);padding-left:9px;font-size:12.5px} @media (min-width:1025px){ .id-brand .id-bnr-kick{margin-bottom:14px} .id-brand .id-bnr-h1{font-size:46px;line-height:1.05} .id-brand .id-bnr-copy{margin:16px 0 22px;max-width:620px;font-size:15.5px;line-height:1.6} .id-brand .id-bnr-awards{gap:10px 12px} .id-brand .id-bnr-in{row-gap:0} } /* controls are anchors now (theme scripts swallow