/* ========================================================================== Three Links - main stylesheet White-first · crisp contrast · fresh neutrals · editorial typography Sections: 1 Tokens · 2 Base · 3 Type · 4 Buttons & links · 5 Header · 6 Mobile nav · 7 Hero · 8 Sections · 9 Cards · 10 Door types · 11 Benefits · 12 Showcase · 13 Series/Services · 14 Reviews · 15 CTA · 16 Footer · 17 Modals · 18 Product · 19 Archive · 20 Forms · 21 Contact · 22 Auth · 23 Account · 24 Certificate · 25 Pages · 26 Motion · 27 Print ========================================================================== */ /* 1 · Tokens -------------------------------------------------------------- */ :root { --white: #ffffff; --bg-1: #f8f8f6; --bg-2: #f4f3f0; --bg-3: #efeee9; --n-1: #d9d4cb; --n-2: #c8c1b7; --n-3: #b5ada2; --n-4: #9b9388; --ink: #222222; --ink-2: #666666; --ink-3: #888888; --line: #e5e3de; --line-strong: #c8c1b7; --ok-bg: #e8f1ea; --ok: #1f5130; --warn-bg: #fbf1dc; --warn: #7a4f00; --bad-bg: #f6e7e7; --bad: #8a2b2b; --info-bg: #e9eef5; --info: #24476b; --serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* headings: same simple family, medium weight */ --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --container: 1320px; --gutter: clamp(16px, 4vw, 48px); --section: clamp(72px, 9vw, 136px); --radius: 2px; --radius-md: 4px; --header-h: 80px; --ease: cubic-bezier(.2, .7, .2, 1); --shadow-soft: 0 1px 2px rgba(34, 34, 34, .04), 0 8px 24px -16px rgba(34, 34, 34, .12); } /* 2 · Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } body.tlt-locked { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } button, input, select, textarea { font: inherit; color: inherit; } figure { margin: 0; } address { font-style: normal; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } ::selection { background: var(--bg-3); color: var(--ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tlt-skip { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 12px 18px; background: var(--ink); color: var(--white); text-decoration: none; font-size: 14px; border-radius: var(--radius); } .tlt-skip:focus { top: 12px; } .tlt-container, .tl-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .tlt-main:focus, .tl-page:focus { outline: none; } .tl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* 3 · Type ---------------------------------------------------------------- */ .tl-eyebrow { margin: 0 0 14px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); } .tlt-display, .tl-display, .tl-title, .tlt-h2, .tlt-h3, .tlt-hero__title, .tlt-showcase__title, .tlt-cta__title { font-family: var(--serif); font-weight: 600; color: var(--ink); letter-spacing: -.025em; } .tlt-display, .tl-display { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; margin: 0 0 20px; } .tl-title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; margin: 0 0 10px; } .tlt-h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; margin: 0; } .tlt-h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.15; margin: 0 0 8px; } .tlt-h2 em, .tlt-display em, .tlt-cta__title em, .tlt-h3 em { font-style: normal; color: inherit; } .tlt-lead, .tl-lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--ink-2); max-width: 46ch; margin: 0; } .tl-muted { color: var(--ink-2); } .tl-req { color: var(--bad); } .tl-optional { color: var(--ink-2); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; } /* 4 · Buttons & links ----------------------------------------------------- */ .tl-btn { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--radius); font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .tl-btn--primary { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); } .tl-btn--primary:hover { --btn-bg: #000; --btn-bd: #000; } .tl-btn--secondary:hover { --btn-bg: var(--bg-2); } .tl-btn:active { transform: translateY(1px); } .tl-btn[disabled] { opacity: .6; cursor: progress; } .tl-btn--block { width: 100%; } .tl-btn .tl-icon { flex: none; } .tl-link, .tlt-arrow-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color .2s var(--ease); } .tl-link:hover, .tlt-arrow-link:hover { border-color: var(--ink); } .tlt-arrow-link .tl-icon, .tl-link .tl-icon { transition: transform .3s var(--ease); } .tlt-arrow-link:hover .tl-icon, .tl-link:hover .tl-icon { transform: translateX(4px); } /* 5 · Header -------------------------------------------------------------- */ .tlt-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .admin-bar .tlt-header { top: 32px; } @media (max-width: 782px) { .admin-bar .tlt-header { top: 0; } } .tlt-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -22px rgba(34, 34, 34, .35); } .tlt-header__inner { max-width: calc(var(--container) + 80px); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 28px; transition: height .3s var(--ease); } .tlt-header.is-scrolled .tlt-header__inner { height: 68px; } .tlt-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; } .tlt-logo__mark { width: 40px; height: 40px; object-fit: contain; } .tlt-logo__text { display: flex; flex-direction: column; line-height: 1; } .tlt-logo__name { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; } .tlt-logo__sub { font-size: 9.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; } .tlt-nav { margin-left: auto; } .tlt-nav__list { list-style: none; display: flex; align-items: center; gap: clamp(16px, 1.7vw, 28px); margin: 0; padding: 0; } .tlt-nav__list a { position: relative; display: inline-block; padding: 8px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; } .tlt-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .tlt-nav__list a:hover::after, .tlt-nav__list a[aria-current="page"]::after, .tlt-nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; } .tlt-header__actions { display: flex; align-items: center; gap: 14px; } .tlt-header__account { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--radius); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); } .tlt-header__account:hover { background: var(--ink); color: var(--white); } .tlt-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center; } .tlt-burger__lines { position: relative; width: 20px; height: 10px; display: block; } .tlt-burger__lines span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); } .tlt-burger__lines span:first-child { top: 0; } .tlt-burger__lines span:last-child { top: 8.5px; } .tlt-burger[aria-expanded="true"] .tlt-burger__lines span:first-child { top: 4.25px; transform: rotate(45deg); } .tlt-burger[aria-expanded="true"] .tlt-burger__lines span:last-child { top: 4.25px; transform: rotate(-45deg); } @media (max-width: 1240px) { .tlt-nav { display: none; } .tlt-burger { display: inline-flex; } .tlt-header__actions { margin-left: auto; } } @media (max-width: 560px) { :root { --header-h: 68px; } .tlt-header__account span { display: none; } .tlt-header__account { width: 44px; padding: 0; justify-content: center; border-color: var(--line); } .tlt-logo__name { font-size: 22px; } .tlt-logo__mark { width: 34px; height: 34px; } } /* 6 · Mobile nav ---------------------------------------------------------- */ .tlt-mobile { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--white); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px var(--gutter) 32px; overflow-y: auto; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .admin-bar .tlt-mobile { top: calc(var(--header-h) + 46px); } .tlt-mobile.is-open { opacity: 1; transform: none; } .tlt-mobile[hidden] { display: none; } .tlt-mobile .tlt-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .tlt-mobile .tlt-nav__list li { border-bottom: 1px solid var(--line); } .tlt-mobile .tlt-nav__list a { display: flex; justify-content: space-between; padding: 16px 0; font-family: var(--serif); font-size: clamp(22px, 5.6vw, 28px); font-weight: 500; letter-spacing: -.02em; text-transform: none; line-height: 1.2; } .tlt-mobile .tlt-nav__list a::after { display: none; } .tlt-mobile .tlt-nav__list a[aria-current="page"] { font-weight: 600; } .tlt-mobile__foot { display: grid; gap: 12px; } .tlt-mobile__contact { margin: 12px 0 0; color: var(--ink-2); font-size: 14px; } /* 7 · Hero ---------------------------------------------------------------- */ .tlt-hero { position: relative; padding: clamp(32px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); overflow: hidden; } .tlt-hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: 58%; width: 1px; background: var(--line); } .tlt-hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; } .tlt-hero__copy { grid-column: 1 / span 7; padding-right: clamp(0px, 3vw, 48px); position: relative; z-index: 2; } .tlt-hero__title { font-size: clamp(38px, 5vw, 72px); line-height: 1.04; margin: 0 0 24px; letter-spacing: -.03em; max-width: 13em; text-wrap: balance; } .tlt-hero__line { display: block; } .tlt-hero__text { font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 44ch; margin: 0 0 36px; } .tlt-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .tlt-hero__doors { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 48px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); } .tlt-hero__doors li + li { border-left: 1px solid var(--line); } .tlt-hero__doors a { display: block; padding: 2px 18px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color .2s; } .tlt-hero__doors li:first-child a { padding-left: 0; } .tlt-hero__doors a:hover { color: var(--ink); } .tlt-hero__visual { grid-column: 9 / span 4; position: relative; padding: 0; } .tlt-hero__arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--radius-md) var(--radius-md); background: var(--bg-3); box-shadow: var(--shadow-soft); } .tlt-hero__arch img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transform-origin: 50% 60%; transition: transform 1.6s var(--ease); } .tlt-anim .tlt-hero__arch img { transform: scale(1.2); } .tlt-anim.is-loaded .tlt-hero__arch img { transform: scale(1.12); } .tlt-hero__inset { position: absolute; left: -9%; bottom: 0; width: 40%; background: var(--white); padding: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); } .tlt-hero__inset img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--bg-2); } .tlt-hero__inset figcaption { display: flex; justify-content: space-between; padding: 10px 4px 2px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .tlt-hero__inset figcaption span { color: var(--ink); } .tlt-hero__caption { display: none; position: absolute; right: -6px; top: 18%; margin: 0; writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); } .tlt-hero__caption span { color: var(--ink); margin-bottom: 10px; display: inline-block; } @media (max-width: 1000px) { .tlt-hero::before { display: none; } .tlt-hero__copy { grid-column: 1 / -1; padding: 0; } .tlt-hero__visual { grid-column: 2 / span 10; margin-top: 56px; padding-bottom: 40px; } .tlt-hero__inset { left: -6%; } } @media (max-width: 600px) { .tlt-hero__visual { grid-column: 1 / -1; padding-left: 12%; } .tlt-hero__inset { left: 0; width: 46%; } .tlt-hero__caption { display: none; right: -2px; } .tlt-hero__doors a { padding: 4px 12px; } .tlt-hero__cta .tl-btn { flex: 1 1 auto; } } /* 8 · Sections ------------------------------------------------------------ */ .tlt-section { padding: var(--section) 0; } .tlt-section + .tlt-section { padding-top: 0; } .tlt-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 clamp(32px, 4vw, 56px); flex-wrap: wrap; } .tlt-section-head > div { max-width: 760px; } .tlt-admin-hint { padding: 0 0 40px; } /* 9 · Cards --------------------------------------------------------------- */ .tlt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } @media (max-width: 1000px) { .tlt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tlt-grid { grid-template-columns: 1fr; } } .tlt-card { position: relative; } .tlt-card__link { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); } .tlt-card__link:hover { border-color: var(--n-3); box-shadow: var(--shadow-soft); } .tlt-card__media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-2); } .tlt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .tlt-card__link:hover .tlt-card__media img { transform: scale(1.045); } .tlt-card__tag { position: absolute; left: 14px; top: 14px; padding: 5px 10px; background: var(--white); border: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-radius: var(--radius); } .tlt-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; border-top: 1px solid var(--line); transition: background-color .35s var(--ease); } .tlt-card__link:hover .tlt-card__body { background: var(--bg-1); } .tlt-card__meta { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } .tlt-card__title { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0 0 4px; letter-spacing: -.01em; } .tlt-card__model { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); letter-spacing: .02em; } .tlt-card__desc { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tlt-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .tlt-card__cta .tl-icon { transition: transform .35s var(--ease); } .tlt-card__link:hover .tlt-card__cta .tl-icon { transform: translateX(5px); } /* 10 · Door types --------------------------------------------------------- */ .tlt-doors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); } @media (max-width: 1000px) { .tlt-doors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .tlt-doors__grid { grid-template-columns: 1fr; } } .tlt-door { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); } .tlt-door__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-3); border-radius: 999px 999px var(--radius-md) var(--radius-md); } .tlt-door__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform .9s var(--ease); } .tlt-door:hover .tlt-door__media img { transform: scale(1.24); } .tlt-door__body { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; padding: 20px 2px 0; border-bottom: 1px solid var(--line); padding-bottom: 18px; transition: border-color .3s var(--ease); } .tlt-door:hover .tlt-door__body { border-color: var(--ink); } .tlt-door__num { font-family: var(--serif); font-style: normal; font-size: 13px; color: var(--n-4); } .tlt-door__title { grid-column: 2; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; margin: 0; } .tlt-door__count { grid-column: 2; margin: 6px 0 14px; font-size: 13px; color: var(--ink-2); } .tlt-door__cta { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .tlt-door__cta .tl-icon { transition: transform .35s var(--ease); } .tlt-door:hover .tlt-door__cta .tl-icon { transform: translateX(5px); } /* 11 · Benefits ----------------------------------------------------------- */ .tlt-benefits { border-top: 1px solid var(--line); padding-top: var(--section) !important; } .tlt-benefits__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .tlt-benefits__intro { position: sticky; top: calc(var(--header-h) + 32px); } .tlt-benefits__intro .tlt-h2 { margin-bottom: 24px; } .tlt-benefits__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); } .tlt-benefit { padding: 28px 0 36px; border-top: 1px solid var(--line); } .tlt-benefit__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border: 1px solid var(--n-1); border-radius: 999px 999px 2px 2px; margin-bottom: 20px; color: var(--ink); background: var(--white); transition: background-color .3s var(--ease); } .tlt-benefit:hover .tlt-benefit__icon { background: var(--bg-2); } .tlt-benefit__title { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 8px; } .tlt-benefit p { margin: 0; color: var(--ink-2); font-size: 15px; } @media (max-width: 900px) { .tlt-benefits__grid { grid-template-columns: 1fr; } .tlt-benefits__intro { position: static; } } @media (max-width: 560px) { .tlt-benefits__list { grid-template-columns: 1fr; } } /* 12 · Showcase ----------------------------------------------------------- */ .tlt-showcase { background: var(--bg-2); padding: var(--section) 0; position: relative; overflow: hidden; } .tlt-showcase::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); } .tlt-showcase__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .tlt-showcase__title { font-size: clamp(44px, 5.6vw, 84px); line-height: .98; margin: 0 0 28px; } .tlt-materials { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } .tlt-materials li { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .tlt-swatch { width: 18px; height: 18px; border-radius: 999px 999px 1px 1px; border: 1px solid rgba(34, 34, 34, .08); } .tlt-swatch--oak { background: linear-gradient(135deg, #d8b98f, #b8925f); } .tlt-swatch--walnut { background: linear-gradient(135deg, #7a5539, #4e3322); } .tlt-swatch--travertine { background: linear-gradient(135deg, #efe6d6, #d9cbb3); } .tlt-swatch--concrete { background: linear-gradient(135deg, #c9c6c0, #a7a39c); } .tlt-swatch--black { background: #1e1e1e; } .tlt-showcase__collage { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); } .tlt-showcase__img { position: relative; overflow: hidden; background: var(--white); } .tlt-showcase__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .tlt-showcase__img:hover img { transform: scale(1.04); } .tlt-showcase__img--a { grid-row: 1 / span 2; min-height: 100%; border-radius: 999px 999px var(--radius-md) var(--radius-md); } .tlt-showcase__img--b, .tlt-showcase__img--c { aspect-ratio: 1; } .tlt-showcase__img--a img { transform: scale(1.15); } .tlt-showcase__img--a:hover img { transform: scale(1.19); } .tlt-showcase__img--b, .tlt-showcase__img--c { border-radius: var(--radius-md); } .tlt-showcase__img figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; background: var(--white); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; border-radius: var(--radius); } @media (max-width: 900px) { .tlt-showcase__grid { grid-template-columns: 1fr; } } /* 13 · Series & services -------------------------------------------------- */ .tlt-series { padding-top: var(--section) !important; } .tlt-series__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .tlt-series__list li { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .tlt-series__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 28px 24px; text-decoration: none; color: var(--ink); transition: background-color .3s var(--ease); } .tlt-series__list a:hover { background: var(--bg-1); } .tlt-series__name { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.2; } .tlt-series__count { grid-row: 2; font-size: 13px; color: var(--ink-2); } .tlt-series__list .tl-icon { grid-row: 1 / span 2; grid-column: 2; transition: transform .35s var(--ease); } .tlt-series__list a:hover .tl-icon { transform: translateX(5px); } @media (max-width: 520px) { .tlt-series__list { grid-template-columns: 1fr; } .tlt-series__list a { padding: 22px 18px; } } .tlt-services__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); } .tlt-service { padding: 28px 0 36px; border-top: 1px solid var(--ink); } .tlt-service__num { font-family: var(--serif); font-style: normal; color: var(--n-4); font-size: 20px; } .tlt-service__title { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 8px 0 10px; } .tlt-service p { margin: 0; color: var(--ink-2); } @media (max-width: 900px) { .tlt-services__list { grid-template-columns: 1fr; } } /* 14 · Reviews ------------------------------------------------------------ */ .tlt-reviews { border-top: 1px solid var(--line); padding-top: var(--section) !important; } .tlt-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } @media (max-width: 900px) { .tlt-reviews__grid { grid-template-columns: 1fr; } } .tlt-review { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); } .tlt-review__stars { margin: 0 0 18px; letter-spacing: .2em; color: var(--ink); font-size: 14px; } .tlt-review__empty { color: var(--n-1); } .tlt-review__text { margin: 0 0 24px; font-size: 17px; line-height: 1.6; } .tlt-review__text p { margin: 0; } .tlt-review__by { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .tlt-review__by time { color: var(--ink-2); font-weight: 500; } .tlt-reviews__empty { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 26em; margin: 0; } .tlt-reviews__write { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: clamp(24px, 3vw, 40px); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); align-items: start; } .tlt-reviews__signin { display: flex; align-items: center; height: 100%; } @media (max-width: 800px) { .tlt-reviews__write { grid-template-columns: 1fr; } } .tlt-stars { border: 0; padding: 0; margin: 0 0 16px; } .tlt-stars legend { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; padding: 0; } .tlt-stars__group { display: inline-flex; flex-direction: row-reverse; gap: 2px; } .tlt-stars__group input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tlt-stars__group label { cursor: pointer; font-size: 28px; line-height: 1; color: var(--n-1); padding: 2px; transition: color .15s; } .tlt-stars__group input:checked ~ label, .tlt-stars__group label:hover, .tlt-stars__group label:hover ~ label { color: var(--ink); } .tlt-stars__group input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 1px; } /* 15 · CTA ---------------------------------------------------------------- */ .tlt-cta { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--line); background: var(--white); } .tlt-cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .tlt-cta__title { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; margin: 0 0 16px; max-width: 14em; } .tlt-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* 16 · Footer ------------------------------------------------------------- */ .tlt-footer { background: var(--bg-1); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 96px) 0 28px; font-size: 15px; } .tlt-footer__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); } .tlt-footer__statement { font-size: 17px; font-weight: 500; line-height: 1.5; margin: 24px 0 28px; max-width: 13em; } .tlt-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 32px; } .tlt-footer__title { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 6px 0 18px; color: var(--ink); } .tlt-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .tlt-footer__col a { text-decoration: none; color: var(--ink-2); transition: color .2s; } .tlt-footer__col a:hover { color: var(--ink); text-decoration: underline; } .tlt-footer__address { display: grid; gap: 12px; margin-bottom: 20px; color: var(--ink-2); } .tlt-footer__address > * { display: flex; gap: 10px; align-items: flex-start; } .tlt-footer__address .tl-icon { flex: none; margin-top: 4px; color: var(--ink); } .tlt-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); } .tlt-footer__bottom p { margin: 0; } .tlt-footer__legal { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; } .tlt-footer__legal a { color: var(--ink-2); } @media (max-width: 900px) { .tlt-footer__top { grid-template-columns: 1fr; } .tlt-footer__cols { grid-template-columns: 1fr 1fr; } .tlt-footer__cols > :last-child { grid-column: 1 / -1; } } /* 17 · Modals (native ) ------------------------------------------- */ .tlt-modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; overflow: hidden; color: var(--ink); } .tlt-modal[open] { display: flex; align-items: center; justify-content: center; } .tlt-modal::backdrop { background: rgba(34, 34, 34, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .tlt-modal__frame { position: relative; width: calc(100% - 32px); max-width: 760px; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 40px 90px -40px rgba(34, 34, 34, .35); animation: tlt-pop .35s var(--ease); } .tlt-modal--product .tlt-modal__frame { max-width: 1120px; } @keyframes tlt-pop { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .tlt-modal__frame { animation: none; } } .tlt-modal__close { position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 3; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background-color .2s; } .tlt-modal__close:hover { border-color: var(--ink); background: var(--bg-1); } .tlt-modal__body { padding: clamp(28px, 4vw, 48px); } .tlt-modal__title { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; margin: 0 0 28px; padding-right: 48px; } @media (max-width: 700px) { .tlt-modal__frame { width: 100%; max-width: none !important; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; } } /* Product modal + page content */ .tlt-pm { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 560px; } .tlt-pm__gallery { background: var(--bg-2); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .tlt-pm__stage { aspect-ratio: 1; overflow: hidden; background: var(--bg-3); border-radius: var(--radius-md); } .tlt-pm__stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease); } .tlt-pm.is-loading .tlt-pm__stage img { opacity: .25; } .tlt-pm__thumbs, .tlt-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .tlt-pm__thumbs button, .tlt-gallery__thumb { width: 68px; height: 68px; padding: 0; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); cursor: pointer; overflow: hidden; transition: border-color .2s; } .tlt-pm__thumbs button[aria-pressed="true"], .tlt-gallery__thumb[aria-pressed="true"] { border-color: var(--ink); } .tlt-pm__thumbs img, .tlt-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .tlt-pm__info { padding: clamp(28px, 3.4vw, 48px); padding-top: 56px; } .tlt-pm__title, .tlt-product__title { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; margin: 0 0 6px; letter-spacing: -.02em; } .tlt-pm__model { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; letter-spacing: .04em; } .tlt-pm__price { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; letter-spacing: .04em; } .tlt-pm__desc { color: var(--ink-2); font-size: 15.5px; } .tlt-pm__desc p { margin: 0 0 1em; } .tlt-pm__h3 { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 26px 0 12px; } .tlt-pm__features ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .tlt-pm__features li { position: relative; padding-left: 20px; font-size: 15px; } .tlt-pm__features li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--ink); } .tlt-pm__specs dl, .tlt-pm__facts { margin: 0; } .tlt-pm__specs dl > div, .tlt-pm__facts > div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; } .tlt-pm__facts { margin-top: 24px; border-top: 1px solid var(--line); } .tlt-pm__specs dt, .tlt-pm__facts dt { color: var(--ink-2); } .tlt-pm__specs dd, .tlt-pm__facts dd { margin: 0; } .tlt-pm__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .tlt-pm__actions .tl-btn--primary { min-width: 200px; } .tlt-pm__back { margin-bottom: 18px; } .tlt-pm__panel[hidden] { display: none; } @media (max-width: 860px) { .tlt-pm { grid-template-columns: 1fr; } .tlt-pm__actions { position: sticky; bottom: 0; z-index: 2; margin: 24px calc(-1 * clamp(28px, 3.4vw, 48px)) 0; padding: 14px clamp(28px, 3.4vw, 48px) 18px; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); } .tlt-pm__actions .tl-btn { flex: 1 1 auto; } .tlt-pm__gallery { padding: 16px; padding-top: 64px; } .tlt-pm__info { padding-top: 28px; } } /* 18 · Product page ------------------------------------------------------- */ .tlt-product { padding: 24px 0 var(--section); } .tlt-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .tlt-crumbs a { color: var(--ink-2); text-decoration: none; } .tlt-crumbs a:hover { color: var(--ink); } .tlt-crumbs [aria-current] { color: var(--ink); } .tlt-product__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .tlt-gallery { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 14px; } .tlt-gallery__stage { aspect-ratio: 1; overflow: hidden; background: var(--bg-2); border-radius: var(--radius-md); border: 1px solid var(--line); } .tlt-gallery__stage img { width: 100%; height: 100%; object-fit: cover; } .tlt-product__info { padding-top: 8px; } .tlt-product__inquire { margin-top: var(--section); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 4vw, 56px); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); } .tlt-product__inquire:focus { outline: none; } .tlt-related { padding-bottom: 0; } @media (max-width: 900px) { .tlt-product__grid, .tlt-product__inquire { grid-template-columns: 1fr; } .tlt-gallery { position: static; } } .tl-inquire__product { display: grid; gap: 2px; padding: 16px 18px; margin-bottom: 22px; background: var(--white); border: 1px solid var(--line); border-left: 2px solid var(--ink); } .tl-inquire__product .tl-eyebrow { margin: 0 0 4px; } .tl-inquire__product strong { font-weight: 600; font-size: 19px; line-height: 1.25; } .tl-inquire__model { color: var(--ink-2); font-size: 14px; } /* 19 · Archive ------------------------------------------------------------ */ .tlt-archive { padding-bottom: var(--section); } .tlt-archive__head { padding: 24px 0 0; margin-bottom: 32px; } .tlt-archive__title-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: 36px; } .tlt-archive__title-row .tlt-display { margin: 0; } .tlt-archive__intro { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 40ch; justify-self: end; } @media (max-width: 800px) { .tlt-archive__title-row { grid-template-columns: 1fr; } .tlt-archive__intro { justify-self: start; } } .tlt-doortabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tlt-doortabs::-webkit-scrollbar { display: none; } .tlt-doortabs a { position: relative; padding: 14px 0; white-space: nowrap; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); transition: color .2s; } .tlt-doortabs a:hover { color: var(--ink); } .tlt-doortabs a[aria-current="page"] { color: var(--ink); } .tlt-doortabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); } .tlt-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-md); margin: 0 0 18px; background: var(--white); } .tlt-filters > * + * { border-left: 1px solid var(--line); } .tlt-filters__search { position: relative; display: flex; align-items: center; } .tlt-filters__search .tl-icon { position: absolute; left: 18px; color: var(--ink-2); pointer-events: none; } .tlt-filters__search input { width: 100%; height: 64px; border: 0; padding: 0 18px 0 48px; background: transparent; font-size: 15px; } .tlt-filters__select { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 10px 18px 8px; } .tlt-filters__select label { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } .tlt-filters__select select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center; padding: 2px 20px 2px 0; font-size: 15px; cursor: pointer; width: 100%; } .tlt-filters input:focus-visible, .tlt-filters select:focus-visible { outline: none; } .tlt-filters > div:focus-within { box-shadow: inset 0 0 0 2px var(--ink); } .tlt-filters__submit { margin: 8px; min-height: 48px; } .tl-js .tlt-filters__submit { display: none; } @media (max-width: 1000px) { .tlt-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tlt-filters__search { grid-column: 1 / -1; border-bottom: 1px solid var(--line); } .tlt-filters > .tlt-filters__select:nth-of-type(2) { border-left: 0; } .tlt-filters__submit { grid-column: 1 / -1; } } @media (max-width: 600px) { .tlt-filters { grid-template-columns: 1fr; } .tlt-filters > * + * { border-left: 0; border-top: 1px solid var(--line); } .tlt-filters__search { border-bottom: 0; } } .tlt-results-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 24px; } .tlt-results-count { margin: 0; font-size: 13px; color: var(--ink-2); letter-spacing: .04em; } .tlt-empty { padding: 64px 0; border-top: 1px solid var(--line); } .tlt-empty .tl-btn { margin: 6px 8px 0 0; } .tlt-pagination { margin-top: 48px; } .tlt-pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; } .tlt-pagination .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); text-decoration: none; font-size: 13px; border-radius: var(--radius); } .tlt-pagination .page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); } .tlt-pagination a.page-numbers:hover { border-color: var(--ink); } /* 20 · Forms -------------------------------------------------------------- */ .tl-form { display: block; } .tl-field { margin: 0 0 18px; min-width: 0; } .tl-field > label, .tl-fieldset legend { display: block; margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .tl-form input[type="text"], .tl-form input[type="email"], .tl-form input[type="tel"], .tl-form input[type="password"], .tl-form input[type="number"], .tl-form input[type="search"], .tl-form select, .tl-form textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--white); border: 1px solid var(--n-1); border-radius: var(--radius); font-size: 15.5px; line-height: 1.4; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .tl-form select { appearance: none; -webkit-appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 40px; } .tl-form textarea { min-height: 140px; resize: vertical; } .tl-form input:hover, .tl-form select:hover, .tl-form textarea:hover { border-color: var(--n-3); } .tl-form input:focus, .tl-form select:focus, .tl-form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(34, 34, 34, .08); } .tl-form ::placeholder { color: #9a9a9a; } .tl-form [aria-invalid="true"] { border-color: #b42318 !important; } .tl-error { margin: 6px 0 0; font-size: 13px; color: #9b1c1c; } .tl-error:empty { display: none; } .tl-help { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); } .tl-grid-2, .tl-grid-3 { display: grid; gap: 0 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .tl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tl-grid-3 .tl-span-2 { grid-column: span 2; } } .tl-fieldset { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; } .tl-fieldset legend { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 14px; margin-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 12px; } .tl-step { font-family: var(--serif); font-style: normal; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--n-4); font-weight: 400; } .tl-check { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; } .tl-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); } .tl-form__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -2px 0 22px; flex-wrap: wrap; } .tl-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; } .tl-fineprint { margin: 0; font-size: 13px; color: var(--ink-2); } .tl-password { position: relative; } .tl-password input { padding-right: 52px !important; } .tl-password__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; color: var(--ink-2); border-radius: var(--radius); } .tl-password__toggle:hover { color: var(--ink); } .tl-eye-off { display: none; } .tl-password__toggle.is-visible .tl-eye { display: none; } .tl-password__toggle.is-visible .tl-eye-off { display: inline-flex; } .tl-eye { display: inline-flex; } .tl-notice { padding: 14px 18px; margin: 0 0 22px; border: 1px solid var(--line); border-left: 2px solid var(--ink); background: var(--bg-1); font-size: 15px; border-radius: var(--radius); } .tl-notice ul { margin: 8px 0 0; padding-left: 18px; } .tl-notice--success { border-left-color: var(--ok); background: var(--ok-bg); } .tl-notice--error { border-left-color: var(--bad); background: var(--bad-bg); } .tl-form-status:focus { outline: none; } .tl-success-panel { display: grid; justify-items: start; gap: 12px; padding: 36px 32px; border: 1px solid var(--line); background: var(--bg-1); border-radius: var(--radius-md); } .tl-success-panel:focus { outline: none; } .tl-success-panel__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 22px; } .tl-success-panel p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.45; } .tl-inline-form { display: inline; margin: 0; } /* 21 · Contact ------------------------------------------------------------ */ .tl-contact-page { padding: clamp(32px, 5vw, 64px) 0 var(--section); } .tl-contact-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .tl-contact-page__intro { position: sticky; top: calc(var(--header-h) + 32px); } .tl-contact-details { margin: 40px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .tl-contact-details > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .tl-contact-details dt { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; } .tl-contact-details dd { margin: 0; } .tl-contact-details a { text-decoration: none; } .tl-contact-details a:hover { text-decoration: underline; } @media (max-width: 900px) { .tl-contact-page__grid { grid-template-columns: 1fr; } .tl-contact-page__intro { position: static; } } .tl-contact__choice { border: 0; padding: 0; margin: 0 0 8px; } .tl-contact__legend { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; padding: 0; color: var(--ink-2); } .tlt-modal .tl-contact__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tl-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .tl-choices { grid-template-columns: 1fr; } } .tl-choice { position: relative; display: block; cursor: pointer; } .tl-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .tl-choice__body { display: grid; gap: 8px; height: 100%; padding: 26px 24px 22px; border: 1px solid var(--n-1); border-radius: var(--radius-md); background: var(--white); transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); } .tl-choice:hover .tl-choice__body { border-color: var(--ink); background: var(--bg-1); } .tl-choice input:checked + .tl-choice__body { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--bg-1); } .tl-choice input:focus-visible + .tl-choice__body { outline: 2px solid var(--ink); outline-offset: 3px; } .tl-choice__num { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-2); } .tl-choice__title { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; } .tl-choice__text { font-size: 14.5px; color: var(--ink-2); } .tl-choice__arrow { margin-top: 8px; transition: transform .3s var(--ease); } .tl-choice:hover .tl-choice__arrow { transform: translateX(5px); } .tl-contact__fields { margin-top: 28px; } .tl-contact__head { display: none; } .tl-js .tl-contact.has-type .tl-contact__choice { display: none; } .tl-js .tl-contact.has-type .tl-contact__fields { margin-top: 0; } .tl-js .tl-contact.has-type .tl-contact__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 24px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); } .tl-contact__head .tl-eyebrow { margin: 0; color: var(--ink); } .tl-js .tl-contact:not(.is-product) .tl-contact__product-only { display: none; } .tl-contact__fields[hidden] { display: none; } /* 22 · Auth --------------------------------------------------------------- */ .tl-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); } .tl-auth__panel { position: relative; background: var(--bg-2); overflow: hidden; display: flex; align-items: flex-end; padding: clamp(32px, 5vw, 72px); } .tl-auth__panel::before { content: ""; position: absolute; right: 10%; top: 12%; width: 46%; aspect-ratio: 3 / 4.4; border-radius: 999px 999px 0 0; background: var(--bg-3); border: 1px solid var(--n-1); } .tl-auth__panel::after { content: ""; position: absolute; right: calc(10% + 46% * .78); top: calc(12% + 46% * .9); width: 10px; height: 64px; background: #1e1e1e; border-radius: 2px; } .tl-auth__panel-inner { position: relative; z-index: 1; max-width: 26em; } .tl-auth__quote { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; margin: 0; letter-spacing: -.02em; } .tl-auth__form { width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter); align-self: center; } .tl-auth--narrow, .tl-auth--wide { grid-template-columns: 1fr; min-height: 0; } .tl-auth--wide .tl-auth__form { max-width: 880px; } .tl-auth__switch { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); } .tl-auth__switch a { color: var(--ink); font-weight: 600; } @media (max-width: 860px) { .tl-auth { grid-template-columns: 1fr; } .tl-auth__panel { display: none; } } /* 23 · Account ------------------------------------------------------------ */ .tl-account { padding: clamp(28px, 4vw, 56px) 0 var(--section); } .tl-account__header { margin-bottom: clamp(24px, 3vw, 40px); } .tl-account__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .tl-account__nav { position: sticky; top: calc(var(--header-h) + 24px); } .tl-account__nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .tl-account__nav li { border-bottom: 1px solid var(--line); } .tl-account__nav a { display: flex; align-items: center; gap: 12px; padding: 14px 4px 14px 14px; text-decoration: none; font-size: 15px; color: var(--ink-2); border-left: 2px solid transparent; transition: color .2s, border-color .2s, background-color .2s; } .tl-account__nav a:hover { color: var(--ink); background: var(--bg-1); } .tl-account__nav a.is-current { color: var(--ink); font-weight: 600; border-left-color: var(--ink); } @media (max-width: 900px) { .tl-account__grid { grid-template-columns: 1fr; } .tl-account__nav { position: static; margin: 0 calc(var(--gutter) * -1); overflow-x: auto; scrollbar-width: none; } .tl-account__nav ul { display: flex; border: 0; border-bottom: 1px solid var(--line); padding: 0 var(--gutter); width: max-content; min-width: 100%; } .tl-account__nav li { border: 0; } .tl-account__nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 12px 14px; white-space: nowrap; font-size: 14px; } .tl-account__nav a.is-current { border-bottom-color: var(--ink); } } .tl-panel { border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(20px, 2.6vw, 32px); margin: 0 0 20px; background: var(--white); } .tl-panel--attention { border-left: 2px solid var(--warn); background: var(--warn-bg); } .tl-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; } .tl-panel__title { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.3; margin: 0; } .tl-empty { color: var(--ink-2); margin: 0 0 16px; } .tl-list { margin: 10px 0 0; padding-left: 18px; } .tl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } @media (max-width: 640px) { .tl-stats { grid-template-columns: 1fr; } } .tl-stat-tile { display: grid; gap: 2px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); transition: border-color .25s var(--ease), background-color .25s var(--ease); } .tl-stat-tile:hover { border-color: var(--n-3); background: var(--bg-1); } .tl-stat-tile__num { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -.03em; } .tl-stat-tile__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; } .tl-stat-tile__meta { font-size: 13px; color: var(--ink-2); } .tl-table { width: 100%; border-collapse: collapse; font-size: 15px; } .tl-table th, .tl-table td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .tl-table thead th { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); padding-top: 0; } .tl-table caption { text-align: left; margin: 0 0 10px; } @media (max-width: 640px) { .tl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tl-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); } .tl-table th, .tl-table td { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; } .tl-table [data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } } .tl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; background: var(--bg-3); color: #444; } .tl-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tl-badge--active, .tl-badge--completed { background: var(--ok-bg); color: var(--ok); } .tl-badge--expiring, .tl-badge--scheduled { background: var(--warn-bg); color: var(--warn); } .tl-badge--expired { background: var(--bad-bg); color: var(--bad); } .tl-badge--void { background: var(--ink); color: var(--white); } .tl-badge--confirmed { background: var(--info-bg); color: var(--info); } .tl-order__head, .tl-warranty__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .tl-order__head .tl-eyebrow, .tl-warranty__head .tl-eyebrow { margin-bottom: 6px; } .tl-progress { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 24px; padding: 0; counter-reset: s; } .tl-progress li { position: relative; display: grid; justify-items: start; gap: 10px; padding-top: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); } .tl-progress li::before { content: ""; position: absolute; top: 5px; left: 12px; right: 0; height: 1px; background: var(--line); } .tl-progress li:last-child::before { display: none; } .tl-progress li.is-done::before { background: var(--ink); } .tl-progress li.is-current::before { background: var(--line); } .tl-progress__dot { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--n-2); background: var(--white); } .tl-progress li.is-done { color: var(--ink); } .tl-progress li.is-done .tl-progress__dot { background: var(--ink); border-color: var(--ink); } .tl-progress li.is-current .tl-progress__dot { box-shadow: 0 0 0 4px var(--bg-3); } @media (max-width: 560px) { .tl-progress__label { font-size: 9.5px; letter-spacing: .06em; } } .tl-order__items { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .tl-order__items li { display: flex; align-items: center; gap: 14px; } .tl-order__thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); } .tl-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; margin: 0 0 18px; padding: 18px 0 0; border-top: 1px solid var(--line); } .tl-meta-grid dt, .tl-meta-list dt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; } .tl-meta-grid dd, .tl-meta-list dd { margin: 0; font-size: 15px; } .tl-meta-grid__wide { grid-column: 1 / -1; } @media (max-width: 700px) { .tl-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tl-device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1100px) { .tl-device-grid { grid-template-columns: 1fr; } } .tl-device { display: grid; grid-template-columns: 180px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .tl-device__media { background: var(--bg-2); } .tl-device__media img { width: 100%; height: 100%; object-fit: cover; } .tl-device__body { padding: 22px; } .tl-device__body .tl-eyebrow { margin-bottom: 4px; } .tl-device__title { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0 0 14px; } .tl-meta-list { margin: 0 0 16px; display: grid; gap: 8px; } .tl-meta-list > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .tl-meta-list dt { margin: 0; padding-top: 3px; } .tl-meta-list dd { text-align: right; } @media (max-width: 520px) { .tl-device { grid-template-columns: 1fr; } .tl-device__media { aspect-ratio: 16 / 10; } } .tl-coverage { margin: 8px 0 20px; } .tl-coverage th[scope="row"] { font-weight: 600; } .tl-warranty__actions { display: flex; gap: 12px; flex-wrap: wrap; } .tl-conditions summary { cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .tl-conditions ul { columns: 2; column-gap: 32px; margin: 18px 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); } .tl-conditions li { break-inside: avoid; margin-bottom: 6px; } @media (max-width: 640px) { .tl-conditions ul { columns: 1; } } /* 24 · Certificate -------------------------------------------------------- */ .tl-page--certificate { background: var(--bg-1); } .tl-cert-wrap { padding-top: 28px; padding-bottom: var(--section); } .tl-cert-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 920px; margin: 0 auto 20px; } .tl-cert-tools__actions { display: flex; gap: 10px; flex-wrap: wrap; } .tl-cert { position: relative; max-width: 920px; margin: 0 auto; background: var(--white); padding: clamp(28px, 5vw, 72px); border: 1px solid var(--line); box-shadow: var(--shadow-soft); } .tl-cert::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--n-1); pointer-events: none; } .tl-cert__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .tl-cert__brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; } .tl-cert__logo { width: 40px; height: 40px; object-fit: contain; } .tl-cert__no { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .tl-cert__no strong { color: var(--ink); } .tl-cert__title { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; text-align: center; margin: clamp(28px, 4vw, 48px) 0; letter-spacing: -.01em; } .tl-cert__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0 0 36px; } .tl-cert__details > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); } .tl-cert__details dt { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; } .tl-cert__details dd { margin: 0; text-align: right; font-weight: 500; } @media (max-width: 640px) { .tl-cert__details { grid-template-columns: 1fr; } } .tl-cert__section-title { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 14px; } .tl-cert__coverage { padding: 24px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 32px; } .tl-cert__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .tl-cert__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .tl-cert__line:last-child { border-bottom: 0; } .tl-cert__comp { font-weight: 600; font-size: 16px; letter-spacing: .08em; min-width: 9.5em; } .tl-cert__sep { color: var(--n-3); } .tl-cert__exp { font-size: 15px; } .tl-cert__note { flex-basis: 100%; font-size: 13px; color: var(--ink-2); } .tl-cert__void { margin: 12px 0 0; color: var(--bad); font-weight: 600; } .tl-cert__conditions ul { columns: 2; column-gap: 32px; margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); } .tl-cert__conditions li { break-inside: avoid; margin-bottom: 4px; } @media (max-width: 640px) { .tl-cert__conditions ul { columns: 1; } } .tl-cert__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); } /* 25 · Pages -------------------------------------------------------------- */ .tlt-page { padding: clamp(32px, 5vw, 64px) 0 var(--section); } .tlt-prose-wrap { max-width: 860px; } .tlt-page__head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .tlt-prose { font-size: 17px; line-height: 1.75; color: #333; } .tlt-prose h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.1; margin: 48px 0 16px; color: var(--ink); } .tlt-prose h3 { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 32px 0 12px; } .tlt-prose a { color: var(--ink); } .tlt-404 { padding: clamp(64px, 12vw, 160px) 0; } .tlt-404__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } /* 26 · Motion ------------------------------------------------------------- */ .tlt-anim [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .tlt-anim [data-reveal].is-in { opacity: 1; transform: none; } .tlt-anim .tlt-hero__copy > * { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .tlt-anim.is-loaded .tlt-hero__copy > * { opacity: 1; transform: none; } .tlt-anim.is-loaded .tlt-hero__copy > :nth-child(2) { transition-delay: .08s; } .tlt-anim.is-loaded .tlt-hero__copy > :nth-child(3) { transition-delay: .16s; } .tlt-anim.is-loaded .tlt-hero__copy > :nth-child(4) { transition-delay: .24s; } .tlt-anim.is-loaded .tlt-hero__copy > :nth-child(5) { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .tlt-anim [data-reveal], .tlt-anim .tlt-hero__copy > * { opacity: 1 !important; transform: none !important; } } /* 27 · Print (warranty certificate) -------------------------------------- */ @media print { @page { margin: 14mm; } body { background: #fff; } .tlt-header, .tlt-footer, .tlt-mobile, .tlt-skip, .tl-cert-tools, .tlt-modal, #wpadminbar { display: none !important; } .tl-page--certificate { background: #fff; } .tl-cert-wrap { padding: 0; } .tl-cert { box-shadow: none; border: 1px solid #222; max-width: none; } .tl-badge { border: 1px solid currentColor; -webkit-print-color-adjust: exact; print-color-adjust: exact; } a { text-decoration: none; } } /* ========================================================================== 28 · Homepage v2 sections (hero points, service areas, categories, steps, trust, FAQ, closing + visit), messaging links, sign-in image ========================================================================== */ .tlt-hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 44px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); } .tlt-hero__points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); } .tlt-hero__points .tl-icon { color: var(--ok); } .tlt-areas { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-1); } .tlt-areas__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 22px; } .tlt-areas__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .tlt-areas__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .tlt-areas__list li { padding: 8px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; font-weight: 500; } .tlt-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .tlt-cat--all { grid-column: span 2; } @media (max-width: 1000px) { .tlt-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tlt-cats__grid { grid-template-columns: 1fr; } .tlt-cat--all { grid-column: auto; } } .tlt-cat__media--empty { display: flex; align-items: center; justify-content: center; background: var(--bg-3); } .tlt-cat__media--empty span { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--n-4); } .tlt-cat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--ink); background: var(--white); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .tlt-cat:hover { border-color: var(--n-3); box-shadow: var(--shadow-soft); } .tlt-cat__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); } .tlt-cat__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.35); transition: transform .8s var(--ease); } .tlt-cat:hover .tlt-cat__media img { transform: scale(1.42); } .tlt-cat__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 22px 22px; } .tlt-cat__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .tlt-cat__desc { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; } .tlt-cat__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .tlt-cat__cta .tl-icon { transition: transform .3s var(--ease); } .tlt-cat:hover .tlt-cat__cta .tl-icon { transform: translateX(5px); } .tlt-cat--all { background: var(--ink); border-color: var(--ink); color: var(--white); justify-content: flex-end; min-height: 220px; } .tlt-cat--all .tlt-cat__title { font-size: 26px; } .tlt-cat--all .tlt-cat__desc { color: #cfcfcf; } .tlt-cat--all:hover { border-color: #000; background: #000; } .tlt-steps { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: var(--section) !important; } .tlt-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .tlt-step { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); } .tlt-step__num { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--white); font-weight: 600; font-size: 15px; margin-bottom: 18px; } .tlt-step__title { margin: 0 0 8px; font-size: 19px; font-weight: 600; } .tlt-step p { margin: 0; color: var(--ink-2); font-size: 15px; } @media (max-width: 860px) { .tlt-steps__list { grid-template-columns: 1fr; } } .tlt-featured { padding-top: var(--section) !important; } .tlt-card__tag--badge { background: var(--ink); color: var(--white); border-color: var(--ink); } .tlt-trust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tlt-trust__item { padding: 30px 26px 32px; } .tlt-trust__item + .tlt-trust__item { border-left: 1px solid var(--line); } .tlt-trust__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--n-1); border-radius: 50%; margin-bottom: 16px; } .tlt-trust__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; } .tlt-trust__item p { margin: 0; color: var(--ink-2); font-size: 14.5px; } @media (max-width: 1000px) { .tlt-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tlt-trust__item:nth-child(3) { border-left: 0; } .tlt-trust__item:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (max-width: 560px) { .tlt-trust__list { grid-template-columns: 1fr; } .tlt-trust__item + .tlt-trust__item { border-left: 0; border-top: 1px solid var(--line); } .tlt-trust__item { padding-inline: 4px; } } .tlt-faq { border-top: 1px solid var(--line); padding-top: var(--section) !important; } .tlt-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; } .tlt-faq__list { border-top: 1px solid var(--line); } .tlt-faq__item { border-bottom: 1px solid var(--line); } .tlt-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; } .tlt-faq__item summary::-webkit-details-marker { display: none; } .tlt-faq__icon { position: relative; flex: none; width: 14px; height: 14px; } .tlt-faq__icon::before, .tlt-faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); } .tlt-faq__icon::after { transform: rotate(90deg); } .tlt-faq__item[open] .tlt-faq__icon::after { transform: rotate(0); } .tlt-faq__answer { padding: 0 0 22px; color: var(--ink-2); max-width: 62ch; } .tlt-faq__answer p { margin: 0 0 .8em; } @media (max-width: 860px) { .tlt-faq__grid { grid-template-columns: 1fr; } } .tlt-cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .tlt-cta__copy .tlt-lead { margin-bottom: 28px; } .tlt-visit { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-1); } .tlt-visit__title { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .tlt-visit__list { margin: 0; } .tlt-visit__list > div { padding: 12px 0; border-top: 1px solid var(--line); } .tlt-visit__list dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; } .tlt-visit__list dd { margin: 0; font-size: 15px; } .tlt-visit__list a { text-decoration: none; } .tlt-visit__list a:hover { text-decoration: underline; } @media (max-width: 860px) { .tlt-cta__grid { grid-template-columns: 1fr; } } .tlt-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .tlt-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tlt-footer__cols > :last-child { grid-column: auto; } } @media (max-width: 480px) { .tlt-footer__cols { grid-template-columns: 1fr; } } /* Messaging (Viber / WhatsApp) */ .tl-messaging { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .tl-messaging__intro { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); } .tl-messaging__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; } .tl-messaging__link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: 14px; transition: border-color .2s, background-color .2s; } .tl-messaging__link:hover { border-color: var(--ink); background: var(--bg-1); } .tl-messaging__label { font-weight: 600; } .tl-messaging__link--viber .tl-icon { color: #7360f2; } .tl-messaging__link--whatsapp .tl-icon { color: #1f9d55; } /* Sign-in image */ .tl-auth__panel { padding: 0; align-items: stretch; } .tl-auth__panel::before, .tl-auth__panel::after { display: none; } .tl-auth__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; } .tl-auth__panel-inner { position: relative; align-self: flex-end; margin: clamp(24px, 4vw, 48px); padding: 22px 24px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: var(--radius-md); max-width: 26em; } .tl-auth__panel-inner .tl-eyebrow { margin-bottom: 8px; } .tl-auth__panel .tl-auth__quote { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; } .tl-auth__panel-inner { margin-left: auto; } /* Checkbox labels (consent) read as normal sentences, not form-label caps */ .tl-field > label.tl-check { display: inline-flex; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400; margin: 0; } .tl-check a { color: var(--ink); font-weight: 600; } /* Create-account page: image panel + form */ .tl-auth--register { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .tl-auth--register .tl-auth__form { max-width: 820px; } .tl-auth--register .tl-auth__panel { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); align-self: start; } .admin-bar .tl-auth--register .tl-auth__panel { top: calc(var(--header-h) + 32px); height: calc(100vh - var(--header-h) - 32px); } @media (max-width: 1000px) { .tl-auth--register { grid-template-columns: 1fr; } .tl-auth--register .tl-auth__panel { display: none; } } /* My Devices - list rows with product image */ .tl-device-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .tl-device-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); } .tl-device-row__media { width: 96px; height: 96px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-2); } .tl-device-row__media img { width: 100%; height: 100%; object-fit: cover; } .tl-device-row__main .tl-eyebrow { margin-bottom: 4px; } .tl-device-row__main .tl-device__title { margin: 0 0 10px; } .tl-device-row__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; } .tl-device-row__meta dt { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .tl-device-row__meta dd { margin: 0; font-size: 14.5px; } .tl-device-row__plan { flex-basis: 100%; } .tl-device-row__side { display: grid; justify-items: end; gap: 12px; } @media (max-width: 700px) { .tl-device-row { grid-template-columns: 72px minmax(0, 1fr); align-items: start; } .tl-device-row__media { width: 72px; height: 72px; } .tl-device-row__side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } } /* Warranty card image + policy text */ .tl-warranty__head { align-items: center; } .tl-warranty__media { flex: none; width: 76px; height: 76px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-2); } .tl-warranty__media img { width: 100%; height: 100%; object-fit: cover; } .tl-warranty__heading { flex: 1; min-width: 0; } .tl-policy { font-size: 14px; color: var(--ink-2); line-height: 1.65; } .tl-policy h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 24px 0 8px; } .tl-policy h3 { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 16px 0 6px; } .tl-policy p { margin: 0 0 10px; } .tl-policy ul { margin: 0 0 12px; padding-left: 18px; } .tl-cert .tl-policy { font-size: 13.5px; max-width: 72ch; } .tl-policy, .tl-policy ul, .tl-conditions .tl-policy ul, .tl-cert__conditions .tl-policy ul { columns: auto !important; column-count: 1 !important; } /* Reviews inside an Elementor section: no extra top border/spacing */ .tlt-reviews--embed { border-top: 0 !important; padding-top: 0 !important; } /* ========================================================================== 30 · Premium dark skin - near-black header / hero / bands / footer, warm ivory content sections, white cards, cream accents on dark. ========================================================================== */ :root { --night: #0e0d0c; --night-2: #151311; --night-3: #1e1b18; --cream: #e8d4b3; --cream-2: #f2e6d1; --ivory: #f5f1ea; --on-dark: #f4efe8; --on-dark-2: #b8afa3; --line-dark: rgba(255, 255, 255, .12); --ink: #171513; } body { background: var(--ivory); } /* Header */ .tlt-header { background: rgba(14, 13, 12, .97); border-bottom: 1px solid var(--line-dark); } .tlt-header.is-scrolled { border-bottom-color: var(--line-dark); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8); } .tlt-header .tlt-logo, .tlt-footer .tlt-logo { color: var(--on-dark); } .tlt-header .tlt-logo__sub, .tlt-footer .tlt-logo__sub { color: var(--on-dark-2); } .tlt-nav__list a { color: var(--on-dark); } .tlt-nav__list a::after { background: var(--cream); } .tlt-header__account { color: var(--on-dark); border-color: rgba(255, 255, 255, .35); } .tlt-header__account:hover { background: var(--cream); border-color: var(--cream); color: var(--night); } .tlt-burger { background: transparent; border-color: var(--line-dark); } .tlt-burger__lines span { background: var(--on-dark); } @media (max-width: 560px) { .tlt-header__account { border-color: var(--line-dark); } } /* Mobile / tablet menu */ .tlt-mobile { background: var(--night); color: var(--on-dark); justify-content: flex-start; gap: 28px; } .tlt-mobile .tlt-nav__list li { border-bottom-color: var(--line-dark); } .tlt-mobile .tlt-nav__list a { color: var(--on-dark); font-size: clamp(20px, 5vw, 26px); padding: 14px 0; } .tlt-mobile .tlt-nav__list a[aria-current="page"] { color: var(--cream); } .tlt-mobile__label { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cream); } .tlt-mobile__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tlt-mobile__links a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-dark); border-radius: var(--radius-md); color: var(--on-dark); text-decoration: none; font-size: 14.5px; } .tlt-mobile__links a:hover, .tlt-mobile__links a:focus-visible { border-color: var(--cream); color: var(--cream); } .tlt-mobile__links .tl-icon { color: var(--cream); flex: none; } .tlt-mobile__foot { margin-top: auto; } .tlt-mobile__contact { color: var(--on-dark-2); } .tlt-mobile__contact a { color: var(--on-dark); } @media (max-width: 380px) { .tlt-mobile__links { grid-template-columns: 1fr; } } /* Footer */ .tlt-footer { background: var(--night); border-top: 0; color: var(--on-dark-2); } .tlt-footer__statement { color: var(--on-dark); } .tlt-footer__title { color: var(--on-dark); } .tlt-footer__col a { color: var(--on-dark-2); } .tlt-footer__col a:hover { color: var(--cream); } .tlt-footer__address { color: var(--on-dark-2); } .tlt-footer__address .tl-icon { color: var(--cream); } .tlt-footer__bottom { border-top-color: var(--line-dark); color: var(--on-dark-2); } .tlt-footer__legal a { color: var(--on-dark-2); } .tlt-footer .tl-btn--secondary { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgba(255, 255, 255, .4); } .tlt-footer .tl-btn--secondary:hover { --btn-bg: var(--cream); --btn-fg: var(--night); --btn-bd: var(--cream); } .tlt-footer .tlt-arrow-link { color: var(--on-dark); border-bottom-color: var(--cream); } /* Light pages: white cards on ivory */ .tlt-card__link, .tlt-cat, .tl-panel, .tlt-review, .tl-device, .tl-stat-tile, .tl-choice__body { background: var(--white); } .tl-btn--primary { --btn-bg: var(--night); --btn-bd: var(--night); } .tl-btn--primary:hover { --btn-bg: #2a2622; --btn-bd: #2a2622; } .tl-btn--secondary { --btn-bg: transparent; } .tl-btn--secondary:hover { --btn-bg: var(--white); } .tlt-filters, .tlt-product__inquire, .tl-cert { background: var(--white); } /* Category cards: softer, image-led */ .tlt-cat { border-color: transparent; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -22px rgba(0, 0, 0, .35); } .tlt-cat:hover { border-color: transparent; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 40px -24px rgba(0, 0, 0, .45); transform: translateY(-2px); } .tlt-cat { transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .tlt-cat--all { background: var(--night); } .tlt-cat--all:hover { background: var(--night-3); } .tlt-cat--all .tlt-cat__cta { color: var(--cream); } .tlt-card__link { border-color: transparent; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -22px rgba(0, 0, 0, .35); } .tlt-card__link:hover { border-color: transparent; box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 40px -24px rgba(0, 0, 0, .45); } .tlt-card__body { border-top-color: #efeae2; } .tlt-card__tag--badge { background: var(--night); border-color: var(--night); color: var(--cream); } /* Phones: categories as compact rows (image left, text right) */ @media (max-width: 560px) { .tlt-cat:not(.tlt-cat--all) { flex-direction: row; align-items: stretch; } .tlt-cat:not(.tlt-cat--all) .tlt-cat__media { flex: none; width: 112px; aspect-ratio: auto; } .tlt-cat:not(.tlt-cat--all) .tlt-cat__media img { transform: scale(1.5); } .tlt-cat:not(.tlt-cat--all) .tlt-cat__body { padding: 16px 18px; gap: 4px; } .tlt-cat:not(.tlt-cat--all) .tlt-cat__desc { margin-bottom: 6px; font-size: 13.5px; } .tlt-cat--all { min-height: 0; } } .tlt-header .tlt-logo__mark, .tlt-footer .tlt-logo__mark { filter: brightness(0) invert(1); } .tlt-footer { border-top: 1px solid var(--line-dark); } /* Certificate: aligned toolbar, status message below it, status top-right, coverage grid */ .tl-cert-tools__actions { align-items: center; } .tl-inline-form { display: inline-flex; } .tl-cert-tools .tl-btn { min-height: 52px; } .tl-cert-status { max-width: 920px; margin: 0 auto 16px; } .tl-cert-status:empty, .tl-warranty__status:empty { display: none; } .tl-cert-status .tl-notice, .tl-warranty__status .tl-notice { margin: 0; } .tl-warranty__status { margin: 0 0 12px; } .tl-cert__head { align-items: flex-start; } .tl-cert__meta { display: grid; justify-items: end; gap: 10px; } .tl-cert__status { margin: 0; display: flex; align-items: center; gap: 10px; } .tl-cert__status-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .tl-cert__line { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 6px; } .tl-cert__sep { display: none; } .tl-cert__line .tl-badge { justify-self: end; } .tl-cert__note { grid-column: 1 / -1; } @media (max-width: 640px) { .tl-cert__meta { justify-items: start; } .tl-cert__line { grid-template-columns: minmax(0, 1fr) auto; } .tl-cert__exp { grid-column: 1 / -1; grid-row: 2; } .tl-cert-tools__actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); } .tl-cert-tools__actions .tl-btn, .tl-cert-tools__actions .tl-inline-form { width: 100%; } .tl-cert-tools__actions .tl-inline-form .tl-btn { width: 100%; justify-content: center; } } /* Sign-in / create-account image panel: text sits on a dark fade over the photo (matches the hero) */ .tl-auth__panel { background: var(--night); } .tl-auth__panel::after { display: block; content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: linear-gradient(180deg, rgba(14, 13, 12, 0) 40%, rgba(14, 13, 12, .55) 68%, rgba(14, 13, 12, .92) 100%); pointer-events: none; } .tl-auth__panel-inner { z-index: 2; margin: 0; padding: clamp(28px, 4vw, 56px); max-width: 32em; background: none; border: 0; border-radius: 0; } .tl-auth__panel-inner .tl-eyebrow { color: var(--cream); margin-bottom: 12px; } .tl-auth__panel .tl-auth__quote { color: var(--on-dark); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; } /* Wordmark logo (house + THREE LINKS SMART HOME) */ .tlt-logo { gap: 0; } .tlt-logo__img { display: block; height: 44px; width: auto; max-width: 100%; filter: none !important; } .tlt-footer .tlt-logo__img { height: 56px; } @media (max-width: 900px) { .tlt-logo__img { height: 36px; } } .tl-cert__brand .tl-cert__wordmark { display: block; height: 56px; width: auto; } /* Gallery: customer and installation photos */ .tlt-chip { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; cursor: pointer; } .tlt-chip.is-active, .tlt-chip:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .tlt-gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; } .tlt-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .tlt-gallery__cell[hidden] { display: none; } .tlt-gallery__item { margin: 0; } .tlt-gallery__open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-2, #eee); cursor: zoom-in; overflow: hidden; border-radius: var(--radius-md, 6px); aspect-ratio: 4 / 3; } .tlt-gallery__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .tlt-gallery__open:hover .tlt-gallery__img, .tlt-gallery__open:focus-visible .tlt-gallery__img { transform: scale(1.04); } .tlt-gallery__count { z-index: 1; position: absolute; right: 12px; bottom: 12px; background: rgba(14, 13, 12, .78); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; } .tlt-gallery__cap { display: grid; gap: 4px; padding: 14px 2px 0; } .tlt-gallery__title { font-weight: 600; font-size: 16px; color: var(--ink); } .tlt-gallery__meta { font-size: 13px; color: var(--ink-2, #666); } .tlt-gallery__text { font-size: 14px; line-height: 1.55; color: #444; } .tlt-gallery__product { justify-self: start; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-underline-offset: 4px; } .tlt-gallery__empty { color: var(--ink-2, #666); } .tlt-page .tlt-prose:has(.tlt-gallery) { max-width: none; } /* Homepage: featured customer photos (first one larger when there are three) */ .tlt-gallery__grid--featured[data-count="3"] { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; } .tlt-gallery__grid--featured[data-count="3"] .tlt-gallery__cell:first-child { grid-row: span 2; display: flex; } .tlt-gallery__grid--featured[data-count="3"] .tlt-gallery__cell:first-child .tlt-gallery__item { display: flex; flex-direction: column; flex: 1; } .tlt-gallery__grid--featured[data-count="3"] .tlt-gallery__cell:first-child .tlt-gallery__open { aspect-ratio: auto; flex: 1; min-height: 320px; } .tlt-gallery__grid--featured[data-count="1"] { grid-template-columns: 1fr; } .tlt-gallery__grid--featured[data-count="1"] .tlt-gallery__open { aspect-ratio: 16 / 9; } .tlt-gallery__grid--featured[data-count="2"] { grid-template-columns: 1fr 1fr; } .tle-dark .tlt-gallery__title, .tle-dark .tlt-gallery__product { color: var(--on-dark); } .tle-dark .tlt-gallery__meta, .tle-dark .tlt-gallery__text { color: var(--on-dark-2); } /* Hide the homepage customer section until a photo is featured */ .tle-customers-sec:not(:has(.tlt-featured-customers)) { display: none !important; } @media (max-width: 1024px) { .tlt-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .tlt-gallery__grid, .tlt-gallery__grid--featured[data-count] { grid-template-columns: 1fr; } .tlt-gallery__grid--featured[data-count="3"] .tlt-gallery__cell:first-child { grid-row: auto; } .tlt-gallery__grid--featured[data-count="3"] .tlt-gallery__cell:first-child .tlt-gallery__open { flex: none; min-height: 0; aspect-ratio: 4 / 3; } } /* Photo viewer */ .tlt-lightbox::backdrop { background: rgba(14, 13, 12, .92); } .tlt-lightbox__frame { position: relative; display: grid; justify-items: center; gap: 14px; width: min(1200px, 100vw); padding: 56px 64px 24px; } .tlt-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 4px; } .tlt-lightbox__cap { margin: 0; color: #f4efe8; font-size: 14px; text-align: center; } .tlt-lightbox__pos { color: #b8afa3; margin-left: 8px; } .tlt-lightbox__close, .tlt-lightbox__nav { position: absolute; border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; } .tlt-lightbox__close { top: 0; right: 8px; } .tlt-lightbox__nav { top: 50%; transform: translateY(-50%); } .tlt-lightbox__nav--prev { left: 4px; } .tlt-lightbox__nav--next { right: 4px; } .tlt-lightbox.is-single .tlt-lightbox__nav { display: none; } .tlt-lightbox__close:hover, .tlt-lightbox__nav:hover { background: rgba(255, 255, 255, .22); } @media (max-width: 640px) { .tlt-lightbox__frame { padding: 56px 12px 16px; } .tlt-lightbox__nav { top: auto; bottom: -8px; transform: none; } } .tlt-lightbox__img { transition: opacity .15s ease; } .tlt-lightbox.is-loading .tlt-lightbox__img { opacity: .85; } .tlt-lightbox.is-loading .tlt-lightbox__img:not([src]) { opacity: 0; } /* Footer: five link columns (Company, Shop, Account, Showroom, Contact) */ .tlt-footer__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } @media (max-width: 1600px) { .tlt-footer__top { grid-template-columns: 1fr; } .tlt-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; } .tlt-footer__brand .tlt-footer__statement { max-width: 32em; margin: 0; } } .tlt-footer__col, .tlt-footer__address a { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 1100px) { .tlt-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .tlt-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .tlt-footer__cols { grid-template-columns: 1fr; } } /* Homepage reviews: 1-3 reviews sit in a row; more become a quiet horizontal slider. */ .tlt-reviews__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 680px; } .tlt-reviews__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .tlt-reviews__grid[data-count] { grid-template-columns: 1fr; } } .tlt-rslider { position: relative; } .tlt-rslider__nav { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 16px; } .tlt-rslider__nav[hidden] { display: none; } .tlt-rslider__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md, 6px); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; } .tlt-rslider__btn:hover:not(:disabled), .tlt-rslider__btn:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; } .tlt-rslider__btn:disabled { opacity: .35; cursor: default; } .tlt-rslider__track { --per: 3; --gap: clamp(16px, 2vw, 28px); display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; } .tlt-rslider__track::-webkit-scrollbar { display: none; } .tlt-rslider__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } .tlt-rslider__track > .tlt-review { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; min-width: 0; } @media (max-width: 1024px) { .tlt-rslider__track { --per: 2; } } @media (max-width: 640px) { .tlt-rslider__track { --per: 1; } .tlt-rslider__track > .tlt-review { flex-basis: 88%; } } @media (prefers-reduced-motion: reduce) { .tlt-rslider__track { scroll-behavior: auto; } }