/* ========================================================================== Transtronix design system for Flatsome Palette: slate ink, store blue, buy amber, verified emerald, cool greys. Every rule is scoped to body.tt-design (added by the child theme). ========================================================================== */ :root { --tt-ink: #0F172A; --tt-ink-2: #1E293B; --tt-blue: #2563EB; --tt-blue-deep: #1D4ED8; --tt-blue-tint: #EEF4FF; --tt-blue-tint-2: #D3E1FF; --tt-blue-wash: #F2F6FF; --tt-amber: #FFB300; --tt-amber-hover: #F2A500; --tt-amber-tint: #FFF8E1; --tt-amber-text: #B45309; --tt-green: #047857; --tt-green-tint: #E7F8F0; --tt-green-wash: #EEFBF5; --tt-green-line: #BFEBD6; --tt-whatsapp: #25D366; --tt-cloud: #F4F6FA; --tt-cloud-2: #F8FAFC; --tt-line: #E4E7EC; --tt-line-2: #EEF0F4; --tt-control: #D4D9E1; --tt-text: #0F172A; --tt-text-2: #374151; --tt-text-3: #4B5563; --tt-muted: #5A6474; --tt-faint: #6B7485; --tt-on-dark: #B8C1CF; --tt-on-dark-2: #A0AABB; --tt-on-dark-3: #8D97A8; --tt-dark-line: #475569; --tt-red: #B91C1C; --tt-radius: 16px; --tt-radius-md: 12px; --tt-radius-sm: 10px; --tt-shadow: 0 12px 30px rgba(15, 23, 42, .12); --tt-shadow-lg: 0 24px 60px rgba(15, 23, 42, .22); --tt-display: 'Epilogue', 'Hanken Grotesk', system-ui, sans-serif; --tt-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --tt-deva: 'Noto Sans Devanagari', 'Hanken Grotesk', sans-serif; } /* -------------------------------------------------------------------------- base */ body.tt-design { font-family: var(--tt-body); color: var(--tt-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tt-design h1, .tt-design h2, .tt-design h3, .tt-design h4, .tt-design .heading-font, .tt-design .product-title.entry-title { font-family: var(--tt-display); letter-spacing: -.022em; line-height: 1.1; } /* :where() keeps this at element weight, so Flatsome's own link colours (buttons, Quick View, dark sections) still win. */ :where(.tt-design) a { color: var(--tt-blue); } :where(.tt-design) a:hover { color: var(--tt-blue-deep); } .tt-design :focus-visible { outline: 2px solid var(--tt-blue); outline-offset: 2px; } .tt-design ::selection { background: var(--tt-blue-tint-2); color: var(--tt-ink); } .tt-design .tt-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; } .tt-design .tt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .tt-design .tt-anchor { display: block; position: relative; top: -120px; visibility: hidden; height: 0; } .tt-design .tt-lead { font-size: 15.5px; line-height: 1.6; color: var(--tt-muted); max-width: 640px; margin: -14px 0 30px; } .tt-design .tt-lead-dark { font-size: 15px; line-height: 1.6; color: var(--tt-on-dark-2); margin: -8px 0 20px; } .tt-design .tt-muted { font-size: 14.5px; line-height: 1.6; color: var(--tt-muted); } .tt-design .tt-prose { font-size: 16px; line-height: 1.7; color: var(--tt-text-2); max-width: 62ch; } /* -------------------------------------------------------------------------- Flatsome sections */ .tt-design .section.tt-sec .row > .col { padding-bottom: 0; } .tt-design .section.tt-sec .col-inner > *:last-child { margin-bottom: 0; } .tt-design .section.tt-sec--flush > .section-content > .row > .col, .tt-design .section.tt-sec--hero > .section-content > .row > .col { padding-left: 0; padding-right: 0; } .tt-design .section.tt-sec--flush > .section-content > .row, .tt-design .section.tt-sec--hero > .section-content > .row { max-width: none; } .tt-design .section.tt-sec--strip { border-bottom: 1px solid var(--tt-line); } .tt-design .section.tt-sec--cloud { border-top: 1px solid var(--tt-line); border-bottom: 1px solid var(--tt-line); } .tt-design .section.tt-sec--cloud + .section.tt-sec--cloud { border-top: 0; } .tt-design .section.tt-sec--tint { border-top: 1px solid var(--tt-blue-tint-2); border-bottom: 1px solid var(--tt-blue-tint-2); } /* -------------------------------------------------------------------------- buttons */ .tt-design .tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 11px; border: 1.5px solid transparent; font-family: var(--tt-body); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; margin: 0 6px 6px 0; vertical-align: middle; white-space: nowrap; } .tt-design .tt-btn:active { transform: translateY(1px); } .tt-design .tt-btn--lg { min-height: 56px; padding: 0 26px; font-size: 16px; border-radius: 12px; } .tt-design .tt-btn--sm { min-height: 42px; padding: 0 16px; font-size: 13.5px; border-radius: 10px; } .tt-design .tt-btn--block { display: flex; width: 100%; margin-right: 0; } .tt-design .tt-btn--amber { background: var(--tt-amber); color: var(--tt-ink); } .tt-design .tt-btn--amber:hover { background: var(--tt-amber-hover); color: var(--tt-ink); } .tt-design .tt-btn--blue { background: var(--tt-blue); color: #fff; } .tt-design .tt-btn--blue:hover { background: var(--tt-blue-deep); color: #fff; } .tt-design .tt-btn--outline { background: #fff; color: var(--tt-blue); border-color: var(--tt-blue); } .tt-design .tt-btn--outline:hover { background: var(--tt-blue-tint); color: var(--tt-blue-deep); } .tt-design .tt-btn--ghost { background: transparent; color: #fff; border-color: var(--tt-dark-line); font-weight: 600; } .tt-design .tt-btn--ghost:hover { border-color: #fff; color: #fff; } .tt-design .tt-btn--wa { background: var(--tt-green-wash); color: var(--tt-green); border-color: var(--tt-green-line); } .tt-design .tt-btn--wa:hover { background: var(--tt-green-tint); color: var(--tt-green); } .tt-design .tt-btn--plain { background: #fff; color: var(--tt-ink); border: 1px solid var(--tt-control); font-weight: 600; } .tt-design .tt-btn--plain:hover { border-color: var(--tt-ink); color: var(--tt-ink); } /* Flatsome buttons: blue primary, amber for the buy action, ink text on amber. */ .tt-design .button, .tt-design button.button, .tt-design input[type='submit'].button { border-radius: 10px; text-transform: none; letter-spacing: 0; font-weight: 700; font-family: var(--tt-body); } .tt-design .button.primary, .tt-design .button.alt.primary { background-color: var(--tt-blue); } .tt-design .button.secondary, .tt-design .button.alt, .tt-design .checkout-button, .tt-design #place_order, .tt-design .ux-buy-now-button { background-color: var(--tt-amber) !important; color: var(--tt-ink) !important; border-color: var(--tt-amber) !important; } .tt-design .button.secondary:hover, .tt-design .button.alt:hover, .tt-design .checkout-button:hover, .tt-design #place_order:hover, .tt-design .ux-buy-now-button:hover { background-color: var(--tt-amber-hover) !important; box-shadow: none; } .tt-design .single_add_to_cart_button.button { background-color: var(--tt-blue) !important; color: #fff !important; border-color: var(--tt-blue) !important; min-height: 52px; font-size: 16px; } .tt-design .single_add_to_cart_button.button:hover { background-color: var(--tt-blue-deep) !important; } /* Form controls */ .tt-design input[type='text'], .tt-design input[type='email'], .tt-design input[type='tel'], .tt-design input[type='number'], .tt-design input[type='password'], .tt-design input[type='search'], .tt-design input[type='date'], .tt-design input[type='url'], .tt-design select, .tt-design textarea { border: 1px solid var(--tt-control); border-radius: 10px; box-shadow: none; font-family: var(--tt-body); color: var(--tt-ink); } .tt-design input[type='text']:focus, .tt-design input[type='email']:focus, .tt-design input[type='tel']:focus, .tt-design input[type='number']:focus, .tt-design input[type='password']:focus, .tt-design input[type='search']:focus, .tt-design select:focus, .tt-design textarea:focus { border-color: var(--tt-blue); box-shadow: 0 0 0 3px var(--tt-blue-tint-2); outline: none; } /* -------------------------------------------------------------------------- small pieces */ .tt-design .tt-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-blue-deep); } .tt-design .tt-pills { display: flex; flex-wrap: wrap; gap: 10px; } .tt-design .tt-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--tt-line); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: var(--tt-ink); } .tt-design .tt-pill .tt-icon { color: var(--tt-green); } .tt-design .tt-pill--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #FFD166; border-radius: 99px; padding: 7px 13px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .tt-design .tt-pill--dark .tt-icon { color: var(--tt-amber); } .tt-design .tt-pills--archive { margin: 12px 0 4px; } .tt-design .tt-chips { display: flex; flex-wrap: wrap; gap: 8px; } .tt-design .tt-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--tt-text-2); background: #fff; border: 1px solid var(--tt-line); padding: 8px 14px; border-radius: 8px; } .tt-design a.tt-chip--link { border-radius: 99px; font-size: 13.5px; font-weight: 600; padding: 10px 16px; color: var(--tt-ink); } .tt-design a.tt-chip--link:hover { border-color: var(--tt-blue); color: var(--tt-blue); } .tt-design .tt-brandline { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tt-muted); } .tt-design .tt-badge-auth { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--tt-green); background: var(--tt-green-tint); padding: 3px 7px; border-radius: 5px; line-height: 1.3; } .tt-design .tt-save { background: var(--tt-green); color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 6px; } .tt-design .tt-stars { color: var(--tt-amber); letter-spacing: 2px; font-size: 15px; } .tt-design .tt-avatar { width: 38px; height: 38px; border-radius: 99px; background: var(--tt-blue); color: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .tt-design .tt-avatar--lg { width: 84px; height: 84px; font-family: var(--tt-display); font-size: 26px; font-weight: 800; } .tt-design .tt-link-arrow { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--tt-blue); white-space: nowrap; } .tt-design .tt-bar { display: block; height: 7px; background: var(--tt-line-2); border-radius: 99px; overflow: hidden; } .tt-design .tt-bar > span { display: block; height: 100%; background: var(--tt-green); border-radius: 99px; } .tt-design .tt-wa-line { display: inline-flex; align-items: center; gap: 10px; color: #6EE7B7; font-size: 14px; font-weight: 600; } .tt-design .tt-wa-line .tt-icon { color: var(--tt-whatsapp); } .tt-design .tt-wa-line:hover { color: #fff; } /* -------------------------------------------------------------------------- section title */ .tt-design .tt-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 30px; } .tt-design .tt-section-title__main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .tt-design .tt-section-title__h { margin: 0; font-size: 38px; font-weight: 800; color: var(--tt-ink); } .tt-design .tt-section-title--medium .tt-section-title__h { font-size: 32px; } .tt-design .tt-section-title--small .tt-section-title__h { font-size: 22px; } .tt-design .tt-section-title--small { margin-bottom: 18px; } .tt-design .tt-section-title__aside { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tt-muted); max-width: 340px; text-align: right; } .tt-design .tt-section-title.tt-align-center { flex-direction: column; align-items: center; text-align: center; } .tt-design .tt-section-title.tt-on-dark .tt-section-title__h { color: #fff; } .tt-design .tt-section-title.tt-on-dark .tt-eyebrow { color: #FFD166; } /* -------------------------------------------------------------------------- page hero */ .tt-design .tt-page-hero { padding: 26px max(16px, calc((100% - 1280px) / 2)) 32px; background: var(--tt-cloud); border-bottom: 1px solid var(--tt-line); } .tt-design .tt-page-hero--white { background: #fff; } .tt-design .tt-page-hero--cream { background: var(--tt-blue-wash); border-bottom-color: var(--tt-blue-tint-2); padding-bottom: 60px; } .tt-design .tt-page-hero--dark { background: var(--tt-ink); background-image: radial-gradient(760px 420px at 80% 40%, rgba(37, 99, 235, .25), rgba(37, 99, 235, 0) 70%); border-bottom: 0; padding-bottom: 64px; } .tt-design .tt-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 12.5px; color: var(--tt-muted); margin-bottom: 16px; } .tt-design .tt-breadcrumb a { color: var(--tt-muted); } .tt-design .tt-breadcrumb [aria-current] , .tt-design .tt-breadcrumb .last { color: var(--tt-ink); font-weight: 600; } .tt-design .tt-page-hero--dark .tt-breadcrumb, .tt-design .tt-page-hero--dark .tt-breadcrumb a { color: var(--tt-on-dark-3); } .tt-design .tt-page-hero--dark .tt-breadcrumb [aria-current], .tt-design .tt-page-hero--dark .tt-breadcrumb .last { color: #fff; } .tt-design .tt-page-hero__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; } .tt-design .tt-page-hero--dark .tt-page-hero__grid, .tt-design .tt-page-hero--cream .tt-page-hero__grid { align-items: center; } .tt-design .tt-page-hero__copy { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .tt-design .tt-page-hero--dark .tt-page-hero__copy, .tt-design .tt-page-hero--cream .tt-page-hero__copy { max-width: 600px; flex-shrink: 0; flex-basis: 46%; } .tt-design .tt-page-hero__title { margin: 0; font-size: 40px; font-weight: 800; color: var(--tt-ink); } .tt-design .tt-page-hero--dark .tt-page-hero__title, .tt-design .tt-page-hero--cream .tt-page-hero__title { font-size: 50px; letter-spacing: -.03em; } .tt-design .tt-page-hero--dark .tt-page-hero__title { color: #fff; } .tt-design .tt-page-hero--dark .tt-eyebrow { color: #FFD166; } .tt-design .tt-page-hero__lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tt-text-3); } .tt-design .tt-page-hero--dark .tt-page-hero__lead { color: var(--tt-on-dark); font-size: 17px; } .tt-design .tt-page-hero__side { flex-shrink: 1; min-width: 0; } .tt-design .tt-page-hero--dark .tt-page-hero__side, .tt-design .tt-page-hero--cream .tt-page-hero__side { flex: 1 1 auto; max-width: 640px; } .tt-design .tt-page-hero--stack .tt-page-hero__grid { flex-direction: column; align-items: stretch; } /* -------------------------------------------------------------------------- header helpers */ .tt-design .tt-topbar-usps { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; } .tt-design .tt-topbar-usps li { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: inherit; } .tt-design .tt-topbar-usps .tt-icon { color: var(--tt-amber); } .tt-design .tt-header-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--tt-ink); padding-left: 18px; border-left: 1px solid var(--tt-line); } .tt-design .tt-header-phone .tt-icon { color: var(--tt-blue); } .tt-design .tt-header-phone span { display: flex; flex-direction: column; line-height: 1.25; } .tt-design .tt-header-phone strong { font-size: 15px; font-weight: 700; } .tt-design .tt-header-phone small { font-size: 11.5px; color: var(--tt-muted); } /* Flatsome header bars. #top-bar, #masthead and #wide-nav are Flatsome's own IDs; using them lets these rules win over the colours and fonts the Customizer prints inline, without !important. */ .tt-design .header-top { background-color: var(--tt-ink) !important; } .tt-design .header-top, .tt-design .header-top a, .tt-design .header-top .nav > li > a { color: var(--tt-on-dark) !important; font-size: 12.5px; } .tt-design .header-top .nav > li > a:hover { color: #fff !important; } .tt-design #top-bar .nav > li > a, .tt-design #masthead .nav > li > a, .tt-design #wide-nav .nav > li > a { font-family: var(--tt-body); } .tt-design #masthead .nav > li > a { font-weight: 600; color: var(--tt-ink); } /* Search: one bar that grows up to the design's 568px, plus the gap before the phone (padding, because Flatsome zeroes the last item's margin with !important). Works for FiboSearch (any of its styles) and for Flatsome's own search form with the category drop-down. */ .tt-design #masthead .nav > li.header-search-form, .tt-design #masthead .nav > li:has(> .dgwt-wcas-search-wrapp) { flex: 1 1 0; width: auto; min-width: 254px; max-width: 590px; padding-right: 22px; } .tt-design .header-wrapper .dgwt-wcas-search-wrapp { width: 100%; max-width: none; min-width: 0; margin: 0; } .tt-design .header-wrapper .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { display: flex; align-items: stretch; height: 50px; padding: 0 !important; overflow: hidden; background: #fff !important; border: 1.5px solid var(--tt-ink); border-radius: 12px !important; } .tt-design .header-wrapper .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp { border-color: var(--tt-blue); box-shadow: 0 0 0 3px var(--tt-blue-tint-2); } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input { flex: 1 1 auto; min-width: 0; height: 100% !important; margin: 0; padding: 0 40px 0 16px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--tt-body); font-size: 14.5px; line-height: normal; color: var(--tt-ink); } .tt-design .header-wrapper .dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input { padding-left: 40px !important; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp input[type='search'].dgwt-wcas-search-input::placeholder { color: var(--tt-faint); font-style: normal; font-weight: 400; opacity: 1; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { position: relative !important; inset: auto !important; flex: 0 0 62px; width: 62px; min-width: 62px; height: auto !important; min-height: 0; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0 !important; background: var(--tt-blue) !important; box-shadow: none !important; opacity: 1; pointer-events: auto !important; animation: none; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover { background: var(--tt-blue-deep) !important; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::before { display: none; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg { width: 19px; height: 19px; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path { fill: #fff; } .tt-design .header-wrapper .dgwt-wcas-sf-wrapp .dgwt-wcas-preloader, .tt-design .header-wrapper .dgwt-wcas-sf-wrapp .dgwt-wcas-voice-search { right: 62px; margin: 0; } .tt-design .header-wrapper .dgwt-wcas-voice-search-supported .dgwt-wcas-sf-wrapp .dgwt-wcas-preloader { right: 102px; } .tt-design .header-wrapper .searchform > .flex-row { flex-wrap: nowrap; height: 50px; overflow: hidden; background: #fff; border: 1.5px solid var(--tt-ink); border-radius: 12px; } .tt-design .header-wrapper .searchform > .flex-row:focus-within { border-color: var(--tt-blue); box-shadow: 0 0 0 3px var(--tt-blue-tint-2); } .tt-design .header-wrapper .searchform > .flex-row > .flex-col { align-self: stretch; max-height: none; } .tt-design .header-wrapper .searchform .search-form-categories { padding: 0; } .tt-design .header-wrapper .searchform select.search_categories { height: 100%; min-width: 78px; margin: 0; padding: 0 28px 0 14px; border: 0 !important; border-right: 1px solid var(--tt-line) !important; border-radius: 0 !important; background-color: var(--tt-cloud); box-shadow: none !important; font-size: 13.5px; font-weight: 600; color: var(--tt-ink); } .tt-design .header-wrapper .searchform input[type='search'].search-field { height: 100% !important; margin: 0; padding: 0 14px; border: 0 !important; border-radius: 0 !important; background: transparent; box-shadow: none !important; font-size: 14.5px; } .tt-design .header-wrapper .searchform .button.ux-search-submit { height: 100%; width: 62px; min-height: 0; margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background-color: var(--tt-blue) !important; color: #fff !important; box-shadow: none !important; } .tt-design .header-wrapper .searchform .button.ux-search-submit:hover { background-color: var(--tt-blue-deep) !important; } /* Cart: the dark button from the design (desktop header only). */ .tt-design #masthead .hide-for-medium .cart-item .header-cart-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px !important; line-height: 1.2; border: 0 !important; border-radius: 11px !important; background-color: var(--tt-ink) !important; color: #fff !important; box-shadow: none; } .tt-design #masthead .hide-for-medium .cart-item .header-cart-link:hover { background-color: var(--tt-blue-deep) !important; } .tt-design #masthead .hide-for-medium .header-cart-link .header-cart-title, .tt-design #masthead .hide-for-medium .header-cart-link .amount, .tt-design #masthead .hide-for-medium .header-cart-link > i { color: #fff !important; } .tt-design .cart-item .header-cart-link, .tt-design .header-cart-link .cart-price { font-weight: 700; } .tt-design .cart-icon strong { border-color: var(--tt-ink); color: var(--tt-ink); } .tt-design .cart-icon strong::after { border-color: var(--tt-ink); } .tt-design .header-cart-link .cart-icon strong, .tt-design .cart-icon:hover strong { background: var(--tt-amber); border-color: var(--tt-amber); color: var(--tt-ink); } /* Menu bar: "All categories" button, the machine types, quick links on the right. One line. */ .tt-design #wide-nav { background-color: #fff !important; border-top: 0; border-bottom: 1px solid var(--tt-line); } .tt-design #wide-nav > .flex-row { min-height: 56px; } .tt-design #wide-nav .nav { flex-wrap: nowrap; } .tt-design #wide-nav .nav > li { margin: 0; } .tt-design #wide-nav .nav > li.menu-item > a { height: 38px; padding: 0 12px; flex-wrap: nowrap; white-space: nowrap; border-radius: 9px; font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tt-ink); } .tt-design #wide-nav .nav > li.menu-item > a::before { display: none; } .tt-design #wide-nav .nav > li.menu-item > a:hover { color: var(--tt-blue); } .tt-design #wide-nav .nav > li.active > a, .tt-design #wide-nav .nav > li.current-menu-item > a { color: var(--tt-blue); box-shadow: inset 0 -2.5px 0 var(--tt-amber); border-radius: 0; } /* Flatsome's Vertical menu element, styled as the blue "All categories" button. */ .tt-design #wide-nav .header-vertical-menu { position: relative; padding: 9px 0; margin-right: 8px; } .tt-design #wide-nav .header-vertical-menu__opener { width: auto; height: 38px; padding: 0 16px; gap: 8px; justify-content: flex-start; white-space: nowrap; cursor: pointer; border-radius: 9px; background-color: var(--tt-blue); color: #fff; font-size: 13.5px; font-weight: 600; } .tt-design #wide-nav .header-vertical-menu__opener:hover { background-color: var(--tt-blue-deep); } .tt-design #wide-nav .header-vertical-menu__opener .icon-menu { margin: 0; font-size: 15px; } .tt-design #wide-nav .header-vertical-menu__opener .icon-angle-down { margin-left: 2px; font-size: 13px; opacity: .85; } .tt-design #wide-nav .header-vertical-menu__title { flex: 0 0 auto; } .tt-design #wide-nav .header-vertical-menu__tagline { display: none; } .tt-design #wide-nav .header-vertical-menu__fly-out { top: 100%; left: 0; border: 1px solid var(--tt-line); border-radius: 0 0 12px 12px; box-shadow: 0 18px 40px rgba(15, 23, 42, .12); } .tt-design #wide-nav .nav-vertical-fly-out > li > a { font-size: 13.5px; font-weight: 500; color: var(--tt-ink); } .tt-design #wide-nav .nav-vertical-fly-out > li > a:hover { color: var(--tt-blue); background-color: var(--tt-cloud); } /* [tt_header_links] */ .tt-design .tt-header-links { display: flex; align-items: center; gap: 18px; white-space: nowrap; } .tt-design .tt-header-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tt-ink); } .tt-design .tt-header-links a:hover, .tt-design .tt-header-links a.is-current { color: var(--tt-blue); } .tt-design .tt-header-links a.is-highlight { font-weight: 700; color: var(--tt-blue-deep); } .tt-design .tt-header-links__dot { width: 7px; height: 7px; border-radius: 99px; background: var(--tt-amber); } /* Narrower desktops: tighten the bar, then drop the quick links (they are also in the footer and mobile menu). */ @media (max-width: 1279px) { .tt-design #wide-nav .nav > li.menu-item > a { padding: 0 9px; font-size: 13px; } .tt-design #wide-nav .header-vertical-menu { margin-right: 4px; } .tt-design .tt-header-links { gap: 14px; } .tt-design #masthead .nav > li.header-search-form, .tt-design #masthead .nav > li:has(> .dgwt-wcas-search-wrapp) { max-width: 582px; padding-right: 14px; } } @media (max-width: 1219px) { .tt-design .tt-header-links a:not(.is-highlight) { display: none; } } @media (max-width: 999px) { .tt-design .tt-header-links { display: none; } .tt-design #wide-nav .nav > li.menu-item > a { padding: 0 7px; } } /* -------------------------------------------------------------------------- hero carousel */ .tt-design .tt-hero { position: relative; background: var(--tt-ink); color: #fff; overflow: hidden; background-image: radial-gradient(760px 420px at 78% 38%, rgba(37, 99, 235, .25), rgba(37, 99, 235, 0) 70%); } .tt-design .tt-hero__slides { display: grid; grid-template-columns: minmax(0, 1fr); } .tt-design .tt-hero__slide { grid-area: 1 / 1; min-width: 0; display: flex; align-items: center; gap: 56px; padding: 56px max(16px, calc((100% - 1280px) / 2)); opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; } .tt-design .tt-hero__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease, visibility 0s; } .tt-design .tt-hero__slide.is-leaving { transform: translateX(-28px); } .tt-design .tt-hero__copy { flex: 0 0 47%; max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .tt-design .tt-hero__title { margin: 0; font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1.06; color: #fff; } .tt-design .tt-hero__lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tt-on-dark); max-width: 520px; } .tt-design .tt-hero__actions { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; } .tt-design .tt-hero__visual { position: relative; flex: 1 1 auto; min-height: 452px; background: #fff; border-radius: 22px; display: flex; align-items: center; justify-content: center; padding: 70px 30px 110px; } .tt-design .tt-hero__img { width: 100%; max-width: 400px; max-height: 300px; height: auto; object-fit: contain; } .tt-design .tt-hero__badge { position: absolute; top: 20px; left: 20px; background: var(--tt-ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 7px 12px; border-radius: 7px; } .tt-design .tt-hero__chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; border-radius: 11px; padding: 11px 15px; font-size: 13px; font-weight: 700; box-shadow: var(--tt-shadow); } .tt-design .tt-hero__chip--a { top: 96px; left: -26px; background: #fff; color: var(--tt-ink); border: 1px solid var(--tt-line); } .tt-design .tt-hero__chip--a .tt-icon { color: var(--tt-green); } .tt-design .tt-hero__chip--b { top: 196px; right: -18px; background: var(--tt-ink); color: #fff; } .tt-design .tt-hero__card { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--tt-line); border-radius: 14px; padding: 16px 18px; color: var(--tt-ink); box-shadow: 0 10px 26px rgba(15, 23, 42, .1); } .tt-design .tt-hero__card:hover { color: var(--tt-ink); border-color: var(--tt-blue); } .tt-design .tt-hero__card-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tt-design .tt-hero__card-copy strong { font-size: 14.5px; font-weight: 700; line-height: 1.3; } .tt-design .tt-hero__card-copy small { font-size: 12.5px; color: var(--tt-green); font-weight: 600; } .tt-design .tt-hero__card-price { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } .tt-design .tt-hero__card-price del { font-size: 13px; color: var(--tt-faint); } .tt-design .tt-hero__card-price b { font-family: var(--tt-display); font-size: 24px; font-weight: 800; } .tt-design .tt-hero__card-price small { font-size: 12px; color: var(--tt-muted); } .tt-design .tt-hero__tabs { display: grid; grid-template-columns: repeat(var(--tt-cols, 6), minmax(0, 1fr)); gap: 16px; margin: 0 max(16px, calc((100% - 1280px) / 2)); border-top: 1px solid rgba(255, 255, 255, .1); } .tt-design .tt-hero__tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 0 22px; margin: 0; background: none; border: 0; color: var(--tt-on-dark-3); text-align: left; cursor: pointer; min-height: 0; text-transform: none; letter-spacing: 0; } .tt-design .tt-hero__tab:hover { color: #fff; } .tt-design .tt-hero__bar { position: absolute; top: -2px; left: 0; right: 0; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; } .tt-design .tt-hero__bar > span { display: block; height: 100%; width: 0; background: var(--tt-amber); border-radius: 99px; } .tt-design .tt-hero__tab.is-active .tt-hero__bar > span { animation: tt-hero-progress var(--tt-interval, 5000ms) linear forwards; } .tt-design .tt-hero.is-paused .tt-hero__tab.is-active .tt-hero__bar > span { animation-play-state: paused; } .tt-design .tt-hero.is-static .tt-hero__tab.is-active .tt-hero__bar > span { animation: none; width: 100%; } @keyframes tt-hero-progress { from { width: 0; } to { width: 100%; } } @keyframes tt-fade-in { from { opacity: 0; } to { opacity: 1; } } .tt-design .tt-hero__thumb { width: 46px; height: 46px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .tt-design .tt-hero__thumb img { width: 38px; height: 38px; object-fit: contain; } .tt-design .tt-hero__tab-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .tt-design .tt-hero__tab-text strong { font-size: 13.5px; font-weight: 700; color: inherit; } .tt-design .tt-hero__tab.is-active .tt-hero__tab-text strong { color: #fff; } .tt-design .tt-hero__tab-text small { font-size: 11.5px; color: var(--tt-on-dark-3); } /* -------------------------------------------------------------------------- trust strip */ .tt-design .tt-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 26px 0; } .tt-design .tt-trust__item { display: flex; gap: 12px; align-items: flex-start; padding: 0 22px; border-left: 1px solid var(--tt-line); } .tt-design .tt-trust__item:first-child { padding-left: 0; border-left: 0; } .tt-design .tt-trust__item .tt-icon { color: var(--tt-blue); margin-top: 1px; } .tt-design .tt-trust__item strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--tt-ink); } .tt-design .tt-trust__item span { display: block; font-size: 12px; line-height: 1.4; color: var(--tt-muted); } .tt-design .tt-trust--boxed { gap: 14px; padding: 0; } .tt-design .tt-trust--boxed .tt-trust__item { padding: 16px; border: 1px solid var(--tt-line); border-radius: 12px; } /* -------------------------------------------------------------------------- category tiles */ .tt-design .tt-catgrid { display: grid; grid-template-columns: repeat(var(--tt-cols, 6), minmax(0, 1fr)); gap: 20px; } .tt-design .tt-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px 20px; text-align: center; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); color: var(--tt-ink); transition: border-color .15s, box-shadow .15s, transform .15s; } .tt-design .tt-cat:hover { border-color: var(--tt-blue); box-shadow: var(--tt-shadow); transform: translateY(-2px); color: var(--tt-ink); } .tt-design .tt-cat__img { width: 98px; height: 98px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .tt-design .tt-cat__img img { max-width: 100%; max-height: 100%; object-fit: contain; } .tt-design .tt-cat strong { font-size: 14px; font-weight: 700; line-height: 1.25; } .tt-design .tt-cat__count { font-size: 12px; color: var(--tt-muted); } .tt-design .tt-cat__from { font-size: 12.5px; font-weight: 700; color: var(--tt-blue-deep); } /* -------------------------------------------------------------------------- cards */ .tt-design .tt-cards { display: grid; grid-template-columns: repeat(var(--tt-cols, 4), minmax(0, 1fr)); gap: 20px; } .tt-design .tt-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); color: var(--tt-ink); text-decoration: none; } .tt-design a.tt-card:hover { border-color: var(--tt-blue); color: var(--tt-ink); } .tt-design .tt-card__num { align-self: flex-start; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: var(--tt-blue-tint); display: inline-flex; align-items: center; justify-content: center; font-family: var(--tt-display); font-size: 16px; font-weight: 800; color: var(--tt-blue-deep); } .tt-design .tt-card__icon { align-self: flex-start; width: 44px; height: 44px; border-radius: 11px; background: var(--tt-blue-tint); color: var(--tt-blue); display: inline-flex; align-items: center; justify-content: center; } .tt-design .tt-card__image img { border-radius: 10px; width: 100%; height: auto; } .tt-design .tt-card__title { font-family: var(--tt-display); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .tt-design .tt-card__text { font-size: 13.5px; line-height: 1.6; color: var(--tt-muted); } .tt-design .tt-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tt-line-2); font-size: 13px; color: var(--tt-muted); } .tt-design .tt-card__link { font-size: 13px; font-weight: 700; color: var(--tt-blue); } .tt-design .tt-cards--step .tt-card { padding: 20px 0 0; border: 0; border-top: 3px solid var(--tt-blue); border-radius: 0; background: transparent; } .tt-design .tt-cards--step .tt-card__num { background: none; padding: 0; height: auto; font-size: 13px; letter-spacing: .06em; color: var(--tt-blue-deep); } .tt-design .tt-cards--step .tt-card__title { font-size: 19px; } .tt-design .tt-cards--offer .tt-card { background: var(--tt-amber-tint); border-color: #F7E3A6; } .tt-design .tt-cards--offer .tt-card__num { background: none; padding: 0; height: auto; font-size: 26px; color: var(--tt-amber-text); } .tt-design .tt-cards--offer .tt-card__title { font-family: var(--tt-body); font-size: 15px; } .tt-design .tt-cards--offer .tt-card__footer { border-top-color: #F7E3A6; font-weight: 700; color: var(--tt-text-2); } .tt-design .tt-cards--dark .tt-card { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .1); color: #fff; } .tt-design .tt-cards--dark .tt-card__text { color: var(--tt-on-dark-2); } .tt-design .tt-cards--plain .tt-card { padding: 0; border: 0; background: none; } .tt-design .tt-cards--icon .tt-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 5px; align-content: start; padding: 22px; } .tt-design .tt-cards--icon .tt-card__icon { grid-row: 1 / span 4; } .tt-design .tt-cards--icon .tt-card > :not(.tt-card__icon) { grid-column: 2; } .tt-design .tt-cards--icon .tt-card__title { font-family: var(--tt-body); font-size: 16px; } /* -------------------------------------------------------------------------- stats */ .tt-design .tt-stats { display: grid; grid-template-columns: repeat(var(--tt-cols, 4), minmax(0, 1fr)); gap: 18px; } .tt-design .tt-stat { display: flex; flex-direction: column; gap: 7px; } .tt-design .tt-stat__value { font-family: var(--tt-display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .tt-design .tt-stat__label { font-size: 13.5px; font-weight: 700; } .tt-design .tt-stat__text { font-size: 12px; line-height: 1.45; } .tt-design .tt-stats--dark .tt-stat { padding: 24px 20px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; } .tt-design .tt-stats--dark .tt-stat__value { color: var(--tt-amber); } .tt-design .tt-stats--dark .tt-stat__label { color: #fff; } .tt-design .tt-stats--dark .tt-stat__text { color: var(--tt-on-dark-3); } .tt-design .tt-stats--light .tt-stat { padding: 22px; background: #fff; border: 1px solid var(--tt-line); border-radius: 14px; } .tt-design .tt-stats--light .tt-stat__value { color: var(--tt-blue); } .tt-design .tt-stats--light .tt-stat__text, .tt-design .tt-stats--divided .tt-stat__text { color: var(--tt-muted); } .tt-design .tt-stats--divided { gap: 0; overflow: hidden; } .tt-design .tt-stats--divided .tt-stat { padding: 32px 28px 28px; border-left: 1px solid var(--tt-line); margin-left: -1px; } .tt-design .tt-stats--divided .tt-stat__value { color: var(--tt-ink); font-size: 36px; } /* -------------------------------------------------------------------------- reviews */ .tt-design .tt-reviews { display: grid; grid-template-columns: repeat(var(--tt-cols, 3), minmax(0, 1fr)); gap: 22px; } .tt-design .tt-review { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); } .tt-design .tt-review blockquote { margin: 0; padding: 0; border: 0; font-size: 15.5px; line-height: 1.62; color: var(--tt-text-2); font-style: normal; } .tt-design .tt-review figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--tt-line-2); display: flex; align-items: center; gap: 12px; } .tt-design .tt-review figcaption > span:last-child { display: flex; flex-direction: column; gap: 2px; } .tt-design .tt-review figcaption strong { font-size: 13.5px; } .tt-design .tt-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; font-style: normal; color: var(--tt-green); } .tt-design .tt-review__product { font-size: 12px; color: var(--tt-muted); } /* -------------------------------------------------------------------------- payment strip */ .tt-design .tt-paystrip { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .tt-design .tt-paystrip__methods { display: flex; flex-direction: column; gap: 14px; max-width: 540px; } .tt-design .tt-paystrip__methods > strong { font-size: 15px; } .tt-design .tt-paystrip__notes { display: flex; gap: 32px; } .tt-design .tt-paystrip__notes > span { display: flex; gap: 11px; align-items: flex-start; max-width: 220px; } .tt-design .tt-paystrip__notes .tt-icon { color: var(--tt-blue); margin-top: 2px; } .tt-design .tt-paystrip__notes > span > span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; } .tt-design .tt-paystrip__notes small { color: var(--tt-muted); font-size: 13px; } /* -------------------------------------------------------------------------- CTA band */ .tt-design .tt-cta { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 46px max(24px, calc((100% - 1280px) / 2)); } .tt-design .col-inner > .tt-cta, .tt-design .tt-single-section .tt-cta { border-radius: var(--tt-radius); padding: 28px; } .tt-design .tt-sec--flush .col-inner > .tt-cta { border-radius: 0; padding: 46px max(24px, calc((100% - 1280px) / 2)); } .tt-design .tt-cta__copy { max-width: 640px; } .tt-design .tt-cta h2 { margin: 0 0 10px; font-size: 30px; font-weight: 800; } .tt-design .tt-cta p { margin: 0; font-size: 14.5px; line-height: 1.6; } .tt-design .tt-cta__actions { display: flex; flex-wrap: wrap; flex-shrink: 0; } .tt-design .tt-cta--dark { background: var(--tt-ink); background-image: radial-gradient(640px 300px at 88% 50%, rgba(37, 99, 235, .22), rgba(37, 99, 235, 0) 70%); } .tt-design .tt-cta--dark h2 { color: #fff; } .tt-design .tt-cta--dark p { color: var(--tt-on-dark-2); } .tt-design .tt-cta--light { background: var(--tt-blue-wash); border-top: 1px solid var(--tt-blue-tint-2); } .tt-design .tt-cta--light h2, .tt-design .tt-cta--outline h2 { color: var(--tt-ink); } .tt-design .tt-cta--light p, .tt-design .tt-cta--outline p { color: var(--tt-text-3); } .tt-design .tt-cta--outline { background: #fff; border: 1px solid var(--tt-line); } .tt-design .col-inner .tt-cta--dark { flex-direction: column; align-items: flex-start; gap: 18px; } .tt-design .col-inner .tt-cta--dark h2 { font-size: 18px; } .tt-design .tt-sec--flush .col-inner .tt-cta--dark { flex-direction: row; align-items: center; } .tt-design .tt-sec--flush .col-inner .tt-cta--dark h2 { font-size: 30px; } /* -------------------------------------------------------------------------- offices and contact */ .tt-design .tt-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .tt-design .tt-office { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); overflow: hidden; } .tt-design .tt-office__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; flex-grow: 1; } .tt-design .tt-office__city { font-family: var(--tt-display); font-size: 19px; font-weight: 700; } .tt-design .tt-office__addr { font-size: 13.5px; line-height: 1.55; color: var(--tt-muted); } .tt-design .tt-office__phone { font-size: 13.5px; font-weight: 700; } .tt-design .tt-office__link { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; } .tt-design .tt-office__actions { display: flex; flex-wrap: wrap; margin-top: auto; padding-top: 6px; } .tt-design .tt-office__map { position: relative; height: 180px; display: flex; align-items: center; justify-content: center; background-color: #EAF0F4; background-image: linear-gradient(#DCE4EA 1px, transparent 1px), linear-gradient(90deg, #DCE4EA 1px, transparent 1px); background-size: 28px 28px; } .tt-design .tt-office__pin { width: 46px; height: 46px; border-radius: 99px; background: var(--tt-blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37, 99, 235, .35); } .tt-design .tt-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .tt-design .tt-way { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); color: var(--tt-ink); } .tt-design .tt-way:hover { border-color: var(--tt-blue); color: var(--tt-ink); } .tt-design .tt-way strong { font-family: var(--tt-display); font-size: 19px; font-weight: 800; overflow-wrap: anywhere; } .tt-design .tt-way > span:not(.tt-eyebrow) { font-size: 13px; line-height: 1.5; color: var(--tt-muted); } .tt-design .tt-way em { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--tt-line-2); font-size: 12.5px; font-weight: 700; font-style: normal; color: var(--tt-green); } /* -------------------------------------------------------------------------- lists and tables */ .tt-design .tt-checklist { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(var(--tt-cols, 1), minmax(0, 1fr)); gap: 10px 24px; } .tt-design .tt-checklist li { display: flex; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--tt-text-2); } .tt-design .tt-checklist .tt-icon { margin-top: 2px; color: var(--tt-green); } .tt-design .tt-checklist--blue .tt-icon { color: var(--tt-blue); } .tt-design .tt-checklist--amber .tt-icon { color: var(--tt-amber); } .tt-design .tt-checklist--light li { color: #E2E7EE; } .tt-design .tt-checklist--light .tt-icon { color: var(--tt-amber); } .tt-design .tt-table-wrap { overflow-x: auto; border: 1px solid var(--tt-line); border-radius: 14px; margin-bottom: 22px; background: #fff; -webkit-overflow-scrolling: touch; } .tt-design .tt-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 14px; } .tt-design .tt-table th, .tt-design .tt-table td { padding: 14px 18px; border: 0; border-top: 1px solid var(--tt-line-2); text-align: left; vertical-align: top; line-height: 1.5; color: var(--tt-ink); } .tt-design .tt-table thead th { border-top: 0; background: var(--tt-cloud); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); } .tt-design .tt-table tbody th { font-size: 13.5px; font-weight: 600; color: var(--tt-muted); } .tt-design .tt-table .is-hl { background: var(--tt-green-wash); font-weight: 600; box-shadow: inset 2px 0 0 var(--tt-green), inset -2px 0 0 var(--tt-green); } .tt-design .tt-table thead .is-hl { color: var(--tt-green); background: var(--tt-green-tint); } .tt-design .tt-table--big-first tbody th { font-family: var(--tt-display); font-size: 16px; font-weight: 800; color: var(--tt-ink); } .tt-design .tt-callout { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; margin-bottom: 20px; } .tt-design .tt-callout__body { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; font-size: 13.5px; line-height: 1.5; } .tt-design .tt-callout__body strong { font-size: 15px; } .tt-design .tt-callout__link { flex-shrink: 0; font-size: 13.5px; font-weight: 700; } .tt-design .tt-callout--info { background: var(--tt-blue-tint); border: 1px solid var(--tt-blue-tint-2); } .tt-design .tt-callout--info .tt-icon { color: var(--tt-blue); } .tt-design .tt-callout--ok { background: var(--tt-green-wash); border: 1px solid var(--tt-green-line); color: var(--tt-green); } .tt-design .tt-callout--warn { background: var(--tt-amber-tint); border: 1px solid #F7E3A6; } .tt-design .tt-callout--warn .tt-icon { color: var(--tt-amber-text); } .tt-design .tt-callout--accent { background: var(--tt-cloud); border: 1px solid var(--tt-line); border-left: 4px solid var(--tt-amber); } /* -------------------------------------------------------------------------- about pieces */ .tt-design .tt-timeline { list-style: none; margin: 0; padding: 0; } .tt-design .tt-timeline__item { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 26px 38px; } .tt-design .tt-timeline__item::before { content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 99px; background: #fff; border: 3px solid var(--tt-amber); } .tt-design .tt-timeline__item::after { content: ''; position: absolute; left: 6px; top: 26px; bottom: 0; width: 2px; background: var(--tt-line); } .tt-design .tt-timeline__item:last-child::after { display: none; } .tt-design .tt-timeline__year { font-family: var(--tt-display); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--tt-blue-deep); } .tt-design .tt-timeline__item strong { font-family: var(--tt-display); font-size: 18px; } .tt-design .tt-timeline__item > span:last-child { font-size: 14px; line-height: 1.6; color: var(--tt-muted); max-width: 520px; } .tt-design .tt-team { display: grid; grid-template-columns: repeat(var(--tt-cols, 4), minmax(0, 1fr)); gap: 20px; } .tt-design .tt-member { background: #fff; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); overflow: hidden; } .tt-design .tt-member__photo { height: 200px; background: var(--tt-cloud); display: flex; align-items: center; justify-content: center; } .tt-design .tt-member__photo img { width: 100%; height: 100%; object-fit: cover; } .tt-design .tt-member__body { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 20px; font-size: 13px; line-height: 1.5; color: var(--tt-muted); } .tt-design .tt-member__body strong { font-size: 16px; color: var(--tt-ink); } .tt-design .tt-member__role { font-weight: 700; color: var(--tt-blue-deep); } /* -------------------------------------------------------------------------- service pieces */ .tt-design .tt-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; align-items: stretch; } .tt-design .tt-plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: #fff; border: 1px solid var(--tt-line); border-radius: 18px; } .tt-design .tt-plan.is-highlight { border: 2px solid var(--tt-amber); box-shadow: var(--tt-shadow); } .tt-design .tt-plan__badge { position: absolute; top: -13px; left: 28px; background: var(--tt-amber); color: var(--tt-ink); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 6px 11px; border-radius: 7px; } .tt-design .tt-plan__name { font-family: var(--tt-display); font-size: 20px; font-weight: 800; } .tt-design .tt-plan__text { font-size: 13.5px; line-height: 1.5; color: var(--tt-muted); min-height: 40px; } .tt-design .tt-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--tt-line-2); } .tt-design .tt-plan__price b { font-family: var(--tt-display); font-size: 30px; font-weight: 800; } .tt-design .tt-plan__price small { font-size: 13px; color: var(--tt-muted); } .tt-design .tt-plan__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex-grow: 1; } .tt-design .tt-plan__features li { display: flex; gap: 10px; margin: 0; font-size: 14px; line-height: 1.45; } .tt-design .tt-plan__features .is-yes .tt-icon { color: var(--tt-green); margin-top: 2px; } .tt-design .tt-plan__features .is-no { color: var(--tt-faint); } .tt-design .tt-plan__features .is-no .tt-icon { color: var(--tt-control); margin-top: 2px; } .tt-design .tt-docs { display: grid; grid-template-columns: repeat(var(--tt-cols, 2), minmax(0, 1fr)); gap: 12px; } .tt-design .tt-doc { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--tt-line); border-radius: 12px; } .tt-design .tt-doc__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--tt-blue-tint); color: var(--tt-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tt-design .tt-doc__body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; } .tt-design .tt-doc__body strong { font-size: 14px; } .tt-design .tt-doc__body small { font-size: 12px; color: var(--tt-muted); } .tt-design .tt-doc__dl { color: var(--tt-blue); } .tt-design .tt-doc__req { font-size: 12px; font-weight: 600; color: var(--tt-faint); white-space: nowrap; } /* -------------------------------------------------------------------------- countdown, combos, policy nav */ .tt-design .tt-countdown { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); max-width: 420px; margin-left: auto; } .tt-design .tt-countdown__label { font-size: 13px; font-weight: 700; color: #fff; } .tt-design .tt-countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tt-design .tt-countdown__cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 0; background: var(--tt-ink); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; } .tt-design .tt-countdown__cell b { font-family: var(--tt-display); font-size: 28px; font-weight: 800; color: var(--tt-amber); } .tt-design .tt-countdown__cell small { font-size: 11px; color: var(--tt-on-dark-3); text-transform: uppercase; letter-spacing: .08em; } .tt-design .tt-combo { display: flex; align-items: center; gap: 22px; padding: 24px; background: #fff; border: 1px solid var(--tt-line); border-radius: 18px; } .tt-design .tt-combo__imgs { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .tt-design .tt-combo__imgs > span { width: 120px; height: 120px; border-radius: 14px; background: #fff; border: 1px solid var(--tt-line-2); display: flex; align-items: center; justify-content: center; } .tt-design .tt-combo__imgs img { max-width: 98px; max-height: 98px; object-fit: contain; } .tt-design .tt-combo__imgs b { width: 26px; height: 26px; border-radius: 99px; background: var(--tt-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; } .tt-design .tt-combo__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .tt-design .tt-combo__body strong { font-family: var(--tt-display); font-size: 17px; line-height: 1.3; } .tt-design .tt-combo__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .tt-design .tt-combo__price b { font-family: var(--tt-display); font-size: 24px; font-weight: 800; } .tt-design .tt-combo__price em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--tt-green); } .tt-design .tt-policy-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); margin-bottom: 16px; } .tt-design .tt-policy-nav .tt-eyebrow { padding: 10px 12px 8px; } .tt-design .tt-policy-nav a { padding: 11px 12px; border-radius: 9px; font-size: 14px; color: var(--tt-ink); } .tt-design .tt-policy-nav a.is-active, .tt-design .tt-policy-nav a:hover { background: var(--tt-blue-tint); color: var(--tt-blue); font-weight: 700; } /* -------------------------------------------------------------------------- compact products, brands */ .tt-design .tt-minis { display: grid; grid-template-columns: repeat(var(--tt-cols, 4), minmax(0, 1fr)); gap: 16px; } .tt-design .tt-mini { display: flex; align-items: center; gap: 14px; padding: 12px; background: #fff; border: 1px solid var(--tt-line); border-radius: 12px; } .tt-design .tt-mini__img { width: 64px; height: 64px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .tt-design .tt-mini__img img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; } .tt-design .tt-mini__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex-grow: 1; } .tt-design .tt-mini__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--tt-ink); } .tt-design .tt-mini__name:hover { color: var(--tt-blue); } .tt-design .tt-mini__note { font-size: 12.5px; color: var(--tt-muted); } .tt-design .tt-mini__price { display: flex; align-items: baseline; gap: 6px; } .tt-design .tt-mini__price b { font-family: var(--tt-display); font-size: 17px; font-weight: 800; } .tt-design .tt-mini__price small { font-size: 11.5px; color: var(--tt-muted); } .tt-design .tt-minis--tile .tt-mini { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border-radius: var(--tt-radius); } .tt-design .tt-minis--tile .tt-mini__img { width: 100%; height: 180px; border-radius: 0; border-bottom: 1px solid var(--tt-line-2); } .tt-design .tt-minis--tile .tt-mini__img img { max-width: 150px; max-height: 150px; } .tt-design .tt-minis--tile .tt-mini__body { padding: 14px 16px 16px; } .tt-design .tt-minis--tile .tt-mini__name { min-height: 36px; font-size: 14px; } .tt-design .tt-brand { display: flex; gap: 44px; padding: 36px; background: #fff; border: 1px solid var(--tt-line); border-radius: 20px; margin-bottom: 28px; } .tt-design .tt-brand.is-reverse { flex-direction: row-reverse; } .tt-design .tt-brand__copy { flex: 0 0 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .tt-design .tt-brand__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .tt-design .tt-brand__mark { height: 56px; padding: 0 20px; border-radius: 12px; background: var(--tt-ink); color: #fff; display: inline-flex; align-items: center; font-family: var(--tt-display); font-size: 22px; font-weight: 800; letter-spacing: .02em; } .tt-design .tt-brand__logo { max-height: 56px; width: auto; } .tt-design .tt-brand h2 { margin: 0; font-size: 30px; font-weight: 800; } .tt-design .tt-brand p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tt-text-2); } .tt-design .tt-brand__cats { width: 100%; border-top: 1px solid var(--tt-line-2); } .tt-design .tt-brand__cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--tt-line-2); color: var(--tt-ink); } .tt-design .tt-brand__cats a:hover { color: var(--tt-blue); } .tt-design .tt-brand__cats strong { font-size: 14px; } .tt-design .tt-brand__cats span { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tt-muted); } .tt-design .tt-brand__cats em { font-style: normal; font-weight: 700; color: var(--tt-blue-deep); } .tt-design .tt-brand__products { flex-grow: 1; min-width: 0; } .tt-design .tt-brand__products .tt-minis { height: 100%; } /* -------------------------------------------------------------------------- compare */ .tt-design .tt-compare__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .tt-design .tt-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; margin: 0; } .tt-design .tt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tt-design .tt-switch span { position: relative; width: 42px; height: 24px; border-radius: 99px; background: var(--tt-control); transition: background .15s; } .tt-design .tt-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: #fff; transition: transform .15s; } .tt-design .tt-switch input:checked + span { background: var(--tt-blue); } .tt-design .tt-switch input:checked + span::after { transform: translateX(18px); } .tt-design .tt-switch input:focus-visible + span { outline: 2px solid var(--tt-blue); outline-offset: 2px; } .tt-design .tt-compare__table { table-layout: fixed; min-width: 760px; } .tt-design .tt-compare__table thead th { text-transform: none; letter-spacing: 0; background: #fff; vertical-align: top; } .tt-design .tt-compare__corner { width: 200px; background: var(--tt-cloud) !important; font-size: 14px !important; color: var(--tt-ink) !important; } .tt-design .tt-compare__product { position: relative; font-size: 13px; color: var(--tt-ink); border-left: 1px solid var(--tt-line-2); } .tt-design .tt-compare__product.is-hl { box-shadow: inset 0 3px 0 var(--tt-amber); background: #FFFCF0 !important; } .tt-design .tt-compare__remove { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 99px; border: 1px solid var(--tt-line); background: #fff; color: var(--tt-muted); display: flex; align-items: center; justify-content: center; } .tt-design .tt-compare__img { display: flex; height: 130px; align-items: center; justify-content: center; margin-bottom: 10px; } .tt-design .tt-compare__img img { max-height: 120px; width: auto; object-fit: contain; } .tt-design .tt-compare__name { display: block; margin: 4px 0 12px; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--tt-ink); } .tt-design .tt-compare__table tbody td { border-left: 1px solid var(--tt-line-2); } .tt-design .tt-compare__table tbody td.is-hl { background: #FFFCF0; box-shadow: none; font-weight: 700; } .tt-design .tt-compare__table tbody th em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--tt-amber-text); } .tt-design .tt-compare__table tr.is-diff th { box-shadow: inset 3px 0 0 var(--tt-amber); } .tt-design .tt-compare.is-diff-only tr.is-same { display: none; } .tt-design .tt-compare-bar[hidden] { display: none !important; } .tt-design .tt-compare-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 999; display: flex; align-items: center; gap: 20px; padding: 12px 14px 12px 22px; width: min(720px, calc(100% - 24px)); background: var(--tt-ink); color: #fff; border-radius: 14px; box-shadow: var(--tt-shadow-lg); } .tt-design .tt-compare-bar__text { flex-grow: 1; font-size: 14px; font-weight: 600; } .tt-design .tt-compare-bar__actions { display: flex; } .tt-design .tt-compare-bar .tt-btn { margin-bottom: 0; } /* -------------------------------------------------------------------------- footer block */ .tt-design .tt-footer { color: var(--tt-on-dark-2); padding-top: 58px; } .tt-design .tt-sec--footer .col-inner > .tt-footer { padding-left: 0; padding-right: 0; } .tt-design .tt-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .tt-design .tt-footer__col { display: flex; flex-direction: column; gap: 11px; } .tt-design .tt-footer__brand { font-family: var(--tt-display); font-size: 22px; font-weight: 800; letter-spacing: .02em; color: #fff; } .tt-design .tt-footer__about p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--tt-on-dark-2); } .tt-design .tt-footer__contact { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: #fff; } .tt-design .tt-footer__contact a { color: #fff; } .tt-design .tt-footer__contact .tt-footer__mail { color: #6EE7B7; } .tt-design .tt-footer__h { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; } .tt-design .tt-footer__menu, .tt-design .tt-footer__legal { list-style: none; margin: 0; padding: 0; } .tt-design .tt-footer__menu li { margin: 0 0 11px; } .tt-design .tt-footer__menu a, .tt-design .tt-footer__legal a { font-size: 13.5px; color: var(--tt-on-dark-2); } .tt-design .tt-footer__menu a:hover, .tt-design .tt-footer__legal a:hover { color: #fff; } .tt-design .tt-footer__office { font-size: 13px; line-height: 1.55; } .tt-design .tt-footer__office strong { display: block; color: #fff; } .tt-design .tt-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; padding: 22px 0; font-size: 12.5px; } .tt-design .tt-footer__legal-left { display: flex; flex-wrap: wrap; gap: 6px 22px; } .tt-design .tt-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; } .tt-design .tt-footer__legal li { margin: 0; } .tt-design .tt-footer__legal a { font-size: 12.5px; } /* -------------------------------------------------------------------------- enquiry forms */ .tt-design .tt-form { display: flex; flex-direction: column; gap: 18px; padding: 30px; background: #fff; border: 1px solid var(--tt-line); border-radius: 18px; color: var(--tt-ink); margin-bottom: 0; } .tt-design .tt-form--float { border: 0; border-radius: 20px; box-shadow: var(--tt-shadow-lg); } .tt-design .tt-form__head { display: flex; flex-direction: column; gap: 6px; } .tt-design .tt-form .tt-form__title { margin: 0; font-size: 24px; font-weight: 800; color: var(--tt-ink); } .tt-design .tt-form__sub { margin: 0; font-size: 13.5px; color: var(--tt-muted); } .tt-design .tt-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .tt-design .tt-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .tt-design .tt-field--wide { grid-column: 1 / -1; } .tt-design .tt-form label, .tt-design .tt-form legend { font-size: 12.5px; font-weight: 600; color: var(--tt-muted); margin: 0; padding: 0; text-transform: none; letter-spacing: 0; } .tt-design .tt-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .tt-design .tt-form legend { margin-bottom: 9px; } .tt-design .tt-form input[type='text'], .tt-design .tt-form input[type='tel'], .tt-design .tt-form input[type='email'], .tt-design .tt-form input[type='number'], .tt-design .tt-form input[type='date'], .tt-design .tt-form select, .tt-design .tt-form textarea { width: 100%; height: 48px; margin: 0; padding: 0 14px; font-size: 14.5px; background: #fff; color: var(--tt-ink); } .tt-design .tt-form textarea { height: auto; min-height: 100px; padding: 12px 14px; line-height: 1.5; resize: vertical; } .tt-design .tt-form .tt-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--tt-text-2); cursor: pointer; } .tt-design .tt-form .tt-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--tt-blue); } .tt-design .tt-choices { display: flex; flex-wrap: wrap; gap: 8px; } .tt-design .tt-choice { position: relative; margin: 0; cursor: pointer; } .tt-design .tt-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tt-design .tt-choice span { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--tt-control); background: #fff; color: var(--tt-text-2); font-size: 13.5px; font-weight: 600; } .tt-design .tt-choice span .tt-icon { display: none; } .tt-design .tt-choice input:checked + span { border: 1.5px solid var(--tt-blue); background: var(--tt-blue-tint); color: var(--tt-blue); font-weight: 700; } .tt-design .tt-choice input:checked + span .tt-icon { display: inline-block; } .tt-design .tt-choice input:focus-visible + span { outline: 2px solid var(--tt-blue); outline-offset: 2px; } .tt-design .tt-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .tt-design .tt-choice-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--tt-control); border-radius: 12px; cursor: pointer; background: #fff; } .tt-design .tt-choice-card input { position: absolute; top: 16px; right: 16px; width: 17px; height: 17px; margin: 0; accent-color: var(--tt-blue); } .tt-design .tt-choice-card strong { font-size: 14.5px; color: var(--tt-ink); padding-right: 24px; } .tt-design .tt-choice-card span { font-size: 12.5px; line-height: 1.45; color: var(--tt-muted); } .tt-design .tt-choice-card em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--tt-green); } .tt-design .tt-choice-card:has(input:checked) { border: 2px solid var(--tt-blue); background: #F5F8FF; padding: 15px; } .tt-design .tt-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .tt-design .tt-day { position: relative; margin: 0; cursor: pointer; } .tt-design .tt-day input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tt-design .tt-day span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border: 1px solid var(--tt-control); border-radius: 11px; background: #fff; color: var(--tt-ink); } .tt-design .tt-day small { font-size: 11px; font-weight: 600; } .tt-design .tt-day b { font-family: var(--tt-display); font-size: 19px; font-weight: 800; } .tt-design .tt-day input:checked + span { background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; } .tt-design .tt-day input:focus-visible + span { outline: 2px solid var(--tt-blue); outline-offset: 2px; } .tt-design .tt-upload { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1.5px dashed var(--tt-control); border-radius: 12px; background: var(--tt-cloud-2); cursor: pointer; } .tt-design .tt-upload > .tt-icon { width: 46px; height: 46px; padding: 12px; border-radius: 11px; background: var(--tt-blue-tint); color: var(--tt-blue); } .tt-design .tt-upload > span:not(.tt-btn) { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; } .tt-design .tt-upload strong { font-size: 14px; color: var(--tt-ink); } .tt-design .tt-upload small { font-size: 12.5px; color: var(--tt-muted); font-weight: 400; } .tt-design .tt-upload .tt-btn { margin: 0; } .tt-design .tt-upload__input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tt-design .tt-upload__name { font-size: 12.5px; font-weight: 600; color: var(--tt-green); } .tt-design .tt-items { border: 1px solid var(--tt-line) !important; border-radius: 12px; overflow: hidden; } .tt-design .tt-items legend { padding: 12px 14px 0 !important; float: left; width: 100%; margin: 0; } .tt-design .tt-items__head, .tt-design .tt-items__row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; padding: 10px 14px; clear: both; } .tt-design .tt-items__head { background: var(--tt-cloud); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-muted); } .tt-design .tt-items__row { border-top: 1px solid var(--tt-line-2); } .tt-design .tt-items__row input { height: 42px !important; } .tt-design .tt-items__add { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 12px 14px; border: 0; border-top: 1px solid var(--tt-line-2); background: #fff; color: var(--tt-blue); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; } .tt-design .tt-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .tt-design .tt-form__actions .tt-btn { margin: 0; } .tt-design .tt-form__privacy { font-size: 12.5px; color: var(--tt-muted); } .tt-design .tt-form__status:empty { display: none; } .tt-design .tt-form__status { padding: 14px 16px; border-radius: 11px; font-size: 14px; font-weight: 600; } .tt-design .tt-form__status.is-ok { background: var(--tt-green-wash); border: 1px solid var(--tt-green-line); color: var(--tt-green); } .tt-design .tt-form__status.is-error { background: #FEF2F2; border: 1px solid #FECACA; color: var(--tt-red); } .tt-design .tt-form.is-sending { opacity: .7; pointer-events: none; } .tt-design .tt-recaptcha { min-height: 78px; } /* -------------------------------------------------------------------------- PIN check */ .tt-design .tt-pincheck { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--tt-line); border-radius: 14px; margin: 0 0 16px; background: #fff; } .tt-design .tt-pincheck__title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--tt-ink); margin: 0; } .tt-design .tt-pincheck__title .tt-icon { color: var(--tt-blue); } .tt-design .tt-pincheck__row { display: flex; gap: 10px; } .tt-design .tt-pincheck__row input { width: 150px; height: 46px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; } .tt-design .tt-pincheck__row .tt-btn { margin: 0; min-height: 46px; } .tt-design .tt-pincheck__result:empty { display: none; } .tt-design .tt-pincheck__result { display: flex; flex-direction: column; gap: 7px; } .tt-design .tt-pincheck__result span { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--tt-text-2); } .tt-design .tt-pincheck__result .is-ok { color: var(--tt-green); font-weight: 600; } .tt-design .tt-pincheck__result .is-error { color: var(--tt-red); font-weight: 600; } .tt-design .tt-pincheck__result .tt-icon { margin-top: 2px; } .tt-design .tt-pincheck.is-compact { padding: 0; border: 0; } .tt-design .tt-pincheck.is-compact .tt-pincheck__row input { flex-grow: 1; width: auto; } /* -------------------------------------------------------------------------- product cards (Flatsome product box) */ .tt-design .product-small.box { border: 1px solid var(--tt-line); border-radius: var(--tt-radius); background: #fff; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; } .tt-design .product-small.box:hover { border-color: var(--tt-control); box-shadow: var(--tt-shadow); } .tt-design .product-small .box-image { background: var(--tt-cloud-2); } /* Blend the photo area into the card as one layer. Blending each on its own multiplied Flatsome's hover ("back") image into the main photo instead of fading it in over the top. */ .tt-design .product-small .box-image > div:first-child:not(.image-tools) { mix-blend-mode: multiply; } .tt-design .product-small .box-text { padding: 16px 16px 18px; text-align: left; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; } .tt-design .product-small .box-text .title-wrapper { margin: 0; } .tt-design .product-small .category { display: none; } .tt-design .product-small .product-title, .tt-design .product-small .product-title a { font-family: var(--tt-body); font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--tt-ink); letter-spacing: 0; } .tt-design .product-small .product-title a:hover { color: var(--tt-blue); } .tt-design .product-small .price-wrapper .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .tt-design .product-small .price-wrapper .price ins, .tt-design .product-small .price-wrapper .price > .amount, .tt-design .product-small .price-wrapper .price > bdi { font-family: var(--tt-display); font-size: 22px; font-weight: 800; color: var(--tt-ink); text-decoration: none; order: 1; } .tt-design .product-small .price-wrapper .price del { order: 2; font-size: 13px; color: var(--tt-faint); opacity: 1; } .tt-design .product-small .price-wrapper .price del .amount { font-weight: 400; } .tt-design .tt-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .tt-design .tt-gst-line { display: block; font-size: 11.5px; color: var(--tt-muted); } .tt-design .tt-eta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--tt-green); } .tt-design .tt-loop-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; } .tt-design .tt-loop-wa { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--tt-green-line); background: var(--tt-green-wash); color: var(--tt-green); font-size: 12.5px; font-weight: 700; } .tt-design .tt-loop-wa:hover { color: var(--tt-green); background: var(--tt-green-tint); } .tt-design .tt-compare-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--tt-text-2); cursor: pointer; } .tt-design .tt-compare-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--tt-blue); } .tt-design .product-small .add-to-cart-button, .tt-design .product-small .button.add_to_cart_button { margin-top: 8px; } .tt-design .product-small .add-to-cart-button a, .tt-design .product-small .button.add_to_cart_button { border-radius: 10px; background: var(--tt-blue); border-color: var(--tt-blue); color: #fff; } .tt-design .badge-container .badge-inner, .tt-design .onsale { background-color: var(--tt-green) !important; color: #fff !important; border-radius: 6px; font-weight: 700; } .tt-design .badge-container .badge { height: auto; width: auto; } .tt-design .badge-container .badge-inner { padding: 5px 9px; font-size: 11px; } /* Flatsome tabs ("pills") on the home page */ .tt-design .tt-tabs .nav-pills > li > a { border-radius: 99px; border: 1px solid var(--tt-control); padding: 0 18px; line-height: 40px; font-size: 13.5px; font-weight: 600; color: var(--tt-ink); text-transform: none; letter-spacing: 0; } .tt-design .tt-tabs .nav-pills > li.active > a { background: var(--tt-ink); border-color: var(--tt-ink); color: #fff; } /* Accordion FAQ */ .tt-design .tt-faq .accordion-item { border-bottom: 1px solid var(--tt-line); } .tt-design .tt-faq .accordion-title { border: 0; padding: 20px 48px 20px 0; background: none; font-size: 16.5px; font-weight: 700; color: var(--tt-ink); } .tt-design .tt-faq .accordion-title.active { color: var(--tt-blue); } /* Flatsome puts the toggle on the left at a fixed offset; the design has it on the right, centred on the question. */ .tt-design .tt-faq .accordion-title .toggle { left: auto; right: 0; top: 0; bottom: 0; width: 32px; height: 32px; min-height: 0; margin: auto 0; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; transform-origin: 50% 50%; border-radius: 99px; background: none; color: var(--tt-faint); opacity: 1; } .tt-design .tt-faq .accordion-title .toggle i { font-size: 20px; } .tt-design .tt-faq .accordion-title:hover .toggle, .tt-design .tt-faq .accordion-title.active .toggle { color: var(--tt-blue); } .tt-design .tt-faq .accordion-inner { padding: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--tt-text-3); } /* Flatsome blog posts on the home page */ .tt-design .tt-guides .box-blog-post { border: 1px solid var(--tt-line); border-radius: var(--tt-radius); overflow: hidden; background: #fff; height: 100%; } .tt-design .tt-guides .box-blog-post .box-text { padding: 20px 22px 24px; text-align: left; } .tt-design .tt-guides .post-title { font-family: var(--tt-display); font-size: 19px; line-height: 1.3; } .tt-design .tt-guides .is-divider { display: none; } /* -------------------------------------------------------------------------- single product */ .tt-design .tt-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 10px; } .tt-design .tt-single-meta .tt-brandline { font-size: 11.5px; } .tt-design .tt-sku { font-size: 11.5px; color: var(--tt-muted); } .tt-design .product-info .product-title { font-size: 34px; font-weight: 800; line-height: 1.12; color: var(--tt-ink); } .tt-design .tt-price-block { display: flex; flex-direction: column; gap: 14px; padding: 22px; margin: 16px 0; background: var(--tt-cloud); border: 1px solid var(--tt-line); border-radius: var(--tt-radius); } .tt-design .tt-price-block__main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; } .tt-design .tt-price-block__from { font-size: 14px; color: var(--tt-muted); padding-bottom: 6px; } .tt-design .tt-price-block__price { font-family: var(--tt-display); font-size: 40px; font-weight: 800; line-height: 1; color: var(--tt-ink); } .tt-design .tt-price-block__tax { font-size: 15px; color: var(--tt-muted); padding-bottom: 4px; } .tt-design .tt-price-block__mrp { font-size: 16px; color: var(--tt-faint); padding-bottom: 4px; } .tt-design .tt-price-block .tt-save { margin-bottom: 4px; } .tt-design .tt-price-block__gst { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .tt-design .tt-chip-strong { font-size: 13.5px; color: var(--tt-text-2); background: #fff; border: 1px solid var(--tt-line); padding: 9px 13px; border-radius: 9px; } .tt-design .tt-price-block__credit { font-size: 13px; font-weight: 600; color: var(--tt-green); } .tt-design .tt-price-block__emi { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tt-text-2); } .tt-design .tt-price-block__emi .tt-icon { color: var(--tt-blue); } .tt-design .tt-install-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--tt-text-2); margin: -6px 0 16px; } .tt-design .tt-install-note .tt-icon { color: var(--tt-blue); margin-top: 2px; } .tt-design .tt-contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; } .tt-design .tt-contact-buttons .tt-btn { flex: 1 1 200px; margin: 0; } .tt-design .tt-assurances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; padding: 20px; margin: 0 0 18px; border: 1px solid var(--tt-line); border-radius: 14px; background: #FAFBFC; } .tt-design .tt-assurance { display: flex; gap: 11px; align-items: flex-start; } .tt-design .tt-assurance .tt-icon { color: var(--tt-blue); margin-top: 1px; } .tt-design .tt-assurance strong { display: block; font-size: 13.5px; } .tt-design .tt-assurance span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--tt-muted); } .tt-design .tt-soldby { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; margin: 18px 0; border: 1px solid var(--tt-line); border-radius: 14px; } .tt-design .tt-soldby__mark { width: 44px; height: 44px; border-radius: 11px; background: var(--tt-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--tt-display); font-size: 15px; font-weight: 800; flex-shrink: 0; } .tt-design .tt-soldby__copy { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; } .tt-design .tt-soldby__copy strong { font-size: 14px; } .tt-design .tt-soldby__copy span { font-size: 12.5px; color: var(--tt-muted); } .tt-design .tt-soldby__link { font-size: 13px; font-weight: 700; white-space: nowrap; } .tt-design .tt-quickspecs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .tt-design .tt-quickspec { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--tt-line); border-radius: 12px; } .tt-design .tt-quickspec span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-faint); } .tt-design .tt-quickspec strong { font-size: 14.5px; } .tt-design .tt-video-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 15px; border-radius: 10px; background: var(--tt-ink); color: #fff; font-size: 13px; font-weight: 600; } .tt-design .tt-video-link:hover { color: #fff; background: var(--tt-ink-2); } .tt-design .tt-inbox { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; border: 1px solid var(--tt-line); border-radius: 14px; background: #fff; } .tt-design .tt-inbox .tt-icon { color: var(--tt-amber-text); } .tt-design .tt-inbox p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--tt-muted); } .tt-design .tt-tab-copy { max-width: 760px; } .tt-design .tt-zone-list { margin: 0 0 18px 18px; font-size: 14px; line-height: 1.6; } .tt-design .tt-single-section { margin: 40px 0; } .tt-design .woocommerce-tabs .tabs > li > a { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 700; } .tt-design .woocommerce-product-attributes th { font-weight: 600; color: var(--tt-muted); } .tt-design .woocommerce-product-attributes td, .tt-design .woocommerce-product-attributes th { padding: 12px 16px; border-color: var(--tt-line-2); } /* -------------------------------------------------------------------------- cart, checkout, orders */ .tt-design .tt-gst-callout { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; margin: 0 0 20px; border: 1.5px solid var(--tt-amber); border-radius: 14px; background: #fff; } .tt-design .tt-gst-callout > .tt-icon { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: var(--tt-blue-tint); color: var(--tt-blue-deep); } .tt-design .tt-gst-callout strong { display: block; font-family: var(--tt-display); font-size: 16px; margin-bottom: 3px; } .tt-design .tt-gst-callout span { font-size: 13.5px; line-height: 1.5; color: var(--tt-muted); } .tt-design .tt-gst-callout span strong { display: inline; font-family: var(--tt-body); font-size: inherit; color: var(--tt-green); } .tt-design .tt-covered { margin-top: 20px; padding: 18px; border: 1px solid var(--tt-line); border-radius: 14px; background: #fff; } .tt-design .tt-covered .tt-eyebrow { margin-bottom: 12px; } .tt-design .tt-covered .tt-checklist { margin: 0; } .tt-design .tt-covered .tt-checklist li { font-size: 13.5px; } .tt-design .tt-cod-note { font-size: 13px; padding: 12px 14px; border-radius: 10px; background: var(--tt-amber-tint); color: var(--tt-amber-text); } .tt-design .tt-order-gstin { font-size: 14px; } .tt-design .tt-tracker { position: relative; margin: 10px 0 24px; } .tt-design .tt-tracker ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .tt-design .tt-tracker li { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0 6px; text-align: center; } .tt-design .tt-tracker__line { position: absolute; top: 18px; left: 8.33%; right: 8.33%; height: 4px; border-radius: 99px; background: var(--tt-line); } .tt-design .tt-tracker__line > span { display: block; height: 100%; border-radius: 99px; background: var(--tt-green); } .tt-design .tt-tracker__dot { position: relative; width: 38px; height: 38px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: #fff; border: 2px solid var(--tt-control); color: var(--tt-faint); } .tt-design .tt-tracker .is-done .tt-tracker__dot { background: var(--tt-green); border-color: var(--tt-green); color: #fff; } .tt-design .tt-tracker .is-current .tt-tracker__dot { background: var(--tt-blue); border: 4px solid var(--tt-blue-tint-2); color: #fff; } .tt-design .tt-tracker strong { font-size: 13.5px; color: var(--tt-ink); } .tt-design .tt-tracker .is-todo strong { color: var(--tt-muted); } .tt-design .tt-tracker small { font-size: 12px; color: var(--tt-muted); line-height: 1.4; } .tt-design .tt-tracker__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 0 4px; font-size: 13px; color: var(--tt-muted); border-top: 1px solid var(--tt-line-2); } .tt-design .tt-tracker__facts strong { color: var(--tt-ink); } .tt-design .tt-order-track { padding: 22px; margin-bottom: 24px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); background: #fff; } .tt-design .tt-track-form form.track_order { padding: 26px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); background: #fff; } .tt-design .tt-thankyou { display: flex; flex-direction: column; gap: 20px; margin: 10px 0 30px; } .tt-design .tt-thankyou__card { padding: 26px; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); background: #fff; } .tt-design .tt-thankyou__card h2 { font-size: 20px; font-weight: 800; margin: 0 0 18px; } .tt-design .tt-thankyou .tt-cards--step .tt-card__num { font-size: 11.5px; text-transform: uppercase; } .tt-design .tt-thankyou .tt-cards--step .tt-card__title { font-size: 16px; } .tt-design .tt-slot-picker { border: 1.5px solid var(--tt-amber); } .tt-design .tt-slot-picker__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; } .tt-design .tt-slot-picker__head > .tt-icon { width: 48px; height: 48px; padding: 12px; border-radius: 12px; background: var(--tt-amber-tint); color: var(--tt-amber-text); } .tt-design .tt-slot-picker__head strong { display: block; font-size: 16.5px; } .tt-design .tt-slot-picker__head span { font-size: 13.5px; color: var(--tt-muted); } .tt-design .tt-slot-picker__status { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--tt-green); } /* -------------------------------------------------------------------------- my account */ /* Page: light grey canvas. Flatsome's account title bar is hidden; the overview greets the customer and every other account page prints its own heading (inc/account.php). */ .tt-design.woocommerce-account #main { background: var(--tt-cloud-2); } .tt-design.woocommerce-account .my-account-header { display: none; } .tt-design .page-wrapper.my-account { padding: 32px 0 64px; } /* Sidebar + content. Flatsome's 3/9 columns become grid cells; the !important display beats older Custom CSS that hid the sidebar. */ .tt-design .page-wrapper.my-account .row.vertical-tabs { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; align-items: start; width: 100%; max-width: none; margin: 0; } .tt-design .page-wrapper.my-account .row.vertical-tabs::before, .tt-design .page-wrapper.my-account .row.vertical-tabs::after { display: none; } .tt-design .page-wrapper.my-account .row.vertical-tabs > .col { width: auto; max-width: none; flex: none; padding: 0; border: 0; } .tt-design .page-wrapper.my-account .row.vertical-tabs > .col.col-border, .tt-design .page-wrapper.my-account .row.vertical-tabs > .col.large-3 { display: block !important; } .tt-design .page-wrapper.my-account .row.vertical-tabs > .col .col-inner { padding: 0; } .tt-design .page-wrapper.my-account .vertical-tabs .woocommerce-MyAccount-navigation { display: none !important; } .tt-design.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto !important; margin: 0; padding: 0; } /* Same layout when the page uses WooCommerce's own navigation instead of Flatsome's sidebar. */ .tt-design .page-wrapper.my-account:not(:has(.vertical-tabs)) .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; align-items: start; } .tt-design .page-wrapper.my-account:not(:has(.vertical-tabs)) .woocommerce > .woocommerce-MyAccount-navigation { display: block !important; float: none; width: auto; } /* Customer card */ .tt-design .my-account .account-user { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 18px 20px; text-align: left; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; } .tt-design .my-account .account-user.circle { border-radius: 16px !important; } .tt-design .my-account .account-user .image { flex-shrink: 0; margin: 0; } .tt-design .my-account .account-user img { display: block; width: 46px; height: 46px; border-radius: 99px; } .tt-design .my-account .account-user .user-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--tt-ink); overflow-wrap: anywhere; } .tt-design .my-account .account-user .user-id { font-size: 12px; font-style: normal; font-weight: 500; color: var(--tt-muted); opacity: 1; } .tt-design .my-account .account-user .user-id::before { content: "Customer "; } /* Account menu (Flatsome sidebar or WooCommerce navigation), with an icon per page */ .tt-design .my-account ul.account-nav, .tt-design .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px; list-style: none; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; } .tt-design .my-account ul.account-nav > li, .tt-design .woocommerce-MyAccount-navigation li { width: 100%; margin: 0; padding: 0; border: 0; list-style: none; } .tt-design .my-account ul.account-nav > li > a, .tt-design .woocommerce-MyAccount-navigation li > a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 10px; font-family: var(--tt-body); font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--tt-ink); } .tt-design .my-account ul.account-nav > li > a::before, .tt-design .woocommerce-MyAccount-navigation li > a::before { content: ""; position: static; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; opacity: 1; transform: none; background-color: currentColor; -webkit-mask: var(--tt-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")) center / contain no-repeat; mask: var(--tt-ico, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")) center / contain no-repeat; } .tt-design .my-account ul.account-nav > li > a:hover, .tt-design .woocommerce-MyAccount-navigation li > a:hover { background: var(--tt-cloud); color: var(--tt-ink); } .tt-design .my-account ul.account-nav > li.is-active > a, .tt-design .my-account ul.account-nav > li.active > a, .tt-design .woocommerce-MyAccount-navigation li.is-active > a { background: var(--tt-blue-tint); color: var(--tt-blue); font-weight: 700; } .tt-design .my-account ul.account-nav > li.woocommerce-MyAccount-navigation-link--customer-logout, .tt-design .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--tt-line-2); } .tt-design .woocommerce-MyAccount-navigation-link--customer-logout > a { color: var(--tt-muted) !important; background: none !important; } .tt-design .woocommerce-MyAccount-navigation-link--dashboard { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--orders { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5Z'/%3E%3Cpolyline points='3 8 12 13 21 8'/%3E%3Cline x1='12' y1='13' x2='12' y2='21'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--machines { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4.5 4.5 0 0 0 5.8 5.8l-8.9 8.9a2.1 2.1 0 0 1-3-3l8.9-8.9a4.5 4.5 0 0 0-5.8-5.8l2.6 2.6-.6 2.4-2.4.6Z'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--downloads { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='12' y1='4' x2='12' y2='16'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--edit-address { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--payment-methods { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.4'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--edit-account { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--wishlist { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.3 5.6a5 5 0 0 0-7.1 0L12 6.8l-1.2-1.2a5 5 0 1 0-7.1 7.1L12 21l8.3-8.3a5 5 0 0 0 0-7.1Z'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--customer-logout { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E"); } .tt-design .woocommerce-MyAccount-navigation-link--wishlist-endpoint, .tt-design .woocommerce-MyAccount-navigation-link--yith-wishlist { --tt-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.3 5.6a5 5 0 0 0-7.1 0L12 6.8l-1.2-1.2a5 5 0 1 0-7.1 7.1L12 21l8.3-8.3a5 5 0 0 0 0-7.1Z'/%3E%3C/svg%3E"); } /* Page headings */ .tt-design .tt-acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 22px; } .tt-design .tt-acc-overview .tt-acc-head { margin: 0; } .tt-design .tt-acc-head__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tt-design .tt-acc-head__title { margin: 0; font-size: 32px; font-weight: 800; color: var(--tt-ink); } .tt-design .tt-acc-head__sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tt-muted); } .tt-design .tt-acc-head__cta { flex-shrink: 0; } .tt-design .tt-acc-back { align-self: flex-start; font-size: 13.5px; font-weight: 700; } /* Overview */ .tt-design .tt-acc-overview { display: flex; flex-direction: column; gap: 22px; } .tt-design .tt-acc-overview > * { margin-top: 0; margin-bottom: 0; } .tt-design .tt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .tt-design .tt-tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--tt-line); border-radius: 14px; background: #fff; color: var(--tt-ink); } .tt-design .tt-tile:hover { border-color: var(--tt-blue); color: var(--tt-ink); } .tt-design .tt-tile span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-faint); } .tt-design .tt-tile strong { font-family: var(--tt-display); font-size: 30px; font-weight: 800; line-height: 1.1; } .tt-design .tt-tile small { font-size: 12.5px; line-height: 1.4; color: var(--tt-muted); } .tt-design .tt-tile.is-green strong { color: var(--tt-green); } .tt-design .tt-tile.is-amber strong { color: var(--tt-amber-text); } .tt-design .tt-acc-overview .tt-callout, .tt-design .tt-acc-overview .tt-tiles { margin: 0; } .tt-design .tt-btn--dark { background: var(--tt-ink); color: #fff; } .tt-design .tt-btn--dark:hover { background: var(--tt-ink-2); color: #fff; } .tt-design .tt-acc-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; } .tt-design .tt-acc-card + .tt-acc-card { margin-top: 20px; } .tt-design .tt-acc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tt-design .tt-acc-card__head h2 { margin: 0; font-size: 20px; font-weight: 800; } .tt-design .tt-acc-card__link { font-size: 13.5px; font-weight: 700; white-space: nowrap; } .tt-design .tt-acc-section { display: flex; flex-direction: column; gap: 16px; } .tt-design .tt-acc-section .tt-machines { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; } .tt-design .tt-acc-pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .tt-design .tt-acc-pair .tt-acc-card + .tt-acc-card { margin: 0; } .tt-design .tt-acc-pair .tt-acc-card__head h2 { font-size: 18px; } .tt-design .tt-acc-pair .tt-acc-card > .tt-btn { align-self: flex-start; } .tt-design .tt-acc-muted { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tt-muted); } .tt-design .tt-acc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .tt-design .tt-acc-empty p { max-width: 560px; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tt-text-2); } .tt-design .tt-acc-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; } .tt-design .tt-acc-facts { display: flex; flex-direction: column; gap: 14px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; } .tt-design .tt-acc-facts > div { display: flex; flex-direction: column; gap: 3px; } .tt-design .tt-acc-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-faint); } .tt-design .tt-acc-facts dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--tt-ink); overflow-wrap: anywhere; } .tt-design .tt-acc-facts dd .tt-acc-muted { font-weight: 400; } .tt-design .tt-acc-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 11px; background: var(--tt-blue-wash); border: 1px solid var(--tt-blue-tint-2); font-size: 13.5px; line-height: 1.5; color: var(--tt-text-2); } .tt-design .tt-acc-note .tt-icon { margin-top: 2px; color: var(--tt-blue); } .tt-design .tt-acc-note.is-ok { background: var(--tt-green-wash); border-color: var(--tt-green-line); color: var(--tt-green); font-weight: 600; } .tt-design .tt-acc-note.is-ok .tt-icon { color: var(--tt-green); } /* Machines */ .tt-design .tt-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; } .tt-design .tt-machine { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--tt-line); border-radius: 16px; background: #fff; } .tt-design .tt-machine__head { display: flex; gap: 14px; align-items: center; } .tt-design .tt-machine__img { width: 72px; height: 72px; padding: 6px; border-radius: 12px; background: var(--tt-cloud); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .tt-design .tt-machine__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .tt-design .tt-machine__head > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tt-design .tt-machine__head strong { font-size: 14.5px; line-height: 1.3; color: var(--tt-ink); } .tt-design .tt-machine__head small { font-size: 12px; color: var(--tt-muted); } .tt-design .tt-machine__cover { display: flex; flex-direction: column; gap: 7px; } .tt-design .tt-machine__warranty { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--tt-green); } .tt-design .tt-machine__warranty span:last-child { font-weight: 400; color: var(--tt-muted); } .tt-design .tt-machine__warranty.is-expired { color: var(--tt-amber-text); } .tt-design .tt-bar.is-expired > span { background: var(--tt-amber); } .tt-design .tt-machine__actions { display: flex; gap: 8px; margin-top: auto; } .tt-design .tt-machine__actions .tt-btn { flex: 1 1 0; min-height: 40px; padding: 0 10px; font-size: 13px; } /* Service requests */ .tt-design .tt-history { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .tt-design .tt-history li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 12px 0; border-top: 1px solid var(--tt-line-2); } .tt-design .tt-history li:first-child { padding-top: 0; border-top: 0; } .tt-design .tt-history__dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 99px; background: var(--tt-blue); flex-shrink: 0; } .tt-design .tt-history__dot.is-won, .tt-design .tt-history__dot.is-closed { background: var(--tt-green); } .tt-design .tt-history__body { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; } .tt-design .tt-history__body strong { font-size: 14px; line-height: 1.35; color: var(--tt-ink); } .tt-design .tt-history__body small { font-size: 12.5px; color: var(--tt-muted); } .tt-design .tt-history em { font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--tt-blue); white-space: nowrap; } /* Order tables: the overview's recent orders and WooCommerce's Orders page */ .tt-design .tt-orders-table, .tt-design .woocommerce-orders-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; } .tt-design .woocommerce-orders-table { background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; overflow: hidden; } .tt-design .tt-orders-table th, .tt-design .woocommerce-orders-table th { padding: 0 12px 12px; border: 0; border-bottom: 1px solid var(--tt-line-2); background: none; text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-faint); } .tt-design .woocommerce-orders-table th { padding: 16px 16px 12px; } .tt-design .tt-orders-table td, .tt-design .woocommerce-orders-table td { padding: 16px 12px; border: 0; border-bottom: 1px solid var(--tt-line-2); font-size: 14px; line-height: 1.4; color: var(--tt-text-2); vertical-align: middle; text-align: left; } .tt-design .woocommerce-orders-table td { padding: 16px; } .tt-design .tt-orders-table tbody tr:last-child td, .tt-design .woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; } .tt-design .tt-orders-table__id, .tt-design .woocommerce-orders-table__cell-order-number a { font-weight: 700; } .tt-design .tt-orders-table__total, .tt-design .woocommerce-orders-table__cell-order-total { font-weight: 700; color: var(--tt-ink); } .tt-design .woocommerce-orders-table__cell-order-total .amount { font-weight: 700; } .tt-design .tt-orders-table__action, .tt-design .woocommerce-orders-table__cell-order-actions { text-align: right !important; white-space: nowrap; } .tt-design .tt-orders-table__action a { font-size: 13px; font-weight: 700; } .tt-design .woocommerce-orders-table .woocommerce-button { min-height: 36px; margin: 2px 0 2px 6px; padding: 0 14px; line-height: 33px; font-size: 13px; background-color: #fff; color: var(--tt-blue); border: 1.5px solid var(--tt-blue); } .tt-design .woocommerce-orders-table .woocommerce-button:hover { background-color: var(--tt-blue-tint); color: var(--tt-blue-deep); } .tt-design .tt-status { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; background: var(--tt-cloud); color: var(--tt-text-2); } .tt-design .tt-status.is-processing, .tt-design .tt-status.is-on-hold { background: var(--tt-blue-tint); color: var(--tt-blue-deep); } .tt-design .tt-status.is-completed { background: var(--tt-green-tint); color: var(--tt-green); } .tt-design .tt-status.is-pending { background: var(--tt-amber-tint); color: var(--tt-amber-text); } .tt-design .tt-status.is-cancelled, .tt-design .tt-status.is-failed, .tt-design .tt-status.is-refunded { background: #FDECEC; color: var(--tt-red); } .tt-design .woocommerce-orders-table__cell-order-status { font-weight: 700; } .tt-design .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status, .tt-design .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: var(--tt-blue-deep); } .tt-design .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--tt-green); } .tt-design .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: var(--tt-amber-text); } .tt-design .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status, .tt-design .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status, .tt-design .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { color: var(--tt-red); } .tt-design .woocommerce-MyAccount-content .woocommerce-pagination { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } /* Single order */ .tt-design .woocommerce-MyAccount-content mark { padding: 0; background: none; font-weight: 700; color: var(--tt-ink); } .tt-design .woocommerce-MyAccount-content .woocommerce-order-details, .tt-design .woocommerce-MyAccount-content .woocommerce-customer-details { margin: 0 0 20px; padding: 24px; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; } .tt-design .woocommerce-MyAccount-content .woocommerce-order-details__title, .tt-design .woocommerce-MyAccount-content .woocommerce-column__title, .tt-design .woocommerce-MyAccount-content .woocommerce-OrderUpdates-title, .tt-design .woocommerce-MyAccount-content > h2 { margin: 0 0 14px; font-size: 20px; font-weight: 800; text-transform: none; letter-spacing: -.01em; } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details { width: 100%; margin: 0; border: 0; } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details th, .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details td { padding: 12px 0; border: 0; border-bottom: 1px solid var(--tt-line-2); font-size: 14px; } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-faint); } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot th { font-weight: 600; color: var(--tt-muted); } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details td { color: var(--tt-text-2); } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details .product-total { font-weight: 600; color: var(--tt-ink); } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child th, .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0; font-size: 16px; font-weight: 800; color: var(--tt-ink); } .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details .product-total, .tt-design .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot td { text-align: right; } .tt-design .woocommerce-MyAccount-content .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; } .tt-design .woocommerce-MyAccount-content .woocommerce-columns--addresses::before, .tt-design .woocommerce-MyAccount-content .woocommerce-columns--addresses::after { display: none; } .tt-design .woocommerce-MyAccount-content .woocommerce-columns--addresses > .woocommerce-column { width: auto; max-width: none; float: none; padding: 0; margin: 0; } .tt-design .woocommerce-MyAccount-content address { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 14px; line-height: 1.65; color: var(--tt-text-2); } .tt-design .woocommerce-MyAccount-content address p { margin: 4px 0 0; } .tt-design .woocommerce-MyAccount-content .commentlist.notes { margin: 0 0 20px; padding: 0; list-style: none; } .tt-design .woocommerce-MyAccount-content .order-again { margin: 0; } /* Addresses */ .tt-design .woocommerce-MyAccount-content .tt-acc-head + p { font-size: 14.5px; color: var(--tt-muted); } .tt-design .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; } .tt-design .woocommerce-MyAccount-content .woocommerce-Addresses::before, .tt-design .woocommerce-MyAccount-content .woocommerce-Addresses::after { display: none; } .tt-design .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address { width: auto; max-width: none; float: none; margin: 0; padding: 24px; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; } .tt-design .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; } .tt-design .woocommerce-MyAccount-content .woocommerce-Address-title::before, .tt-design .woocommerce-MyAccount-content .woocommerce-Address-title::after { display: none; } .tt-design .woocommerce-MyAccount-content .woocommerce-Address-title h2, .tt-design .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; font-size: 18px; font-weight: 800; text-transform: none; } .tt-design .woocommerce-MyAccount-content .woocommerce-Address-title .edit { float: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; } /* Forms: edit address, account details */ .tt-design .woocommerce-MyAccount-content > form { max-width: 760px; padding: 28px; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; } .tt-design .woocommerce-MyAccount-content > form > h2, .tt-design .woocommerce-MyAccount-content > form > h3 { margin: 0 0 18px; font-size: 20px; font-weight: 800; text-transform: none; } .tt-design.woocommerce-account .form-row label { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--tt-muted); text-transform: none; letter-spacing: 0; } .tt-design.woocommerce-account .form-row .input-text, .tt-design.woocommerce-account .form-row select { min-height: 48px; } .tt-design.woocommerce-account .form-row em, .tt-design.woocommerce-account .form-row .description { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--tt-muted); } .tt-design.woocommerce-account fieldset { margin: 26px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid var(--tt-line-2); } .tt-design.woocommerce-account fieldset legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; border: 0; font-family: var(--tt-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--tt-ink); } .tt-design.woocommerce-account fieldset legend + * { clear: both; } .tt-design.woocommerce-account .woocommerce-MyAccount-content form .button { min-height: 48px; margin-top: 8px; padding: 0 26px; } .tt-design.woocommerce-account .select2-container .select2-selection--single { height: 48px; border: 1px solid var(--tt-control); border-radius: 10px; } .tt-design.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--tt-ink); } .tt-design.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; } /* Sign in / create account */ .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); max-width: 1180px; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--tt-line); border-radius: 22px; } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > :not(.tt-login-aside) { grid-column: 2; min-width: 0; } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > .woocommerce-notices-wrapper { padding: 32px 52px 0; } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > .woocommerce-notices-wrapper:empty { display: none; } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > .account-container, .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > #customer_login { padding: 44px 52px 48px; } .tt-design .tt-login-aside { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 22px; padding: 48px 44px; color: #fff; background: var(--tt-ink) radial-gradient(520px 360px at 20% 90%, rgba(37, 99, 235, .22), rgba(37, 99, 235, 0) 70%); } .tt-design .tt-login-aside .tt-eyebrow { color: #FFD166; } .tt-design .tt-login-aside__title { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: #fff; } .tt-design .tt-login-aside__lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tt-on-dark); } .tt-design .tt-login-aside__list { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; } .tt-design .tt-login-aside__list li { display: flex; gap: 14px; align-items: flex-start; margin: 0; } .tt-design .tt-login-aside__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #FFD166; } .tt-design .tt-login-aside__list strong { display: block; font-size: 14.5px; color: #fff; } .tt-design .tt-login-aside__list small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--tt-on-dark-3); } .tt-design .tt-login-aside__help { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 8px; font-size: 13.5px; color: var(--tt-on-dark); } .tt-design .tt-login-aside__help a { font-weight: 700; color: #fff; } .tt-design .my-account #customer_login { display: flex; flex-direction: column; max-width: 520px; margin: 0; } .tt-design .my-account #customer_login::before, .tt-design .my-account #customer_login::after { display: none; } .tt-design .my-account #customer_login > div { width: 100%; max-width: none; flex: none; float: none; margin: 0; padding: 0; border: 0 !important; } .tt-design .my-account #customer_login > div + div { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--tt-line-2) !important; } .tt-design .my-account #customer_login form, .tt-design .my-account #customer_login .account-login-inner, .tt-design .my-account #customer_login .account-register-inner { margin: 0; padding: 0; } .tt-design .my-account #customer_login h2 { margin: 0 0 18px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; text-transform: none; } .tt-design .my-account #customer_login > div + div h2 { font-size: 20px; } .tt-design .my-account #customer_login .input-text { min-height: 50px; } .tt-design .my-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .tt-design .my-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--tt-text-2); } .tt-design .my-account .woocommerce-form-login__rememberme input { margin: 0; } .tt-design .my-account .woocommerce-form-login__submit, .tt-design .my-account .woocommerce-form-register__submit { width: 100%; min-height: 52px; margin: 0; font-size: 16px; } .tt-design .my-account .woocommerce-form-login__submit { background-color: var(--tt-amber) !important; border-color: var(--tt-amber) !important; color: var(--tt-ink) !important; } .tt-design .my-account .woocommerce-form-login__submit:hover { background-color: var(--tt-amber-hover) !important; } .tt-design .my-account .lost_password { margin: 14px 0 0 !important; font-size: 13.5px; font-weight: 600; } .tt-design .my-account .woocommerce-form-register > p:not(.form-row) { font-size: 13.5px; color: var(--tt-muted); } .tt-design .my-account .woocommerce-privacy-policy-text p { font-size: 12.5px; line-height: 1.5; color: var(--tt-muted); } /* Lost and reset password */ .tt-design .page-wrapper.my-account .woocommerce:has(> form.lost_reset_password) { max-width: 560px; margin: 0 auto; padding: 40px 44px; background: #fff; border: 1px solid var(--tt-line); border-radius: 22px; } .tt-design .tt-reset-head { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; } .tt-design .tt-reset-head h1 { margin: 0; font-size: 28px; font-weight: 800; } .tt-design form.lost_reset_password > p:first-child { font-size: 14.5px; line-height: 1.55; color: var(--tt-text-2); } .tt-design form.lost_reset_password .form-row-first, .tt-design form.lost_reset_password .form-row-last { float: none; width: 100%; } .tt-design form.lost_reset_password .button { width: 100%; min-height: 50px; } /* Wishlist page (YITH WooCommerce Wishlist) */ .tt-design table.wishlist_table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--tt-line); border-radius: 16px; overflow: hidden; } .tt-design table.wishlist_table thead th { padding: 16px 16px 12px; border: 0; border-bottom: 1px solid var(--tt-line-2); background: none; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-faint); } .tt-design table.wishlist_table tbody td { padding: 16px; border: 0; border-bottom: 1px solid var(--tt-line-2); font-size: 14px; vertical-align: middle; } .tt-design table.wishlist_table tbody tr:last-child td { border-bottom: 0; } .tt-design .wishlist_table .product-thumbnail img { width: 72px; height: 72px; padding: 6px; border-radius: 12px; background: var(--tt-cloud); object-fit: contain; } .tt-design .wishlist_table .product-name a { font-weight: 700; color: var(--tt-ink); } .tt-design .wishlist_table .product-name a:hover { color: var(--tt-blue); } .tt-design .wishlist_table .product-price { font-weight: 700; color: var(--tt-ink); } .tt-design .wishlist_table .wishlist-in-stock { font-weight: 700; color: var(--tt-green); } .tt-design .wishlist_table .wishlist-out-of-stock { font-weight: 700; color: var(--tt-red); } .tt-design .wishlist_table .product-add-to-cart .button { min-height: 40px; margin: 0; padding: 0 16px; line-height: 40px; font-size: 13.5px; white-space: nowrap; } .tt-design .wishlist_table .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 99px; border: 1px solid var(--tt-control); color: var(--tt-muted) !important; font-size: 18px; line-height: 1; } .tt-design .wishlist_table .product-remove a.remove:hover { border-color: var(--tt-red); color: var(--tt-red) !important; background: none; } .tt-design .wishlist_table td.wishlist-empty { padding: 48px 16px; text-align: center; font-size: 15px; color: var(--tt-muted); } .tt-design ul.wishlist_table.mobile li { margin: 0 0 12px; padding: 16px; list-style: none; background: #fff; border: 1px solid var(--tt-line); border-radius: 14px; } .tt-design .wishlist-title h2 { font-size: 28px; font-weight: 800; text-transform: none; } @media (max-width: 1100px) { .tt-design .page-wrapper.my-account .row.vertical-tabs { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; } .tt-design .tt-acc-pair { grid-template-columns: minmax(0, 1fr); } .tt-design .tt-acc-section .tt-machines { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .tt-design .tt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .tt-design .tt-login-aside { padding: 40px 32px; } } @media (max-width: 849px) { .tt-design .page-wrapper.my-account { padding: 18px 0 48px; } .tt-design .page-wrapper.my-account .row.vertical-tabs, .tt-design .page-wrapper.my-account:not(:has(.vertical-tabs)) .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: 18px; } .tt-design .my-account .account-user { margin-bottom: 10px; padding: 14px 16px; } .tt-design .my-account ul.account-nav, .tt-design .woocommerce-MyAccount-navigation ul { flex-direction: row; gap: 4px; padding: 6px; overflow-x: auto; scrollbar-width: none; } .tt-design .my-account ul.account-nav > li, .tt-design .woocommerce-MyAccount-navigation li { flex: 0 0 auto; width: auto; } .tt-design .my-account ul.account-nav > li > a, .tt-design .woocommerce-MyAccount-navigation li > a { min-height: 40px; padding: 0 12px; gap: 8px; font-size: 13.5px; white-space: nowrap; } .tt-design .my-account ul.account-nav > li.woocommerce-MyAccount-navigation-link--customer-logout, .tt-design .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; } .tt-design .tt-acc-head { flex-direction: column; align-items: flex-start; gap: 14px; } .tt-design .tt-acc-head__title { font-size: 26px; } .tt-design .tt-orders-table thead, .tt-design .woocommerce-orders-table thead { display: none; } .tt-design .tt-orders-table tr, .tt-design .woocommerce-orders-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--tt-line-2); } .tt-design .woocommerce-orders-table tr { padding: 12px 16px; } .tt-design .tt-orders-table tbody tr:last-child, .tt-design .woocommerce-orders-table tbody tr:last-child { border-bottom: 0; } .tt-design .tt-orders-table td, .tt-design .woocommerce-orders-table td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0 !important; border: 0 !important; text-align: right; } .tt-design .tt-orders-table td::before, .tt-design .woocommerce-orders-table td::before { content: attr(data-title); flex-shrink: 0; font-weight: 600; color: var(--tt-muted); text-align: left; } .tt-design .tt-orders-table td.tt-orders-table__action::before { content: none; } .tt-design .tt-orders-table td.tt-orders-table__action { justify-content: flex-end; padding-top: 8px !important; } .tt-design .woocommerce-MyAccount-content .woocommerce-Addresses, .tt-design .woocommerce-MyAccount-content .woocommerce-columns--addresses { grid-template-columns: minmax(0, 1fr); } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) { display: flex; flex-direction: column; } .tt-design .tt-login-aside { order: 2; gap: 16px; padding: 28px 24px; } .tt-design .tt-login-aside__title { font-size: 26px; } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > .account-container, .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > #customer_login { padding: 28px 22px 32px; } .tt-design .page-wrapper.my-account .woocommerce:has(> .tt-login-aside) > .woocommerce-notices-wrapper { padding: 22px 22px 0; } .tt-design .page-wrapper.my-account .woocommerce:has(> form.lost_reset_password) { padding: 28px 22px; } .tt-design table.wishlist_table thead { display: none; } } @media (max-width: 549px) { .tt-design .tt-acc-card, .tt-design .woocommerce-MyAccount-content > form, .tt-design .woocommerce-MyAccount-content .woocommerce-order-details, .tt-design .woocommerce-MyAccount-content .woocommerce-customer-details { padding: 18px; } .tt-design .tt-tile { padding: 16px; } .tt-design .tt-tile strong { font-size: 24px; } .tt-design .tt-acc-overview .tt-callout { flex-wrap: wrap; } } /* -------------------------------------------------------------------------- shop sidebar widgets */ .tt-design .tt-help-card { display: flex; flex-direction: column; gap: 11px; padding: 20px; border-radius: 14px; background: var(--tt-ink); } .tt-design .tt-help-card strong { font-family: var(--tt-display); font-size: 15px; color: #fff; } .tt-design .tt-help-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tt-on-dark-2); } .tt-design .tt-help-card .tt-btn--wa { background: var(--tt-whatsapp); border-color: var(--tt-whatsapp); color: #0B2A1C; } /* -------------------------------------------------------------------------- 404 */ .tt-design .tt-404__wrap { display: flex; align-items: center; justify-content: center; gap: 80px; padding: 80px max(16px, calc((100% - 1280px) / 2)) 70px; } .tt-design .tt-404__machine { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; } .tt-design .tt-404__body { width: 420px; padding: 22px; background: var(--tt-ink-2); border-radius: 24px 24px 14px 14px; box-shadow: var(--tt-shadow-lg); } .tt-design .tt-404__screen { height: 150px; border-radius: 12px; background: #3A0B0B; border: 3px solid #0B1120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: inset 0 0 40px rgba(255, 60, 60, .25); } .tt-design .tt-404__screen b { font-family: var(--tt-display); font-size: 74px; font-weight: 800; color: #FF6B5B; letter-spacing: .06em; line-height: 1; } .tt-design .tt-404__screen span { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FFB0A6; } .tt-design .tt-404__keys { display: flex; justify-content: space-between; margin-top: 16px; } .tt-design .tt-404__keys span { width: 62px; height: 34px; border-radius: 8px; background: #334155; color: #CBD2DC; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; } .tt-design .tt-404__keys .is-on { background: var(--tt-amber); color: var(--tt-ink); } .tt-design .tt-404__base { width: 470px; height: 26px; background: #0B1120; border-radius: 0 0 18px 18px; } .tt-design .tt-404__copy { max-width: 560px; display: flex; flex-direction: column; gap: 18px; } .tt-design .tt-404__copy h1 { margin: 0; font-size: 50px; font-weight: 800; letter-spacing: -.03em; } .tt-design .tt-404__copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tt-text-3); } .tt-design .tt-404__popular { display: flex; flex-direction: column; gap: 10px; } .tt-design .tt-404__popular > span { font-size: 13px; font-weight: 700; color: var(--tt-muted); } .tt-design .tt-404__actions { display: flex; flex-wrap: wrap; } .tt-design .tt-404__picks { background: var(--tt-cloud); border-top: 1px solid var(--tt-line); padding: 48px 0 54px; } .tt-design .tt-404__picks-inner { padding: 0 max(16px, calc((100% - 1280px) / 2)); } /* -------------------------------------------------------------------------- dark Flatsome sections */ .tt-design .dark .tt-card__title, .tt-design .dark .tt-section-title__h { color: #fff; } .tt-design .dark .tt-form .tt-form__title, .tt-design .dark .tt-hero__card, .tt-design .dark .tt-form label, .tt-design .dark .tt-form legend { color: var(--tt-ink); } .tt-design .dark .tt-form label, .tt-design .dark .tt-form legend { color: var(--tt-muted); } .tt-design .dark .tt-stats--dark .tt-stat__value { color: var(--tt-amber); } /* -------------------------------------------------------------------------- responsive */ @media (max-width: 1100px) { .tt-design .tt-hero__title { font-size: 46px; } .tt-design .tt-hero__slide { gap: 36px; } .tt-design .tt-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tt-design .tt-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tt-design .tt-footer__about { grid-column: 1 / -1; } .tt-design .tt-brand, .tt-design .tt-brand.is-reverse { flex-direction: column; } .tt-design .tt-brand__copy { flex-basis: auto; } .tt-design .tt-paystrip { flex-direction: column; align-items: flex-start; gap: 24px; } .tt-design .tt-404__wrap { flex-direction: column; gap: 40px; } } @media (max-width: 849px) { .tt-design .tt-section-title { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; } .tt-design .tt-section-title__h { font-size: 28px; } .tt-design .tt-section-title--medium .tt-section-title__h { font-size: 26px; } .tt-design .tt-section-title__aside { text-align: left; max-width: none; } .tt-design .tt-page-hero__grid { flex-direction: column; align-items: stretch; gap: 24px; } .tt-design .tt-page-hero__copy, .tt-design .tt-page-hero--dark .tt-page-hero__copy, .tt-design .tt-page-hero--cream .tt-page-hero__copy { max-width: none; flex-basis: auto; } .tt-design .tt-page-hero__title { font-size: 30px; } .tt-design .tt-page-hero--dark .tt-page-hero__title, .tt-design .tt-page-hero--cream .tt-page-hero__title { font-size: 34px; } .tt-design .tt-page-hero--dark, .tt-design .tt-page-hero--cream { padding-bottom: 36px; } .tt-design .tt-page-hero__side, .tt-design .tt-page-hero--dark .tt-page-hero__side { max-width: none; } .tt-design .tt-countdown { margin-left: 0; max-width: none; } .tt-design .tt-hero__slide { flex-direction: column; align-items: stretch; gap: 22px; padding: 34px 16px 26px; } .tt-design .tt-hero__copy { flex-basis: auto; max-width: none; gap: 16px; } .tt-design .tt-hero__title { font-size: 34px; } .tt-design .tt-hero__lead { font-size: 15px; } .tt-design .tt-hero__visual { min-height: 0; padding: 50px 16px 100px; } .tt-design .tt-hero__img { max-height: 200px; } .tt-design .tt-hero__chip { display: none; } .tt-design .tt-hero__card { flex-direction: column; align-items: flex-start; gap: 6px; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; } .tt-design .tt-hero__actions .tt-btn { flex: 1 1 100%; margin-right: 0; } .tt-design .tt-hero__tabs { display: flex; gap: 6px; margin: 0 16px; padding-top: 12px; overflow-x: auto; scrollbar-width: none; border-top: 0; } .tt-design .tt-hero__tabs::-webkit-scrollbar { display: none; } .tt-design .tt-hero__tab { flex: 0 0 auto; padding: 10px 12px 14px; gap: 8px; } .tt-design .tt-hero__thumb { display: none; } .tt-design .tt-hero__bar { top: 0; } .tt-design .tt-trust { grid-template-columns: 1fr 1fr; gap: 18px 0; } .tt-design .tt-trust__item, .tt-design .tt-trust__item:first-child { padding: 0 12px; border-left: 0; } .tt-design .tt-cards, .tt-design .tt-reviews, .tt-design .tt-team, .tt-design .tt-docs, .tt-design .tt-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-design .tt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-design .tt-stats--divided .tt-stat { padding: 22px 18px; border-top: 1px solid var(--tt-line); } .tt-design .tt-cta, .tt-design .tt-sec--flush .col-inner > .tt-cta, .tt-design .tt-sec--flush .col-inner .tt-cta--dark { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 16px; } .tt-design .tt-cta h2, .tt-design .tt-sec--flush .col-inner .tt-cta--dark h2 { font-size: 24px; } .tt-design .tt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-design .tt-combo { flex-direction: column; align-items: flex-start; } .tt-design .tt-brand { padding: 22px; gap: 24px; } .tt-design .tt-tracker ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .tt-design .tt-tracker__line { display: none; } .tt-design .tt-quickspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-design .tt-404__body { width: 320px; } .tt-design .tt-404__base { width: 360px; } .tt-design .tt-404__keys span { width: 48px; } .tt-design .tt-404__copy h1 { font-size: 34px; } .tt-design .tt-topbar-usps { gap: 14px; font-size: 11.5px; flex-wrap: nowrap; white-space: nowrap; } .tt-design .tt-header-phone { border-left: 0; padding-left: 0; } } @media (max-width: 549px) { /* Top-bar promises: one line, one promise at a time (tt-main.js rotates them). */ .tt-design .tt-topbar-usps { justify-content: center; gap: 0; } .tt-design .tt-topbar-usps li { display: none; } .tt-design .tt-topbar-usps li.is-on, .tt-design .tt-topbar-usps:not([data-tt-ready]) li:first-child { display: inline-flex; animation: tt-fade-in .4s ease; } .tt-design .tt-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tt-design .tt-cat { padding: 16px 10px; } .tt-design .tt-cat__img { width: 64px; height: 64px; } .tt-design .tt-cards, .tt-design .tt-reviews, .tt-design .tt-team, .tt-design .tt-docs, .tt-design .tt-minis, .tt-design .tt-checklist { grid-template-columns: 1fr; } .tt-design .tt-trust { grid-template-columns: 1fr; } .tt-design .tt-form { padding: 20px 16px; } .tt-design .tt-form__grid { grid-template-columns: 1fr; } .tt-design .tt-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tt-design .tt-upload { flex-wrap: wrap; } .tt-design .tt-assurances { grid-template-columns: 1fr; } .tt-design .tt-paystrip__notes { flex-direction: column; gap: 14px; } .tt-design .tt-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } .tt-design .tt-price-block__price { font-size: 32px; } .tt-design .tt-compare-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; } .tt-design .tt-compare-bar__actions { justify-content: space-between; } .tt-design .tt-tiles { grid-template-columns: 1fr 1fr; } .tt-design .tt-loop-actions { flex-wrap: wrap; } .tt-design .tt-pincheck__row input { width: auto; flex: 1 1 auto; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .tt-design .tt-hero__slide { transition: none; transform: none; } .tt-design .tt-hero__tab.is-active .tt-hero__bar > span { animation: none; width: 100%; } .tt-design .tt-cat, .tt-design .tt-btn { transition: none; } .tt-design .tt-topbar-usps li.is-on { animation: none; } }