/* ============ COLOR SYSTEM — v3 ============ Built around Kaleb's existing red / white / black brand rather than introducing a new hue. Red is used the way a tally light / record indicator is used — as a single deliberate signal, not a wash of color. ============================================= */ :root{ --ts-white:#FFFFFF; --ts-paper:#FAFAF9; --ts-card:#FFFFFF; --ts-ink:#111111; --ts-red:#B3121B; --ts-red-soft:#F5DEDD; --ts-cloud:#F1F0EE; --ts-line:#E2E0DC; --ts-mute:#6B6864; --ts-display: 'Fraunces', serif; --ts-body: 'Inter', -apple-system, sans-serif; --ts-mono: 'JetBrains Mono', monospace; --ts-radius-pill: 999px; --ts-radius-card: 14px; } *{box-sizing:border-box;} body.ts-page{ margin:0; background:var(--ts-paper); color:var(--ts-ink); font-family:var(--ts-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } .ts-page a{color:inherit;text-decoration:none;} /* Fix: anchor-tag pill buttons were inheriting black text from the rule above (".ts-page a" outranks ".ts-pill-btn" in specificity), which made solid-black buttons render as black text on black = invisible. Explicit override below. */ .ts-page a.ts-pill-btn{color:var(--ts-white);} .ts-page a.ts-pill-btn.ts-outline{color:var(--ts-ink);} .ts-page a.ts-pill-btn.ts-outline:hover{color:var(--ts-white);} .ts-wrap{max-width:1180px;margin:0 auto;padding:0 32px;} .ts-view{display:none;} .ts-view.active{display:block;} /* data-route is set by the inline script in index.html's before the body is parsed, and removed by app.js once it has routed for real. Until then these rules put the correct view and the correct nav underline on screen, so nothing wrong is ever painted. Ids and attribute selectors outrank .ts-view.active regardless of source order. */ html[data-route] #view-home{display:none;} html[data-route="equipment"] #view-equipment, html[data-route="rent-now"] #view-rent-now, html[data-route="how-to-rent"] #view-how-to-rent, html[data-route="insurance"] #view-insurance, html[data-route="insurance-qa"] #view-insurance-qa, html[data-route="example-coi"] #view-example-coi, html[data-route="faq"] #view-faq, html[data-route="about"] #view-about, html[data-route="consign"] #view-consign{display:block;} /* The nav ships with Home underlined; move it without waiting for app.js. */ html[data-route] .ts-navlinks a.active{opacity:0.75;} html[data-route] .ts-navlinks a.active::after{content:none;} html[data-route="equipment"] .ts-navlinks a[data-nav="equipment"], html[data-route="how-to-rent"] .ts-navlinks a[data-nav="how-to-rent"], html[data-route="insurance"] .ts-navlinks a[data-nav="insurance"], html[data-route="faq"] .ts-navlinks a[data-nav="faq"]{opacity:1;} html[data-route="equipment"] .ts-navlinks a[data-nav="equipment"]::after, html[data-route="how-to-rent"] .ts-navlinks a[data-nav="how-to-rent"]::after, html[data-route="insurance"] .ts-navlinks a[data-nav="insurance"]::after, html[data-route="faq"] .ts-navlinks a[data-nav="faq"]::after{ content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ts-red); } /* ---------- NAV ---------- */ .ts-nav{ position:sticky;top:0;z-index:50; background:rgba(250,250,249,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ts-line); } .ts-nav-inner{ max-width:1180px;margin:0 auto;padding:14px 32px; display:flex;align-items:center;justify-content:space-between; } .ts-logo-lockup{display:flex;align-items:center;gap:10px;cursor:pointer;} .ts-logo-mark{height:34px;width:auto;display:block;} .ts-logo{ font-family:var(--ts-display); font-weight:600;font-size:19px;letter-spacing:0.01em; } .ts-logo .thin{font-weight:400;opacity:0.6;} .ts-navlinks{display:flex;gap:34px;font-size:14.5px;font-weight:500;} .ts-navlinks a{position:relative;padding:4px 0;color:var(--ts-ink);opacity:0.75;transition:opacity .15s;cursor:pointer;} .ts-navlinks a:hover{opacity:1;} .ts-navlinks a.active{opacity:1;} .ts-navlinks a.active::after{ content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ts-red); } .ts-pill-btn{ display:inline-flex;align-items:center;gap:8px; background:var(--ts-ink);color:var(--ts-white); padding:11px 22px;border-radius:var(--ts-radius-pill); font-size:14px;font-weight:600;border:none;cursor:pointer; transition:transform .15s ease, background .15s ease; } .ts-pill-btn:hover{background:var(--ts-red);transform:translateY(-1px);} .ts-pill-btn.ts-outline{ background:transparent;color:var(--ts-ink);border:1.5px solid var(--ts-ink); } .ts-pill-btn.ts-outline:hover{background:var(--ts-ink);color:var(--ts-white);} .ts-pill-btn.ts-small{padding:8px 16px;font-size:12.5px;} /* Rent Now: text + count on desktop, a square cart icon on mobile so it sits beside the hamburger instead of ballooning into a wrapped pill. */ .ts-cart-icon{display:none;width:19px;height:19px;flex:none;} .ts-rent-count{ display:none;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 6px;border-radius:999px; background:var(--ts-white);color:var(--ts-ink); font-family:var(--ts-mono);font-size:11px;font-weight:600;line-height:1; } .ts-rent-count.has{display:inline-flex;} @media(max-width:860px){ #tsNavRentBtn{ position:relative;width:40px;height:40px;padding:0; border-radius:10px;justify-content:center;gap:0; } #tsNavRentBtn:hover{transform:none;} #tsNavRentBtn .ts-rent-label{display:none;} #tsNavRentBtn .ts-cart-icon{display:block;} #tsNavRentBtn .ts-rent-count.has{ position:absolute;top:-6px;right:-6px; background:var(--ts-red);color:var(--ts-white); min-width:19px;height:19px;padding:0 5px; border:2px solid var(--ts-paper); } } @media(max-width:860px){.ts-navlinks{display:none;}} /* ---------- MOBILE MENU ---------- */ .ts-nav-right{display:flex;align-items:center;gap:10px;} .ts-nav-toggle{ display:none;flex-direction:column;justify-content:center;gap:4.5px; width:40px;height:40px;padding:0 9px; background:transparent;border:1.5px solid var(--ts-line);border-radius:10px; cursor:pointer;transition:border-color .15s; } .ts-nav-toggle:hover{border-color:var(--ts-ink);} .ts-nav-toggle span{ display:block;height:1.5px;width:100%;background:var(--ts-ink);border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .ts-nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);} .ts-nav-toggle.open span:nth-child(2){opacity:0;} .ts-nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .ts-mobile-menu{display:none;border-top:1px solid var(--ts-line);padding:8px 32px 18px;} .ts-mobile-menu a{ display:block;padding:13px 0;font-size:16px;font-weight:600; color:var(--ts-ink);cursor:pointer;border-bottom:1px solid var(--ts-line); } .ts-mobile-menu a:last-child{border-bottom:none;} .ts-mobile-menu a.active{color:var(--ts-red);} @media(max-width:860px){ .ts-nav-toggle{display:flex;} .ts-mobile-menu.open{display:block;} } /* ---------- HERO ---------- */ .ts-hero{padding:88px 0 32px;position:relative;overflow:hidden;} .ts-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:center;} .ts-hero-grid > div{min-width:0;} @media(max-width:900px){.ts-hero-grid{grid-template-columns:1fr;gap:40px;}} .ts-eyebrow{ font-family:var(--ts-mono);font-size:12px;letter-spacing:0.12em; text-transform:uppercase;color:var(--ts-red);margin-bottom:18px; display:flex;align-items:center;gap:8px; } .ts-eyebrow::before{content:'';width:22px;height:1px;background:var(--ts-red);} .ts-eyebrow.no-line::before{display:none;} .ts-eyebrow .ts-pin{width:12px;height:12px;flex:none;} .ts-eyebrow .ts-divider{opacity:0.5;} .ts-hero h1{ font-family:var(--ts-display); font-size:clamp(40px,5vw,64px); line-height:1.04;font-weight:600;letter-spacing:-0.01em; margin:0 0 22px; } .ts-hero h1 em{color:var(--ts-red);font-style:normal;} .ts-hero p.ts-lede{ font-size:18px;line-height:1.6;color:var(--ts-mute);max-width:480px;margin:0 0 30px; } .ts-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;} .ts-hero-carousel{position:relative;min-width:0;} .ts-hero-carousel::before{ content:'';position:absolute;inset:-4%;z-index:-1; background:radial-gradient(ellipse at center, var(--ts-red-soft) 0%, transparent 68%); } .ts-carousel-track{ display:flex;align-items:stretch; min-width:0;width:100%; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; gap:14px; /* Side padding sets how much of the neighbouring slides peeks in, and therefore how large the centred one is. Tighter on desktop so the carousel holds its own beside the headline. */ padding:0 12%; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right, transparent 0%, black 11%, black 89%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, black 11%, black 89%, transparent 100%); } .ts-carousel-track::-webkit-scrollbar{display:none;} /* On a phone the .ts-wrap gutters left the slide only ~200px wide. Cancel them so the carousel runs the full width of the screen, and narrow the track's side padding so the slide itself gets most of that space. The arrows still sit in the strip that's left over. */ @media(max-width:620px){ .ts-hero-carousel{margin-left:-32px;margin-right:-32px;} .ts-carousel-track{ padding:0 13%; -webkit-mask-image:linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); mask-image:linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%); } } /* Slides are a stacked card: picture on top, label underneath. The label used to float over the image, which buried the text baked into the product graphics. */ .ts-carousel-slide{ flex:0 0 auto; /* 100% resolves against the track's CONTENT box — i.e. the gap between its side paddings — so the centred slide always fits exactly and its neighbours peek in from either side. A fixed pixel width here overflowed the narrower hero column and clipped the artwork. */ width:100%;max-width:520px; scroll-snap-align:center; border-radius:16px;overflow:hidden;position:relative; display:flex;flex-direction:column; background:var(--ts-card);border:1px solid var(--ts-line); opacity:0.38;transform:scale(0.9); transition:opacity .35s ease, transform .35s ease; cursor:pointer; box-shadow:0 20px 40px -20px rgba(17,17,17,0.3); } .ts-carousel-slide.active{opacity:1;transform:scale(1);} .ts-carousel-media{ width:100%;aspect-ratio:16/10;background:var(--ts-white); display:flex;align-items:center;justify-content:center;overflow:hidden; } /* contain, not cover — these graphics carry text to the very edge */ .ts-carousel-slide img{width:100%;height:100%;object-fit:contain;display:block;} .ts-carousel-slide .ts-slide-placeholder{ width:100%;height:100%;background:var(--ts-cloud); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; } .ts-carousel-slide .ts-slide-placeholder svg{opacity:0.25;width:48px;height:48px;} .ts-carousel-caption{ padding:12px 16px 14px;border-top:1px solid var(--ts-line); background:var(--ts-card);color:var(--ts-ink); } .ts-carousel-caption .tag{font-family:var(--ts-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ts-red);} .ts-carousel-caption .name{ font-family:var(--ts-display);font-size:15px;font-weight:600;margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ts-carousel-dots{ display:flex;justify-content:center;gap:6px;margin-top:14px; } .ts-carousel-dot{ width:7px;height:7px;border-radius:50%;background:var(--ts-line); border:none;cursor:pointer;padding:0;transition:background .15s, width .15s; } .ts-carousel-dot.active{background:var(--ts-red);width:18px;border-radius:4px;} /* The whole side strip stays clickable, but now shows a visible arrow so it's obvious you can page through rather than only swiping. */ .ts-carousel-navzone{ position:absolute;top:0;bottom:0;width:18%;z-index:3; background:transparent;border:none;cursor:pointer;padding:0; display:flex;align-items:center; -webkit-tap-highlight-color:transparent; } /* The arrows sit at the outer edge of their strip rather than its middle, so they stay clear of the slide while the whole strip remains clickable. */ .ts-carousel-navzone.prev{left:0;justify-content:flex-start;} .ts-carousel-navzone.next{right:0;justify-content:flex-end;} .ts-carousel-navzone .arrow{ width:40px;height:40px;border-radius:50%; background:var(--ts-card);border:1px solid var(--ts-line); box-shadow:0 6px 18px -8px rgba(17,17,17,0.45); display:flex;align-items:center;justify-content:center; color:var(--ts-ink);opacity:0.75; transition:opacity .15s ease, background .15s ease, color .15s ease, transform .15s ease; } .ts-carousel-navzone:hover .arrow{opacity:1;background:var(--ts-ink);color:var(--ts-white);} .ts-carousel-navzone:active .arrow{transform:scale(0.94);} .ts-carousel-navzone .arrow svg{width:17px;height:17px;} @media(max-width:560px){ .ts-carousel-navzone .arrow{width:32px;height:32px;} .ts-carousel-navzone .arrow svg{width:14px;height:14px;} } .ts-hero-stat{display:flex;align-items:flex-start;gap:12px;flex:1;min-width:170px;padding-right:20px;} .ts-hero-stat .icon{ flex:none;width:34px;height:34px;border-radius:10px;background:var(--ts-cloud); display:flex;align-items:center;justify-content:center;color:var(--ts-red); } .ts-hero-stat .icon svg{width:17px;height:17px;} .ts-hero-stat .n{font-family:var(--ts-display);font-size:20px;font-weight:600;line-height:1.25;} .ts-hero-stat .l{font-size:12.5px;color:var(--ts-mute);margin-top:2px;} /* The three trust points sit in their own tinted band so they read as a divider between the hero and the packages, rather than floating between two white sections. */ .ts-strip-band{ background:var(--ts-cloud); border-top:1px solid var(--ts-line);border-bottom:1px solid var(--ts-line); margin-top:56px;padding:30px 0; } .ts-hero-strip{ display:flex;gap:0; flex-wrap:wrap; } /* Stacked on a phone, these three sat flush against each other with no row gap at all, and carried more space above them than they needed. */ @media(max-width:620px){ .ts-strip-band{margin-top:32px;padding:24px 0;} .ts-hero-strip{row-gap:22px;} .ts-hero-stat{padding-right:0;} } /* ---------- SECTION HEADER ---------- */ .ts-section{padding:84px 0;} /* The hero's stat strip already reads as a divider, so the packages section doesn't need a full section's worth of air above it. */ #home-packages{padding-top:48px;} @media(max-width:620px){#home-packages{padding-top:32px;}} .ts-section.alt{background:var(--ts-cloud);} .ts-section.tight{padding:60px 0;} .ts-section-head{ display:flex;justify-content:space-between;align-items:flex-end; gap:24px;margin-bottom:44px;flex-wrap:wrap; } .ts-section-head h2{ font-family:var(--ts-display);font-size:clamp(28px,3.4vw,38px); font-weight:600;margin:0;letter-spacing:-0.01em; } .ts-section-head p{color:var(--ts-mute);font-size:15px;max-width:420px;margin:8px 0 0;} /* ---------- HIGHLIGHT PACKAGES (home) ---------- */ .ts-pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media(max-width:1040px){.ts-pkg-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.ts-pkg-grid{grid-template-columns:1fr;}} .ts-pkg-card{ border:1px solid var(--ts-line);border-radius:var(--ts-radius-card); background:var(--ts-card);overflow:hidden; display:flex;flex-direction:column;gap:12px; transition:box-shadow .18s ease, transform .18s ease, background .3s ease; } .ts-pkg-card:hover{box-shadow:0 14px 28px -18px rgba(17,17,17,0.35);transform:translateY(-2px);} .ts-pkg-card > *:not(.ts-pkg-media){padding-left:22px;padding-right:22px;} .ts-pkg-card > p{flex:1;} .ts-pkg-card > *:last-child{padding-bottom:22px;} .ts-pkg-card > .ts-pkg-items{padding-bottom:8px;} .ts-pkg-card > .ts-quote-btn{margin-bottom:22px;align-self:flex-start;} .ts-pkg-media{aspect-ratio:4/3;background:var(--ts-cloud);overflow:hidden;} .ts-pkg-media img{width:100%;height:100%;object-fit:cover;display:block;} .ts-pkg-media-placeholder{display:flex;align-items:center;justify-content:center;color:var(--ts-mute);} .ts-pkg-media-placeholder svg{width:36px;height:36px;opacity:0.3;} .ts-pkg-tag{ font-family:var(--ts-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase; color:var(--ts-red);margin-top:16px; } .ts-pkg-card h3{font-family:var(--ts-display);font-size:19px;margin:0;} .ts-pkg-card p{font-size:13px;color:var(--ts-mute);line-height:1.6;margin:0;} .ts-pkg-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;} @keyframes ts-flash{ 0%{background:var(--ts-red-soft);} 100%{background:var(--ts-card);} } .ts-pkg-card.ts-flash{animation:ts-flash 1.1s ease;} /* ---------- HOW TO RENT ---------- */ .ts-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} @media(max-width:960px){.ts-steps{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.ts-steps{grid-template-columns:1fr;}} .ts-step{padding:26px 22px;border-radius:var(--ts-radius-card);background:var(--ts-card);border:1px solid var(--ts-line);} .ts-step .k{font-family:var(--ts-mono);font-size:11px;color:var(--ts-red);margin-bottom:14px;letter-spacing:0.04em;} .ts-step h3{font-family:var(--ts-display);font-size:19px;margin:0 0 10px;} .ts-step p{font-size:13.5px;color:var(--ts-mute);line-height:1.6;margin:0;} .ts-step ul{margin:10px 0 0;padding-left:18px;} .ts-step li{font-size:13px;color:var(--ts-mute);line-height:1.6;margin-bottom:4px;} .ts-step li a{color:var(--ts-ink);font-weight:600;border-bottom:1px solid var(--ts-red);} .ts-steps-blurb{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} @media(max-width:760px){.ts-steps-blurb{grid-template-columns:1fr;}} .ts-step-mini{padding:24px 0;border-top:2px solid var(--ts-ink);} .ts-step-mini .k{font-family:var(--ts-mono);font-size:12px;color:var(--ts-red);margin-bottom:12px;} .ts-step-mini h3{font-family:var(--ts-display);font-size:18px;margin:0 0 6px;} .ts-step-mini p{font-size:13.5px;color:var(--ts-mute);line-height:1.55;margin:0;} /* ---------- EQUIPMENT: SEARCH + FILTER ---------- */ .ts-equip-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:20px;} .ts-search{flex:1;min-width:240px;position:relative;} .ts-search input{ /* The right padding reserves room for the scope label that sits on top of this input — without it, typed text slides underneath the label. */ width:100%;padding:14px 190px 14px 44px;border-radius:var(--ts-radius-pill); border:1.5px solid var(--ts-line);background:var(--ts-card); font-family:var(--ts-body);font-size:14.5px;color:var(--ts-ink); outline:none;transition:border-color .15s; } .ts-search input:focus{border-color:var(--ts-red);} .ts-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:0.45;} .ts-search .ts-scope{ position:absolute;right:6px;top:6px;bottom:6px; display:flex;align-items:center;padding:0 14px; font-family:var(--ts-mono);font-size:10.5px;color:var(--ts-mute); border-left:1px solid var(--ts-line);white-space:nowrap; max-width:172px;overflow:hidden;text-overflow:ellipsis; pointer-events:none;background:var(--ts-card); } /* On a phone there isn't room for both, and the label is redundant anyway — the filter pills and the results line below already state the scope. */ @media(max-width:760px){ .ts-search .ts-scope{display:none;} .ts-search input{padding-right:18px;} } .ts-pills{display:flex;gap:8px;flex-wrap:wrap;} .ts-filter-pill{ padding:10px 18px;border-radius:var(--ts-radius-pill); border:1.5px solid var(--ts-line);background:var(--ts-card); font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ts-ink); transition:all .15s; } .ts-filter-pill:hover{border-color:var(--ts-ink);} .ts-filter-pill.active{background:var(--ts-ink);color:var(--ts-white);border-color:var(--ts-ink);} .ts-subpills{ display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0 2px; padding:14px 0 0;border-top:1px dashed var(--ts-line); } .ts-subpills.hidden{display:none;} .ts-sub-pill{ padding:6px 14px;border-radius:var(--ts-radius-pill); border:1px solid var(--ts-line);background:transparent; font-family:var(--ts-mono);font-size:11.5px;font-weight:500;cursor:pointer;color:var(--ts-mute); transition:all .15s; } .ts-sub-pill:hover{border-color:var(--ts-red);color:var(--ts-ink);} .ts-sub-pill.active{background:var(--ts-red);border-color:var(--ts-red);color:var(--ts-white);} /* Third level (e.g. Prism Lens FX inside Matteboxes) — indented and lighter so the hierarchy reads without extra chrome. */ .ts-childpills{margin-left:18px;padding-top:10px;border-top-style:dotted;} .ts-childpills .ts-sub-pill{font-size:11px;padding:5px 12px;} .ts-childpills .ts-sub-pill.active{background:var(--ts-ink);border-color:var(--ts-ink);} /* Optional attribute filters — visually distinct from the category hierarchy above, since these combine rather than replace. */ .ts-attrpills{ display:flex;gap:7px;flex-wrap:wrap;align-items:center; margin:12px 0 0 2px;padding:12px 0 0;border-top:1px dashed var(--ts-line); } .ts-attrpills.hidden{display:none;} /* One row per facet group, so "Lens type" and "Coverage" read as two separate questions rather than one undifferentiated pile of buttons. */ .ts-attrpills{flex-direction:column;align-items:flex-start;gap:9px;} .ts-attrgroup{display:flex;gap:7px;flex-wrap:wrap;align-items:center;} .ts-attrgroup .ts-attr-label{min-width:74px;} .ts-attr-label{ font-family:var(--ts-mono);font-size:10.5px;letter-spacing:0.06em; text-transform:uppercase;color:var(--ts-mute);margin-right:4px; } .ts-attr-pill{ padding:6px 14px;border-radius:var(--ts-radius-pill); border:1px dashed var(--ts-line);background:transparent; font-family:var(--ts-mono);font-size:11.5px;font-weight:500; cursor:pointer;color:var(--ts-mute);transition:all .15s; } .ts-attr-pill:hover{border-color:var(--ts-ink);color:var(--ts-ink);} .ts-attr-pill.active{ background:var(--ts-red-soft);border-style:solid; border-color:var(--ts-red);color:var(--ts-red); } .ts-attr-clear{ background:none;border:none;cursor:pointer;padding:6px 4px; font-family:var(--ts-mono);font-size:11px;color:var(--ts-mute); text-decoration:underline; } .ts-attr-clear:hover{color:var(--ts-ink);} .ts-results-meta{font-family:var(--ts-mono);font-size:12px;color:var(--ts-mute);margin:22px 0 26px;} .ts-results-meta b{color:var(--ts-ink);} /* ---------- GEAR GRID ---------- */ .ts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px;} .ts-card{ border:1px solid var(--ts-line);border-radius:var(--ts-radius-card); background:var(--ts-card);overflow:hidden; display:flex;flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; } .ts-card:hover{box-shadow:0 14px 28px -18px rgba(17,17,17,0.35);transform:translateY(-2px);} /* These open a detail page on click, so they need to look clickable. */ .ts-card-media, [data-open],[data-pkg-open]{cursor:pointer;} .ts-card-media{ aspect-ratio:4/3;background:var(--ts-cloud); display:flex;align-items:center;justify-content:center; color:var(--ts-mute);font-size:12px;font-family:var(--ts-mono); position:relative;overflow:hidden; } /* Product shots are mostly on white, so contain rather than crop — cropping cuts the ends off lenses and light stands. */ .ts-card-media img{ width:100%;height:100%;object-fit:contain;display:block;background:var(--ts-white); } /* Small red label above a package name. Replaces the badge that used to sit on top of the photo and cover the artwork underneath. */ .ts-card-eyebrow{ font-family:var(--ts-mono);font-size:10.5px;letter-spacing:0.06em; text-transform:uppercase;color:var(--ts-red); } .ts-card-eyebrow + h3{margin-top:-4px;} .ts-card-cat{ position:absolute;top:12px;left:12px; background:rgba(17,17,17,0.85);color:var(--ts-white); font-family:var(--ts-mono);font-size:10px;letter-spacing:0.03em; padding:5px 10px;border-radius:var(--ts-radius-pill);text-transform:uppercase; } .ts-card-brand{ position:absolute;top:12px;right:12px; background:var(--ts-white);color:var(--ts-ink); font-family:var(--ts-mono);font-size:10px;letter-spacing:0.03em; padding:5px 10px;border-radius:var(--ts-radius-pill); } .ts-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1;} .ts-card-body h3{font-family:var(--ts-display);font-size:17px;font-weight:600;margin:0;line-height:1.25;} .ts-specs{display:flex;gap:6px;flex-wrap:wrap;} .ts-spec-chip{ font-family:var(--ts-mono);font-size:10.5px;color:var(--ts-mute); background:var(--ts-cloud);border:1px solid var(--ts-line); padding:4px 8px;border-radius:6px; } .ts-card-foot{ margin-top:auto;display:flex;align-items:center;justify-content:space-between; padding-top:12px;border-top:1px solid var(--ts-line); } .ts-rate{font-size:13.5px;color:var(--ts-mute);} .ts-rate b{color:var(--ts-ink);font-size:15px;} .ts-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ts-mute);font-size:14.5px;} /* ---------- RENT NOTE PANEL ---------- */ .ts-note-panel{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--ts-line);} .ts-note-panel.open{display:block;} .ts-note-panel textarea{ width:100%;min-height:64px;resize:vertical; border:1.5px solid var(--ts-line);border-radius:10px;padding:10px 12px; font-family:var(--ts-body);font-size:13px;outline:none;margin-bottom:10px; } .ts-note-panel textarea:focus{border-color:var(--ts-red);} /* ---------- INSURANCE ---------- */ .ts-ins-hero{ border:1px solid var(--ts-line);border-radius:var(--ts-radius-card); background:var(--ts-card);padding:36px;margin-bottom:28px; display:flex;align-items:flex-start;gap:18px; } /* An exclamation reads as "pay attention" in a way a plain dot doesn't. */ .ts-ins-mark{ flex:none;width:30px;height:30px;border-radius:50%; background:var(--ts-red);color:var(--ts-white); display:flex;align-items:center;justify-content:center; font-family:var(--ts-display);font-size:19px;font-weight:600;line-height:1; margin-top:2px; } .ts-ins-hero p{font-family:var(--ts-display);font-size:20px;line-height:1.4;margin:0;font-weight:500;} .ts-ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:860px){.ts-ins-grid{grid-template-columns:1fr;}} .ts-doc-card{ border:1px solid var(--ts-line);border-radius:var(--ts-radius-card); padding:28px;background:var(--ts-card);display:flex;flex-direction:column;gap:12px; } .ts-doc-card h3{font-family:var(--ts-display);font-size:18px;margin:0;} .ts-doc-card p{font-size:13.5px;color:var(--ts-mute);line-height:1.6;margin:0;flex:1;} /* ---------- FAQ ---------- */ .ts-faq-item{border-bottom:1px solid var(--ts-line);padding:16px 0;cursor:pointer;} .ts-faq-item:first-child{border-top:1px solid var(--ts-line);} .ts-faq-q{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14.5px;} .ts-faq-plus{color:var(--ts-red);font-family:var(--ts-mono);font-size:16px;transition:transform .2s;} .ts-faq-item.open .ts-faq-plus{transform:rotate(45deg);} .ts-faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;font-size:13.5px;color:var(--ts-mute);line-height:1.6;} /* Generous cap — long answers wrap further on narrow screens, and a tight max-height silently cut the multi-day discount answer off. */ .ts-faq-item.open .ts-faq-a{max-height:600px;padding-top:10px;} /* ---------- EQUIPMENT DETAIL ---------- */ .ts-breadcrumb{ font-family:var(--ts-mono);font-size:12px;color:var(--ts-mute); padding-top:24px;display:flex;gap:6px;flex-wrap:wrap; } .ts-breadcrumb a{color:var(--ts-mute);cursor:pointer;} .ts-breadcrumb a:hover{color:var(--ts-ink);} .ts-breadcrumb .cur{color:var(--ts-ink);} .ts-detail-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;} @media(max-width:860px){.ts-detail-grid{grid-template-columns:1fr;}} .ts-detail-main{ aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--ts-cloud); display:flex;align-items:center;justify-content:center;color:var(--ts-mute); } .ts-detail-main img{width:100%;height:100%;object-fit:cover;} .ts-detail-main svg{width:64px;height:64px;opacity:0.25;} .ts-detail-thumbs{display:flex;gap:10px;margin-top:12px;} .ts-detail-thumb{ width:64px;height:64px;border-radius:10px;background:var(--ts-cloud); border:1.5px solid var(--ts-line);display:flex;align-items:center;justify-content:center; color:var(--ts-mute);cursor:pointer; } .ts-detail-thumb.active{border-color:var(--ts-red);} .ts-detail-thumb svg{width:22px;height:22px;opacity:0.4;} .ts-detail-info h1{font-family:var(--ts-display);font-size:clamp(24px,3vw,32px);margin:6px 0 12px;font-weight:600;} .ts-detail-rate{font-family:var(--ts-display);font-size:22px;font-weight:600;margin-bottom:22px;} .ts-detail-rate span{font-size:13px;color:var(--ts-mute);font-family:var(--ts-body);font-weight:400;} .ts-detail-rate.text{font-family:var(--ts-body);font-size:14.5px;font-weight:400;color:var(--ts-mute);line-height:1.65;} .ts-detail-included h4{font-family:var(--ts-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ts-mute);margin:0 0 10px;} .ts-detail-included ul{margin:0 0 22px;padding-left:18px;} .ts-detail-included li{font-size:13.5px;color:var(--ts-ink);line-height:1.7;} .ts-detail-info .ts-specs{margin-bottom:26px;} .ts-detail-note{font-size:13px;color:var(--ts-mute);margin-top:16px;} .ts-detail-note a{color:var(--ts-ink);font-weight:600;border-bottom:1px solid var(--ts-red);} /* ---------- RENT NOW FORM ---------- */ .ts-rentform-grid{display:grid;grid-template-columns:1.3fr 0.9fr;gap:48px;} /* min-width:0 lets a grid column shrink past its content's intrinsic width. Without it a stubborn child (the date inputs) pushes the whole column wider than the screen and the page scrolls sideways. */ .ts-rentform-grid > *{min-width:0;} @media(max-width:900px){.ts-rentform-grid{grid-template-columns:1fr;gap:32px;}} .ts-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} @media(max-width:560px){.ts-form-row{grid-template-columns:1fr;}} .ts-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;} .ts-field label{font-family:var(--ts-mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ts-mute);} .ts-field input, .ts-field textarea{ border:1.5px solid var(--ts-line);border-radius:10px;padding:12px 14px; font-family:var(--ts-body);font-size:14px;color:var(--ts-ink);outline:none; transition:border-color .15s;background:var(--ts-card); } .ts-field input:focus, .ts-field textarea:focus{border-color:var(--ts-red);} .ts-field textarea{min-height:96px;resize:vertical;} .ts-toggle-row{display:flex;gap:10px;} .ts-toggle-btn{ flex:1;padding:12px;border-radius:10px;border:1.5px solid var(--ts-line); background:var(--ts-card);font-family:var(--ts-body);font-size:14px;font-weight:600; color:var(--ts-mute);cursor:pointer;transition:all .15s;text-align:center; } .ts-toggle-btn:hover{border-color:var(--ts-ink);} .ts-toggle-btn.selected{background:var(--ts-ink);border-color:var(--ts-ink);color:var(--ts-white);} .ts-requesting-chip{ display:inline-flex;align-items:center;gap:8px; background:var(--ts-red-soft);color:var(--ts-ink); padding:8px 14px;border-radius:var(--ts-radius-pill); font-size:13px;font-weight:600;margin-bottom:22px; } .ts-requesting-chip svg{width:14px;height:14px;color:var(--ts-red);} .ts-form-success{ display:none;background:var(--ts-green,var(--ts-cloud));border:1.5px solid var(--ts-line); border-radius:12px;padding:18px 20px;margin-top:6px;font-size:14px; } .ts-form-success.show{display:block;} .ts-rent-sidebar{border:1px solid var(--ts-line);border-radius:var(--ts-radius-card);padding:28px;background:var(--ts-card);height:max-content;} .ts-rent-sidebar h4{font-family:var(--ts-display);font-size:17px;margin:0 0 16px;} .ts-rent-sidebar-step{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--ts-line);} .ts-rent-sidebar-step:first-of-type{border-top:none;} .ts-rent-sidebar-step .num{ font-family:var(--ts-mono);font-size:11px;color:var(--ts-red);flex:none;width:20px;padding-top:2px; } .ts-rent-sidebar-step .t{font-size:13.5px;font-weight:600;margin-bottom:2px;} .ts-rent-sidebar-step .d{font-size:12.5px;color:var(--ts-mute);line-height:1.5;} .ts-rent-sidebar-contact{margin-top:20px;padding-top:20px;border-top:1px dashed var(--ts-line);font-size:13px;color:var(--ts-mute);line-height:1.8;} .ts-rent-sidebar-contact a{color:var(--ts-ink);font-weight:600;} /* ---------- ADD TO QUOTE ---------- */ .ts-quote-btn{ display:inline-flex;align-items:center;gap:6px; background:transparent;color:var(--ts-ink);border:1.5px solid var(--ts-ink); padding:8px 16px;border-radius:var(--ts-radius-pill); font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s; } .ts-quote-btn:hover{background:var(--ts-ink);color:var(--ts-white);} .ts-quote-btn.added{background:var(--ts-red);border-color:var(--ts-red);color:var(--ts-white);} .ts-quote-btn.added:hover{background:#8f0e15;} .ts-quote-btn svg{width:13px;height:13px;} /* ---------- QUOTE PANEL (Rent Now page) ---------- */ /* min-width:0 lets this shrink past its content's intrinsic width, so a stubborn child (a date input, a long unbroken product name) can never stretch the panel wider than the screen. */ .ts-quote-panel{border:1px solid var(--ts-line);border-radius:var(--ts-radius-card);background:var(--ts-card);margin-bottom:28px;overflow:hidden;min-width:0;max-width:100%;} .ts-quote-panel-head{padding:20px 22px;border-bottom:1px solid var(--ts-line);display:flex;justify-content:space-between;align-items:center;} .ts-quote-panel-head h3{font-family:var(--ts-display);font-size:17px;margin:0;} .ts-quote-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 22px;background:var(--ts-cloud);border-bottom:1px solid var(--ts-line);min-width:0;max-width:100%;} .ts-quote-dates .ts-field{min-width:0;} .ts-quote-dates input{width:100%;min-width:0;} /* Two date pickers won't fit side by side on a phone — a native date input refuses to shrink below roughly 150px. */ @media(max-width:560px){.ts-quote-dates{grid-template-columns:1fr;gap:12px;}} .ts-quote-empty{padding:32px 22px;text-align:center;color:var(--ts-mute);font-size:13.5px;line-height:1.7;} .ts-quote-empty a{color:var(--ts-ink);font-weight:600;border-bottom:1px solid var(--ts-red);cursor:pointer;} .ts-quote-items{padding:6px 22px;} .ts-quote-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--ts-line);} .ts-quote-line:last-child{border-bottom:none;} .ts-quote-line-name{font-size:13.5px;font-weight:600;} .ts-quote-line-meta{font-size:11.5px;color:var(--ts-mute);font-family:var(--ts-mono);margin-top:2px;} .ts-quote-line-right{display:flex;align-items:center;gap:14px;flex:none;} .ts-quote-line-total{font-size:13.5px;font-weight:600;white-space:nowrap;} .ts-quote-remove{background:none;border:none;color:var(--ts-mute);cursor:pointer;font-size:18px;line-height:1;padding:0 2px;} .ts-quote-remove:hover{color:var(--ts-red);} .ts-quote-summary{padding:18px 22px;background:var(--ts-cloud);border-top:1px solid var(--ts-line);} .ts-quote-summary-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ts-mute);padding:3px 0;} .ts-quote-summary-row.total{font-size:16px;font-weight:600;color:var(--ts-ink);padding-top:8px;margin-top:6px;border-top:1px dashed var(--ts-line);} .ts-quote-note{font-size:11.5px;color:var(--ts-mute);margin-top:10px;line-height:1.5;} .ts-billing-explainer{ padding:14px 22px;border-top:1px dashed var(--ts-line);background:var(--ts-cloud); } .ts-billing-explainer summary{ cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ts-ink); list-style:none;display:flex;align-items:center;gap:6px; } .ts-billing-explainer summary::-webkit-details-marker{display:none;} .ts-billing-explainer summary::before{ content:'+';color:var(--ts-red);font-family:var(--ts-mono);font-size:14px; width:14px;flex:none;transition:transform .15s; } .ts-billing-explainer[open] summary::before{content:'−';} .ts-billing-explainer ul{margin:10px 0 2px;padding-left:20px;} .ts-billing-explainer li{font-size:12px;color:var(--ts-mute);line-height:1.65;margin-bottom:4px;} /* Only touch the vertical padding — this element is also .ts-wrap, and a shorthand here would wipe out the 32px side margin the wrap provides, leaving inner-page titles flush against the window edge. */ .ts-page-head{padding-top:52px;padding-bottom:12px;} .ts-page-head .ts-eyebrow{margin-bottom:14px;} .ts-page-head h1{ font-family:var(--ts-display);font-size:clamp(32px,4.4vw,48px); font-weight:600;margin:0 0 8px;letter-spacing:-0.01em; } .ts-page-head p{color:var(--ts-mute);font-size:15.5px;max-width:520px;margin:0;} /* ---------- FOOTER ---------- */ .ts-footer{background:var(--ts-ink);color:var(--ts-white);padding:32px 0 18px;margin-top:0;} .ts-footer-top{display:flex;align-items:center;gap:10px;} .ts-footer-top img{height:26px;width:auto;filter:invert(1) brightness(2);} .ts-footer .ts-logo{color:var(--ts-white);font-size:15px;} .ts-footer .ts-logo .thin{color:#9C9892;} .ts-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;align-items:start;margin-bottom:20px;} @media(max-width:760px){.ts-footer-grid{grid-template-columns:1fr 1fr;row-gap:20px;}} .ts-footer h4{font-family:var(--ts-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:#B4B0A9;margin:0 0 10px;} .ts-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;} .ts-footer ul a{color:#E9E7E2;font-size:13px;cursor:pointer;} .ts-footer-social{display:inline-flex;align-items:center;} .ts-footer-social svg{width:18px;height:18px;transition:color .15s;} .ts-footer-social:hover svg{color:#E6B0AC;} .ts-footer ul a:hover{color:#E6B0AC;} .ts-footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:14px;font-size:11.5px;color:#8B8781;} /* ---------- ABOUT PAGE ---------- */ /* The width limit belongs on the text, not the wrap — .ts-wrap centres itself with auto margins, so capping the wrap indents the whole column. */ .ts-about-lede p{font-size:17px;line-height:1.65;color:var(--ts-ink);margin:0 0 18px;max-width:660px;} .ts-about-lede p:last-child{color:var(--ts-mute);margin-bottom:0;} .ts-about-consign p{font-size:15px;line-height:1.7;color:var(--ts-mute);max-width:660px;margin:0;} .ts-about-visit{display:grid;gap:34px;} @media(min-width:820px){.ts-about-visit{grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:start;}} .ts-about-visit h2{ font-family:var(--ts-display);font-size:clamp(24px,3.2vw,32px); font-weight:600;margin:0 0 16px;line-height:1.2;letter-spacing:-0.01em; } .ts-about-hours{font-size:14px;line-height:1.7;color:var(--ts-mute);margin:0 0 14px;} .ts-about-contact{display:flex;gap:20px;flex-wrap:wrap;margin-top:6px;} .ts-about-contact a{ font-size:14.5px;font-weight:600;color:var(--ts-ink); border-bottom:1px solid var(--ts-red); } .ts-about-contact a:hover{color:var(--ts-red);} .ts-about-cta{ background:var(--ts-ink);color:var(--ts-white); border-radius:var(--ts-radius-card);padding:30px; } .ts-about-cta h3{font-family:var(--ts-display);font-size:21px;margin:0 0 10px;color:var(--ts-white);} .ts-about-cta p{font-size:14px;line-height:1.65;color:#B8B4AF;margin:0 0 20px;} /* .ts-page a.ts-pill-btn forces white text, and outranks a plain descendant selector — so this needs the same specificity to win. */ .ts-page .ts-about-cta a.ts-pill-btn{background:var(--ts-white);color:var(--ts-ink);} .ts-page .ts-about-cta a.ts-pill-btn:hover{background:var(--ts-red);color:var(--ts-white);} /* Card titles are links now, so they must not inherit the plain-link colour rule and must still look clickable. */ .ts-card-title{color:var(--ts-ink);text-decoration:none;cursor:pointer;} .ts-card-title:hover{color:var(--ts-red);} /* ---------- iOS INPUT ZOOM (must stay last) ---------- iOS Safari zooms the whole page when you focus an input whose text is smaller than 16px, which reads as the layout overflowing the screen. This lives at the end of the file deliberately: the per-field rules above set 14px and would otherwise win on source order. */ @media(max-width:860px){ input, textarea, select, .ts-field input, .ts-field textarea, .ts-quote-dates input, .ts-search input, .ts-note-panel textarea{font-size:16px;} } /* ---------- iOS DATE INPUTS (must stay last) ---------- Safari on iOS gives date inputs an intrinsic minimum width from their internal shadow DOM, and that minimum ignores width:100%. The field refuses to shrink, forcing the quote panel wider than the screen — which is what pushed the grey date band past the edge of its white card. Dropping the native appearance makes it size like an ordinary text field, and the shadow-part rules stop the inner value block re-inflating it. The tap still opens the normal iOS date picker. */ input[type="date"]{ -webkit-appearance:none; appearance:none; width:100%; min-width:0; max-width:100%; box-sizing:border-box; /* An empty date field would otherwise collapse without native chrome. */ min-height:46px; text-align:left; } input[type="date"]::-webkit-date-and-time-value{ text-align:left; margin:0; min-width:0; } input[type="date"]::-webkit-datetime-edit{ padding:0; min-width:0; } /* Safari hides the indicator once appearance is stripped; put it back so the field still reads as a date picker. */ input[type="date"]::-webkit-calendar-picker-indicator{ opacity:0.45; }