/* ===== Warm Storage page CSS v244 desktop-hero-transition-rhythm ===== Structure: foundations → shared UI/utilities → page rhythm → sections → responsive rules → integration/touch/accessibility. Based on stable v89 mobile vertical rhythm refine. Non-destructive cleanup: no intended visual redesign, no HTML/JS dependency changes, no text changes. v90: moved safe late utility/integration layers closer to their components: phone icon normalization, BYN sign utility, mobile hero shell override, size bottom sheet/header integration. v91: contacts/form final refinement was split into clearer structural sublayers without changing CSS declarations. v92: usecases final refinement was split into desktop/tablet/mobile/interaction/label sublayers without changing CSS declarations. v93: safe usecases cleanup removed redundant early usecases/mobile-hero fallback rules. v94: safe contacts/form cleanup removed clearly overridden early contact/form declarations. v95: safe shared-card and mobile size-card duplicate cleanup; no intended visual changes. v96: removed unused compare/tariffs CSS remnants after checking current HTML; no intended visual changes. v97: removed small unused optional-note CSS selectors absent from current page HTML; merged adjacent step-card base rules. v98: selector hygiene cleanup after current HTML check: removed unused section-eyebrow/form-hint remnants and exact overridden micro-duplicates. v99: typography refinement for header-adjacent hero controls, size filters, size cards, BYN sign and bottom sheet; no HTML/JS changes. v100: refined mobile size-card “Подробнее” affordance from compact chevron to short app-like arrow; no HTML/JS changes. v101: replaced two-piece CSS arrow with one masked SVG arrow to remove visual dirt/white artefacts; no HTML/JS changes. v103: hero price switched to the shared BYN SVG sign; alignment is integrated in the existing BYN/hero price layers. v104: added mobile bottom sheet share affordance and deep-link highlight styles; clean integration with generated sheet content. v105: refined hero price optical rhythm: smaller BYN sign, calmer /мес., more balanced spacing around 56. v106: hero price aligned with bottom sheet price style: unified phrase rhythm without fragmented scales. v107: refined hero price spacing: slightly more air after “от” and around the BYN sign, without HTML/JS changes. v108: hero price spacing and BYN sign size aligned visually with Size Guide card price; integrated in existing hero/BYN layers, no HTML/JS changes. v109: hero price inline SVG rhythm retained from the current working warm-storage version. v110: refined mobile bottom sheet controls: share button, close button and sticky action divider cleaned without HTML/JS changes. v111: refined bottom sheet share icon to a more recognizable iOS-like square-and-arrow-up symbol; no HTML/JS changes. v112: mobile hero 2.5 cleanup — removed heavy glass subtitle, refined image gradient and CTA-card overlap; no HTML/JS changes. v113: desktop hero price value increased from 26px to 32px in the existing desktop media layer; no mobile/HTML/JS changes. v114: mobile Size Guide filters made sticky under the app header using native sticky positioning; no HTML/JS changes. v115: tested solid sticky panel; rejected because non-sticky state lost the soft fade and vertical rhythm became uneven. v116: restored the soft non-sticky fade and added .is-stuck styling for a solid sticky panel with a clean divider; mobile only. v117: refined mobile sticky filter spacing: equal vertical padding, safer clearance before cards, and calmer active-chip shadow to avoid clipping near badges. v118: added one-pixel safer mobile filter breathing room and pinned the stuck filter as a background layer while bottom sheet or mobile menu is open. v119: tested overlay clone; rejected because it created layer artefacts and hid the app header in the dimmed background. v120: returned to real sticky filter with scroll-lock compensation; no clone and no layout jump. v121: stability polish for overlay open/close; sticky state is frozen during scroll locks to avoid intermittent iOS jumps. v124: replaced real-filter freeze with a short non-interactive unlock cover to prevent flicker without moving the real sticky filter. v125: kept the unlock cover below the app header and aligned it with subpixel coordinates, preventing the header/filter shadow from flashing on bottom sheet close. v126: added a short overlay-settling state for mobile cards/badges to prevent repaint flicker after bottom sheet or mobile menu unlock. v127: removed the mobile sticky size-filter box-shadow and kept a stable divider line to prevent Safari shadow repaint flicker after bottom sheet unlock; JS unchanged from v77. v128: added .ts-size-grid--four as a clean desktop grid modifier for product pages with a fixed XS/S/M/L set; shared card shadows and mobile/tablet behavior remain inherited from the base size guide system. v129: added storage-boxes scoped equal-height support for the four-card desktop grid, split tariff rows for 1st/2nd floor pricing, bottom-sheet split tariff rendering styles, and mobile hiding for physical dimensions in compact cards. v130: refined the four-card XS/S/M/L grid: title now owns the first row, meta chips move below it, tariff rows no longer stretch sibling cards when one card is opened. v131: removed the leftover equal-height desktop stretch from the four-card grid and compacted storage-box meta chips so volume and physical size fit on one row. v132: refined storage-box mobile cards and sheet details: area chip is visible on mobile, descriptions clamp to two lines, split tariff tables fit mobile sheet width, and optional MIGX notes get sheet-only styling. v133: simplified storage-box bottom sheet copy flow, removed the styled best-for info box, kept only the discount note, and compacted mobile meta chips with hidden labels for this page only. v134: kept area/volume labels visible in storage-box mobile cards, but made those meta chips slightly more compact only on this page. v135: reordered storage-box bottom sheet information flow; discount note became a compact tariff hint, best-for moved below tariffs as a calm choice note. v136: aligned the storage-box bottom sheet choice note typography with the regular sheet description to keep the mobile sheet calmer and visually simpler. v137: removed duplicate page-level @font-face declarations; Ситибокс fonts are now declared only in citybox-base.css to avoid repeated font matching/fallback flashes across product pages. v138: added a page-scoped storage boxes rental timeline component inside the existing steps system; warm-storage default steps remain unchanged. v139: added page-scoped storage boxes use-case image cards for the home/business section; shared advantages component remains reused with storage-specific content. v140-v144: refined storage boxes hero features and compact three-card usecases. v145: simplified storage boxes usecases into non-clickable scenario cards; removed tag/hint/note UI from this component. v146-v147: returned mobile usecases to visual swipe cards and aligned movement with shared usecases mechanics. v148: fixed mobile storage-boxes usecases end gutter: right air now matches the left page gutter using last-card margin instead of oversized scroll padding. v149: fixed storage-boxes mobile hero features: the second and third items now share one row when the page has only three hero feature items. v150: added scoped container-rent page support for XL/XXL container cards, choice panel and container use cases. v151: refined container-rent hero actions to keep all CTA buttons in one desktop row and added a simple centered XL/XXL size guide layout without the choice side panel. v152: restored shared hero button height rhythm for container-rent, kept desktop hero actions in one row by width/gap only, and made container hero features a clean 2x2 grid on desktop and mobile. v154: removed the container-rent side choice panel from the intended size guide flow, cleaned unused choice-panel CSS, and kept size card CTA/tariff order unchanged. v155: refactored the existing storage-boxes rental timeline rules into shared product-page timeline rules for storage boxes and container rent pages. v156: adjusted shared product timeline gradients so the visual emphasis moves toward the final step on desktop and mobile. v157: added scoped home page presentation rules under .home-page, reusing the warm-storage design system without JS changes or product-page side effects. v158: brightened home client logos by removing grayscale treatment and aligned home final CTA Telegram button with shared messenger icon behavior. v159: enlarged home client logos and gave the clients grid a more presentation-like desktop/tablet rhythm without affecting product pages. v160: reworked home news into an editorial featured-card plus compact updates layout with CSS-only mobile scroll-snap. v161: balanced home news desktop layout: featured card no longer exceeds half width, compact news become text-first rows on desktop, while mobile keeps poster-like cards with readable overlays. v162: made home news more compact: desktop featured card matches product card scale, secondary news become a lightweight list, and mobile compact cards show captions below images. v183: rebuilt homepage hero as a service-level photo hero with one CTA, real image path, soft desktop veil and mobile 2x2 feature cards; scoped to .home-page only, no JS changes. v184: returned desktop hero to the previous compact container rhythm: text left, real photo right, features below, without the old format panel. v185: aligned mobile hero with the warm-storage image-overlay pattern: title/subtitle over a dimmed image, CTA in a white overlap card. v186: removed decorative warm/yellow hero glow, removed mobile top gap after header, and refit hero features into compact ts-like list items. v187: mobile homepage hero feature list now reuses ts-hero feature markup, hides the mobile eyebrow without shifting title, and updates service-level feature copy. v188: fixed desktop home hero features after ts-pattern merge; resets inherited card border/shadow/font-weight while keeping mobile warm-storage pattern. v193: rollback home formats to the stable pre-bottom-sheet home-format-card markup; no ts-size-card, no ts-size-grid, no ts-size-sheet and no JS dependency for this section. v194: home formats keep the stable no-bottom-sheet home-format-card markup, add Thumb3x images in the chunk and restyle cards closer to shared size-card rhythm without touching JS. v195: home formats refined to match warm-storage/storage-box card rhythm: Thumb3x via resource TV in chunk, no bottom sheet, desktop cards and mobile horizontal cards integrated cleanly without JS changes. v196: home formats aligned closer to shared mobile size-card behavior: card image width/radius, badge position, button height and single meta chip refined without JS changes. v197: home format cards became whole-card links on desktop and mobile; visual button/more labels are spans, no JS and no bottom sheet changes. v198: integrated the mobile floating header with home/product heroes and restyled the mobile size filter as a cleaner app-like sticky card; no JS or HTML changes. v199: removed the mobile product-hero breadcrumb fade overlay that created a dark rectangular artefact near the app header; no header, filter, hero or JS logic changes. v203-v204: mobile Size Guide filter is no longer sticky; it remains a horizontal static swipe row without scroll-lock cover layers. v206: bottom sheet image reveal is smoothed without touching the static horizontal mobile filter. v207: bottom sheet badge reveal is synchronized with the media fade; mobile card badges no longer change styles on overlay open. v208: restored homepage Google reviews summary/card/mobile swipe styles lost during bottom-sheet badge polish; no JS changes. v209: aligned homepage format cards desktop grid with the shared warm-storage size-card grid width logic; no mobile/JS changes. v210: matched homepage format meta chips to the shared warm-storage size-card meta-item style while keeping home markup scoped; no HTML/JS changes. v211: restored the lightweight homepage Google reviews summary from v202 on top of the current v210 file; no HTML/JS changes. v212: redesigned homepage advantages as a scoped Bento / Clean premium asymmetry block; requires updated tpl.home.advantages markup, no JS changes. v213: refined homepage advantages lead card with a real photo, removed the timeline and reduced repeated copy; no JS changes. v214: increased the homepage advantages lead photo height, switched it to the Малиновка box image, and removed warm/tea mobile background tones; no JS changes. v215: refined homepage advantages lead card — image now uses the original 4:3 photo ratio, lead tags removed, and mobile hides the lead block completely so only the four advantage cards remain; no JS changes. v216: homepage advantages mobile section head centered while keeping lead hidden and four cards only on mobile. v217: reverted active homepage advantages to four equal cards and kept only scoped card icons; bento/photo/timeline experiment moved out of the active chunk. v218: fixed mobile Size Guide filter horizontal page overflow by keeping the swipe row inside its container; no JS, hero, cards or bottom-sheet changes. v219: mobile Size Guide filter uses a safe full-bleed horizontal scroller: left aligned with content, right edge flush to viewport, without document-level horizontal overflow. v220: added Size Guide gallery support: card photo count badge, mobile bottom-sheet gallery, thumbnails, arrows and desktop detail modal styling; no global/header/footer changes. v221: fixed desktop gallery modal overflow when multiple photos are present: the gallery stage no longer forces the left column over the text column; no HTML/JS changes. v222: balanced desktop detail modal: CTA is placed directly under tariffs, right column no longer behaves like a mobile sticky footer, and gallery stage uses a calmer desktop ratio; no HTML/JS changes. v223: added mobile iOS gesture hygiene for size sheet/gallery controls and app menu touch targets to prevent accidental double-tap viewport zoom; paired with warm-storage.js v104 fallback. v224: simplified mobile bottom-sheet gallery UI: hidden mobile arrows and sheet badge, calmer counter and thumbnail rhythm; desktop modal, JS and card layout unchanged. v225: enabled controlled BYN SVG stroke in the existing BYN sign utility and added BoonSign selector support; no other CSS sections changed. v226: added a real corridor proof image to the warm-storage advantages intro card and converted warm-storage use cases into four visual photo cards with CSS-only mobile scroll-snap; no JS/header/footer changes. v227: reworked warm-storage advantages into a proof band: intro text and one image above four compact advantage cards; usecases unchanged. v228: fixed desktop advantages proof image fill by removing the unsafe max-height cap, so no grey background remains below the photo; no HTML/JS changes. v229: fixed desktop advantages proof media without stretching the whole proof band: the photo now has a controlled desktop height and crops inside its rounded frame; mobile/usecases unchanged. v230: rebalanced desktop advantages composition by moving the proof image to the left and the intro copy to the right, preserving mobile layout and existing image crop behaviour. v232: clean height-only desktop adjustment for the advantages proof image; replaced the existing desktop media height value without adding extra override selectors. v233: cleaned today’s advantages/usecases CSS pass: integrated desktop/tablet advantages overrides into the component section, removed the late duplicate override block and duplicate changelog entry; no visual redesign intended. v234: locked mobile use-case media to a fixed responsive height instead of relying only on aspect-ratio, so all four photo windows stay identical despite different source image proportions. v235: softened the mobile use-case media fix: replaced the oversized fixed-height rule with a slightly taller aspect-ratio so cards stay equal without becoming too square. v236: fixed mobile use-case last-card media shrink by moving the end gutter from last-card margin to grid right padding; all cards now keep the same column width and media height. v237: increased mobile advantages proof image height from 188px to 200px in the existing mobile rule only; usecases/desktop/HTML/JS unchanged. v238: cleaned mobile advantages proof image sizing: removed fixed image height/min-height and kept a 200px max-height cap, matching the tested mobile crop without making the photo feel narrow. v239: switched Size Guide sheet/gallery active photo to cover and let the desktop stage inherit the base 16/10 ratio, removing grey side bars in popup and mobile sheet without HTML/JS changes. v240: added a scoped desktop-only split Advantages layout for storage-boxes and container-rent pages; warm-storage proof-image Advantages and all mobile layouts stay unchanged. v241: refactored container-rent desktop Size Guide card flow for the current shared .ts-size-grid markup: title owns the first row, meta chips move below it; scoped to .container-rent-page only. v242: added a symmetric mobile end gutter for the horizontal Size Guide filter scroller so the last active filter keeps the same right-side page air as the first filter keeps on the left; CSS-only, no JS/HTML changes. v243: restored the container-rent hero actions to the shared warm-storage wrapping behavior near the 1025px desktop breakpoint; removed the page-scoped no-wrap/fixed-flex forcing that let the Telegram CTA overlap the hero image. v244: refined shared desktop hero transition rhythm: the negative details pull-up now starts only from 1229px, preventing the price from crowding the subtitle in the 1025–1228px range across product landing pages; no HTML/JS changes. */ /* ===== 01. Foundations: tokens and base ===== */ :root { --ts-font-text: "Roboto", Arial, sans-serif; --ts-font-heading: "Roboto Slab", Georgia, serif; --ts-yellow: #ffd700; --ts-orange: #ff7816; --ts-orange-hover: #e96a0f; --ts-dark: #454545; --ts-dark-hover: #303030; --ts-white: #ffffff; --ts-bg: #f7f7f7; --ts-bg-soft: #f4f5f6; --ts-bg-alt: #efefef; --ts-border: #e9e9e9; --ts-border-strong: #e5e5e5; --ts-field-border: #dcdcdc; --ts-control-border: #b8b8b8; --ts-text-muted: #555; --ts-text-light: #666; --ts-radius: 18px; --ts-radius-sm: 12px; --ts-radius-lg: 24px; --ts-btn-radius: 16px; --ts-btn-radius-lg: 18px; --ts-icon-btn-radius: 16px; --ts-btn-height: 52px; --ts-btn-height-lg: 56px; --ts-icon-btn-size: 52px; --ts-shadow: 0 14px 40px rgba(0, 0, 0, 0.08); --ts-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.05); --ts-motion-duration: 0.28s; --ts-motion-duration-fast: 0.18s; --ts-motion-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Standalone base previously supplied by main.css */ *, *::before, *::after { box-sizing: border-box; } html { min-width: 320px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-width: 320px; background: var(--ts-white); color: var(--ts-dark); font-family: var(--ts-font-text); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } img, picture, svg, video, canvas { display: block; max-width: 100%; } img, picture, video, canvas { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } .warm-storage-page { color: var(--ts-dark); background: var(--ts-white); } .warm-storage-page section { padding: 48px 0; } .container { width: min(1200px, calc(100% - 32px)); margin: 0 auto; } /* ===== 02. Shared layout: containers and section heads ===== */ .ts-section-head { max-width: 760px; margin: 0 auto 32px; text-align: center; } .ts-section-head--left { max-width: none; margin-left: 0; text-align: left; } .ts-section-head h2 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; } .ts-section-head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ts-dark); } /* ===== 03. Shared UI: buttons and links ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--ts-btn-height); padding: 0 22px; border: 1px solid transparent; border-radius: var(--ts-btn-radius); font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; appearance: none; -webkit-appearance: none; transition: background-color var(--ts-motion-duration-fast) ease, color var(--ts-motion-duration-fast) ease, border-color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; cursor: pointer; } .btn--accent { background: var(--ts-orange); color: var(--ts-white); box-shadow: 0 10px 20px rgba(255, 120, 22, 0.18); } .btn--accent:hover { background: var(--ts-orange-hover); box-shadow: 0 12px 24px rgba(255, 120, 22, 0.22); } .btn--dark { background: var(--ts-dark); color: var(--ts-white); box-shadow: none; } .btn--dark:hover { background: var(--ts-dark-hover); } .btn--outline { background: var(--ts-white); color: var(--ts-dark); border-color: rgba(69, 69, 69, 0.32); box-shadow: none; } .btn--outline:hover { background: var(--ts-dark); color: var(--ts-white); } .btn--small { min-height: 46px; padding: 0 18px; border-radius: 15px; font-size: 15px; } .btn--full { width: 100%; } .btn--phone { gap: 10px; } .btn__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; } .btn__icon img { display: block; width: 18px; height: 18px; object-fit: contain; } .btn--outline.btn--messenger .btn__icon img { transition: filter 0.2s ease; } .btn--outline.btn--messenger:hover .btn__icon img, .btn--outline.btn--messenger:focus-visible .btn__icon img { filter: brightness(0) invert(1); } .btn--outline.btn--messenger:focus-visible { background: var(--ts-dark); color: var(--ts-white); } .btn__icon--phone { width: 18px; height: 18px; } .btn__icon--phone img { width: 18px; height: 18px; } .btn--messenger { gap: 8px; } .btn--messenger .btn__text { display: inline; } /* ===== 03A. Shared utility: phone icon visual normalization ===== */ /* Один финальный блок вместо дублей unify/unify-strong. Без !important. */ .warm-storage-page .btn--phone .btn__icon, .warm-storage-page a[href^="tel:"] .btn__icon, .warm-storage-page .btn__icon--phone { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; } .warm-storage-page .btn--phone .btn__icon img, .warm-storage-page .btn--phone .btn__icon svg, .warm-storage-page .btn--phone .btn__icon i, .warm-storage-page a[href^="tel:"] .btn__icon img, .warm-storage-page a[href^="tel:"] .btn__icon svg, .warm-storage-page a[href^="tel:"] .btn__icon i, .warm-storage-page .btn__icon--phone img, .warm-storage-page .btn__icon--phone svg, .warm-storage-page .btn__icon--phone i { display: block; width: 20px; height: 20px; min-width: 20px; font-size: 20px; line-height: 1; object-fit: contain; } .warm-storage-page .btn--phone .btn__icon svg, .warm-storage-page a[href^="tel:"] .btn__icon svg, .warm-storage-page .btn__icon--phone svg { fill: currentColor; } @media (max-width: 767px) { .warm-storage-page .ts-hero__actions .btn--phone .btn__icon, .warm-storage-page .ts-final-cta__actions .btn--phone .btn__icon, .warm-storage-page .ts-location__actions .btn--phone .btn__icon, .warm-storage-page .ts-hero__actions a[href^="tel:"] .btn__icon, .warm-storage-page .ts-final-cta__actions a[href^="tel:"] .btn__icon, .warm-storage-page .ts-location__actions a[href^="tel:"] .btn__icon, .warm-storage-page .ts-hero__actions .btn__icon--phone, .warm-storage-page .ts-final-cta__actions .btn__icon--phone, .warm-storage-page .ts-location__actions .btn__icon--phone { flex-basis: 24px; width: 24px; height: 24px; } .warm-storage-page .ts-hero__actions .btn--phone .btn__icon img, .warm-storage-page .ts-hero__actions .btn--phone .btn__icon svg, .warm-storage-page .ts-hero__actions .btn--phone .btn__icon i, .warm-storage-page .ts-final-cta__actions .btn--phone .btn__icon img, .warm-storage-page .ts-final-cta__actions .btn--phone .btn__icon svg, .warm-storage-page .ts-final-cta__actions .btn--phone .btn__icon i, .warm-storage-page .ts-location__actions .btn--phone .btn__icon img, .warm-storage-page .ts-location__actions .btn--phone .btn__icon svg, .warm-storage-page .ts-location__actions .btn--phone .btn__icon i, .warm-storage-page .ts-hero__actions a[href^="tel:"] .btn__icon img, .warm-storage-page .ts-hero__actions a[href^="tel:"] .btn__icon svg, .warm-storage-page .ts-hero__actions a[href^="tel:"] .btn__icon i, .warm-storage-page .ts-final-cta__actions a[href^="tel:"] .btn__icon img, .warm-storage-page .ts-final-cta__actions a[href^="tel:"] .btn__icon svg, .warm-storage-page .ts-final-cta__actions a[href^="tel:"] .btn__icon i, .warm-storage-page .ts-location__actions a[href^="tel:"] .btn__icon img, .warm-storage-page .ts-location__actions a[href^="tel:"] .btn__icon svg, .warm-storage-page .ts-location__actions a[href^="tel:"] .btn__icon i, .warm-storage-page .ts-hero__actions .btn__icon--phone img, .warm-storage-page .ts-hero__actions .btn__icon--phone svg, .warm-storage-page .ts-hero__actions .btn__icon--phone i, .warm-storage-page .ts-final-cta__actions .btn__icon--phone img, .warm-storage-page .ts-final-cta__actions .btn__icon--phone svg, .warm-storage-page .ts-final-cta__actions .btn__icon--phone i, .warm-storage-page .ts-location__actions .btn__icon--phone img, .warm-storage-page .ts-location__actions .btn__icon--phone svg, .warm-storage-page .ts-location__actions .btn__icon--phone i { width: 22px; height: 22px; min-width: 22px; font-size: 22px; } } /* ===== 03B. Shared utility: BYN sign and screen-reader helper ===== */ .byn-sign, .BoonSign, .ts-hero__price .byn-sign, .ts-hero__price .BoonSign, .ts-size-card__price .byn-sign, .ts-size-card__price .BoonSign, .ts-size-sheet__price .byn-sign, .ts-size-sheet__price .BoonSign { --byn-sign-stroke-width: 5; display: inline-block; width: 0.68em; height: 0.78em; margin: 0 0.06em 0 0.045em; color: currentColor; vertical-align: -0.06em; flex: 0 0 auto; } .ts-hero__price .byn-sign, .ts-hero__price .BoonSign { width: 0.64em; height: 0.74em; margin-left: 0.04em; margin-right: 0.055em; vertical-align: -0.055em; transform: none; } .ts-size-card__price .byn-sign, .ts-size-card__price .BoonSign { width: 0.64em; height: 0.74em; margin-left: 0.04em; margin-right: 0.055em; vertical-align: -0.055em; } .ts-size-sheet__price .byn-sign, .ts-size-sheet__price .BoonSign { width: 0.68em; height: 0.78em; margin-left: 0.045em; margin-right: 0.06em; vertical-align: -0.06em; } .byn-sign svg, .BoonSign svg, .ts-hero__price .byn-sign svg, .ts-hero__price .BoonSign svg, .ts-size-card__price .byn-sign svg, .ts-size-card__price .BoonSign svg, .ts-size-sheet__price .byn-sign svg, .ts-size-sheet__price .BoonSign svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor !important; } .byn-sign path, .BoonSign path, .ts-hero__price .byn-sign path, .ts-hero__price .BoonSign path, .ts-size-card__price .byn-sign path, .ts-size-card__price .BoonSign path, .ts-size-sheet__price .byn-sign path, .ts-size-sheet__price .BoonSign path { fill: currentColor !important; stroke: currentColor; stroke-width: var(--byn-sign-stroke-width); stroke-linejoin: round; paint-order: stroke fill; } .ts-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .ts-inline-link { color: var(--ts-orange); font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(255, 120, 22, 0.32); transition: color 0.2s ease, border-color 0.2s ease; } .ts-inline-link:hover, .ts-inline-link:focus-visible { color: var(--ts-orange-hover); border-color: currentColor; } #ts-contact-phone { scroll-margin-top: 96px; } /* ===== 04. Page rhythm: section backgrounds and shared cards ===== */ .ts-location { background: var(--ts-white); } .ts-steps { background: #eef0f2; } .ts-size-guide { background: var(--ts-bg-soft); } .ts-faq { background: var(--ts-white); } .ts-size-guide .ts-section-head { margin-bottom: 28px; } /* ===== 05. Breadcrumbs ===== */ /* Product pages can use either the legacy .ts-breadcrumbs markup or the shared tpl.global.breadcrumbs.text output wrapped in .ts-hero__breadcrumbs. Desktop keeps the original product-hero rhythm; mobile gets a text-page-like one-line breadcrumb overlay above the hero title. */ .ts-hero__breadcrumbs { margin: 0 0 22px; } .ts-hero__breadcrumbs .cb-text-breadcrumbs { margin: 0; } .ts-breadcrumbs, .ts-hero__breadcrumbs .cb-text-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: rgba(69, 69, 69, 0.72); font-size: 14px; line-height: 1.35; } .ts-breadcrumbs { gap: 6px; margin: 0 0 22px; font-size: 13px; color: rgba(69, 69, 69, 0.56); } .ts-hero__breadcrumbs .cb-text-breadcrumbs__item, .ts-hero__breadcrumbs .cb-text-breadcrumbs__sep, .ts-breadcrumbs li, .ts-breadcrumbs span { display: inline-flex; align-items: center; min-width: 0; color: inherit; } .ts-hero__breadcrumbs .cb-text-breadcrumbs__item a, .ts-breadcrumbs a { color: inherit; text-decoration: none; transition: color .18s ease; } .ts-hero__breadcrumbs .cb-text-breadcrumbs__item a:hover, .ts-hero__breadcrumbs .cb-text-breadcrumbs__item a:focus-visible, .ts-breadcrumbs a:hover, .ts-breadcrumbs a:focus-visible { color: var(--ts-orange); } .ts-hero__breadcrumbs .cb-text-breadcrumbs__item.is-current { color: var(--ts-dark); font-weight: 500; } .ts-hero__breadcrumbs .cb-text-breadcrumbs__sep { color: rgba(69, 69, 69, 0.38); } /* ===== 06. Hero ===== */ .ts-hero { padding-top: 36px; background: var(--ts-white); } .ts-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "intro media" "details media"; gap: 22px 36px; align-items: start; } .ts-hero__intro { grid-area: intro; } .ts-hero__details { grid-area: details; max-width: 620px; } .ts-hero__media { grid-area: media; } .ts-hero__content { max-width: 620px; } .ts-hero__title-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; } .ts-hero__title-row .ts-hero__title { margin-bottom: 0; } .ts-hero__title { margin: 0 0 16px; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.02em; } .ts-hero__badge { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; margin-top: 6px; border-radius: 999px; background: rgba(255, 120, 22, 0.08); color: var(--ts-orange); font-size: 13px; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .ts-hero__subtitle { max-width: 620px; margin: 0; font-size: 20px; line-height: 1.6; color: var(--ts-text-muted); } .ts-hero__price { width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 14px 16px; background: var(--ts-white); border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 16px; box-shadow: var(--ts-shadow-soft); } .ts-hero__price-value { display: inline-block; white-space: nowrap; font-family: var(--ts-font-text, "Roboto", Arial, sans-serif); font-size: 26px; line-height: 1.08; font-weight: 700; font-variant-numeric: lining-nums; letter-spacing: -0.02em; color: var(--ts-orange); } .ts-hero__actions, .ts-location__actions, .ts-final-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ts-hero__actions .btn, .ts-location__actions .btn, .ts-final-cta__actions .btn { border-radius: var(--ts-btn-radius); } .ts-hero__actions { margin-bottom: 18px; } .ts-hero__actions .btn--dark { min-width: 240px; } .ts-hero__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0 0 18px; padding: 0; list-style: none; } .ts-hero__features li { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 14px; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); background: var(--ts-white); box-shadow: var(--ts-shadow-soft); font-weight: 600; line-height: 1.35; } .ts-hero__features li::before { content: none; } .ts-hero-feature__icon { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 12px; background: rgba(255, 120, 22, 0.07); color: var(--ts-orange); } .ts-hero-feature__icon svg { display: block; width: 18px; height: 18px; overflow: visible; } .ts-hero-feature__text { display: block; min-width: 0; } .ts-hero__media img { display: block; width: 100%; height: auto; border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow); } /* ===== 07. Contacts: base panel ===== */ .ts-contacts__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px; align-items: start; max-width: 1120px; margin: 0 auto; } .ts-contacts__info, .ts-contacts__form { min-width: 0; } .ts-contact-panel { display: flex; flex-direction: column; height: auto; padding: 28px; } .ts-contact-panel__eyebrow { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; color: var(--ts-orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .ts-contact-panel h3 { margin: 0 0 10px; font-size: 30px; line-height: 1.15; color: var(--ts-dark); } .ts-contact-panel p { margin: 0; line-height: 1.6; color: var(--ts-text-muted); } .ts-contact-phone { display: block; background: #ffffff; border: 1px solid var(--ts-border); color: var(--ts-dark); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .ts-contact-phone__label, .ts-contact-line__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .ts-contact-phone__label { margin-bottom: 6px; } .ts-contact-phone__value { display: block; font-size: 34px; line-height: 1.1; font-weight: 800; } .ts-messenger-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ts-messenger-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ts-border); box-shadow: none; text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .ts-messenger-card__icon { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .ts-messenger-card__icon img { display: block; width: 24px; height: 24px; } .ts-messenger-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ts-messenger-card__title { font-weight: 700; color: var(--ts-dark); line-height: 1.2; } .ts-messenger-card__action { font-size: 13px; color: var(--ts-text-light); line-height: 1.2; } .ts-contact-lines { display: grid; gap: 10px; margin-top: 2px; } .ts-contact-line { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; background: #ffffff; border: 1px solid var(--ts-border); border-radius: 14px; line-height: 1.5; color: var(--ts-dark); } .ts-contact-line--accent { background: #fff7ef; border-color: rgba(255, 120, 22, 0.16); } /* ===== 07A. Contacts compact info text ===== */ .ts-contact-line__label { margin-bottom: 0; } .ts-contact-line__value, .ts-contact-line__value a { text-decoration: none; font-weight: 700; } .ts-contact-line__value span { font-weight: 400; color: var(--ts-text-muted); } /* ===== 08. Form: base fields ===== */ .ts-form-box h3 { margin: 0 0 10px; font-size: 28px; } .ts-form-box p { margin: 0 0 20px; line-height: 1.6; } .ts-form__grid-row { display: block; } @media (min-width: 900px) { .ts-form__grid-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .ts-form__label { margin-bottom: 8px; } .ts-form__required { color: var(--ts-orange); font-weight: 700; } .ts-form__optional { color: #777; font-weight: 400; font-size: 14px; } .ts-form__input, .ts-form__textarea { width: 100%; border: 1px solid var(--ts-field-border); font: inherit; color: var(--ts-dark); } .ts-form__select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 48px; } .ts-form__input:focus, .ts-form__textarea:focus, .ts-form__select:focus { outline: none; } /* ===== 08A. Form consent checkbox ===== */ .ts-form-consent { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: flex-start; color: var(--ts-text-muted); font-size: 13px; line-height: 1.4; cursor: pointer; } .ts-form-consent__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .ts-form-consent__box { position: relative; width: 28px; height: 28px; margin-top: 1px; border: 1px solid var(--ts-control-border); border-radius: 6px; background: #ffffff; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .ts-form-consent__box::after { content: ""; position: absolute; left: 8px; top: 4px; width: 9px; height: 15px; border: solid #ffffff; border-width: 0 3px 3px 0; opacity: 0; transform: rotate(45deg) scale(0.8); transition: opacity 0.16s ease, transform 0.16s ease; } .ts-form-consent__input:checked + .ts-form-consent__box { border-color: var(--ts-orange); background: var(--ts-orange); } .ts-form-consent__input:checked + .ts-form-consent__box::after { opacity: 1; transform: rotate(45deg) scale(1); } .ts-form-consent__input:focus-visible + .ts-form-consent__box { border-color: var(--ts-orange); box-shadow: 0 0 0 4px rgba(255, 120, 22, 0.14); } .ts-form-consent__text a { color: var(--ts-orange); text-decoration: none; border-bottom: 1px solid rgba(255, 120, 22, 0.35); transition: color 0.2s ease, border-color 0.2s ease; } .ts-form-consent__text a:hover, .ts-form-consent__text a:focus-visible { color: var(--ts-orange-hover); border-color: currentColor; } /* ===== 09. Shared grids and cards ===== */ .ts-steps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ts-usecases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } /* Cards */ .warm-storage-page .ts-usecases__grid .ts-usecase-card, .warm-storage-page .ts-steps__grid .ts-step-card, .warm-storage-page .ts-size-grid .ts-size-card { position: relative; background: var(--ts-white); border: 1px solid var(--ts-border); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .ts-advantages__intro, .warm-storage-page .ts-advantages__grid .ts-adv-card { background: var(--ts-white); border: 1px solid var(--ts-border); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover, .warm-storage-page .ts-steps__grid .ts-step-card:hover, .warm-storage-page .ts-size-grid .ts-size-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.08); } .warm-storage-page .ts-steps__grid .ts-step-card { display: block; min-height: 180px; padding: 24px; border-color: rgba(69, 69, 69, 0.08); border-radius: 22px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.055); } .warm-storage-page .ts-steps__grid .ts-step-card:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(17, 24, 39, 0.065); } /* ===== 10. Advantages ===== */ .ts-advantages { background: #eef0f2; } .ts-advantages .container { position: relative; } .ts-advantages__layout { display: block; } .ts-advantages__intro { position: relative; display: grid; grid-template-columns: minmax(320px, 0.78fr) minmax(0, 0.96fr); grid-template-areas: "media main" "media note"; gap: 24px 30px; align-items: center; min-height: 0; padding: 32px; overflow: hidden; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 28px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05); } .ts-advantages__intro::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, #ff7a12 0%, #ff9d43 100%); } .ts-advantages__intro-main { position: relative; z-index: 1; grid-area: main; display: flex; flex-direction: column; gap: 18px; align-self: start; min-width: 0; padding-left: 0; } .ts-advantages__eyebrow { display: inline-flex; align-self: flex-start; align-items: center; width: fit-content; min-height: 34px; padding: 7px 14px; margin: 0; border-radius: 999px; background: #fff9f4; border: 1px solid rgba(255, 122, 18, 0.10); color: #ff7a12; font-size: 13px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; } .ts-advantages__intro h2 { margin: 0; max-width: 8.8em; font-size: clamp(32px, 3.3vw, 56px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ts-dark); } .ts-advantages__intro p { margin: 0; max-width: 30em; font-size: 18px; line-height: 1.58; color: var(--ts-text-muted); } .ts-advantages__note { position: relative; z-index: 1; grid-area: note; align-self: end; max-width: none; margin: 0; padding: 18px 20px; border-radius: 20px; background: #fcf7f1; border: 1px solid rgba(255, 122, 18, 0.10); color: var(--ts-dark); font-size: 17px; line-height: 1.55; } .ts-advantages__media { position: relative; grid-area: media; align-self: stretch; min-height: 260px; margin: 0; overflow: hidden; border: 1px solid rgba(255, 122, 18, 0.10); border-radius: 24px; background: #f1f1f1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .ts-advantages__media::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(17, 24, 39, 0.20) 100%); pointer-events: none; } .ts-advantages__media img { display: block; width: 100%; height: 100%; min-height: 260px; max-height: none; object-fit: cover; object-position: center; } .ts-advantages__media-caption { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; max-width: calc(100% - 28px); min-height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: rgba(69, 69, 69, 0.86); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (min-width: 901px) { .ts-advantages__note { align-self: start; } .ts-advantages__media { align-self: center; height: clamp(360px, 25vw, 400px); min-height: 0; } .ts-advantages__media img { height: 100%; min-height: 0; max-height: none; object-fit: cover; } } .ts-advantages__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 18px; } .warm-storage-page .ts-advantages__grid .ts-adv-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 14px; align-items: start; min-height: 190px; padding: 23px 20px; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 24px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .warm-storage-page .ts-advantages__grid .ts-adv-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(17, 24, 39, 0.07); border-color: rgba(255, 122, 18, 0.14); } .ts-adv-card__icon { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; margin-top: 1px; border-radius: 13px; background: #fff9f4; border: 1px solid rgba(255, 122, 18, 0.10); color: #ff7a12; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .ts-adv-card__icon svg { display: block; width: 19px; height: 19px; overflow: visible; } .ts-adv-card__body { grid-column: 2; min-width: 0; } .ts-adv-card h3 { margin: 0 0 9px; font-size: clamp(19px, 1.35vw, 23px); line-height: 1.13; color: var(--ts-dark); overflow-wrap: normal; } .ts-adv-card p { margin: 0; max-width: none; font-size: 16px; line-height: 1.58; color: var(--ts-text-muted); } .ts-adv-card__list { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.58; color: var(--ts-text-muted); } .ts-adv-card__list li + li { margin-top: 2px; } /* ===== 10A. Advantages tablet proof layout ===== */ @media (max-width: 1199px) and (min-width: 901px) { .ts-advantages__intro { grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1fr); gap: 22px; padding: 30px; } .ts-advantages__intro h2 { max-width: 9.5em; } .ts-advantages__media, .ts-advantages__media img { min-height: 245px; } .ts-advantages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .warm-storage-page .ts-advantages__grid .ts-adv-card { min-height: 168px; } } @media (max-width: 900px) and (min-width: 768px) { .ts-advantages__intro { display: flex; flex-direction: column; gap: 20px; min-height: auto; padding: 30px; } .ts-advantages__intro h2, .ts-advantages__intro p, .ts-advantages__note { max-width: none; } .ts-advantages__media { min-height: 0; } .ts-advantages__media img { height: 260px; min-height: 260px; max-height: 260px; } .ts-advantages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .warm-storage-page .ts-advantages__grid .ts-adv-card { min-height: 168px; } } /* ===== 10B. Product page advantages desktop split layout ===== */ /* Тёплый склад сохраняет базовую proof-image композицию Advantages. Для страниц боксов и контейнеров, где в intro нет изображения, desktop-раскладка возвращает главный смысловой блок слева и четыре преимущества справа в сетке 2×2. */ @media (min-width: 1025px) { .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__layout { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr); gap: 18px; align-items: stretch; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__intro { display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: 0; height: 100%; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__intro-main { grid-area: auto; align-self: stretch; gap: 18px; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__intro h2 { max-width: 9.2em; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__intro p { max-width: 32em; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__note { grid-area: auto; align-self: stretch; margin-top: auto; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: stretch; margin-top: 0; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-advantages__grid .ts-adv-card { min-height: 190px; } } /* ===== 11. Use cases: base ===== */ .ts-usecases { overflow: hidden; } .ts-usecases__head { max-width: 780px; margin: 0 auto 28px; text-align: center; } .ts-usecases__head h2 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ts-dark); } .ts-usecases__head p { max-width: 640px; margin: 12px auto 0; font-size: 18px; line-height: 1.6; color: var(--ts-text-muted); } .ts-usecase-card h3 { margin: 0 0 10px; color: var(--ts-dark); } .ts-usecase-card p { margin: 0 0 18px; } .ts-usecase-card__tags span { display: inline-flex; align-items: center; } /* ===== 11A. Use cases shared container and subtle kicker ===== */ .ts-section-kicker { display: inline-block; color: var(--ts-orange); font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; } @media (min-width: 768px) { .ts-usecases .ts-section-head { max-width: 760px; margin: 0 auto 38px; text-align: center; } .ts-usecases__grid { max-width: min(1180px, 100%); margin: 0 auto; display: grid; gap: 0; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 28px; overflow: hidden; box-shadow: 0 16px 42px rgba(31, 24, 20, 0.045); } .warm-storage-page .ts-usecases__grid .ts-usecase-card { min-height: 100%; padding: 34px 28px 30px; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; transition: none; } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover { transform: none; box-shadow: none; } .ts-usecase-card__label { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; border-radius: 999px; background: #f7f2ec; color: var(--ts-dark); border: 1px solid rgba(69, 69, 69, 0.06); font-size: 12px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.035em; } .ts-usecase-card h3 { max-width: 240px; margin-bottom: 12px; } .ts-usecase-card p { max-width: 255px; color: var(--ts-dark); } .ts-usecase-card__tags { margin-top: 18px; } .ts-usecase-card__tags span { background: #faf7f3; border-color: rgba(69, 69, 69, 0.08); } } @media (min-width: 1025px) { .ts-usecases__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .warm-storage-page .ts-usecases__grid .ts-usecase-card + .ts-usecase-card { border-left: 1px solid rgba(69, 69, 69, 0.10); } .ts-usecase-card h3 { font-size: 22px; line-height: 1.18; } .ts-usecase-card p { font-size: 16px; line-height: 1.55; } } @media (min-width: 768px) and (max-width: 1024px) { .ts-usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:nth-child(even) { border-left: 1px solid rgba(69, 69, 69, 0.10); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:nth-child(n + 3) { border-top: 1px solid rgba(69, 69, 69, 0.10); } } @media (max-width: 767px) { .ts-section-kicker { font-size: 11px; letter-spacing: 0.075em; } } /* ===== 12. Steps and size card text ===== */ .ts-step-card h3, .ts-size-card__title { margin: 0 0 12px; font-size: 24px; line-height: 1.2; color: var(--ts-dark); } .ts-step-card p, .ts-size-card__desc { margin: 0; line-height: 1.6; color: var(--ts-text-muted); } .ts-step-card__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 999px; background: rgba(255, 120, 22, 0.12); border: 1px solid rgba(255, 120, 22, 0.16); color: var(--ts-orange); font-weight: 800; font-size: 17px; line-height: 1; } .ts-steps-visit { position: relative; display: flex; align-items: center; gap: 16px; max-width: 900px; margin: -6px auto 28px; padding: 20px 24px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 120, 22, 0.14); border-radius: 22px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); overflow: hidden; } .ts-steps-visit::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ts-orange); } .ts-steps-visit__mark { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--ts-orange); color: var(--ts-white); font-size: 21px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgba(255, 120, 22, 0.16); } .ts-steps-visit__content { min-width: 0; } .ts-steps-visit__title { margin: 0 0 4px; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--ts-dark); } .ts-steps-visit__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ts-text-muted); } /* Product pages: compact rental timeline inside the shared steps section. */ .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps--timeline .ts-section-head { max-width: 760px; margin-right: auto; margin-left: auto; text-align: center; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps-timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: 34px auto 0; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps-timeline::before { content: ""; position: absolute; top: 29px; left: 16.666%; right: 16.666%; z-index: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, rgba(255, 120, 22, 0.10) 0%, rgba(255, 120, 22, 0.24) 46%, rgba(255, 120, 22, 0.58) 100% ); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__marker { position: relative; display: inline-flex; align-items: center; justify-content: center; justify-self: center; width: 58px; height: 58px; border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 20px; background: #fff9f4; color: var(--ts-orange); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__marker::before { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 24px; background: rgba(238, 240, 242, 0.92); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 14px; background: var(--ts-orange); color: var(--ts-white); font-size: 16px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgba(255, 120, 22, 0.18); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card { min-height: 190px; padding: 24px 22px; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 24px; background: var(--ts-white); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.05); text-align: center; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card h3 { margin: 0 0 10px; color: var(--ts-dark); font-size: clamp(21px, 1.6vw, 25px); line-height: 1.16; letter-spacing: -0.015em; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card p { margin: 0; color: var(--ts-text-muted); font-size: 16px; line-height: 1.58; } @media (max-width: 767px) { .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps--timeline { overflow: visible; padding-bottom: var(--ts-mobile-section-y-tight, 34px); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps--timeline .ts-section-head { text-align: left; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps-timeline { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-steps-timeline::before { top: 25px; bottom: 25px; left: 24px; right: auto; width: 2px; height: auto; background: linear-gradient( 180deg, rgba(255, 120, 22, 0.10) 0%, rgba(255, 120, 22, 0.24) 46%, rgba(255, 120, 22, 0.58) 100% ); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step { grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: auto; gap: 12px; align-items: start; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__marker { justify-self: start; width: 50px; height: 50px; border-radius: 18px; box-shadow: 0 8px 18px rgba(17, 24, 39, 0.04); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__marker::before { inset: -4px; border-radius: 20px; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__num { width: 30px; height: 30px; border-radius: 12px; font-size: 14px; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card { min-height: 0; padding: 17px 18px 18px; border-radius: 20px; text-align: left; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card h3 { margin-bottom: 7px; font-size: 19px; line-height: 1.18; letter-spacing: -0.012em; } .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card p { font-size: 14.5px; line-height: 1.5; } } @media (prefers-reduced-motion: reduce) { .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__marker, .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__num, .warm-storage-page:is(.storage-boxes-page, .container-rent-page) .ts-timeline-step__card { transition: none; } } /* ===== 13. Size guide: filters ===== */ .ts-size-filters { --ts-filter-x: 0px; --ts-filter-y: 0px; --ts-filter-width: 0px; --ts-filter-height: 0px; position: relative; display: flex; flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; gap: 6px; margin: 0 auto 28px; padding: 4px; isolation: isolate; } .ts-size-filters::before { content: ""; position: absolute; left: 0; top: 0; width: var(--ts-filter-width); height: var(--ts-filter-height); border-radius: 999px; background: var(--ts-orange); box-shadow: 0 8px 18px rgba(255, 120, 22, 0.18); transform: translate3d(var(--ts-filter-x), var(--ts-filter-y), 0); opacity: 0; pointer-events: none; z-index: 0; will-change: transform, width, height; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), width 0.38s cubic-bezier(0.22, 1, 0.36, 1), height 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.16s ease; } .ts-size-filters.is-indicator-ready::before { opacity: 1; } .ts-filter { position: relative; z-index: 1; padding: 12px 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; color: var(--ts-dark); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; } .ts-filter:hover, .ts-filter:focus { background: transparent; color: var(--ts-orange); } .ts-filter.is-active, .ts-filter.is-active:hover, .ts-filter.is-active:focus { background: transparent; color: var(--ts-white); font-weight: 700; } .ts-filter:focus-visible { outline: 2px solid rgba(255, 120, 22, 0.32); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .ts-size-filters::before { transition: none; } } /* ===== 14. Size guide: grid and cards ===== */ .ts-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 360px)); align-items: start; justify-content: center; gap: 20px; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, transform 0.22s ease; } /* Fixed four-card variant for pages with a compact XS/S/M/L product set. */ .ts-size-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* Storage boxes: title first, meta second; do not stretch closed tariff rows when one card opens. */ @media (min-width: 1025px) { .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card { align-self: start; height: auto !important; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(5.9em, auto) auto auto auto; grid-template-areas: "title" "meta" "desc" "price" "tariffs" "button"; align-content: start; height: auto; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__title { margin: 0 0 8px; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__meta { flex-wrap: nowrap; justify-content: flex-start; gap: 5px; margin: 0 0 12px; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__meta-item { min-height: 26px; padding: 0 7px; font-size: 12.25px; line-height: 1.15; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__meta-item--dimensions .ts-size-card__meta-label { display: none; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__meta-item--load-limit { display: none; } .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card__desc { min-height: 5.9em; } } @media (max-width: 1024px) { .warm-storage-page.storage-boxes-page .ts-size-grid--four .ts-size-card { align-self: start; height: auto !important; } } .ts-size-grid.is-ready { opacity: 1; visibility: visible; } .ts-size-grid.is-switching { opacity: 0.35; transform: translateY(8px); } .warm-storage-page .ts-size-grid .ts-size-card { display: flex; flex-direction: column; min-height: 0 !important; height: auto !important; align-self: start; padding: 0; overflow: visible; } .ts-size-card__media { position: relative; flex: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f1f1; border-bottom: 1px solid var(--ts-border); border-radius: var(--ts-radius) var(--ts-radius) 0 0; } .ts-size-card__media picture { display: block; width: 100%; height: 100%; } .ts-size-card__media picture img, .ts-size-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .ts-size-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(4.45em, auto) auto auto auto; grid-template-areas: "title meta" "desc desc" "price price" "tariffs tariffs" "button button"; flex: 1 1 auto; min-width: 0; height: auto; padding: 18px 20px 18px; } .ts-size-card__title { grid-area: title; min-width: 0; margin: 0 10px 8px 0; font-size: clamp(21px, 1.35vw, 23px); font-weight: 700; line-height: 1.13; letter-spacing: -0.01em; } .ts-size-card__meta { grid-area: meta; display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: start; gap: 5px; margin: 0 0 8px; color: var(--ts-text-muted); font-size: 13px; font-weight: 500; } .ts-size-card__meta-item:first-child { display: none; } .ts-size-card__meta-item { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 999px; background: #f6f6f6; border: 1px solid #ececec; white-space: nowrap; } .ts-size-card__desc { grid-area: desc; min-height: 4.45em; font-size: 16px; font-weight: 400; line-height: 1.48; } .ts-size-card__price { grid-area: price; margin: 10px 0 0; font-size: 26px; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--ts-orange); } /* ===== 14A. Size card tariffs ===== */ .ts-size-card__bottom { display: contents; } .ts-size-card__tariffs { grid-area: tariffs; margin-top: 14px; border: 1px solid var(--ts-border); border-radius: 14px; background: #ffffff; overflow: hidden; } .ts-size-card__tariffs summary { position: relative; display: block; padding: 13px 42px 13px 16px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.35; color: var(--ts-dark); user-select: none; } .ts-size-card__tariffs summary::-webkit-details-marker { display: none; } .ts-size-card__bottom > .js-select-size { grid-area: button; margin-top: 10px; } .ts-size-card__tariffs summary::after { content: "+"; position: absolute; top: 50%; right: 16px; font-size: 24px; line-height: 1; color: var(--ts-orange); transform: translateY(-50%); transition: transform 0.2s ease, color 0.2s ease; } .ts-size-card__tariffs[open] summary::after { content: "−"; } .ts-size-card__tariffs-content { height: 0; opacity: 0; overflow: hidden; transition: height 0.28s ease, opacity 0.22s ease; will-change: height, opacity; } .ts-size-card__tariffs-inner { overflow: hidden; } .ts-size-card__tariff-list { display: grid; gap: 8px; padding: 0 16px 16px; } .ts-size-card__tariff-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; } .ts-size-card__tariff-row span { color: var(--ts-text-muted); font-size: 14px; line-height: 1.4; } .ts-size-card__tariff-row strong { color: var(--ts-dark); font-size: 14px; line-height: 1.4; text-align: right; } .ts-size-card__tariff-row--head, .ts-size-card__tariff-row--split { display: grid; grid-template-columns: minmax(66px, 0.72fr) repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; } .ts-size-card__tariff-row--head { padding-bottom: 8px; } .ts-size-card__tariff-row--head span, .ts-size-card__tariff-row--head strong { color: var(--ts-dark); font-size: 13px; font-weight: 800; line-height: 1.25; } .ts-size-card__tariff-row--split span, .ts-size-card__tariff-row--split strong { min-width: 0; } .ts-size-card__tariff-row--split strong { font-size: 13.5px; line-height: 1.28; white-space: normal; overflow-wrap: anywhere; } .ts-size-card__tariff-row--split strong:nth-of-type(2) { color: var(--ts-orange); } .ts-size-card__badge { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 8px 14px; border-radius: 999px; background: var(--ts-yellow); color: var(--ts-dark); font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .ts-size-card.has-size-gallery .ts-size-card__media, .ts-size-card__media:has(.js-size-gallery-open) { cursor: zoom-in; } .ts-size-card__photo-count { appearance: none; -webkit-appearance: none; position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ts-dark); font: inherit; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: -0.005em; box-shadow: 0 8px 18px rgba(17, 24, 39, 0.14); cursor: zoom-in; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--ts-motion-duration-fast) ease, color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; } .ts-size-card__photo-count::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; background: currentColor; transform: translateY(-50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 5.8V4.7C5.2 3.98 5.78 3.4 6.5 3.4H11.5C12.22 3.4 12.8 3.98 12.8 4.7V5.8H13.7C14.42 5.8 15 6.38 15 7.1V13.3C15 14.02 14.42 14.6 13.7 14.6H4.3C3.58 14.6 3 14.02 3 13.3V7.1C3 6.38 3.58 5.8 4.3 5.8H5.2ZM9 12.4A2.25 2.25 0 1 0 9 7.9A2.25 2.25 0 0 0 9 12.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 5.8V4.7C5.2 3.98 5.78 3.4 6.5 3.4H11.5C12.22 3.4 12.8 3.98 12.8 4.7V5.8H13.7C14.42 5.8 15 6.38 15 7.1V13.3C15 14.02 14.42 14.6 13.7 14.6H4.3C3.58 14.6 3 14.02 3 13.3V7.1C3 6.38 3.58 5.8 4.3 5.8H5.2ZM9 12.4A2.25 2.25 0 1 0 9 7.9A2.25 2.25 0 0 0 9 12.4Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; } .ts-size-card__photo-count:hover, .ts-size-card__photo-count:focus-visible { background: #ffffff; box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18); transform: translateY(-1px); } .ts-size-card__photo-count:focus-visible { outline: 3px solid rgba(255, 120, 22, 0.24); outline-offset: 3px; } .ts-size-card__photo-count[hidden] { display: none !important; } /* ===== 15. Location ===== */ .ts-location__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 24px; align-items: center; } .ts-location__content, .ts-location__map { min-width: 0; } .ts-location__meta { display: grid; gap: 10px; margin: 20px 0 24px; line-height: 1.7; } .ts-location__map iframe, .ts-location__map > div { display: block; width: 100%; min-height: 420px; border: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--ts-shadow); background: #eee; } .ts-location-head { display: grid; gap: 10px; margin-top: 6px; } .ts-location-head__line { display: flex; align-items: center; gap: 10px; min-height: 24px; } .ts-location-head__icon { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .ts-location-head__icon img { display: block; width: 20px; height: 20px; object-fit: contain; } .ts-location-head__icon--metro img { width: 18px; height: 18px; } .ts-location-head__text { line-height: 1.5; color: var(--ts-dark); } /* ===== 16. FAQ accordion ===== */ .ts-faq__list { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(69, 69, 69, 0.10); } .ts-faq-item { margin: 0; border: 0; border-bottom: 1px solid rgba(69, 69, 69, 0.10); border-radius: 0; background: transparent; overflow: hidden; transition: height var(--ts-motion-duration) var(--ts-motion-ease), border-color var(--ts-motion-duration-fast) ease, background-color var(--ts-motion-duration-fast) ease; } .ts-faq-item.is-animating { overflow: hidden; will-change: height; } .ts-faq-item:hover { background: rgba(255, 120, 22, 0.025); box-shadow: none; } .ts-faq-item[open] { border-color: rgba(255, 120, 22, 0.22); background: rgba(255, 120, 22, 0.025); } .ts-faq-item[open] summary { border-bottom-color: transparent; } .ts-faq-item summary { position: relative; padding: 20px 44px 20px 0; border-bottom: 1px solid transparent; cursor: pointer; font-family: var(--ts-font-text, "Roboto", Arial, sans-serif); font-weight: 700; font-size: 20px; line-height: 1.35; list-style: none; color: var(--ts-dark); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color var(--ts-motion-duration-fast) ease, border-color var(--ts-motion-duration-fast) ease; } .ts-faq-item summary:hover { color: #2f2f2f; } .ts-faq-item summary::-webkit-details-marker { display: none; } .ts-faq-item summary::after { display: none; } .ts-faq-item summary::before { content: ""; position: absolute; top: 50%; right: 4px; z-index: 1; width: 28px; height: 28px; color: var(--ts-dark); background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; transform: translateY(-50%); transition: color var(--ts-motion-duration-fast) ease, background-size var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration) var(--ts-motion-ease); pointer-events: none; } .ts-faq-item[open] summary::before { color: var(--ts-orange); background-size: 14px 2px, 0 14px; transform: translateY(-50%) rotate(180deg); } .ts-faq-item__body { box-sizing: border-box; overflow: hidden; padding: 0 44px 20px 0; font-size: 16px; line-height: 1.7; color: var(--ts-text-muted); transition: opacity 0.22s ease; } .ts-faq-item.is-opening .ts-faq-item__body { opacity: 1; } .ts-faq-item.is-closing .ts-faq-item__body { opacity: 0; } .ts-faq__more-wrap { margin-top: 22px; text-align: center; } .ts-faq__more { min-width: 240px; min-height: 50px; background: var(--ts-white); border-color: rgba(69, 69, 69, 0.20); border-radius: var(--ts-btn-radius); color: var(--ts-dark); box-shadow: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .ts-faq__more:hover, .ts-faq__more:focus-visible { background: var(--ts-dark); border-color: var(--ts-dark); color: var(--ts-white); } .ts-faq__extra { overflow: hidden; transition: height 0.28s var(--ts-motion-ease), opacity 0.22s ease; } .ts-faq__extra[data-animating="1"] { will-change: height, opacity; } .ts-faq__extra[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .ts-faq-item, .ts-faq-item summary, .ts-faq-item summary::after, .ts-faq-item summary::before, .ts-faq-item__body, .ts-faq__extra { transition: none; } } /* ===== 17. Final CTA ===== */ .ts-final-cta { position: relative; background: #eef0f2; } .ts-final-cta__box { max-width: 1120px; margin: 0 auto; padding: 46px 34px; text-align: center; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.06); border-radius: 28px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.04); } .ts-final-cta__box h2 { margin: 0 0 14px; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; } .ts-final-cta__box p { max-width: 760px; margin: 0 auto 22px; line-height: 1.7; } .ts-final-cta__actions { justify-content: center; } /* ===== 18. Desktop refinements ===== */ @media (min-width: 1025px) { .ts-hero { padding-top: 36px; padding-bottom: 48px; } .ts-hero__grid { grid-template-columns: minmax(0, 0.98fr) minmax(500px, 1fr); gap: 12px 48px; align-items: start; } .ts-breadcrumbs { margin-bottom: 26px; } .ts-hero__content { max-width: 620px; } .ts-hero__title-row { align-items: flex-start; gap: 12px; margin-bottom: 14px; } .ts-hero__title { font-size: clamp(44px, 4.25vw, 58px); line-height: 1.04; letter-spacing: -0.025em; } .ts-hero__badge { min-height: 28px; padding: 0 11px; margin-top: 7px; background: rgba(255, 120, 22, 0.07); font-size: 12px; } .ts-hero__subtitle { max-width: 420px; font-size: 19px; line-height: 1.55; color: rgba(69, 69, 69, 0.82); } .ts-hero__media { align-self: center; } .ts-hero__media picture { display: block; width: 100%; } .ts-hero__media img { width: 100%; height: clamp(420px, 30vw, 460px); object-fit: cover; object-position: 1% center; } .ts-hero__details { max-width: 600px; margin-top: 0; padding-top: 0; } .ts-hero__price { width: fit-content; max-width: 100%; margin: 0 0 24px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .ts-hero__price-value { display: inline-block; white-space: nowrap; font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; } .ts-hero__actions { align-items: center; gap: 10px; margin-bottom: 21px; } .ts-hero__actions .btn { min-height: 50px; padding-left: 18px; padding-right: 18px; border-radius: 15px; } .ts-hero__actions .btn--accent { min-height: 52px; padding-left: 22px; padding-right: 22px; box-shadow: 0 9px 18px rgba(255, 120, 22, 0.16); } .ts-hero__actions .btn--accent:hover, .ts-hero__actions .btn--accent:focus-visible { box-shadow: 0 11px 22px rgba(255, 120, 22, 0.20); } .ts-hero__actions .btn--dark { min-width: 205px; background: #3f3f3f; border-color: #3f3f3f; box-shadow: none; } .ts-hero__actions .btn--dark:hover, .ts-hero__actions .btn--dark:focus-visible { background: #343434; border-color: #343434; } .ts-hero__actions .btn--messenger { min-width: 128px; border-color: rgba(69, 69, 69, 0.22); background: var(--ts-white); color: rgba(69, 69, 69, 0.9); box-shadow: none; } .ts-hero__actions .btn--messenger:hover { border-color: rgba(69, 69, 69, 0.22); background: var(--ts-white); color: rgba(69, 69, 69, 0.9); box-shadow: none; } .ts-hero__actions .btn--messenger:focus-visible { border-color: rgba(69, 69, 69, 0.22); background: var(--ts-white); color: rgba(69, 69, 69, 0.9); box-shadow: 0 0 0 4px rgba(255, 120, 22, 0.12); } .ts-hero__actions .btn--messenger .btn__icon img, .ts-hero__actions .btn--messenger:hover .btn__icon img, .ts-hero__actions .btn--messenger:focus-visible .btn__icon img { filter: none; } .ts-hero__features { display: flex; flex-wrap: wrap; gap: 7px 17px; margin: 0; padding-top: 13px; border-top: 1px solid rgba(69, 69, 69, 0.08); } .ts-hero__features br { display: none; } .ts-hero__features li { flex: 0 1 auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 7px; color: rgba(69, 69, 69, 0.86); font-size: 14.5px; font-weight: 600; line-height: 1.35; } .ts-hero-feature__icon { flex-basis: 24px; width: 24px; height: 24px; border-color: rgba(255, 120, 22, 0.11); border-radius: 9px; background: rgba(255, 120, 22, 0.05); } .ts-hero-feature__icon svg { width: 14px; height: 14px; } } @media (min-width: 1229px) { .ts-hero__details { margin-top: clamp(-54px, -3.1vw, -34px); } } /* ===== 19. Tablet responsive ===== */ @media (max-width: 1024px) { .ts-size-grid, .ts-advantages__grid, .ts-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-contacts__grid, .ts-location__grid, .ts-advantages__layout { grid-template-columns: 1fr; } .ts-hero__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "media" "details"; gap: 20px; } .ts-hero__content, .ts-hero__details { max-width: none; } .ts-hero__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-messenger-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ===== 20. Mobile responsive base ===== */ @media (max-width: 767px) { .warm-storage-page { --ts-mobile-section-y: 30px; --ts-mobile-section-y-tight: 24px; --ts-mobile-section-y-compact: 22px; --ts-mobile-slider-shadow-space: 28px; } .warm-storage-page section { padding: var(--ts-mobile-section-y) 0; } .warm-storage-page .ts-hero > .container { position: relative; } .warm-storage-page .ts-hero__breadcrumbs, .warm-storage-page .ts-breadcrumbs { position: absolute; z-index: 4; top: 24px; left: 24px; right: 24px; max-width: calc(100% - 48px); margin: 0; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs { position: relative; margin: 0; overflow: hidden; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__list, .warm-storage-page .ts-breadcrumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 0 0 2px; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.35; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__list::-webkit-scrollbar, .warm-storage-page .ts-breadcrumbs::-webkit-scrollbar { display: none; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__item, .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__sep, .warm-storage-page .ts-breadcrumbs li { flex: 0 0 auto; color: inherit; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__item a, .warm-storage-page .ts-breadcrumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__item.is-current, .warm-storage-page .ts-breadcrumbs li:last-child { max-width: min(62vw, 300px); overflow: hidden; color: rgba(255, 255, 255, 0.96); font-weight: 700; text-overflow: ellipsis; } .warm-storage-page .ts-hero__breadcrumbs .cb-text-breadcrumbs__sep { color: rgba(255, 255, 255, 0.42); } .ts-final-cta { margin-top: 0; padding: 46px 0 40px; background: #eef0f2; border-radius: 32px 32px 0 0; } .ts-final-cta__box { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .ts-final-cta__box h2 { max-width: 11em; margin-left: auto; margin-right: auto; margin-bottom: 14px; font-size: clamp(28px, 8vw, 36px); line-height: 1.12; } .ts-final-cta__box p { max-width: 18em; margin-bottom: 22px; font-size: 16px; line-height: 1.55; } .ts-size-guide { background: var(--ts-white); } .warm-storage-page .ts-usecases { padding-bottom: var(--ts-mobile-section-y-compact); } .warm-storage-page .ts-usecases + .ts-contacts { padding-top: 26px; } .warm-storage-page .ts-contacts { padding-bottom: var(--ts-mobile-section-y-tight); } .warm-storage-page .ts-contacts + .ts-steps { padding-top: var(--ts-mobile-section-y-tight); } .container { width: min(100% - 24px, 100%); } .ts-hero { padding-top: 24px; background: var(--ts-white); } .ts-hero__grid { position: relative; display: grid; grid-template-columns: 1fr; grid-template-areas: "stack" "details"; gap: 0; } .ts-hero__intro, .ts-hero__media { grid-area: stack; } .ts-hero__media { position: relative; min-width: 0; width: 100%; margin: 0; } .ts-hero__media picture { display: block; width: 100%; } .ts-hero__media::after { content: ""; position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 44%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.46) 100%); pointer-events: none; } .ts-hero__media img { display: block; width: 100%; height: 370px; max-height: none; object-fit: cover; object-position: center; border-radius: 28px; box-shadow: none; } .ts-hero__intro { position: relative; z-index: 2; align-self: start; padding: 68px 24px 120px; min-width: 0; } .ts-hero__content, .ts-hero__details { max-width: none; } .ts-hero__title-row { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px; align-items: flex-start; } .ts-hero__title-row .ts-hero__title { order: 2; width: 100%; margin: 0; } .ts-hero__badge { order: 1; margin-top: 0; min-height: 28px; padding: 0 10px; color: #ffffff; background: rgba(255, 120, 22, 0.94); font-size: 12px; box-shadow: 0 10px 22px rgba(255, 120, 22, 0.22); } .ts-hero__title { font-size: clamp(32px, 9vw, 42px); line-height: 1.05; color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); } .ts-hero__subtitle, .ts-section-head p { font-size: 16px; } .ts-hero__subtitle { display: block; max-width: 18em; margin: 0; padding: 0; font-size: clamp(16px, 4.25vw, 18px); line-height: 1.48; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.30); background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .ts-hero__details { position: relative; z-index: 3; margin: -42px 0 0; padding: 18px 14px 16px; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.06); border-radius: 28px; box-shadow: 0 16px 38px rgba(17, 24, 39, 0.085); } .ts-hero__price { width: 100%; margin: 0 0 14px; padding: 0; background: transparent; border: 0; box-shadow: none; text-align: left; } .ts-hero__price-value { display: inline-block; white-space: nowrap; font-size: 27px; line-height: 1.08; } .warm-storage-page .ts-size-guide > .container { width: 100%; max-width: 430px; margin-inline: auto; padding-inline: 14px; box-sizing: border-box; } .ts-size-grid { grid-template-columns: 1fr; width: 100%; max-width: 100%; justify-content: stretch; gap: 20px; } .ts-size-card__media { border-right: 1px solid rgba(69, 69, 69, 0.08); border-bottom: 0; } .ts-size-card__bottom { gap: 8px; margin-top: 0; } .ts-size-card__tariffs { border-radius: 12px; } .ts-size-card__tariffs summary { min-height: 40px; padding: 10px 34px 10px 12px; line-height: 1.25; } .ts-size-card__tariffs summary::after { right: 12px; font-size: 21px; } .ts-size-card__tariff-list { gap: 6px; padding: 0 10px 10px; } .ts-size-card__tariff-row { gap: 8px; padding: 8px 0; border-radius: 0; } .ts-size-card__tariff-row + .ts-size-card__tariff-row { border-top: 1px solid rgba(69, 69, 69, 0.07); } .ts-size-card__tariff-row span, .ts-size-card__tariff-row strong { font-size: 12px; line-height: 1.3; } .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__meta-item:first-child { display: inline-flex; } .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__meta { flex-wrap: nowrap; gap: 4px; } .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__meta-item { min-height: 21px; padding: 0 5px; font-size: 10.5px; line-height: 1.15; letter-spacing: -0.01em; } .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__meta-item .ts-size-card__meta-label { display: inline; } .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__meta-item--dimensions, .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__meta-item--load-limit { display: none; } .warm-storage-page.storage-boxes-page .ts-size-grid .ts-size-card__desc { min-height: 0; -webkit-line-clamp: 2; } .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--head, .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--split { grid-template-columns: minmax(48px, 0.55fr) repeat(2, minmax(70px, 1fr)); gap: 8px; } .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--split span:first-child, .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--split strong { white-space: nowrap; } .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--split strong { line-height: 1.25; overflow-wrap: normal; } .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--head span, .warm-storage-page.storage-boxes-page .ts-size-sheet__tariff-row--head strong { font-size: 12.5px; } .warm-storage-page.storage-boxes-page .ts-size-sheet__notes { margin: -8px 0 14px; } .warm-storage-page.storage-boxes-page .ts-size-sheet__note--accent { min-height: 26px; padding: 4px 9px; font-size: 12.5px; line-height: 1.35; } .ts-size-card .btn { min-height: 40px; padding: 0 12px; border-radius: 12px; line-height: 1.2; } .warm-storage-page .ts-advantages__grid .ts-adv-card, .warm-storage-page .ts-steps__grid .ts-step-card { padding: 20px; } .ts-form-consent { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; line-height: 1.35; } .ts-form-consent__box { width: 26px; height: 26px; border-radius: 6px; } .ts-form-consent__box::after { left: 7px; top: 4px; width: 9px; height: 14px; } .ts-step-card h3 { font-size: 22px; } .ts-contact-phone { background: var(--ts-white); } .ts-contact-lines { gap: 8px; } .ts-contact-line { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; background: var(--ts-white); } .ts-contact-line--accent { background: #fff7ef; } .ts-location__map iframe, .ts-location__map > div { min-height: 300px; } .ts-faq__list { max-width: none; } .ts-faq-item summary { padding: 18px 38px 18px 0; font-size: 18px; line-height: 1.35; } .ts-faq-item summary::before { right: 2px; width: 28px; height: 28px; background-size: 13px 2px, 2px 13px; } .ts-faq-item[open] summary::before { background-size: 13px 2px, 0 13px; } .ts-faq-item__body { padding: 0 38px 18px 0; line-height: 1.65; } .ts-faq__more-wrap { margin-top: 16px; } .ts-faq__more { width: 100%; } .ts-steps-visit { align-items: flex-start; gap: 12px; margin: -2px 0 18px; padding: 16px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.76); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .ts-steps-visit__mark { flex-basis: 34px; width: 34px; height: 34px; font-size: 17px; box-shadow: 0 6px 14px rgba(255, 120, 22, 0.14); } .ts-steps-visit__title { font-size: 18px; } .ts-steps-visit__text { line-height: 1.5; } .btn, .ts-location__actions .btn, .ts-final-cta__actions .btn, .ts-hero__actions .btn { width: 100%; border-radius: var(--ts-btn-radius-lg); } .ts-size-guide { overflow-x: hidden; } @supports (overflow: clip) { .ts-size-guide { overflow-x: clip; } } .ts-size-filters { --ts-size-filter-mobile-gutter: max(14px, calc((100vw - 430px) / 2 + 14px)); position: relative; top: auto; z-index: 1; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; width: auto; max-width: none; min-width: 0; overflow-x: auto; overflow-y: hidden; margin: 0 calc(50% - 50vw) 18px; padding: 0 var(--ts-size-filter-mobile-gutter) 0 var(--ts-size-filter-mobile-gutter); box-sizing: border-box; background: transparent; border: 0; border-radius: 0; box-shadow: none; scroll-snap-type: none; scroll-padding-left: var(--ts-size-filter-mobile-gutter); scroll-padding-right: var(--ts-size-filter-mobile-gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; } .ts-size-filters::before { box-shadow: 0 5px 12px rgba(255, 120, 22, 0.15); } .ts-size-filters::-webkit-scrollbar { display: none; } .ts-filter { flex: 0 0 auto; width: auto; min-height: 0; padding: 11px 16px; font-weight: 600; white-space: nowrap; scroll-snap-align: none; } .ts-filter.is-active { font-weight: 700; } .ts-usecases__head { max-width: none; } .ts-usecases__head h2 { margin-bottom: 10px; } .ts-usecases__head p { font-size: 16px; } .ts-advantages__layout { display: block; } .ts-advantages__intro { display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 18px; border-radius: 22px; box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04); } .ts-advantages__intro::before { top: 16px; bottom: 16px; width: 3px; } .ts-advantages__intro-main { gap: 12px; } .ts-advantages__eyebrow { min-height: 30px; padding: 6px 11px; font-size: 11px; letter-spacing: 0.03em; } .ts-advantages__intro h2 { max-width: none; font-size: 31px; line-height: 0.98; letter-spacing: -0.03em; } .ts-advantages__intro p { max-width: none; font-size: 16px; line-height: 1.5; } .ts-advantages__note { max-width: none; padding: 14px 15px; border-radius: 16px; line-height: 1.45; } .ts-advantages__media { min-height: 0; border-radius: 18px; } .ts-advantages__media img { max-height: 200px; } .ts-advantages__media-caption { left: 12px; bottom: 12px; min-height: 28px; max-width: calc(100% - 24px); padding: 0 10px; font-size: 11px; } .ts-advantages__grid { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; overflow: visible; padding: 0; } .warm-storage-page .ts-advantages__grid .ts-adv-card { grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; min-height: auto; padding: 15px 14px; border-radius: 18px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.035); } .warm-storage-page .ts-advantages__grid .ts-adv-card:hover, .warm-storage-page .ts-advantages__grid .ts-adv-card:active, .warm-storage-page .ts-advantages__grid .ts-adv-card:focus { transform: none; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.035); border-color: rgba(69, 69, 69, 0.08); background: var(--ts-white); } .ts-adv-card__icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-self: start; flex-basis: 38px; width: 38px; height: 38px; margin-top: 1px; border-radius: 13px; } .ts-adv-card__icon svg { width: 18px; height: 18px; overflow: visible; } .ts-adv-card__body { grid-column: 2; min-width: 0; } .ts-adv-card h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.16; overflow-wrap: normal; word-break: normal; } .ts-adv-card p { line-height: 1.48; } .ts-adv-card__list { padding-left: 16px; line-height: 1.48; } .warm-storage-page .ts-steps { overflow: hidden; padding-bottom: 20px; background: #eef0f2; } .ts-steps__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(272px, calc(100% - 58px)); justify-content: start; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 8px 14px var(--ts-mobile-slider-shadow-space) 10px; margin: 0 -10px; scroll-snap-type: x mandatory; scroll-padding-left: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ts-steps__grid::-webkit-scrollbar { display: none; } .warm-storage-page .ts-steps__grid .ts-step-card { min-height: 100%; padding: 18px; scroll-snap-align: start; border-color: rgba(69, 69, 69, 0.07); border-radius: 18px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .ts-step-card__num { width: 36px; height: 36px; margin-bottom: 14px; font-size: 16px; } .ts-messenger-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ts-messenger-card { padding: 12px 8px; justify-content: center; } .ts-messenger-card__text { display: none; } .ts-messenger-card__icon { flex: 0 0 26px; width: 26px; height: 26px; } .ts-messenger-card__icon img { width: 26px; height: 26px; } .ts-location__actions .btn { min-height: var(--ts-btn-height-lg); } .ts-hero__actions, .ts-final-cta__actions { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; align-items: stretch; } .ts-final-cta__actions { max-width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .ts-hero__actions { margin-bottom: 14px; } .ts-hero__actions .btn--accent, .ts-final-cta__actions .btn--accent { grid-column: 1 / -1; min-height: var(--ts-btn-height-lg); border-radius: var(--ts-btn-radius-lg); box-shadow: 0 12px 24px rgba(255, 120, 22, 0.22); } .ts-hero__actions .btn--phone, .ts-final-cta__actions .btn--phone { grid-column: 1 / 2; min-width: 0; min-height: var(--ts-btn-height-lg); border-radius: var(--ts-btn-radius-lg); background: #454545; border: 1px solid #454545; color: #ffffff; box-shadow: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .ts-hero__actions .btn--phone .btn__icon img, .ts-final-cta__actions .btn--phone .btn__icon img { filter: brightness(0) invert(1); transition: filter .18s ease; } .ts-hero__actions .btn--phone:active, .ts-hero__actions .btn--phone:hover, .ts-hero__actions .btn--phone:focus-visible, .ts-final-cta__actions .btn--phone:active, .ts-final-cta__actions .btn--phone:hover, .ts-final-cta__actions .btn--phone:focus-visible { background: #454545; border-color: #454545; color: #ffffff; } .ts-hero__actions .btn--phone:active .btn__icon img, .ts-hero__actions .btn--phone:hover .btn__icon img, .ts-hero__actions .btn--phone:focus-visible .btn__icon img, .ts-final-cta__actions .btn--phone:active .btn__icon img, .ts-final-cta__actions .btn--phone:hover .btn__icon img, .ts-final-cta__actions .btn--phone:focus-visible .btn__icon img { filter: brightness(0) invert(1); } .ts-hero__actions .btn--messenger, .ts-final-cta__actions .btn--messenger { grid-column: 2 / 3; padding: 0; min-width: var(--ts-icon-btn-size); width: var(--ts-icon-btn-size); min-height: var(--ts-btn-height-lg); border-radius: var(--ts-icon-btn-radius); border-color: #454545; background: #454545; color: #ffffff; box-shadow: none; } .ts-hero__actions .btn--messenger .btn__text, .ts-final-cta__actions .btn--messenger .btn__text { display: none; } .ts-hero__actions .btn--messenger .btn__icon img, .ts-final-cta__actions .btn--messenger .btn__icon img { width: 22px; height: 22px; filter: brightness(0) invert(1); } .ts-hero__actions .btn--phone span:last-child, .ts-final-cta__actions .btn--phone span:last-child { white-space: nowrap; } .ts-hero__features { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 13px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(69, 69, 69, 0.08); } .ts-hero__features br { display: none; } .ts-hero__features li { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 1 auto; gap: 6px; min-width: 0; min-height: 0; padding: 0; text-align: left; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: rgba(69, 69, 69, 0.88); font-size: clamp(12px, 3.1vw, 13px); font-weight: 700; line-height: 1.25; } .ts-hero__features li:nth-child(1) { order: 1; flex-basis: 100%; } .ts-hero__features li:nth-child(2) { order: 2; } .ts-hero__features li:nth-child(4) { order: 3; } .ts-hero__features li:nth-child(3) { order: 4; flex-basis: 100%; } .ts-hero-feature__text { display: block; min-width: 0; white-space: nowrap; } .ts-hero-feature__icon { flex: 0 0 23px; width: 23px; height: 23px; border-radius: 9px; background: rgba(255, 120, 22, 0.055); } .ts-hero-feature__icon svg { width: 13.5px; height: 13.5px; } } /* ===== 20A. Mobile hero final shell overrides ===== */ /* Финальные рабочие правки hero после отключения main.css; v112 сохраняет full-bleed hero и уточняет посадку CTA. */ @media (max-width: 767px) { .warm-storage-page .ts-hero { margin-top: calc(var(--cb-app-header-height, 82px) * -1); padding-top: 0; } .warm-storage-page .ts-hero > .container { width: 100%; max-width: none; padding-inline: 0; } .warm-storage-page .ts-hero__breadcrumbs, .warm-storage-page .ts-breadcrumbs { top: calc(var(--cb-app-header-height, 82px) + 24px); } .warm-storage-page .ts-hero__media { width: 100%; margin: 0; } .warm-storage-page .ts-hero__media::after, .warm-storage-page .ts-hero__media img { border-radius: 0 0 16px 16px; } .warm-storage-page .ts-hero__media img { height: calc(370px + var(--cb-app-header-height, 82px)); } .warm-storage-page .ts-hero__intro { padding-top: calc(var(--cb-app-header-height, 82px) + 68px); } .warm-storage-page .ts-hero__details { width: calc(100% - 24px); margin: -42px auto 0; } } /* ===== 20B. Storage boxes mobile hero features ===== */ /* The shared mobile hero pattern is built for four warm-storage features. Storage boxes has three items: first item full-width, second and third in one row. */ @media (max-width: 767px) { .warm-storage-page.storage-boxes-page .ts-hero__features { gap: 8px 13px; } .warm-storage-page.storage-boxes-page .ts-hero__features li:nth-child(1) { order: 1; flex: 0 0 100%; } .warm-storage-page.storage-boxes-page .ts-hero__features li:nth-child(2) { order: 2; flex: 0 1 auto; } .warm-storage-page.storage-boxes-page .ts-hero__features li:nth-child(3) { order: 3; flex: 0 1 auto; } } /* ===== 21. Home page scoped presentation ===== */ /* Главная использует общую warm-storage дизайн-систему, но все новые правила строго ограничены .home-page. Здесь нет зависимостей от warm-storage.js: блоки главной статичные, навигационные и презентационные. */ .warm-storage-page.home-page { background: var(--ts-white); } .warm-storage-page.home-page .btn--primary { background: var(--ts-orange); color: var(--ts-white); box-shadow: 0 10px 20px rgba(255, 120, 22, 0.18); } .warm-storage-page.home-page .btn--primary:hover, .warm-storage-page.home-page .btn--primary:focus-visible { background: var(--ts-orange-hover); box-shadow: 0 12px 24px rgba(255, 120, 22, 0.22); } .warm-storage-page.home-page .btn--ghost { background: var(--ts-white); color: var(--ts-dark); border-color: rgba(69, 69, 69, 0.22); box-shadow: none; } .warm-storage-page.home-page .btn--ghost:hover, .warm-storage-page.home-page .btn--ghost:focus-visible { background: var(--ts-dark); border-color: var(--ts-dark); color: var(--ts-white); } /* 21A. Home hero */ .home-page .home-hero { padding-top: 36px; padding-bottom: 54px; background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); } .home-page .home-hero__container { width: min(1200px, calc(100% - 32px)); } .home-page .home-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.88fr); grid-template-areas: "content visual" "details visual" "features features"; grid-template-rows: 1fr auto auto; gap: 0; align-items: stretch; isolation: isolate; } .home-page .home-hero__content { position: relative; z-index: 2; grid-area: content; align-self: end; display: flex; flex-direction: column; min-width: 0; max-width: 690px; padding: 42px 54px 0 0; } .home-page .home-hero__details { display: contents; } .home-page .home-hero__visual { position: relative; z-index: 1; grid-area: visual; min-width: 0; margin-left: -72px; } .home-page .home-hero__media { position: relative; display: block; min-height: 470px; overflow: hidden; border-radius: 30px; background: #e6eaed; box-shadow: 0 18px 48px rgba(17, 24, 39, 0.085); isolation: isolate; } .home-page .home-hero__media::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: 46%; pointer-events: none; } .home-page .home-hero__media img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; object-position: center center; } .home-page .home-hero__eyebrow { display: inline-flex; align-items: center; width: fit-content; min-height: 30px; padding: 0 12px; margin: 0 0 14px; border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 999px; background: var(--ts-white); color: var(--ts-orange); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0.055em; text-transform: uppercase; } .home-page .home-hero__title { max-width: 10.8em; margin: 0 0 18px; font-family: var(--ts-font-heading, "Roboto Slab", Georgia, serif); font-size: clamp(42px, 5.1vw, 66px); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; color: var(--ts-dark); } .home-page .home-hero__subtitle { max-width: 650px; margin: 0; color: rgba(69, 69, 69, 0.82); font-size: 20px; line-height: 1.6; } .home-page .home-hero__actions { position: relative; z-index: 2; grid-area: details; display: flex; flex-wrap: wrap; gap: 10px; max-width: 690px; margin-top: 28px; padding: 0 54px 42px 0; } .home-page .home-hero__actions .btn { min-height: 52px; border-radius: 15px; } .home-page .home-hero__cta { padding-right: 24px; padding-left: 24px; } .home-page .home-hero__features { position: relative; z-index: 3; grid-area: features; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 22px 0 0; padding: 18px 20px; border: 1px solid rgba(69, 69, 69, 0.07); border-radius: 28px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 34px rgba(17, 24, 39, 0.07); list-style: none; } .home-page .home-hero__features li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-weight: 400; } .home-page .home-hero__features li:first-child { padding-left: 8px; } .home-page .home-hero__features li:not(:first-child) { border-left: 1px solid rgba(69, 69, 69, 0.10); } .home-page .home-hero-feature__icon { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 13px; background: rgba(255, 120, 22, 0.07); color: var(--ts-orange); } .home-page .home-hero-feature__icon svg { display: block; width: 22px; height: 22px; } .home-page .home-hero-feature__text { display: grid; gap: 3px; min-width: 0; } .home-page .home-hero-feature__title { color: var(--ts-dark); font-size: 16px; font-weight: 800; line-height: 1.16; } .home-page .home-hero-feature__desc { color: rgba(69, 69, 69, 0.74); font-size: 13.5px; font-weight: 400; line-height: 1.32; } @media (max-width: 1180px) { .home-page .home-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr); } .home-page .home-hero__content { padding-right: 44px; } .home-page .home-hero__actions { padding-right: 44px; } .home-page .home-hero__visual { margin-left: -54px; } .home-page .home-hero__features { padding-right: 16px; padding-left: 16px; } .home-page .home-hero__features li { gap: 9px; padding-right: 12px; padding-left: 12px; } .home-page .home-hero-feature__icon { flex-basis: 36px; width: 36px; height: 36px; } .home-page .home-hero-feature__icon svg { width: 21px; height: 21px; } .home-page .home-hero-feature__title { font-size: 15.5px; } .home-page .home-hero-feature__desc { font-size: 13px; } } /* 21B. Home format cards */ /* 21B. Home formats */ .home-page .home-formats { padding-top: 24px; background: var(--ts-bg-soft); } .home-page .home-formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .home-page .home-format-card--warm { position: relative; display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; background: #fff; border: 1px solid rgba(28, 28, 28, 0.08); border-radius: 28px; overflow: hidden; box-shadow: 0 12px 34px rgba(30, 34, 43, 0.08); cursor: pointer; } .home-page .home-format-card--warm:focus-visible { outline: 3px solid rgba(255, 120, 22, 0.28); outline-offset: 4px; } .home-page .home-format-card__media-link { display: block; color: inherit; text-decoration: none; } .home-page .home-format-card__badge { position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; background: var(--ts-yellow); color: var(--ts-dark); font-size: 14px; line-height: 1; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .home-page .home-format-card__media { overflow: hidden; border-radius: 0; background: #f3f1ec; } .home-page .home-format-card__media picture, .home-page .home-format-card__media img { display: block; width: 100%; } .home-page .home-format-card__media img { height: 232px; object-fit: cover; } .home-page .home-format-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 22px 22px 18px; } .home-page .home-format-card__title { margin: 0 0 14px; color: #3a3838; font-size: 24px; line-height: 1.16; font-weight: 700; letter-spacing: -0.02em; } .home-page .home-format-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .home-page .home-format-card__meta-item { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border: 1px solid rgba(28, 28, 28, 0.08); border-radius: 999px; background: #f3f3f3; color: #575757; font-size: 14px; line-height: 1.2; font-weight: 500; white-space: nowrap; } .home-page .home-format-card__desc { margin: 0; color: #55585f; font-size: 17px; line-height: 1.55; } .home-page .home-format-card__bottom { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 20px; } .home-page .home-format-card__more { display: none; align-items: center; justify-content: flex-end; gap: 6px; color: #595959; text-decoration: none; font-size: 14px; line-height: 1.3; font-weight: 500; } .home-page .home-format-card__button { width: 100%; min-height: 46px; border-radius: 15px; font-size: 15px; font-weight: 700; } @media (max-width: 1199px) { .home-page .home-format-card__title { font-size: 22px; } .home-page .home-format-card__desc { font-size: 16px; } } /* 21C. Home choice, advantages and clients */ .home-page .home-choice, .home-page .home-clients, .home-page .home-reviews { background: #eef0f2; } .home-page .home-choice__list { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; } .home-page .home-choice-card { display: grid; grid-template-columns: minmax(190px, 0.54fr) minmax(180px, 0.42fr) minmax(0, 1fr); gap: 18px; align-items: center; min-width: 0; padding: 20px 22px; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 22px; background: var(--ts-white); color: inherit; text-decoration: none; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .home-page .home-choice-card:hover, .home-page .home-choice-card:focus-visible { border-color: rgba(255, 120, 22, 0.20); box-shadow: 0 16px 34px rgba(17, 24, 39, 0.065); transform: translateY(-1px); outline: none; } .home-page .home-choice-card__kicker { color: rgba(69, 69, 69, 0.66); font-size: 14px; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.035em; } .home-page .home-choice-card strong { color: var(--ts-dark); font-size: 22px; line-height: 1.15; } .home-page .home-choice-card span:last-child { color: var(--ts-text-muted); font-size: 16px; line-height: 1.5; } .home-page .home-advantages { background: var(--ts-white); } .home-page .home-advantages__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .home-page .home-advantage-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; padding: 24px; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 24px; background: var(--ts-white); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .home-page .home-advantage-card:hover, .home-page .home-advantage-card:focus-within { transform: translateY(-1px); border-color: rgba(255, 120, 22, 0.16); box-shadow: 0 16px 34px rgba(17, 24, 39, 0.06); } .home-page .home-advantage-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(255, 120, 22, 0.13); border-radius: 15px; background: rgba(255, 120, 22, 0.055); color: var(--ts-orange); } .home-page .home-advantage-card__icon svg { display: block; width: 21px; height: 21px; overflow: visible; } .home-page .home-advantage-card__body { min-width: 0; } .home-page .home-advantage-card h3 { margin: 0 0 10px; color: var(--ts-dark); font-size: 21px; line-height: 1.16; } .home-page .home-advantage-card p { margin: 0; color: var(--ts-text-muted); font-size: 15.5px; line-height: 1.55; } .home-page .home-clients__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 1180px; margin: 0 auto; } .home-page .home-client-logo { display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 14px 12px; border: 1px solid rgba(69, 69, 69, 0.07); border-radius: 22px; background: var(--ts-white); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.035); } .home-page .home-client-logo img { width: auto; max-width: min(100%, 172px); max-height: 62px; object-fit: contain; opacity: 1; filter: saturate(1.03) contrast(1.02); transition: transform 0.18s ease, filter 0.18s ease; } .home-page .home-client-logo:hover img { filter: saturate(1.08) contrast(1.04); transform: translateY(-1px); } /* 21D. Home locations, reviews, news and final CTA */ .home-page .home-locations { background: var(--ts-white); } .home-page .home-reviews .ts-section-head { margin-bottom: 28px; } .home-page .home-reviews__google-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; max-width: 1120px; margin: 0 auto 18px; padding: 18px 22px; border: 1px solid rgba(69, 69, 69, 0.07); border-radius: 24px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.035); } .home-page .home-reviews__google-main { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "label label" "rating count"; gap: 6px 14px; align-items: end; min-width: 0; } .home-page .home-reviews__google-label { grid-area: label; color: rgba(69, 69, 69, 0.54); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: 0.075em; text-transform: uppercase; } .home-page .home-reviews__google-rating { grid-area: rating; display: flex; align-items: baseline; gap: 10px; min-width: 0; } .home-page .home-reviews__google-value { color: var(--ts-dark); font-family: var(--ts-font-heading, "Roboto Slab", Georgia, serif); font-size: clamp(32px, 2.8vw, 40px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; } .home-page .home-reviews__google-stars, .home-page .home-review-card__stars { color: #f5b301; letter-spacing: 0.08em; white-space: nowrap; } .home-page .home-reviews__google-stars { font-size: 16px; line-height: 1; transform: translateY(-2px); } .home-page .home-reviews__google-count { grid-area: count; min-width: 0; padding-bottom: 2px; color: var(--ts-text-muted); font-size: 14.5px; font-weight: 700; line-height: 1.35; } .home-page .home-reviews__google-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: var(--ts-btn-height); padding: 0 22px; border: 1px solid rgba(69, 69, 69, 0.22); border-radius: var(--ts-btn-radius); background: var(--ts-white); color: var(--ts-dark); box-shadow: none; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--ts-motion-duration-fast) ease, border-color var(--ts-motion-duration-fast) ease, color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; } .home-page .home-reviews__google-link::after { content: "→"; margin-left: 9px; font-size: 1.1em; line-height: 1; transform: translateY(-1px); } .home-page .home-reviews__google-link:hover, .home-page .home-reviews__google-link:focus-visible { background: var(--ts-dark); border-color: var(--ts-dark); color: var(--ts-white); outline: none; transform: none; } .home-page .home-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin: 0 auto; } .home-page .home-locations__layout { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr); gap: 18px; align-items: stretch; max-width: 1120px; margin: 0 auto; } .home-page .home-locations__map { min-width: 0; min-height: 420px; overflow: hidden; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 24px; background: #eef0f2; box-shadow: var(--ts-shadow); } .home-page .home-locations__map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; } .home-page .home-locations__points { display: grid; gap: 12px; align-content: stretch; min-width: 0; } .home-page .home-location-point { display: grid; gap: 8px; min-width: 0; padding: 20px; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 22px; background: var(--ts-white); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.04); } .home-page .home-location-card, .home-page .home-review-card, .home-page .home-news-card { min-width: 0; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 24px; background: var(--ts-white); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); } .home-page .home-location-card, .home-page .home-review-card { padding: 24px; } .home-page .home-location-card__label { display: inline-flex; align-items: center; min-height: 27px; padding: 0 11px; margin: 0 0 14px; border: 1px solid rgba(255, 120, 22, 0.12); border-radius: 999px; background: #fff9f4; color: var(--ts-orange); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.045em; text-transform: uppercase; } .home-page .home-location-point__label { display: inline-flex; align-items: center; width: fit-content; min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(69, 69, 69, 0.58); font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } .home-page .home-location-point h3 { margin: 0; color: var(--ts-dark); font-size: 23px; line-height: 1.12; letter-spacing: -0.01em; } .home-page .home-location-point p { margin: 0; color: var(--ts-text-muted); font-size: 15px; line-height: 1.45; } .home-page .home-location-point a { width: fit-content; margin-top: 4px; color: var(--ts-dark); font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(69, 69, 69, 0.22); } .home-page .home-location-card h3 { margin: 0 0 10px; color: var(--ts-dark); font-size: 24px; line-height: 1.15; } .home-page .home-location-card p, .home-page .home-review-card p, .home-page .home-news-card p { margin: 0; color: var(--ts-text-muted); font-size: 15.5px; line-height: 1.55; } .home-page .home-location-card a { display: inline-flex; width: fit-content; margin-top: 18px; border-bottom: 1px solid rgba(255, 120, 22, 0.30); } .home-page .home-locations__cta, .home-page .home-reviews__actions, .home-page .home-news__actions { margin-top: 24px; text-align: center; } .home-page .home-reviews__actions .btn--ghost { background: var(--ts-white); color: var(--ts-dark); border-color: rgba(69, 69, 69, 0.22); box-shadow: none; } .home-page .home-reviews__actions .btn--ghost:hover, .home-page .home-reviews__actions .btn--ghost:focus-visible { background: var(--ts-dark); border-color: var(--ts-dark); color: var(--ts-white); } .home-page .home-review-card { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 270px; padding: 24px 24px 22px; overflow: hidden; border-color: rgba(69, 69, 69, 0.07); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); } .home-page .home-review-card::before { content: "“"; position: absolute; top: 12px; right: 20px; color: rgba(255, 120, 22, 0.08); font-family: Georgia, serif; font-size: 92px; line-height: 1; pointer-events: none; } .home-page .home-review-card__stars { position: relative; z-index: 1; display: inline-flex; width: fit-content; font-size: 15px; line-height: 1; } .home-page .home-review-card p { position: relative; z-index: 1; display: -webkit-box; overflow: hidden; color: var(--ts-dark); font-size: 16.5px; line-height: 1.58; -webkit-line-clamp: 8; -webkit-box-orient: vertical; } .home-page .home-review-card span { position: relative; z-index: 1; display: block; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(69, 69, 69, 0.08); color: rgba(69, 69, 69, 0.64); font-size: 14px; font-weight: 700; line-height: 1.35; } .home-page .home-news { background: var(--ts-white); } .home-page .home-news__desktop { max-width: 1040px; margin: 0 auto; } .home-page .home-news__mobile { display: none; } .home-page .home-news-line { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 28px; align-items: stretch; min-width: 0; min-height: 154px; padding: 0 30px 0 0; overflow: hidden; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 24px; background: var(--ts-white); box-shadow: var(--ts-shadow); } .home-page .home-news-line__image { width: 100%; height: 100%; min-height: 154px; margin: 0; overflow: hidden; border-radius: 23px 0 0 23px; background: #eef0f2; } .home-page .home-news-line__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .home-page .home-news-line__image--placeholder { display: flex; align-items: center; justify-content: center; color: rgba(69, 69, 69, 0.28); } .home-page .home-news-line__image--placeholder::before { content: "Ситибокс"; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .home-page .home-news-line__body { display: grid; align-content: center; gap: 9px; min-width: 0; padding: 24px 0; } .home-page .home-news-line__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .home-page .home-news-line__date, .home-page .home-news-card__date { color: rgba(69, 69, 69, 0.58); font-size: 13px; font-weight: 700; line-height: 1; } .home-page .home-news-line__label, .home-page .home-news-card__label { display: inline-flex; align-items: center; min-height: 25px; padding: 0 10px; border: 1px solid rgba(255, 120, 22, 0.13); border-radius: 999px; background: #fff9f4; color: var(--ts-orange); font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.045em; text-transform: uppercase; } .home-page .home-news-line h3 { margin: 0; color: var(--ts-dark); font-size: clamp(20px, 1.55vw, 24px); line-height: 1.22; letter-spacing: normal; } .home-page .home-news-line h3 a { color: inherit; text-decoration: none; } .home-page .home-news-line p { max-width: 48em; margin: 0; color: rgba(69, 69, 69, 0.72); font-size: 15.5px; line-height: 1.5; } .home-page .home-news-line__more { display: inline-flex; align-self: center; gap: 10px; align-items: center; color: var(--ts-dark); font-weight: 800; text-decoration: none; white-space: nowrap; } .home-page .home-news-line__more::after { content: "→"; font-size: 1.2em; line-height: 1; transform: translateY(-1px); } .home-page .home-news-line__more:hover, .home-page .home-news-line__more:focus-visible { color: var(--ts-dark); outline: none; } .home-page .home-news__actions { margin-top: 30px; text-align: center; } .home-page .home-news__actions .home-news__all { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ts-btn-height); padding: 0 22px; border: 1px solid rgba(69, 69, 69, 0.32); border-radius: var(--ts-btn-radius); background: var(--ts-white); color: var(--ts-dark); font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: none; transition: background-color var(--ts-motion-duration-fast) ease, color var(--ts-motion-duration-fast) ease, border-color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease; } .home-page .home-news__actions .home-news__all:hover, .home-page .home-news__actions .home-news__all:focus-visible { background: var(--ts-dark); color: var(--ts-white); border-color: var(--ts-dark); outline: none; } .home-page .home-news-card { overflow: hidden; color: inherit; text-decoration: none; } .home-page .home-news-card__image { margin: 0; overflow: hidden; border: 0; border-radius: 20px; background: #eef0f2; } .home-page .home-news-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .home-page .home-news-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: rgba(69, 69, 69, 0.28); } .home-page .home-news-card__image--placeholder::before { content: "Ситибокс"; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } .home-page .home-news-card__body { display: grid; gap: 10px; min-width: 0; } .home-page .home-news-card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .home-page .home-news-card h3 { margin: 0; color: var(--ts-dark); } .home-page .home-news-card h3 a { color: inherit; text-decoration: none; } .home-page .home-news-card--compact { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; min-height: 0; padding: 0; overflow: hidden; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 20px; background: var(--ts-white); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .home-page .home-news-card--compact .home-news-card__image { display: block; position: relative; width: 100%; height: clamp(142px, 42vw, 176px); min-height: 0; aspect-ratio: auto; border: 0; border-radius: 18px; } .home-page .home-news-card--compact .home-news-card__body { display: grid; align-content: start; gap: 7px; min-height: 0; padding: 13px 14px 14px; color: var(--ts-dark); } .home-page .home-news-card--compact h3 { display: -webkit-box; overflow: hidden; color: var(--ts-dark); line-height: normal; letter-spacing: normal; text-shadow: none; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .home-page .home-news-card--compact h3 a { color: inherit; background-image: none; } .home-page .home-news-card--compact p, .home-page .home-news-card--compact .home-news-card__excerpt { display: -webkit-box; overflow: hidden; margin: 0; color: rgba(69, 69, 69, 0.72); line-height: 1.42; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .home-page .home-news-card--compact .home-news-card__meta { gap: 6px; } .home-page .home-news-card--compact .home-news-card__date { min-height: 20px; color: rgba(69, 69, 69, 0.58); font-size: 11px; text-shadow: none; } .home-page .home-news-card--compact .home-news-card__label { display: inline-flex; min-height: 20px; padding: 0 7px; border-color: rgba(255, 120, 22, 0.13); background: #fff9f4; color: var(--ts-orange); font-size: 9px; box-shadow: none; } /* 21E. Home consultation modal */ .home-consultation-modal[hidden] { display: none; } .home-consultation-modal { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .home-consultation-modal.is-open { opacity: 1; pointer-events: auto; } .home-consultation-modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.48); } .home-consultation-modal__dialog { position: relative; z-index: 1; width: min(620px, 100%); max-height: min(86vh, 760px); overflow: auto; border-radius: 30px; background: var(--ts-white); box-shadow: var(--ts-shadow); transform: translateY(10px) scale(0.985); transition: transform 0.18s ease; -webkit-overflow-scrolling: touch; } .home-consultation-modal.is-open .home-consultation-modal__dialog { transform: translateY(0) scale(1); } .home-consultation-modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 14px; background: #f6f6f6; color: var(--ts-dark); cursor: pointer; } .home-consultation-modal__close::before, .home-consultation-modal__close::after { content: ""; position: absolute; width: 17px; height: 2px; border-radius: 999px; background: currentColor; } .home-consultation-modal__close::before { transform: rotate(45deg); } .home-consultation-modal__close::after { transform: rotate(-45deg); } .home-consultation-modal .ts-form-box { margin: 0; border: 0; box-shadow: none; } body.home-consultation-modal-open { overflow: hidden; } @media (max-width: 767px) { .home-consultation-modal { align-items: end; place-items: end stretch; padding: 0; } .home-consultation-modal__dialog { width: 100%; max-height: 88dvh; border-radius: 28px 28px 0 0; transform: translateY(100%); } .home-consultation-modal.is-open .home-consultation-modal__dialog { transform: translateY(0); } .home-consultation-modal .ts-form-box { border-radius: 28px 28px 0 0; } .home-consultation-modal__close { top: 14px; right: 14px; } } @media (prefers-reduced-motion: reduce) { .home-consultation-modal, .home-consultation-modal__dialog { transition: none; } } /* 21E. Home tablet and mobile refinements */ @media (max-width: 1024px) { .home-page .home-hero { padding-top: 28px; padding-bottom: 46px; } .home-page .home-hero__grid { grid-template-columns: 1fr; grid-template-areas: "content" "visual" "details" "features"; gap: 20px; } .home-page .home-hero__content { max-width: 720px; min-height: 0; padding: 0; } .home-page .home-hero__actions { max-width: 720px; padding: 0; margin-top: 0; } .home-page .home-hero__visual { margin-left: 0; } .home-page .home-hero__media, .home-page .home-hero__media img { min-height: 420px; } .home-page .home-hero__media::before { width: 40%; } .home-page .home-hero__title { font-size: clamp(42px, 7vw, 60px); } .home-page .home-hero__subtitle { max-width: 620px; font-size: 19px; } .home-page .home-hero__features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } .home-page .home-hero__features li:nth-child(odd) { border-left: 0; } .home-page .home-hero__features li:nth-child(3), .home-page .home-hero__features li:nth-child(4) { padding-top: 16px; border-top: 1px solid rgba(69, 69, 69, 0.10); } .home-page .home-formats__grid, .home-page .home-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-locations__layout { grid-template-columns: 1fr; max-width: 760px; } .home-page .home-locations__points { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-page .home-advantages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-page .home-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .home-page .home-choice-card { grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 767px) { .warm-storage-page.home-page section { padding-top: var(--ts-mobile-section-y, 30px); padding-bottom: var(--ts-mobile-section-y, 30px); } .warm-storage-page.home-page section.home-hero { margin-top: calc(var(--cb-app-header-height, 82px) * -1); padding-top: 0; padding-bottom: 34px; background: var(--ts-white); } .home-page .home-hero__container { width: 100%; max-width: none; } .home-page .home-hero__grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "stack" "details"; gap: 0; } .home-page .home-hero__content, .home-page .home-hero__visual { grid-area: stack; } .home-page .home-hero__content { position: relative; z-index: 2; align-self: start; max-width: none; min-height: 0; padding: calc(var(--cb-app-header-height, 82px) + 66px) 24px 112px; color: var(--ts-white); } .home-page .home-hero__details { position: relative; z-index: 3; grid-area: details; display: block; width: calc(100% - 24px); max-width: 430px; margin: -42px auto 0; padding: 14px 14px 15px; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.06); border-radius: 28px; box-shadow: 0 16px 38px rgba(17, 24, 39, 0.085); } .home-page .home-hero__visual { position: relative; z-index: 1; margin-left: 0; } .home-page .home-hero__media { min-height: 0; height: calc(370px + var(--cb-app-header-height, 82px)); border-radius: 0 0 16px 16px; box-shadow: none; } .home-page .home-hero__media::before { display: block; inset: 0; width: 100%; border-radius: 0 0 16px 16px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 44%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.46) 100%); } .home-page .home-hero__media img { min-height: 0; height: 100%; object-position: center center; border-radius: 0 0 16px 16px; } .home-page .home-hero__eyebrow { display: none; } .home-page .home-hero__title { max-width: 9.8em; margin-bottom: 12px; font-size: clamp(32px, 9vw, 42px); line-height: 1.05; letter-spacing: -0.04em; color: var(--ts-white); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22); } .home-page .home-hero__subtitle { max-width: 18em; color: rgba(255, 255, 255, 0.92); font-size: clamp(16px, 4.25vw, 18px); line-height: 1.48; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.30); } .home-page .home-hero__actions { display: grid; grid-template-columns: 1fr; gap: 0; max-width: none; margin-top: 0; padding: 0; } .home-page .home-hero__actions .btn { min-height: 58px; border-radius: 17px; } .home-page .home-hero__cta { width: 100%; padding-right: 22px; padding-left: 22px; font-size: 19px; } .home-page .home-hero__features { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 13px; width: 100%; max-width: none; margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(69, 69, 69, 0.08); border-radius: 0; background: transparent; box-shadow: none; list-style: none; } .home-page .home-hero__features li, .home-page .home-hero__features li:first-child, .home-page .home-hero__features li:not(:first-child), .home-page .home-hero__features li:nth-child(1), .home-page .home-hero__features li:nth-child(2), .home-page .home-hero__features li:nth-child(3), .home-page .home-hero__features li:nth-child(4) { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 1 auto; order: initial; min-width: 0; min-height: 0; padding: 0; text-align: left; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: rgba(69, 69, 69, 0.88); font-size: clamp(12px, 3.1vw, 13px); font-weight: 700; line-height: 1.25; } .home-page .home-hero-feature__icon { flex: 0 0 23px; width: 23px; height: 23px; border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 9px; background: var(--ts-white); color: var(--ts-orange); box-shadow: none; } .home-page .home-hero-feature__icon svg { width: 15px; height: 15px; } .home-page .home-hero-feature__text { display: block; min-width: 0; white-space: nowrap; } .home-page .home-hero-feature__title { display: inline; color: rgba(69, 69, 69, 0.88); font: inherit; line-height: inherit; } .home-page .home-hero-feature__desc { display: none; } .home-page .home-reviews .ts-section-head { margin-bottom: 22px; } .home-page .home-reviews__google-summary { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 14px; padding: 18px; border-radius: 22px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .home-page .home-reviews__google-main { grid-template-columns: 1fr; grid-template-areas: "label" "rating" "count"; gap: 7px; } .home-page .home-reviews__google-rating { gap: 10px; } .home-page .home-reviews__google-value { font-size: 38px; } .home-page .home-reviews__google-stars { font-size: 16px; letter-spacing: 0.055em; } .home-page .home-reviews__google-count { padding-bottom: 0; font-size: 14px; } .home-page .home-reviews__google-link { width: 100%; min-height: var(--ts-btn-height); border-radius: var(--ts-btn-radius-lg); white-space: normal; text-align: center; } .home-page .home-reviews__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(276px, calc(100% - 42px)); justify-content: start; gap: 12px; overflow-x: auto; overflow-y: hidden; margin: 0 -10px; padding: 4px 0 var(--ts-mobile-slider-shadow-space, 28px) 10px; scroll-snap-type: x mandatory; scroll-padding-left: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .home-page .home-reviews__grid::-webkit-scrollbar { display: none; } .home-page .home-review-card { min-height: 254px; padding: 20px; scroll-snap-align: start; scroll-snap-stop: always; } .home-page .home-review-card:last-child { margin-right: 10px; } .home-page .home-advantages__grid { grid-template-columns: 1fr; gap: 14px; } .home-page .home-advantage-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; align-items: start; min-height: 0; padding: 16px 14px; border-radius: 20px; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04); } .home-page .home-advantage-card:hover, .home-page .home-advantage-card:active, .home-page .home-advantage-card:focus { transform: none; border-color: rgba(69, 69, 69, 0.08); box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04); } .home-page .home-advantage-card__icon { width: 40px; height: 40px; border-color: rgba(69, 69, 69, 0.08); border-radius: 14px; background: #f7f7f7; } .home-page .home-advantage-card__icon svg { width: 19px; height: 19px; } .home-page .home-advantage-card h3 { margin-bottom: 6px; font-size: 18px; line-height: 1.16; letter-spacing: -0.015em; } .home-page .home-advantage-card p { font-size: 14.5px; line-height: 1.48; } .home-page .home-locations__layout { grid-template-columns: 1fr; gap: 14px; max-width: none; } .home-page .home-locations__map { min-height: 300px; border-radius: 22px; } .home-page .home-locations__map iframe { min-height: 300px; } .home-page .home-locations__points { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(252px, calc(100% - 66px)); justify-content: start; gap: 12px; overflow-x: auto; overflow-y: hidden; margin: 0 -10px; padding: 4px 0 24px 10px; scroll-snap-type: x proximity; scroll-padding-left: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .home-page .home-locations__points::-webkit-scrollbar { display: none; } .home-page .home-location-point { scroll-snap-align: start; } .home-page .home-location-point:last-child { margin-right: 10px; } .home-page .home-location-card, .home-page .home-location-point, .home-page .home-review-card, .home-page .home-news-card { border-radius: 22px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); } .home-page .home-choice-card:hover { transform: none; } .home-page .home-location-card, .home-page .home-location-point, .home-page .home-review-card { padding: 20px; } .home-page .home-location-card h3 { font-size: 23px; } .home-page .home-choice__list { gap: 10px; } .home-page .home-choice-card { padding: 18px; border-radius: 20px; } .home-page .home-choice-card__kicker { font-size: 11px; } .home-page .home-choice-card strong { font-size: 20px; } .home-page .home-choice-card span:last-child { font-size: 14.5px; } .home-page .home-clients__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(136px, calc((100% - 30px) / 2.18)); justify-content: start; gap: 10px; overflow-x: auto; overflow-y: hidden; margin: 0 -12px; padding: 0 12px 12px; scroll-snap-type: x proximity; scroll-padding-left: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .home-page .home-clients__grid::-webkit-scrollbar { display: none; } .home-page .home-client-logo { min-height: 92px; padding: 14px; border-radius: 18px; scroll-snap-align: start; } .home-page .home-client-logo img { max-width: min(100%, 128px); max-height: 46px; } .home-page .home-review-card p { font-size: 15.5px; } .home-page .home-news__desktop { display: none; } .home-page .home-news__mobile { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(252px, calc(100% - 66px)); justify-content: start; gap: 12px; overflow-x: auto; overflow-y: hidden; margin: 0 -10px; padding: 4px 0 var(--ts-mobile-slider-shadow-space, 28px) 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-snap-type: x mandatory; scroll-padding-left: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .home-page .home-news__mobile::-webkit-scrollbar { display: none; } .home-page .home-news-card--compact { scroll-snap-align: start; scroll-snap-stop: always; } .home-page .home-news-card--compact:last-child { margin-right: 10px; } .home-page .home-news { padding-bottom: 18px; } .home-page .home-news__actions { margin-top: 18px; } .home-page .home-news + .ts-final-cta { padding-top: 34px; } } @media (max-width: 767px) { .home-page .home-formats { padding-top: 8px; } .home-page .home-formats .ts-section-head { margin-bottom: 18px; } .home-page .home-formats__grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .home-page .home-format-card--warm { position: relative; display: flex; flex-direction: row; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 132px; gap: 12px; padding: 0 12px 0 0; overflow: visible; border: 0; border-radius: 22px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.018), 0 3px 8px rgba(17, 24, 39, 0.04), 0 12px 26px rgba(17, 24, 39, 0.052); transform: none; -webkit-tap-highlight-color: transparent; } .home-page .home-format-card__media-link { flex: 0 0 clamp(116px, 34vw, 134px); width: clamp(116px, 34vw, 134px); align-self: stretch; min-width: 0; height: auto; min-height: 0; overflow: hidden; border-radius: 22px 16px 16px 22px; background: #f4f4f4; } .home-page .home-format-card__badge { top: -12px; right: 20px; z-index: 4; min-height: 24px; max-width: calc(100% - 40px); padding: 0 14px; box-sizing: border-box; background: #ffd21e; border: 0; color: var(--ts-dark); font-size: 12px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; box-shadow: 0 7px 14px rgba(17, 24, 39, 0.075); } .home-page .home-format-card__media { height: 100%; overflow: hidden; border: 0; border-radius: inherit; background: #f4f4f4; } .home-page .home-format-card__media picture, .home-page .home-format-card__media img { width: 100%; height: 100%; } .home-page .home-format-card__media img { object-fit: cover; } .home-page .home-format-card__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "title" "meta" "desc" "bottom"; flex: 1 1 auto; min-width: 0; height: 100%; padding: 18px 0 4px 0; } .home-page .home-format-card__title { grid-area: title; margin: 0 0 6px; padding-right: 0; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .home-page .home-format-card__meta { grid-area: meta; justify-content: flex-start; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 500; } .home-page .home-format-card__meta-item { min-height: 23px; padding: 0 8px; font-size: 12px; line-height: 1.15; white-space: nowrap; } .home-page .home-format-card__desc { grid-area: desc; display: -webkit-box; min-height: 0; align-self: start; margin: 0; overflow: hidden; color: var(--ts-text-muted); font-size: 13.5px; font-weight: 400; line-height: 1.36; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .home-page .home-format-card__bottom { grid-area: bottom; display: flex; align-items: end; justify-content: flex-end; min-width: 0; margin: 9px 0 0; padding: 0; } .home-page .home-format-card__button { display: none; } .home-page .home-format-card__more { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 30px; padding: 0 0 0 10px; gap: 7px; color: var(--ts-dark); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; background: transparent; border: 0; box-shadow: none; cursor: pointer; opacity: 0.86; } } @media (max-width: 380px) { .home-page .home-format-card--warm { min-height: 128px; gap: 10px; padding: 0 10px 0 0; } .home-page .home-format-card__media-link { flex-basis: 108px; width: 108px; } .home-page .home-format-card__badge { top: -11px; right: 16px; min-height: 23px; max-width: calc(100% - 32px); padding: 0 12px; font-size: 11px; } .home-page .home-format-card__body { padding: 18px 0 4px 0; } .home-page .home-format-card__title { margin-bottom: 5px; font-size: 17px; } .home-page .home-hero__content { padding-right: 20px; padding-left: 20px; } .home-page .home-hero__details { width: calc(100% - 20px); padding-right: 12px; padding-left: 12px; } .home-page .home-hero__features { gap: 8px 10px; } .home-page .home-hero-feature__icon { flex-basis: 22px; width: 22px; height: 22px; } .home-page .home-hero-feature__icon svg { width: 14px; height: 14px; } } @media (hover: none), (pointer: coarse) { .home-page .home-choice-card:hover, .home-page .home-client-logo:hover img { transform: none; } .home-page .home-client-logo img { opacity: 1; filter: saturate(1.03) contrast(1.02); } } @media (prefers-reduced-motion: reduce) { .home-page .home-choice-card, .home-page .home-client-logo img, .home-page .btn { transition: none; } } /* ===== 22. Typography normalization ===== */ .warm-storage-page, .warm-storage-page p, .warm-storage-page li, .warm-storage-page a, .warm-storage-page span, .warm-storage-page label, .warm-storage-page input, .warm-storage-page select, .warm-storage-page textarea, .warm-storage-page button { font-family: var(--ts-font-text, "Roboto", Arial, sans-serif); } .warm-storage-page h1, .warm-storage-page h2, .ts-hero__title, .ts-section-head h2, .ts-advantages__intro h2, .ts-usecases__head h2, .ts-final-cta__box h2 { font-family: var(--ts-font-heading, "Roboto Slab", Georgia, serif); } .ts-hero__title, .ts-section-head h2, .ts-advantages__intro h2, .ts-usecases__head h2, .ts-final-cta__box h2 { font-weight: 800; } .ts-adv-card h3, .ts-usecase-card h3, .ts-step-card h3, .ts-size-card__title, .ts-contact-panel h3, .ts-form-box h3 { font-family: var(--ts-font-text, "Roboto", Arial, sans-serif); font-weight: 700; } @media (min-width: 900px) { .ts-contacts__info, .ts-contacts__form { display: flex; min-width: 0; } .ts-contact-panel__head { gap: 10px; } .ts-contact-panel__head h3 { margin-bottom: 8px; } .ts-contact-panel__head p { margin-bottom: 0; } .ts-contact-phone { min-height: 0; } .ts-contact-phone__label { margin-bottom: 6px; } .ts-contact-phone__value { font-size: clamp(28px, 2.05vw, 34px); line-height: 1.05; } .ts-messenger-row { gap: 10px; margin-bottom: 10px; } .ts-messenger-card { padding: 12px 14px; } .ts-contact-lines--compact .ts-contact-line__label { color: var(--ts-text-muted); } .ts-contact-lines--compact .ts-contact-line__value, .ts-contact-lines--compact .ts-contact-line__value a { font-weight: 700; } } /* ===== 23. Contacts/Form final component layer ===== */ /* 23A. Contacts surface and panel polish */ .ts-contacts { background: #eef0f2; } .ts-contact-panel, .ts-form-box { background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.07); border-radius: 28px; box-shadow: 0 14px 34px rgba(17, 24, 39, 0.045); } .ts-contact-panel { gap: 16px; } .ts-contact-panel__eyebrow { min-height: 28px; margin-bottom: 12px; padding: 0 11px; background: rgba(255, 120, 22, 0.07); font-size: 12px; } .ts-contact-panel h3 { max-width: none; margin-bottom: 10px; } .ts-contact-panel p { max-width: 34em; } .ts-contact-phone { padding: 18px 20px; border-color: rgba(69, 69, 69, 0.08); border-radius: 18px; box-shadow: none; } .ts-contact-phone:hover, .ts-contact-phone:focus-visible { background: var(--ts-white); border-color: rgba(255, 120, 22, 0.28); box-shadow: 0 10px 22px rgba(17, 24, 39, 0.05); transform: translateY(-1px); } .ts-contact-phone__label, .ts-contact-line__label { color: rgba(69, 69, 69, 0.58); } .ts-contact-phone__value { letter-spacing: -0.025em; } .ts-messenger-card { min-height: 62px; border-color: rgba(69, 69, 69, 0.08); border-radius: 16px; background: #ffffff; } .ts-messenger-card:hover, .ts-messenger-card:focus-visible { border-color: rgba(255, 120, 22, 0.24); box-shadow: 0 10px 22px rgba(17, 24, 39, 0.045); transform: translateY(-1px); } .ts-contact-lines--compact { display: grid; gap: 0; margin-top: 0; overflow: hidden; background: var(--ts-white); border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 18px; } .ts-contact-lines--compact .ts-contact-line { min-height: 0; padding: 14px 18px; background: var(--ts-white); border: 0; border-radius: 0; } .ts-contact-lines--compact .ts-contact-line + .ts-contact-line { border-top: 1px solid rgba(69, 69, 69, 0.08); } .ts-contact-lines--compact .ts-contact-line--accent { background: var(--ts-white); border-color: transparent; } .ts-contact-line__value, .ts-contact-line__value a { color: var(--ts-dark); } /* 23B. Form shell and static floating labels */ .ts-form-box { padding: 30px; } .ts-form-box h3 { margin-bottom: 18px; } .ts-form__row { position: relative; margin-bottom: 18px; } .ts-form__grid-row { gap: 18px; } .ts-form__grid-row .ts-form__row { margin-bottom: 18px; } .ts-form__label { position: absolute; z-index: 2; top: -8px; left: 14px; display: inline-flex; align-items: center; gap: 2px; width: auto; max-width: calc(100% - 28px); min-height: 18px; margin: 0; padding: 0 7px; background: var(--ts-white); color: rgba(69, 69, 69, 0.72); font-size: 13px; font-weight: 700; line-height: 1.2; } .ts-form__row:focus-within .ts-form__label { color: var(--ts-orange); } .ts-form__input, .ts-form__textarea { min-height: 58px; padding: 18px 16px 14px; border-color: rgba(69, 69, 69, 0.16); border-radius: 16px; background: var(--ts-white); transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .ts-form__textarea { display: block; min-height: 124px; resize: vertical; } .ts-form__select { min-height: 58px; padding-top: 18px; padding-bottom: 14px; color: var(--ts-dark); background-color: var(--ts-white); background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.2 5.25L7 9.05L10.8 5.25' fill='none' stroke='%23454545' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 14px; } .ts-form__select:has(option:checked[value=""]) { color: rgba(69, 69, 69, 0.42); } .ts-form__select option { color: var(--ts-dark); } .ts-form__input::placeholder, .ts-form__textarea::placeholder { color: rgba(69, 69, 69, 0.42); } .ts-form__input:focus, .ts-form__textarea:focus, .ts-form__select:focus { border-color: rgba(255, 120, 22, 0.46); box-shadow: 0 0 0 4px rgba(255, 120, 22, 0.10); } .ts-form__consent { position: static; margin: 4px 0 18px; } .ts-form__consent .ts-form-consent { position: static; } /* 23C. Contacts/Form desktop alignment */ @media (min-width: 900px) { .ts-contacts__grid { gap: 28px; align-items: stretch; } .ts-contact-panel, .ts-form-box { width: 100%; } .ts-contact-panel { height: 100%; padding: 26px; } .ts-form-box { padding: 30px; } } /* 23D. Contacts/Form mobile alignment */ @media (max-width: 767px) { .ts-contacts { background: #eef0f2; } .ts-contact-panel, .ts-form-box { border-radius: 22px; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); } .ts-contact-panel { gap: 14px; padding: 20px; } .ts-contact-panel h3 { max-width: 13em; font-size: 24px; } .ts-contact-phone { padding: 16px; border-radius: 16px; } .ts-contact-phone__value { font-size: 27px; } .ts-messenger-card { min-height: 58px; border-radius: 15px; } .ts-contact-lines--compact { border-radius: 16px; } .ts-contact-lines--compact .ts-contact-line { grid-template-columns: 1fr; gap: 5px; padding: 13px 14px; } .ts-form-box { padding: 22px; } .ts-form-box h3 { margin-bottom: 18px; } .ts-form__row, .ts-form__grid-row .ts-form__row { margin-bottom: 17px; } .ts-form__label { top: -8px; left: 13px; font-size: 12px; padding: 0 6px; } .ts-form__input, .ts-form__textarea, .ts-form__select { min-height: 56px; padding: 17px 14px 13px; border-radius: 15px; } .ts-form__select { padding-right: 44px; background-position: right 16px center; background-size: 14px 14px; } .ts-form__textarea { min-height: 118px; } } /* ===== 24. Use cases final refinement ===== */ /* ===== 24A. Use cases shell and photo-card surface ===== */ .ts-usecases { background: var(--ts-white); } .ts-usecases__head { margin-bottom: 34px; } .ts-section-kicker { margin-bottom: 10px; } .ts-usecases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; max-width: min(1180px, 100%); margin: 0 auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .warm-storage-page .ts-usecases__grid .ts-usecase-card { display: flex; flex-direction: column; min-height: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 26px; background: var(--ts-white); box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045); cursor: default; -webkit-tap-highlight-color: transparent; transition: border-color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; } .warm-storage-page .ts-usecases__grid .ts-usecase-card + .ts-usecase-card { border-left: 1px solid rgba(69, 69, 69, 0.08); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover, .warm-storage-page .ts-usecases__grid .ts-usecase-card:focus-within { transform: translateY(-2px); border-color: rgba(255, 122, 18, 0.14); box-shadow: 0 16px 34px rgba(17, 24, 39, 0.065); background: var(--ts-white); } .ts-usecase-card__media { position: relative; flex: 0 0 auto; overflow: hidden; aspect-ratio: 16 / 10; background: #f1f1f1; border-bottom: 1px solid rgba(69, 69, 69, 0.07); } .ts-usecase-card__media::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(17, 24, 39, 0.18) 100%); pointer-events: none; } .ts-usecase-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.42s var(--ts-motion-ease); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover .ts-usecase-card__media img, .warm-storage-page .ts-usecases__grid .ts-usecase-card:focus-within .ts-usecase-card__media img { transform: scale(1.025); } .ts-usecase-card__content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 22px 22px 24px; } .ts-usecase-card__label { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; width: fit-content; min-height: 28px; padding: 0 11px; margin: 0; border: 1px solid rgba(255, 122, 18, 0.14); border-radius: 999px; background: rgba(255, 249, 244, 0.94); color: #ff7a12; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ts-usecase-card h3 { margin: 0 0 12px; max-width: none; color: var(--ts-dark); font-size: clamp(21px, 1.65vw, 25px); line-height: 1.14; letter-spacing: -0.012em; } .ts-usecase-card p { max-width: none; margin: 0 0 22px; color: var(--ts-text-muted); font-size: 15.5px; line-height: 1.56; } .ts-usecase-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; } .ts-usecase-card__tags span { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 999px; background: #fbfaf8; color: rgba(69, 69, 69, 0.76); font-size: 13px; line-height: 1.2; } /* ===== 24B. Use cases tablet layout ===== */ @media (max-width: 1024px) { .ts-usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .warm-storage-page .ts-usecases__grid .ts-usecase-card, .warm-storage-page .ts-usecases__grid .ts-usecase-card + .ts-usecase-card, .warm-storage-page .ts-usecases__grid .ts-usecase-card:nth-child(n + 3), .warm-storage-page .ts-usecases__grid .ts-usecase-card:nth-child(even) { border: 1px solid rgba(69, 69, 69, 0.08); } .ts-usecase-card__content { padding: 22px; } } /* ===== 24C. Use cases mobile photo slider ===== */ @media (max-width: 767px) { .ts-usecases__head { margin-bottom: 22px; } .ts-usecases__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(278px, calc(100% - 44px)); justify-content: start; gap: 14px; overflow-x: auto; overflow-y: hidden; max-width: none; margin: 0 -12px; padding: 4px 12px var(--ts-mobile-slider-shadow-space, 28px) 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-snap-type: x mandatory; scroll-padding-left: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .ts-usecases__grid::-webkit-scrollbar { display: none; } .warm-storage-page .ts-usecases__grid .ts-usecase-card { min-height: 0; border-radius: 22px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); scroll-snap-align: start; scroll-snap-stop: always; } .ts-usecase-card__media { aspect-ratio: 16 / 10.9; } .ts-usecase-card__content { padding: 18px 18px 20px; } .ts-usecase-card__label { left: 12px; bottom: 12px; min-height: 26px; padding: 0 10px; font-size: 10px; box-shadow: 0 6px 14px rgba(17, 24, 39, 0.10); } .ts-usecase-card h3 { margin-bottom: 10px; font-size: 22px; line-height: 1.14; } .ts-usecase-card p { margin-bottom: 18px; font-size: 15px; line-height: 1.52; } .ts-usecase-card__tags { gap: 7px; } .ts-usecase-card__tags span { min-height: 28px; padding: 5px 10px; font-size: 13px; } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover, .warm-storage-page .ts-usecases__grid .ts-usecase-card:active, .warm-storage-page .ts-usecases__grid .ts-usecase-card:focus { transform: none; border-color: rgba(69, 69, 69, 0.08); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); background: var(--ts-white); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover .ts-usecase-card__media img, .warm-storage-page .ts-usecases__grid .ts-usecase-card:active .ts-usecase-card__media img, .warm-storage-page .ts-usecases__grid .ts-usecase-card:focus .ts-usecase-card__media img { transform: none; } } /* ===== 24D. Use cases touch and reduced-motion hygiene ===== */ @media (hover: none), (pointer: coarse) { .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover { transform: none; box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover .ts-usecase-card__media img { transform: none; } } @media (prefers-reduced-motion: reduce) { .warm-storage-page .ts-usecases__grid .ts-usecase-card, .ts-usecase-card__media img { transition: none; } } /* ===== 24H. Storage boxes use cases: visual scenarios with mobile swipe ===== */ .warm-storage-page.storage-boxes-page .ts-usecases--storage-boxes .ts-section-head { max-width: 780px; margin-right: auto; margin-left: auto; } .warm-storage-page.storage-boxes-page .ts-storage-usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 26px; background: var(--ts-white); box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045); cursor: default; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__top { display: grid; gap: 15px; min-width: 0; padding: 14px 14px 0; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__media { position: relative; overflow: hidden; width: 100%; height: clamp(162px, 12.8vw, 198px); border-radius: 20px; background: #eef0f2; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__media--icon { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 34%, rgba(255, 120, 22, 0.13), rgba(255, 120, 22, 0.04) 42%, rgba(238, 240, 242, 0.78) 100%), #f7f4ef; color: var(--ts-orange); } .warm-storage-page.storage-boxes-page .ts-storage-usecase__icon { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border: 1px solid rgba(255, 120, 22, 0.16); border-radius: 24px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.055); } .warm-storage-page.storage-boxes-page .ts-storage-usecase__icon svg { display: block; width: 36px; height: 36px; overflow: visible; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__head { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 0 10px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__label { display: inline-flex; align-items: center; justify-self: start; min-height: 27px; padding: 0 11px; border: 1px solid rgba(255, 120, 22, 0.13); border-radius: 999px; background: #fff9f4; color: var(--ts-orange); font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.055em; text-transform: uppercase; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__head h3, .warm-storage-page.storage-boxes-page .ts-storage-usecase__body h3 { margin: 0; color: var(--ts-dark); font-size: clamp(22px, 1.68vw, 27px); line-height: 1.12; letter-spacing: -0.02em; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__body { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 15px 24px 24px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__body p { margin: 0; color: var(--ts-text-muted); font-size: 15.5px; line-height: 1.55; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ts-dark); font-size: 14.5px; line-height: 1.42; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__list li { position: relative; min-width: 0; padding-left: 16px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__list li::before { content: ""; position: absolute; left: 0; top: 0.63em; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 120, 22, 0.62); transform: translateY(-50%); } @media (max-width: 1120px) and (min-width: 768px) { .warm-storage-page.storage-boxes-page .ts-storage-usecases { gap: 14px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase { border-radius: 22px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__top { gap: 13px; padding: 12px 12px 0; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__media { height: clamp(142px, 14vw, 176px); border-radius: 18px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__head { padding: 0 8px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__head h3, .warm-storage-page.storage-boxes-page .ts-storage-usecase__body h3 { font-size: 21px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__body { padding: 14px 20px 20px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__body p, .warm-storage-page.storage-boxes-page .ts-storage-usecase__list { font-size: 14px; } } @media (max-width: 767px) { .warm-storage-page.storage-boxes-page .ts-usecases--storage-boxes { padding-top: var(--ts-mobile-section-y, 44px); padding-bottom: var(--ts-mobile-section-y, 44px); } .warm-storage-page.storage-boxes-page .ts-usecases--storage-boxes .ts-section-head { text-align: left; } .warm-storage-page.storage-boxes-page .ts-storage-usecases { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc(100% - 78px)); justify-content: start; gap: 14px; overflow-x: auto; overflow-y: hidden; width: auto; margin: 22px -10px 0; padding: 6px 0 var(--ts-mobile-slider-shadow-space, 28px) 10px; scroll-snap-type: x mandatory; scroll-padding-left: 10px; scroll-padding-right: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .warm-storage-page.storage-boxes-page .ts-storage-usecases::-webkit-scrollbar { display: none; } .warm-storage-page.storage-boxes-page .ts-storage-usecase { grid-template-rows: auto 1fr; border-radius: 22px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); scroll-snap-align: start; scroll-snap-stop: always; } .warm-storage-page.storage-boxes-page .ts-storage-usecase:last-child { margin-right: 10px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__top { gap: 13px; padding: 0; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__media { height: 170px; border-radius: 18px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__media--icon { height: 170px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__icon { width: 66px; height: 66px; border-radius: 22px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__icon svg { width: 32px; height: 32px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__head { gap: 8px; padding: 0 8px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__label { min-height: 25px; padding: 0 10px; font-size: 10px; letter-spacing: 0.045em; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__head h3, .warm-storage-page.storage-boxes-page .ts-storage-usecase__body h3 { font-size: 22px; line-height: 1.12; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__body { gap: 11px; padding: 13px 20px 20px; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__body p { font-size: 14.5px; line-height: 1.5; } .warm-storage-page.storage-boxes-page .ts-storage-usecase__list { gap: 7px; font-size: 13.5px; line-height: 1.42; } } @media (hover: hover) and (pointer: fine) { .warm-storage-page.storage-boxes-page .ts-storage-usecase:hover { transform: none; box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045); } } /* ===== 24I. Container rent page: hero, XL/XXL layout and scenarios ===== */ @media (min-width: 1025px) { .warm-storage-page.container-rent-page .ts-hero__actions { gap: 8px; } .warm-storage-page.container-rent-page .ts-hero__actions .btn--accent { min-width: 194px; padding-left: 18px; padding-right: 18px; } .warm-storage-page.container-rent-page .ts-hero__actions .btn--dark { min-width: 205px; padding-left: 16px; padding-right: 16px; } .warm-storage-page.container-rent-page .ts-hero__actions .btn--messenger { min-width: 126px; padding-left: 16px; padding-right: 16px; } .warm-storage-page.container-rent-page .ts-hero__features { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 7px 17px; width: fit-content; } .warm-storage-page.container-rent-page .ts-hero__features li { min-width: 0; } } /* Current container-rent Size Guide uses the shared .ts-size-grid markup. Desktop card body is kept page-scoped so long container titles do not compete with meta chips in the first row; Тёплый склад and storage boxes remain unchanged. */ @media (min-width: 1025px) { .warm-storage-page.container-rent-page .ts-size-guide .ts-size-grid .ts-size-card { align-self: start; height: auto !important; } .warm-storage-page.container-rent-page .ts-size-guide .ts-size-grid .ts-size-card__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(5.2em, auto) auto auto auto; grid-template-areas: "title" "meta" "desc" "price" "tariffs" "button"; align-content: start; height: auto; } .warm-storage-page.container-rent-page .ts-size-guide .ts-size-grid .ts-size-card__title { margin: 0 0 8px; } .warm-storage-page.container-rent-page .ts-size-guide .ts-size-grid .ts-size-card__meta { justify-content: flex-start; gap: 6px; margin: 0 0 12px; } .warm-storage-page.container-rent-page .ts-size-guide .ts-size-grid .ts-size-card__meta-item:first-child { display: inline-flex; } .warm-storage-page.container-rent-page .ts-size-guide .ts-size-grid .ts-size-card__desc { min-height: 5.2em; } } .warm-storage-page.container-rent-page .ts-container-usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; } .warm-storage-page.container-rent-page .ts-container-usecase { display: grid; align-content: start; gap: 14px; min-width: 0; min-height: 270px; padding: 28px; border: 1px solid rgba(69, 69, 69, 0.08); border-radius: 26px; background: var(--ts-white); box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045); } .warm-storage-page.container-rent-page .ts-container-usecase__label { display: inline-flex; align-items: center; justify-self: start; min-height: 27px; padding: 0 11px; border: 1px solid rgba(255, 120, 22, 0.13); border-radius: 999px; background: #fff9f4; color: var(--ts-orange); font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: 0.055em; text-transform: uppercase; } .warm-storage-page.container-rent-page .ts-container-usecase h3 { margin: 0; color: var(--ts-dark); font-size: clamp(22px, 1.68vw, 27px); line-height: 1.12; letter-spacing: -0.02em; } .warm-storage-page.container-rent-page .ts-container-usecase p { margin: 0; color: var(--ts-text-muted); font-size: 15.5px; line-height: 1.58; } @media (max-width: 1024px) { .warm-storage-page.container-rent-page .ts-container-usecases { grid-template-columns: 1fr; gap: 14px; } .warm-storage-page.container-rent-page .ts-container-usecase { min-height: 0; } } @media (max-width: 767px) { .warm-storage-page.container-rent-page .ts-hero__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-items: center; } .warm-storage-page.container-rent-page .ts-hero__features li, .warm-storage-page.container-rent-page .ts-hero__features li:nth-child(1), .warm-storage-page.container-rent-page .ts-hero__features li:nth-child(2), .warm-storage-page.container-rent-page .ts-hero__features li:nth-child(3), .warm-storage-page.container-rent-page .ts-hero__features li:nth-child(4) { order: initial; flex: initial; flex-basis: auto; min-width: 0; } .warm-storage-page.container-rent-page .ts-hero__features .ts-hero-feature__text { white-space: nowrap; } .warm-storage-page.container-rent-page .ts-size-grid .ts-size-card__meta { flex-wrap: nowrap; gap: 4px; } .warm-storage-page.container-rent-page .ts-size-grid .ts-size-card__meta-item:first-child { display: inline-flex; } .warm-storage-page.container-rent-page .ts-size-grid .ts-size-card__meta-item { min-height: 21px; padding: 0 5px; font-size: 10.5px; line-height: 1.15; letter-spacing: -0.01em; } .warm-storage-page.container-rent-page .ts-size-grid .ts-size-card__meta-item .ts-size-card__meta-label { display: inline; } .warm-storage-page.container-rent-page .ts-size-grid .ts-size-card__meta-item--load-limit { display: none; } .warm-storage-page.container-rent-page .ts-size-grid .ts-size-card__desc { min-height: 0; -webkit-line-clamp: 2; } .warm-storage-page.container-rent-page .ts-container-usecases { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc(100% - 78px)); justify-content: start; gap: 14px; overflow-x: auto; overflow-y: hidden; width: auto; margin: 22px -10px 0; padding: 6px 0 var(--ts-mobile-slider-shadow-space, 28px) 10px; scroll-snap-type: x mandatory; scroll-padding-left: 10px; scroll-padding-right: 10px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .warm-storage-page.container-rent-page .ts-container-usecases::-webkit-scrollbar { display: none; } .warm-storage-page.container-rent-page .ts-container-usecase { min-height: 250px; padding: 22px 20px; border-radius: 22px; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.045); scroll-snap-align: start; scroll-snap-stop: always; } .warm-storage-page.container-rent-page .ts-container-usecase:last-child { margin-right: 10px; } .warm-storage-page.container-rent-page .ts-container-usecase h3 { font-size: 22px; } .warm-storage-page.container-rent-page .ts-container-usecase p { font-size: 14.5px; line-height: 1.5; } } /* ===== 25. Size cards mobile preview and bottom sheet ===== */ .ts-size-card__preview-actions { display: none; } .ts-size-card__more { appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 24px 0 8px; border: 0; background: transparent; color: var(--ts-orange); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.08; cursor: pointer; } .ts-size-card__more::after { content: ""; position: absolute; top: 50%; right: 1px; display: block; width: 19px; height: 12px; background: currentColor; opacity: 0.62; pointer-events: none; transform: translateY(-50%); transition: opacity var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M2 6H16M11.5 1.8L16.2 6L11.5 10.2' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M2 6H16M11.5 1.8L16.2 6L11.5 10.2' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; } .ts-size-card__more:hover::after, .ts-size-card__more:focus-visible::after { opacity: 0.82; transform: translate(2px, -50%); } .ts-size-card__more:focus-visible { outline: 2px solid rgba(255, 120, 22, 0.28); outline-offset: 4px; border-radius: 999px; } .ts-size-sheet { position: fixed; inset: 0; z-index: 10000; visibility: hidden; pointer-events: none; overscroll-behavior: contain; } .ts-size-sheet.is-open { visibility: visible; pointer-events: auto; } .ts-size-sheet.is-closing { visibility: visible; pointer-events: none; } .ts-size-sheet__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.48); opacity: 0; touch-action: none; transition: opacity 0.22s ease; } .ts-size-sheet.is-open .ts-size-sheet__backdrop { opacity: 1; } .ts-size-sheet__panel { position: absolute; left: 50%; right: auto; bottom: 0; display: flex; flex-direction: column; width: min(100%, 560px); max-height: min(92vh, 720px); max-height: min(92dvh, 720px); overflow: hidden; background: var(--ts-white); border-radius: 30px 30px 0 0; box-shadow: 0 -18px 54px rgba(17, 24, 39, 0.18); transform: translate3d(-50%, 105%, 0); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .ts-size-sheet.is-open .ts-size-sheet__panel { transform: translate3d(-50%, 0, 0); } .ts-size-sheet__handle { width: 46px; height: 5px; margin: 10px auto 8px; border-radius: 999px; background: rgba(69, 69, 69, 0.18); } .ts-size-sheet__close { appearance: none; -webkit-appearance: none; position: absolute; top: 16px; right: 16px; z-index: 12; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.96); color: var(--ts-dark); font-size: 0; line-height: 1; box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .ts-size-sheet__close::before, .ts-size-sheet__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 999px; background: currentColor; } .ts-size-sheet__close::before { transform: translate(-50%, -50%) rotate(45deg); } .ts-size-sheet__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .ts-size-sheet__close:hover, .ts-size-sheet__close:focus-visible { background: #ffffff; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16); } .ts-size-sheet__close:focus-visible { outline: 3px solid rgba(255, 120, 22, 0.24); outline-offset: 3px; } .ts-size-sheet__content { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 0 18px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .ts-size-sheet__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin: 0 0 18px; border-radius: 22px; background: #f3f3f3; } .ts-size-sheet__media img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.012); transition: opacity 0.22s ease, transform 0.28s var(--ts-motion-ease); } .ts-size-sheet__media.is-ready img, .ts-size-sheet.is-media-ready .ts-size-sheet__media img { opacity: 1; transform: none; } .ts-size-sheet__badge { position: absolute; top: 12px; right: auto; left: 12px; z-index: 3; display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; background: #ffd21e; color: var(--ts-dark); font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12); opacity: 0; transform: translate3d(0, -2px, 0); transition: opacity 0.18s ease, transform 0.22s var(--ts-motion-ease); } .ts-size-sheet__media.is-ready .ts-size-sheet__badge, .ts-size-sheet.is-media-ready .ts-size-sheet__badge { opacity: 1; transform: translate3d(0, 0, 0); } .ts-size-sheet__gallery { display: grid; gap: 10px; aspect-ratio: auto; overflow: visible; background: transparent; } .ts-size-sheet__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 22px; background: #f3f3f3; outline: none; } .ts-size-sheet__gallery-image { background: #f3f3f3; } .ts-size-sheet__gallery .ts-size-sheet__gallery-image { object-fit: cover; } .ts-size-sheet__gallery-nav { appearance: none; -webkit-appearance: none; position: absolute; top: 50%; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 15px; background: rgba(255, 255, 255, 0.92); color: var(--ts-dark); box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14); transform: translateY(-50%); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--ts-motion-duration-fast) ease, color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; } .ts-size-sheet__gallery-nav::before { content: ""; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M11.2 3.8L6 9L11.2 14.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M11.2 3.8L6 9L11.2 14.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .ts-size-sheet__gallery-nav--prev { left: 12px; } .ts-size-sheet__gallery-nav--next { right: 12px; } .ts-size-sheet__gallery-nav--next::before { transform: rotate(180deg); } .ts-size-sheet__gallery-nav:hover, .ts-size-sheet__gallery-nav:focus-visible { background: #ffffff; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18); } .ts-size-sheet__gallery-nav:focus-visible, .ts-size-sheet__stage:focus-visible { outline: 3px solid rgba(255, 120, 22, 0.22); outline-offset: 3px; } .ts-size-sheet__gallery-counter { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ts-dark); font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ts-size-sheet__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; min-width: 0; } .ts-size-sheet__thumb { appearance: none; -webkit-appearance: none; position: relative; overflow: hidden; aspect-ratio: 16 / 10; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 13px; background: #f3f3f3; box-shadow: none; cursor: pointer; opacity: 0.72; transition: opacity var(--ts-motion-duration-fast) ease, border-color var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; } .ts-size-sheet__thumb img, .ts-size-sheet__gallery .ts-size-sheet__thumb img, .ts-size-sheet.is-media-ready .ts-size-sheet__gallery .ts-size-sheet__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: none; transition: none; } .ts-size-sheet__thumb:hover, .ts-size-sheet__thumb:focus-visible, .ts-size-sheet__thumb.is-active { opacity: 1; } .ts-size-sheet__thumb.is-active { border-color: var(--ts-orange); } .ts-size-sheet__thumb:focus-visible { outline: 3px solid rgba(255, 120, 22, 0.20); outline-offset: 3px; } .ts-size-sheet__head { padding: 0 2px; } .ts-size-sheet__title-row { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; } .ts-size-sheet__title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ts-dark); font-family: var(--ts-font-text, "Roboto", Arial, sans-serif); font-size: 26px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; } .ts-size-sheet__share { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin-top: -6px; padding: 0; border: 0; border-radius: 16px; background: var(--ts-bg-soft); color: rgba(69, 69, 69, 0.92); box-shadow: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--ts-motion-duration-fast) ease, color var(--ts-motion-duration-fast) ease, box-shadow var(--ts-motion-duration-fast) ease, transform var(--ts-motion-duration-fast) ease; } .ts-size-sheet__share svg { display: none; } .ts-size-sheet__share::before { content: ""; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 14.75V4.25M12 4.25L8.6 7.65M12 4.25L15.4 7.65M7.2 10.9H6.75C5.78 10.9 5 11.68 5 12.65V18.2C5 19.19 5.81 20 6.8 20H17.2C18.19 20 19 19.19 19 18.2V12.65C19 11.68 18.22 10.9 17.25 10.9H16.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 14.75V4.25M12 4.25L8.6 7.65M12 4.25L15.4 7.65M7.2 10.9H6.75C5.78 10.9 5 11.68 5 12.65V18.2C5 19.19 5.81 20 6.8 20H17.2C18.19 20 19 19.19 19 18.2V12.65C19 11.68 18.22 10.9 17.25 10.9H16.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .ts-size-sheet__share:hover, .ts-size-sheet__share:focus-visible { background: var(--ts-bg-alt); box-shadow: none; color: var(--ts-dark); } .ts-size-sheet__share:focus-visible { outline: 3px solid rgba(255, 120, 22, 0.20); outline-offset: 3px; } .ts-size-sheet__share.is-copied { background: rgba(255, 120, 22, 0.10); color: var(--ts-orange); } @media (min-width: 768px) { .ts-size-sheet__share { display: none; } } .ts-size-sheet__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .ts-size-sheet__meta-item { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px; background: #f6f6f6; border: 1px solid #ececec; color: var(--ts-text-muted); font-size: 14px; line-height: 1; } .ts-size-sheet__desc { margin: 0 0 18px; color: var(--ts-text-muted); font-size: 16px; line-height: 1.55; } .ts-size-sheet__price { margin: 0 0 18px; color: var(--ts-orange); font-size: 27px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .ts-size-sheet__notes { display: grid; gap: 0; margin: -8px 0 16px; } .ts-size-sheet__note { color: var(--ts-text-muted); font-size: 13px; line-height: 1.45; } .ts-size-sheet__note--accent { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 120, 22, 0.08); color: var(--ts-dark); font-weight: 700; } .ts-size-sheet__choice-note { margin: 0 0 18px; color: var(--ts-text-muted); font-size: 16px; line-height: 1.55; } .ts-size-sheet__choice-note strong { color: inherit; font-weight: inherit; } .ts-size-sheet__tariffs { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: #f8f8f8; border: 1px solid rgba(69, 69, 69, 0.08); } .ts-size-sheet__tariffs-title { margin: 0 0 8px; color: var(--ts-dark); font-size: 15px; font-weight: 800; } .ts-size-sheet__tariff-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; color: var(--ts-text-muted); font-size: 15px; line-height: 1.35; } .ts-size-sheet__tariff-row + .ts-size-sheet__tariff-row { border-top: 1px solid rgba(69, 69, 69, 0.08); } .ts-size-sheet__tariff-row strong { color: var(--ts-dark); font-weight: 800; text-align: right; white-space: nowrap; } .ts-size-sheet__tariff-row--head, .ts-size-sheet__tariff-row--split { display: grid; grid-template-columns: minmax(76px, 0.72fr) repeat(2, minmax(0, 1fr)); gap: 10px; align-items: center; } .ts-size-sheet__tariff-row--head { padding-bottom: 8px; } .ts-size-sheet__tariff-row--head span, .ts-size-sheet__tariff-row--head strong { color: var(--ts-dark); font-size: 14px; font-weight: 800; line-height: 1.25; } .ts-size-sheet__tariff-row--split span, .ts-size-sheet__tariff-row--split strong { min-width: 0; } .ts-size-sheet__tariff-row--split strong { font-size: 14px; line-height: 1.28; white-space: normal; overflow-wrap: anywhere; } .ts-size-sheet__tariff-row--split strong:nth-of-type(2) { color: var(--ts-orange); } .ts-size-sheet__actions { position: sticky; bottom: 0; z-index: 1; margin: 0 -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.92); border-top: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ts-size-sheet__actions .btn { width: 100%; min-height: var(--ts-btn-height-lg); border-radius: var(--ts-btn-radius-lg); } /* ===== 27B. Mobile sheet gallery cleanup: reduce visual overload ===== */ @media (max-width: 767px) { .ts-size-sheet__gallery-nav { display: none; } .ts-size-sheet__badge { display: none; } .ts-size-sheet__gallery-counter { right: 10px; bottom: 10px; min-height: 28px; padding: 0 10px; background: rgba(255, 255, 255, 0.86); color: rgba(69, 69, 69, 0.92); font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 16px rgba(17, 24, 39, 0.10); } .ts-size-sheet__thumbs { gap: 7px; } .ts-size-sheet__thumb { border-radius: 12px; opacity: 0.76; } .ts-size-sheet__thumb:hover, .ts-size-sheet__thumb:focus-visible, .ts-size-sheet__thumb.is-active { opacity: 1; } } /* ===== 27C. Mobile overlay touch hygiene: prevent accidental iOS double-tap zoom ===== */ @media (max-width: 767px) { html.is-size-sheet-open, body.is-size-sheet-open, .ts-size-sheet, .ts-size-sheet__panel, .ts-size-sheet__content, .ts-size-sheet__media, .ts-size-sheet__stage, .ts-size-sheet__gallery-image, .ts-size-sheet__gallery-nav, .ts-size-sheet__thumb, .ts-size-sheet__close, .ts-size-sheet__share, .ts-size-sheet__actions .btn, .cb-app-header__burger, .cb-app-header__phone, .cb-app-menu, .cb-app-menu__panel, .cb-app-menu__close, .cb-app-nav__summary, .cb-app-nav__link, .cb-app-nav__sublink, .cb-app-menu__quick a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .ts-size-sheet__gallery-image, .ts-size-sheet__thumb img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } } html.is-size-sheet-open, body.is-size-sheet-open { overflow: hidden; overscroll-behavior: none; } .warm-storage-page .ts-size-grid .ts-size-card.is-deep-linked { border-color: rgba(255, 120, 22, 0.28); box-shadow: 0 0 0 3px rgba(255, 120, 22, 0.10), 0 18px 34px rgba(17, 24, 39, 0.08); } @media (min-width: 768px) { .ts-size-sheet__backdrop { background: rgba(17, 24, 39, 0.54); } .ts-size-sheet__panel { top: 50%; bottom: auto; width: min(1120px, calc(100% - 48px)); max-height: min(88vh, 780px); max-height: min(88dvh, 780px); border-radius: 30px; transform: translate3d(-50%, calc(-50% + 34px), 0) scale(0.985); opacity: 0; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease; } .ts-size-sheet.is-open .ts-size-sheet__panel { transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1; } .ts-size-sheet__handle { display: none; } .ts-size-sheet__close { top: 18px; right: 18px; } .ts-size-sheet__content { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.97fr); grid-template-rows: auto auto; align-items: start; align-content: start; column-gap: 32px; row-gap: 0; padding: 24px 24px 22px; } .ts-size-sheet__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; min-width: 0; max-width: 100%; margin: 0; } .ts-size-sheet__gallery { min-width: 0; max-width: 100%; } .ts-size-sheet__stage { width: 100%; min-width: 0; max-width: 100%; min-height: 0; } .ts-size-sheet__thumbs { min-width: 0; max-width: 100%; } .ts-size-sheet__head { grid-column: 2; grid-row: 1; min-width: 0; padding: 8px 4px 0 0; } .ts-size-sheet__actions { grid-column: 2; grid-row: 2; position: static; bottom: auto; align-self: start; margin: 2px 0 0; padding: 0 4px 0 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .ts-size-sheet__actions .btn { min-height: 54px; box-shadow: 0 10px 20px rgba(255, 120, 22, 0.18); } } @media (max-width: 767px) { .ts-size-sheet { padding-top: max(148px, env(safe-area-inset-top)); box-sizing: border-box; } .ts-size-sheet__panel { width: 100%; height: auto; max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); border-radius: 30px 30px 0 0; } .ts-size-sheet__content { flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; } .warm-storage-page .ts-size-grid .ts-size-card { position: relative; display: flex; flex-direction: row; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 132px !important; gap: 12px; padding: 0 12px 0 0; overflow: visible; border: 0; border-radius: 22px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.018), 0 3px 8px rgba(17, 24, 39, 0.04), 0 12px 26px rgba(17, 24, 39, 0.052); transform: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: pan-y; } .warm-storage-page .ts-size-grid .ts-size-card:hover, .warm-storage-page .ts-size-grid .ts-size-card:active { transform: none !important; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.018), 0 3px 8px rgba(17, 24, 39, 0.04), 0 12px 26px rgba(17, 24, 39, 0.052); } .warm-storage-page .ts-size-grid .ts-size-card:focus-visible { outline: 2px solid rgba(255, 120, 22, 0.55); outline-offset: 3px; } .ts-size-card__media { flex: 0 0 clamp(116px, 34vw, 134px); width: clamp(116px, 34vw, 134px); align-self: stretch; height: auto; min-height: 0; aspect-ratio: auto; overflow: hidden; border: 0; border-radius: 22px 16px 16px 22px; background: #f4f4f4; } .ts-size-card__badge { top: -12px; right: 20px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; max-width: calc(100% - 40px); padding: 0 14px; box-sizing: border-box; border-radius: 999px; background: #ffd21e; border: 0; color: var(--ts-dark); font-size: 12px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; box-shadow: 0 7px 14px rgba(17, 24, 39, 0.075); } .ts-size-card__media img { width: 100%; height: 100%; object-fit: cover; } .ts-size-card__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "title" "meta" "desc" "bottom"; flex: 1 1 auto; min-width: 0; height: 100%; padding: 18px 0 4px 0; } .ts-size-card__title { grid-area: title; margin: 0 0 6px; padding-right: 0; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .ts-size-card__meta { grid-area: meta; justify-content: flex-start; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 500; } .ts-size-card__meta-item:first-child { display: none; } .ts-size-card__meta-item { min-height: 23px; padding: 0 8px; white-space: nowrap; } .storage-boxes-page .ts-size-grid .ts-size-card__meta-item--dimensions { display: none; } .ts-size-card__desc { grid-area: desc; display: -webkit-box; min-height: 0; align-self: start; margin: 0; overflow: hidden; color: var(--ts-text-muted); font-size: 13.5px; font-weight: 400; line-height: 1.36; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ts-size-card__bottom { grid-area: bottom; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price price" ". more"; align-items: end; column-gap: 10px; row-gap: 3px; margin: 9px 0 0; } .ts-size-card__price { grid-area: price; justify-self: start; min-width: 0; margin: 0; color: var(--ts-orange); font-size: clamp(16px, 4.25vw, 17.5px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; white-space: nowrap; } .ts-size-card__preview-actions { grid-area: more; display: flex; align-items: flex-end; justify-content: flex-end; justify-self: end; min-width: 0; width: auto; margin-top: 0; padding-bottom: 0; } .ts-size-card__tariffs, .ts-size-card__bottom > .js-select-size { display: none; } .ts-size-card__more { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 30px; padding: 0 22px 0 10px; gap: 7px; color: var(--ts-dark); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; background: transparent; border: 0; box-shadow: none; cursor: pointer; opacity: 0.86; transform: none !important; } .ts-size-card__more::after { right: 0; width: 18px; height: 12px; opacity: 0.60; } .ts-size-sheet__media { width: 100%; height: min(255px, 34dvh); max-height: none; aspect-ratio: auto; } .ts-size-sheet__gallery { height: auto; } .ts-size-sheet__gallery .ts-size-sheet__stage { height: min(235px, 32dvh); min-height: 190px; aspect-ratio: auto; } .ts-size-sheet__gallery-nav { width: 38px; height: 38px; border-radius: 14px; } .ts-size-sheet__gallery-nav--prev { left: 10px; } .ts-size-sheet__gallery-nav--next { right: 10px; } .ts-size-sheet__thumbs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 1px 1px 3px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; } .ts-size-sheet__thumbs::-webkit-scrollbar { display: none; } .ts-size-sheet__thumb { flex: 0 0 64px; width: 64px; } .ts-size-sheet__title-row { gap: 10px; } .ts-size-sheet__share { flex-basis: 44px; width: 44px; height: 44px; border-radius: 16px; } .ts-size-sheet__actions { margin: 18px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 24%, #fff 100%); } } @media (max-width: 374px) { .warm-storage-page .ts-size-grid .ts-size-card { gap: 10px; height: auto !important; min-height: 124px !important; padding: 0 10px 0 0; } .ts-size-card__media { flex-basis: 108px; width: 108px; align-self: stretch; height: auto; min-height: 0; } .ts-size-card__badge { top: -11px; right: 16px; min-height: 23px; max-width: calc(100% - 32px); padding: 0 12px; font-size: 11px; } .ts-size-card__body { padding: 18px 0 4px 0; } .ts-size-card__title { margin-bottom: 5px; font-size: 17px; } .ts-size-card__meta { margin-bottom: 7px; } .ts-size-card__meta-item { min-height: 22px; padding: 0 7px; font-size: 11.5px; } .ts-size-card__desc { line-height: 1.32; } .ts-size-card__bottom { row-gap: 2px; margin-top: 7px; } .ts-size-card__price { letter-spacing: -0.02em; } .ts-size-card__more { min-height: 28px; padding-left: 8px; padding-right: 21px; font-size: 13.5px; } .ts-size-card__more::after { width: 16px; height: 11px; } } @media (max-width: 374px) { .ts-size-sheet { padding-top: max(148px, env(safe-area-inset-top)); } .ts-size-sheet__panel { max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); } .ts-size-sheet__content { max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); } .ts-size-sheet__media { height: min(235px, 32dvh); } .ts-size-sheet__gallery { height: auto; } .ts-size-sheet__gallery .ts-size-sheet__stage { height: min(218px, 29dvh); min-height: 178px; } } /* ===== 25A. Mobile overlay repaint stability ===== */ /* Bottom sheet and mobile menu still lock body scroll. The size filter is static on mobile, so it no longer needs sticky compensation, placeholder clones or unlock-cover layers. Only card repaint stabilization remains. */ @media (max-width: 767px) { .warm-storage-page .ts-size-grid .ts-size-card__badge { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } html.is-warm-overlay-settling .warm-storage-page .ts-size-grid, html.is-size-sheet-open .warm-storage-page .ts-size-grid, html.is-cb-menu-open .warm-storage-page .ts-size-grid { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } html.is-warm-overlay-settling .warm-storage-page .ts-size-card, html.is-size-sheet-open .warm-storage-page .ts-size-card, html.is-cb-menu-open .warm-storage-page .ts-size-card { transition: none !important; transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; } html.is-warm-overlay-settling .warm-storage-page .ts-size-card__media, html.is-warm-overlay-settling .warm-storage-page .ts-size-card__media img, html.is-warm-overlay-settling .warm-storage-page .ts-size-card__more, html.is-warm-overlay-settling .warm-storage-page .ts-size-card__price, html.is-size-sheet-open .warm-storage-page .ts-size-card__media, html.is-size-sheet-open .warm-storage-page .ts-size-card__media img, html.is-size-sheet-open .warm-storage-page .ts-size-card__more, html.is-size-sheet-open .warm-storage-page .ts-size-card__price, html.is-cb-menu-open .warm-storage-page .ts-size-card__media, html.is-cb-menu-open .warm-storage-page .ts-size-card__media img, html.is-cb-menu-open .warm-storage-page .ts-size-card__more, html.is-cb-menu-open .warm-storage-page .ts-size-card__price { transition: none !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; } } /* Hide floating support widgets while the size bottom sheet is open. */ body.is-size-sheet-open jdiv, body.is-size-sheet-open [id*="jivo"], body.is-size-sheet-open [class*="jivo"], body.is-size-sheet-open [id*="Jivo"], body.is-size-sheet-open [class*="Jivo"], body.is-size-sheet-open .b24-widget-button-wrapper, body.is-size-sheet-open .b24-widget-button-position-bottom-right, body.is-size-sheet-open .callbackkiller, body.is-size-sheet-open .callback-bt, html.is-size-sheet-open jdiv, html.is-size-sheet-open [id*="jivo"], html.is-size-sheet-open [class*="jivo"], html.is-size-sheet-open [id*="Jivo"], html.is-size-sheet-open [class*="Jivo"], html.is-size-sheet-open .b24-widget-button-wrapper, html.is-size-sheet-open .b24-widget-button-position-bottom-right, html.is-size-sheet-open .callbackkiller, html.is-size-sheet-open .callback-bt { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; } @media (prefers-reduced-motion: reduce) { .ts-size-sheet__backdrop, .ts-size-sheet__panel, .ts-size-sheet__media img, .ts-size-sheet__badge, .ts-size-sheet__gallery-nav, .ts-size-sheet__thumb, .ts-size-card__photo-count { transition: none; } } @media (max-width: 380px) { .ts-hero__intro { padding-inline: 18px; } .ts-hero__media img { height: 360px; } .ts-hero__details { padding-inline: 12px; } .ts-hero__features { gap: 7px 10px; } .ts-hero__features li { gap: 5px; font-size: clamp(11.5px, 3.05vw, 12px); line-height: 1.25; } .ts-hero-feature__icon { flex-basis: 22px; width: 22px; height: 22px; } .ts-hero-feature__icon svg { width: 13px; height: 13px; } } /* ===== 26. Touch devices: hover cleanup ===== */ @media (hover: none), (pointer: coarse) { .btn--accent:hover, .btn--accent:active { background: var(--ts-orange); color: var(--ts-white); } .btn--dark:hover, .btn--dark:active { background: var(--ts-dark); color: var(--ts-white); } .btn--outline:hover, .btn--outline:active { background: transparent; color: var(--ts-dark); border-color: var(--ts-dark); } .btn--outline.btn--messenger:hover .btn__icon img, .btn--outline.btn--messenger:active .btn__icon img { filter: none; } .ts-size-sheet__share:hover, .ts-size-sheet__share:active { background: var(--ts-bg-soft); color: rgba(69, 69, 69, 0.92); box-shadow: none; transform: none; } .ts-size-sheet__share.is-copied:hover, .ts-size-sheet__share.is-copied:active { background: rgba(255, 120, 22, 0.10); color: var(--ts-orange); } .ts-hero__actions .btn--phone:hover, .ts-hero__actions .btn--phone:active, .ts-final-cta__actions .btn--phone:hover, .ts-final-cta__actions .btn--phone:active, .ts-hero__actions .btn--messenger:hover, .ts-hero__actions .btn--messenger:active, .ts-final-cta__actions .btn--messenger:hover, .ts-final-cta__actions .btn--messenger:active { background: #454545; border-color: #454545; color: #ffffff; } .ts-hero__actions .btn--phone:hover .btn__icon img, .ts-hero__actions .btn--phone:active .btn__icon img, .ts-final-cta__actions .btn--phone:hover .btn__icon img, .ts-final-cta__actions .btn--phone:active .btn__icon img, .ts-hero__actions .btn--messenger:hover .btn__icon img, .ts-hero__actions .btn--messenger:active .btn__icon img, .ts-final-cta__actions .btn--messenger:hover .btn__icon img, .ts-final-cta__actions .btn--messenger:active .btn__icon img { filter: brightness(0) invert(1); } .ts-inline-link:hover, .ts-inline-link:active, .ts-form-consent__text a:hover, .ts-form-consent__text a:active { color: var(--ts-orange); border-color: rgba(255, 120, 22, 0.32); } .ts-hero__breadcrumbs .cb-text-breadcrumbs__item a:hover, .ts-hero__breadcrumbs .cb-text-breadcrumbs__item a:active, .ts-breadcrumbs a:hover, .ts-breadcrumbs a:active { color: rgba(255, 255, 255, 0.72); } .warm-storage-page .ts-size-grid .ts-size-card, .warm-storage-page .ts-size-grid .ts-size-card:hover, .warm-storage-page .ts-size-grid .ts-size-card:active { transform: none !important; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.018), 0 3px 8px rgba(17, 24, 39, 0.04), 0 12px 26px rgba(17, 24, 39, 0.052); } .warm-storage-page .ts-steps__grid .ts-step-card:hover, .warm-storage-page .ts-steps__grid .ts-step-card:active { transform: none; border-color: rgba(69, 69, 69, 0.08); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.055); } .warm-storage-page .ts-advantages__grid .ts-adv-card:hover, .warm-storage-page .ts-advantages__grid .ts-adv-card:active { transform: none; border-color: rgba(69, 69, 69, 0.08); background: var(--ts-white); box-shadow: 0 12px 28px rgba(17, 24, 39, 0.045); } .warm-storage-page .ts-usecases__grid .ts-usecase-card:hover, .warm-storage-page .ts-usecases__grid .ts-usecase-card:active { transform: none; background: var(--ts-white); box-shadow: none; } .ts-filter:not(.is-active):hover, .ts-filter:not(.is-active):focus, .ts-filter:not(.is-active):active { background: transparent; color: var(--ts-dark); } .ts-filter.is-active, .ts-filter.is-active:hover, .ts-filter.is-active:focus, .ts-filter.is-active:active { background: transparent; color: var(--ts-white); } .ts-faq-item:not([open]):hover, .ts-faq-item:not([open]):active { background: transparent; box-shadow: none; } .ts-faq-item summary:hover, .ts-faq-item summary:active { color: var(--ts-dark); } .ts-faq__more:hover, .ts-faq__more:active { background: var(--ts-white); border-color: rgba(69, 69, 69, 0.20); color: var(--ts-dark); } .ts-contact-phone:hover, .ts-contact-phone:active { background: var(--ts-white); border-color: rgba(69, 69, 69, 0.08); box-shadow: none; transform: none; } .ts-messenger-card:hover, .ts-messenger-card:active { border-color: rgba(69, 69, 69, 0.08); box-shadow: none; transform: none; } }