/* One stylesheet for every tenant and every variant. A variant never ships CSS: it picks theme classes on and token values in :root, nothing else. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; interpolate-size: allow-keywords; } /* lets a closed

grow to "auto" smoothly where supported */ body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; } /* An elevated surface (card, field, panel). A palette may name it in :root, which wins over this. */ html { --card: var(--bg); } /* Dark palette: depth is said with lighter surfaces and a hairline, a shadow cannot be seen here; native controls (select list, checkbox, scrollbar) follow the theme. */ .p-brand-dark { color-scheme: dark; } p, li { text-wrap: pretty; } /* `hidden` must win over any display rule below: a "saved" box or a picker notice that is only *marked* hidden would otherwise be shown to every visitor. */ [hidden] { display: none !important; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--font-head); text-transform: var(--head-transform); line-height: 1.12; margin: 0; font-weight: 600; letter-spacing: .01em; } h1 { font-size: clamp(28px, 4.6vw, 54px); text-wrap: balance; } h2 { font-size: clamp(22px, 3vw, 34px); text-wrap: balance; } h3 { font: 700 clamp(17px, 1.7vw, 20px)/1.3 var(--font-body); text-transform: none; letter-spacing: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } /* theme: radius */ .r-sharp { --r-panel: 4px; --r-btn: 2px; --r-field: 2px; } .r-soft { --r-panel: 24px; --r-btn: 14px; --r-field: 12px; } .r-round { --r-panel: 28px; --r-btn: 999px; --r-field: 14px; } /* elevation: surfaces are told apart by a soft shadow, not by a dark outline */ body { --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px -8px rgba(16, 24, 40, .12); --shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px -16px rgba(16, 24, 40, .22); } /* theme: density */ .d-compact { --sec: 40px; --gap: 16px; --pad: 18px; } .d-comfortable { --sec: 64px; --gap: 24px; --pad: 24px; } .d-airy { --sec: 88px; --gap: 32px; --pad: 32px; } @media (max-width: 720px) { .d-compact { --sec: 30px; } .d-comfortable { --sec: 44px; } .d-airy { --sec: 56px; } .d-airy { --pad: 22px; --gap: 22px; } } .container { width: min(1160px, 100% - 40px); margin-inline: auto; } .muted { color: var(--muted); } .center { text-align: center; margin-top: var(--gap); } .link { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 12px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } .site-header :focus-visible, .site-footer :focus-visible, .p-brand-dark :focus-visible { outline-color: var(--accent-a); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-btn); border: 2px solid transparent; font: 700 15.5px/1.2 var(--font-body); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .btn:hover { transform: translateY(-1px); filter: brightness(1.04); } .btn:active { transform: translateY(0) scale(.985); } .btn-arrow { transition: transform .2s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } /* A browser without color-mix() drops that whole declaration, so a plain shadow is said first. */ .btn-primary { color: var(--on-accent); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 10px 22px -10px rgba(16, 24, 40, .45); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 10px 22px -10px color-mix(in srgb, var(--accent-a) 70%, #101828); } .b-gradient .btn-primary { background: linear-gradient(95.76deg, var(--accent-a), var(--accent-b)); } .b-solid .btn-primary { background: var(--accent-a); } .b-outline .btn-primary { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; } .b-outline .site-header .btn-primary { color: var(--header-ink); border-color: var(--header-ink); } .btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); } .site-header .btn-secondary, .band .btn-secondary, .form-band .btn-secondary, .sticky-cta .btn-secondary { background: transparent; color: inherit; border-color: currentColor; box-shadow: none; } .btn-arrow { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; position: relative; flex: none; } .btn-arrow::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-1px) rotate(45deg); } button.btn[disabled] { opacity: .6; cursor: progress; transform: none; } /* chrome */ .demo-banner { background: #fff3d6; color: #4a2f00; font-size: 13px; padding: 8px 0; text-align: center; } .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); color: var(--header-ink); view-transition-name: site-header; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .h-dark .site-header { background: rgba(10, 10, 10, .78); background: color-mix(in srgb, var(--header-bg) 78%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } } .p-brand-dark .site-header { border-bottom: 1px solid var(--line); } .h-light .site-header { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); } .h-light .logo { background: #0a0a0a; padding: 8px 14px; border-radius: var(--r-btn); } .header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; } .logo { display: inline-flex; flex: none; } .nav { display: none; gap: 22px; margin-left: 12px; font-weight: 600; font-size: 14px; } .nav a { text-decoration: none; opacity: .85; padding: 12px 2px; transition: opacity .15s ease; } .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--accent-a); } .header-phone { margin-left: auto; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 12px 0; } .site-header .btn { min-height: 42px; padding: 8px 16px; font-size: 14px; } .site-header .btn .btn-arrow { display: none; } @media (max-width: 560px) { .site-header .btn { display: none; } .header-inner { min-height: 60px; gap: 12px; } .logo img { width: 135px; height: auto; } .h-light .logo { padding: 7px 10px; } .header-phone { font-size: 15px; } } @media (max-width: 359px) { /* the narrowest phones: the logo and the number must still share one line */ .logo img { width: 112px; } .h-light .logo { padding: 6px 8px; } .header-phone { font-size: 13.5px; letter-spacing: -.01em; } } @media (min-width: 900px) { .nav { display: flex; } } .site-footer { background: #0a0a0a; color: #fff; padding: 36px 0 96px; font-size: 14px; } .footer-inner { display: grid; gap: 8px; } .footer-inner p { opacity: .8; } .footer-brand { font-family: var(--font-head); font-size: 20px; opacity: 1 !important; letter-spacing: .04em; } /* hero */ .hero { padding: var(--sec) 0; position: relative; overflow: hidden; } /* A quiet glow of the brand colour behind the first screen: depth without a picture to download. */ .p-brand-dark .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: min(760px, 90vw); aspect-ratio: 1; background: radial-gradient(closest-side, var(--accent-a), transparent 72%); opacity: .13; pointer-events: none; } .hero-inner { position: relative; } .hero-inner { display: grid; gap: var(--gap); align-items: center; } .hero-text { display: grid; gap: 18px; justify-items: start; } .eyebrow { font-weight: 700; font-size: 13px; letter-spacing: .02em; background: linear-gradient(95.76deg, var(--accent-a), var(--accent-b)); color: var(--on-accent); padding: 6px 14px; border-radius: 999px; } .hero-sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 56ch; } .hero-bullets { display: grid; gap: 8px; } .hero-bullets li { padding-left: 26px; position: relative; font-weight: 600; } .hero-bullets li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg); } .p-brand-dark .hero-bullets li::before { border-color: var(--accent-a); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .hero-media .photo { max-width: 520px; margin-inline: auto; border-radius: max(var(--r-panel), 14px); box-shadow: var(--shadow-2); aspect-ratio: 6 / 5; } .hero-media .photo-scheme { aspect-ratio: 1 / 1; } .p-brand-dark .hero-media .photo { box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px rgba(117, 255, 1, .28); box-shadow: 0 0 0 1px var(--line), 0 30px 80px -30px color-mix(in srgb, var(--accent-a) 45%, transparent); } .hero-panel .hero-inner { background-color: var(--surface); background-image: var(--pattern); background-size: cover; background-position: center; background-blend-mode: multiply; border-radius: var(--r-panel); padding: clamp(28px, 6vw, 80px) clamp(20px, 5vw, 64px); } .hero-pattern { min-height: 220px; border-radius: var(--r-panel); background: #0a0a0a var(--pattern) center / cover no-repeat; } .hero-centered .hero-inner { text-align: center; } .hero-centered .hero-text { justify-items: center; } .hero-centered .hero-actions { justify-content: center; } .hero-centered .hero-bullets { text-align: left; justify-items: start; } /* ticks and text stay together */ .hero-stacked { padding-bottom: calc(var(--sec) * .35); } .hero-stacked .hero-text { max-width: 900px; } .hero-stacked + .section { padding-top: calc(var(--sec) * .6); } @media (min-width: 900px) { .hero-split .hero-inner { grid-template-columns: 1.15fr .85fr; } .hero-pattern { min-height: 380px; } } /* The owner's picture behind the first screen. It is dark by nature, so the hero keeps light text whatever the palette; a shade drawn here, not in the file, holds the contrast. On a phone the picture is a band at the top that fades into the text; on a wide screen it fills the right side. */ .hero-scene { background: #070707; color: #fff; --ink: #fff; --muted: #d6d6d6; --line: rgba(255, 255, 255, .2); --surface: rgba(12, 12, 12, .72); padding-top: calc(min(64vw, 440px) - 56px); } .hero-scene::before { display: none; } .hero-scene-media { position: absolute; inset: 0 0 auto 0; height: min(64vw, 440px); } .hero-scene-media picture, .hero-scene-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; } .hero-scene-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 7, 7, .1) 0%, rgba(7, 7, 7, .2) 55%, #070707 100%); } .hero-scene .hero-inner { z-index: 1; } .hero-scene .hero-text { max-width: 660px; } .hero-scene h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .6); } .hero-scene .hero-price { background: rgba(12, 12, 12, .72); } @media (min-width: 900px) { .hero-scene { padding: calc(var(--sec) * 1.25) 0; min-height: min(86vh, 780px); display: flex; align-items: center; } .hero-scene-media { inset: 0 0 0 36%; height: auto; } .hero-scene-media::after { background: linear-gradient(90deg, #070707 0%, rgba(7, 7, 7, .5) 28%, rgba(7, 7, 7, 0) 60%), linear-gradient(0deg, rgba(7, 7, 7, .55) 0%, rgba(7, 7, 7, 0) 30%); } .hero-scene.hero-split .hero-inner { grid-template-columns: 1fr; } } /* sections */ .section { padding: var(--sec) 0; } .section:nth-of-type(even) { background: var(--surface); } .section-head { display: grid; gap: 12px; margin-bottom: var(--gap); max-width: 760px; } .section-intro { color: var(--muted); font-size: 17px; } .notice { border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: var(--r-field); padding: 16px; background: var(--bg); display: grid; gap: 12px; justify-items: start; } .usps { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .usps li { padding: var(--pad); display: grid; gap: 6px; align-content: start; border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-1); } .usps p { color: var(--muted); font-size: 15px; } .tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .tile { display: grid; gap: 8px; align-content: start; padding: var(--pad); border-radius: var(--r-panel); border: 1px solid transparent; background: var(--card); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease; } .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .tile p { color: var(--muted); font-size: 15px; } .tile-emphasis { background: linear-gradient(43.92deg, var(--accent-a), var(--accent-b)); color: var(--on-accent); border-color: transparent; } .tile-emphasis p { color: var(--on-accent); } /* product cards */ .cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .cards-rich { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cards-rows { grid-template-columns: 1fr; } .card { display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid transparent; border-radius: max(var(--r-panel), 10px); overflow: hidden; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .p-brand-dark .card, .p-brand-dark .option, .p-brand-dark .tile, .p-brand-dark .usps li, .p-brand-dark .faq details, .p-brand-dark .facts li, .p-brand-dark .pk-form, .p-brand-dark .price-ref { border-color: var(--line); box-shadow: none; } .p-brand-dark .card:hover { border-color: color-mix(in srgb, var(--accent-a) 55%, var(--line)); } .card-rows { grid-template-rows: none; } @media (min-width: 760px) { .card-rows { grid-template-columns: 240px 1fr; } } /* The box keeps its shape whatever the picture's own proportions are. A photograph fills it; a scheme with captions is fitted whole on a light stage, so no caption is ever cut off. */ .photo { background: #1a1b19; aspect-ratio: 1 / 1; display: block; overflow: hidden; position: relative; } .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); } .photo-scheme { background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f4f5f2 70%, #eceee8 100%); } .photo-scheme img { object-fit: contain; padding: 4%; } .card:hover .photo-photo img { transform: scale(1.04); } .card-rows .photo { aspect-ratio: auto; min-height: 240px; height: 100%; } .photo-none { color: #5c5c5c; font-size: 14px; text-align: center; padding: 20px; aspect-ratio: 16 / 9; } /* a column, so that the price and the button of neighbouring cards stand on one line */ .card-body { padding: var(--pad); display: flex; flex-direction: column; gap: 12px; } .card-body > .badge { align-self: flex-start; } .card-body > .price { margin-top: auto; padding-top: 4px; } .badge { justify-self: start; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .card-title { text-wrap: balance; } /* keeps an article like FWP-T whole where the browser can */ .card-title a { text-decoration: none; } .card-title a:hover { text-decoration: underline; } .card-tagline { color: var(--muted); } .points { display: grid; gap: 6px; font-size: 15px; } .points li { padding-left: 18px; position: relative; } .points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(95.76deg, var(--accent-a), var(--accent-b)); } .sizes caption, .traits caption { text-align: left; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; padding-bottom: 6px; color: var(--muted); } .sizes th, .sizes td, .traits th, .traits td { text-align: left; padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; } .sizes thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-top: 0; } .sizes td { font-weight: 700; text-align: right; } .sizes thead th:not(:first-child) { text-align: right; } .traits th { font-weight: 600; color: var(--muted); width: 45%; } .kit summary, .faq summary { cursor: pointer; font-weight: 700; } .kit ul { margin-top: 8px; display: grid; gap: 4px; font-size: 15px; color: var(--muted); } .price { display: grid; gap: 2px; } .price-value { font: 800 25px/1.1 var(--font-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .price-unknown { font-size: 18px; } .price-note { font-size: 12.5px; color: var(--muted); } .price-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 22px; padding: 14px 18px; background: var(--card); border-radius: max(var(--r-field), 8px); box-shadow: var(--shadow-1); border: 1px solid transparent; } .price-ref-what { font-weight: 600; } .price-ref .price-note { flex-basis: 100%; } .card-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; } .card-actions .btn { flex: 1 1 auto; } .card-actions .link { min-height: 44px; display: inline-flex; align-items: center; } .card-compact .card-actions { display: grid; gap: 4px; justify-items: center; } .card-compact .card-actions .btn { width: 100%; padding-inline: 12px; white-space: nowrap; } @media (min-width: 900px) { .card-compact .card-actions .btn-arrow { display: none; } } .options { display: grid; gap: var(--gap); } @media (min-width: 900px) { .options { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } .option { display: grid; gap: 14px; align-content: start; padding: var(--pad); border-radius: var(--r-panel); border: 1px solid transparent; background: var(--card); box-shadow: var(--shadow-1); } .option > p { color: var(--muted); } /* a card inside a panel of the same colour would vanish: there it sits on the page colour */ .option .card { background: var(--bg); } /* picker */ .picker { display: grid; gap: var(--gap); } @media (min-width: 960px) { .picker { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } } .pk-form { display: grid; gap: 18px; padding: var(--pad); border-radius: var(--r-panel); background: var(--card); box-shadow: var(--shadow-1); border: 1px solid transparent; } .pk-q { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; } .pk-q legend { font-weight: 700; padding: 0; margin-bottom: 8px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-btn); border: 1.5px solid var(--line); font-weight: 600; background: var(--bg); transition: border-color .15s ease, background .15s ease; } .chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); } .chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; } .pk-out { display: grid; gap: 14px; } .pk-hint { color: var(--muted); padding: var(--pad); border: 2px dashed var(--line); border-radius: var(--r-panel); } .pk-results { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .pk-reasons { margin-top: 10px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); } .pk-reasons li::before { content: "— "; } .pk-caveat { font-size: 13.5px; color: var(--muted); } .steps { counter-reset: step; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .steps li { counter-increment: step; display: grid; gap: 6px; padding-top: 46px; position: relative; } .steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(95.76deg, var(--accent-a), var(--accent-b)); color: var(--on-accent); } .steps p { color: var(--muted); font-size: 15px; } .faq { display: grid; gap: 10px; max-width: 860px; } .faq details { border-radius: max(var(--r-btn), 8px); padding: 0 20px; background: var(--card); box-shadow: var(--shadow-1); border: 1px solid transparent; transition: border-color .2s ease; } .faq summary { padding: 16px 0; min-height: 56px; } .faq details[open] { border-color: var(--line); } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .28s ease, content-visibility .28s allow-discrete; } .faq details[open]::details-content { block-size: auto; } .faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; margin-right: 4px; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq details p { margin: 0; padding-bottom: 18px; color: var(--muted); } /* form */ .form-box { display: grid; gap: 14px; padding: calc(var(--pad) + 6px); border-radius: var(--r-panel); max-width: 860px; margin-inline: auto; } .form-card { background: var(--card); box-shadow: var(--shadow-2); } .form-band { background: #0a0a0a; color: #fff; max-width: none; } .form-band .field input, .form-band .field select, .form-band .field textarea { background: #fff; color: #0a0a0a; } .form-band small, .form-band .form-text { color: #cfcfcf; } .form-band :focus-visible { outline-color: var(--accent-a); } /* dark palette: white fields on a black band glare; they become raised dark surfaces instead */ .p-brand-dark .form-band { background: var(--card); border: 1px solid var(--line); } .p-brand-dark .form-band .field input, .p-brand-dark .form-band .field select, .p-brand-dark .form-band .field textarea { background: var(--bg); color: var(--ink); border-color: var(--line); } .p-brand-dark .field input:focus, .p-brand-dark .field select:focus, .p-brand-dark .field textarea:focus { border-color: var(--accent-a); } .p-brand-dark .check input { accent-color: var(--accent-a); } .p-brand-dark .form-done { background: #12301c; color: #c9f5d6; } .p-brand-dark .form-status.is-error, .p-brand-dark .field-error small { color: #ffb4b4; } .p-brand-dark .field-error input, .p-brand-dark .field-error select { border-color: #ff8f8f; } .form-minimal { padding-inline: 0; } .form-text { color: var(--muted); } .form-demo { font-size: 13px; background: #fff3d6; color: #4a2f00; padding: 8px 12px; border-radius: var(--r-field); } .fields { display: grid; gap: 14px; } @media (min-width: 720px) { .fields { grid-template-columns: 1fr 1fr; } .field-wide, .check { grid-column: 1 / -1; } } .field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; } .field input, .field select, .field textarea { font: 400 16px/1.4 var(--font-body); color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-field); padding: 12px 14px; min-height: 50px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px rgba(16, 24, 40, .14); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-a) 35%, transparent); } .field small { font-weight: 400; color: var(--muted); } .field-error input, .field-error select { border-color: #a12b2b; } .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 4px 0; cursor: pointer; } .check a { text-underline-offset: 3px; } .check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: #0a0a0a; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; } .form-status { min-height: 1.4em; font-weight: 600; } .form-status.is-error { color: #a12b2b; } .form-band .form-status.is-error { color: #ffb4b4; } .form-done { padding: 18px; border-radius: var(--r-field); background: #e4f4ea; color: #12492d; display: grid; gap: 8px; } [data-step-hidden] { display: none !important; } .contacts { display: grid; gap: var(--gap); } @media (min-width: 760px) { .contacts { grid-template-columns: 1fr 1fr; } .contacts-note { grid-column: 1 / -1; } } .contacts h3 { margin-bottom: 8px; } .phone { font: 700 24px/1.2 var(--font-body); text-decoration: none; } .hours { color: var(--muted); margin-top: 6px; } .contacts-note { font-size: 13px; color: var(--muted); } .band { display: grid; gap: 18px; align-items: center; padding: calc(var(--pad) + 8px); border-radius: var(--r-panel); background: linear-gradient(43.92deg, var(--accent-a), var(--accent-b)); color: var(--on-accent); } .band .btn-primary { background: #0a0a0a; color: #fff; border-color: #0a0a0a; } @media (min-width: 800px) { .band { grid-template-columns: 1fr auto; } } .prose { display: grid; gap: 14px; max-width: 760px; } .prose ul { list-style: disc; padding-left: 20px; } .reviews { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .reviews li { display: grid; gap: 10px; align-content: start; padding: 20px 22px; border-radius: var(--r-btn); background: var(--card); box-shadow: var(--shadow-1); border: 1px solid transparent; } .reviews blockquote { margin: 0; font-size: 17px; line-height: 1.5; } .reviews figure { margin: 0; display: grid; gap: 10px; } .reviews figcaption { font-size: 14px; color: var(--muted); } .reviews figcaption b { color: var(--ink); } .review-about { font-size: 14px; } .review-about a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .p-brand-dark .reviews li { border-color: var(--line); box-shadow: none; } .facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .facts li { padding: 16px 18px; border-radius: var(--r-btn); background: var(--card); font-weight: 600; box-shadow: var(--shadow-1); border: 1px solid transparent; } .others { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-bottom: 14px; } .other { display: grid; gap: 8px; align-content: start; } .other p { color: var(--muted); font-size: 15px; } .other-list { display: grid; gap: 4px; font-size: 15px; } .crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; } .product { display: grid; gap: var(--gap); } .product-head { display: grid; gap: 10px; } .product-head h1 { margin: 0; } /* In the half-width column a title word such as СВЕТООТРАЖАЮЩИЙ must fit whole at the largest size. */ .product-head h1 { font-size: clamp(26px, 3.3vw, 40px); } h1, h2 { overflow-wrap: anywhere; } /* a long single word (Политика конфиденциальности) must not widen a phone page */ @media (min-width: 900px) { .product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "gallery head" "gallery info"; align-items: start; row-gap: 16px; } .product-head { grid-area: head; } .product .gallery { grid-area: gallery; } .product-info { grid-area: info; } } .gallery { display: grid; gap: 10px; min-width: 0; } @media (min-width: 900px) { .gallery { position: sticky; top: 92px; } } .gallery > .photo, .gallery-slide .photo { border-radius: max(var(--r-panel), 12px); } .gallery-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: max(var(--r-panel), 12px); } .gallery-track::-webkit-scrollbar { display: none; } .gallery-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; } /* thumbnails, not dots: the visitor sees what else there is; the last one may peek out to say "more" */ .gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: thin; } .gallery-thumb { flex: 0 0 68px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; opacity: .72; transition: opacity .15s ease, border-color .15s ease; position: relative; aspect-ratio: 1 / 1; background: #f4f5f2; } .gallery-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gallery-thumb:hover, .gallery-thumb[aria-current="true"] { opacity: 1; } .gallery-thumb[aria-current="true"] { border-color: var(--accent-a); } .p-brand-light .gallery-thumb[aria-current="true"], .p-brand-mist .gallery-thumb[aria-current="true"] { border-color: var(--ink); } .product-info { display: grid; gap: 16px; justify-items: start; } .product-info table { width: 100%; } .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(10, 10, 10, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); } .sticky-cta .btn { flex: 1; min-height: 48px; padding: 8px 10px; font-size: 15px; } .sticky-cta .btn .btn-arrow { display: none; } .sticky-cta[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .sticky-cta { animation: bar-in .28s ease both; } } @keyframes bar-in { from { transform: translateY(100%); } } @media (min-width: 900px) { .sticky-cta { display: none !important; } } /* motion: everything here is an extra. A browser that lacks a feature shows the page as it is. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .card, .option, .tile, .usps li, .steps li, .faq details, .facts li, .form-box, .price-ref { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } } } /* never from nothing: a page caught before its scroll position is known must still be readable */ @keyframes rise { from { opacity: .25; transform: translateY(16px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .card, .tile, .photo img, .btn-arrow { transition: none; } .btn:hover, .card:hover, .tile:hover, .card:hover .photo-photo img, .btn:hover .btn-arrow { transform: none; } .faq details::details-content { transition: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } .size-list { margin: 0; } .size-list-title { font-weight: 700; font-size: 13.5px; color: var(--muted); margin: 0 0 8px; } .size-list ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .size-list li { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 14.5px; } .size-list .size-priced { border-color: var(--ink); } .p-brand-dark .size-list .size-priced { border-color: color-mix(in srgb, var(--accent-a) 60%, var(--line)); } .size-list .size-priced b { font-weight: 800; margin-left: 4px; font-variant-numeric: tabular-nums; } /* a priced size is a way into the form: the whole chip is the link, and it says so on hover */ .size-list .size-priced { padding: 0; } .size-list .size-pick { display: inline-block; padding: 5px 12px; text-decoration: none; border-radius: 999px; transition: background .15s ease, color .15s ease; } .size-list .size-pick:hover, .size-list .size-pick:focus-visible { background: var(--ink); color: var(--bg); } .p-brand-dark .size-list .size-pick:hover, .p-brand-dark .size-list .size-pick:focus-visible { background: var(--accent-a); color: var(--on-accent); } .sizes-order td { text-align: left; } .sizes-order td:nth-child(2) { text-align: right; } .sizes td.sizes-pick { width: 1%; padding-left: 18px; text-align: right; white-space: nowrap; } .sizes-pick .size-pick { font-weight: 700; font-size: 14px; text-underline-offset: 3px; text-decoration-color: var(--accent-a); display: inline-block; padding: 10px 0 10px 8px; margin: -10px 0; } /* a finger-sized target in a slim row */ .reply-note { font-size: 14px; color: var(--muted); margin-top: -6px; } .form-actions .reply-note { margin: 0; flex: 1 1 220px; } .price-for { font: 600 15px/1.2 var(--font-body); color: var(--muted); letter-spacing: 0; white-space: nowrap; } .pk-more { color: var(--muted); padding: var(--pad); border: 2px dashed var(--line); border-radius: var(--r-panel); } .pk-links { list-style: none; padding: 0; margin: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the other models of the series, under the form of a product page */ .siblings { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .sibling { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px; text-decoration: none; background: var(--card); border: 1px solid transparent; border-radius: max(var(--r-panel), 10px); box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .sibling:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } .p-brand-dark .sibling { border-color: var(--line); box-shadow: none; } .p-brand-dark .sibling:hover { border-color: color-mix(in srgb, var(--accent-a) 55%, var(--line)); } .sibling .photo { width: 76px; border-radius: 8px; } .sibling .photo-none { padding: 0; aspect-ratio: 4 / 3; } .sibling .photo-none span { display: none; } .sibling-body { display: grid; gap: 2px; font-size: 14.5px; min-width: 0; } .sibling-body b { font-size: 15.5px; } .sibling-price { font-weight: 800; font-variant-numeric: tabular-nums; } /* hero: the lowest sourced price of a group, with the model, the size and the date beside it */ .hero-price { display: grid; gap: 4px; padding: 12px 16px; border-radius: max(var(--r-field), 10px); border: 1px solid var(--line); background: var(--card); max-width: 56ch; } .hero-price-value { font: 800 clamp(24px, 2.6vw, 30px)/1.1 var(--font-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .hero-price-note { font-size: 12.5px; color: var(--muted); } .p-brand-dark .hero-price { border-color: color-mix(in srgb, var(--accent-a) 40%, var(--line)); } /* scenes: a real photograph of a catalogue model under each situation */ .scenes { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .scene { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: max(var(--r-panel), 12px); background: var(--card); box-shadow: var(--shadow-1); border: 1px solid transparent; } .p-brand-dark .scene { border-color: var(--line); box-shadow: none; } .scene .photo { aspect-ratio: 4 / 3; } .scene-pic { display: grid; } .scene:hover .photo-photo img { transform: scale(1.04); } .scene-body { display: grid; gap: 6px; align-content: start; padding: var(--pad); } .scene-body p { color: var(--muted); font-size: 15px; } /* size guide: every size, a television and a person drawn to one scale */ .size-guide { display: grid; gap: var(--gap); } @media (min-width: 960px) { .size-guide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } } .sg-visual { display: grid; gap: 16px; padding: var(--pad); border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--line); min-width: 0; } .sg-drawing { width: 100%; height: auto; display: block; } .sg-floor { stroke: var(--line); stroke-width: 3; } .sg-screen rect { fill: transparent; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 8 7; transition: fill .2s ease, stroke .2s ease; } .sg-screen text { fill: var(--muted); font: 700 34px var(--font-body); } .sg-screen.is-on rect { stroke: var(--accent-a); stroke-width: 4; stroke-dasharray: none; fill: rgba(117, 255, 1, .1); fill: color-mix(in srgb, var(--accent-a) 12%, transparent); } .sg-screen.is-on text { fill: var(--ink); font-size: 40px; } .p-brand-light .sg-screen.is-on rect, .p-brand-mist .sg-screen.is-on rect { stroke: var(--ink); } .sg-tv rect { fill: var(--ink); opacity: .85; } .sg-tv text { fill: var(--bg); font: 700 36px var(--font-body); } .sg-person circle, .sg-person rect { fill: var(--muted); opacity: .6; } .sg-pick { border: 0; margin: 0; padding: 0; min-width: 0; } .sg-pick legend { font-weight: 700; margin-bottom: 10px; padding: 0; } .sg-side { display: grid; gap: 16px; } .sg-panel { display: grid; gap: 12px; justify-items: start; padding: var(--pad); border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--line); } .sg-js [data-sg-off] { display: none; } .sg-size { font: 600 clamp(34px, 4vw, 48px)/1 var(--font-head); } .sg-facts { display: grid; gap: 10px; margin: 0; width: 100%; } .sg-facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; border-top: 1px solid var(--line); padding-top: 8px; } .sg-facts dt { color: var(--muted); } .sg-facts dd { margin: 0; font-weight: 700; } .sg-models-title { font-weight: 700; font-size: 13.5px; color: var(--muted); } .sg-models { display: flex; flex-wrap: wrap; gap: 8px; } .sg-models .size-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .sg-models .size-pick:hover, .sg-models .size-pick:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); } .sg-models .size-pick:hover .muted, .sg-models .size-pick:focus-visible .muted { color: inherit; } .sg-panel .btn { width: 100%; } @media (min-width: 560px) { .sg-panel .btn { width: auto; } } .sg-fit-out { display: grid; gap: 8px; } .sg-fit { padding: 12px 14px; border-radius: var(--r-field); background: var(--surface); border-left: 4px solid var(--accent-a); } .sg-caveat { font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .scene, .sg-visual, .sg-panel { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } } } @media (prefers-reduced-motion: reduce) { .sg-screen rect { transition: none; } .scene:hover .photo-photo img { transform: none; } } /* ---- Articles for any tenant (R3): the same markup as the Zemlyanika adapter, dressed in the tenant's own tokens (--bg, --ink, --muted, --line, --accent-a, --card, --surface, --r-panel). ---- */ .wrap { width: min(1160px, 100% - 40px); margin-inline: auto; } .article-index, .article-page { padding: 48px 0 80px; background: var(--bg); color: var(--ink); } .article-wrap { max-width: 760px; } .crumbs { margin: 0 0 24px; font-size: .85rem; color: var(--muted); } .crumbs a { color: var(--muted); } .article-index h1, .article-head h1 { margin: 0; font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; text-transform: var(--head-transform); } .kicker { margin: 0 0 12px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .kicker-link { color: inherit; text-decoration: none; } .article-lede { max-width: 720px; margin: 18px 0 0; color: var(--muted); font-size: 1.12rem; } .article-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 20px 0 0; color: var(--muted); font-size: .85rem; } .article-review { margin: 6px 0 0; font-size: .85rem; font-weight: 700; } .article-toc { margin: 28px 0 0; padding: 16px 20px; border-left: 3px solid var(--accent-a); background: var(--surface); border-radius: var(--r-panel); } .article-toc summary { cursor: pointer; font-weight: 700; } .article-body { margin-top: 32px; font-size: 1.05rem; line-height: 1.7; } .article-body h2 { margin: 1.8em 0 .5em; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.2; scroll-margin-top: 90px; } .article-body h3 { margin: 1.4em 0 .5em; font-size: 1.2rem; } .callout, .article-links { margin: 1.5em 0; padding: 16px 20px; background: var(--surface); border-radius: var(--r-panel); border-left: 3px solid var(--line); } .callout-warning { border-left-color: var(--accent-a); } .callout p, .article-links ul { margin: 0; } .callout-title, .links-title { margin: 0 0 6px !important; font-weight: 700; } .article-quote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--accent-a); } .article-quote blockquote { margin: 0; } .article-cta { margin: 2em 0; padding: 24px 26px; background: var(--header-bg); color: var(--header-ink); border-radius: var(--r-panel); } .article-cta .article-cta-title { margin: 0 0 8px; font-size: 1.35rem; color: inherit; } .article-cta p { margin: 0 0 16px; opacity: .85; } .article-cta .button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); background: var(--accent-a); color: var(--on-accent); font-weight: 700; text-decoration: none; } .article-draft pre { margin: 12px 0 0; padding: 14px; white-space: pre-wrap; background: rgba(255, 255, 255, .08); font: inherit; font-size: .9rem; } .article-draft .draft-label { margin: 18px 0 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; } .article-draft .copy-button { width: 100%; min-height: 44px; margin-top: 8px; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--r-btn); cursor: pointer; } .article-cta-note { display: block; margin-top: 12px; font-size: .78rem; opacity: .7; } .article-sources { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; } .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap, 16px); margin-top: 32px; } .article-card { display: flex; flex-direction: column; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); } .article-card h2, .article-card h3 { margin: 10px 0; font-size: 1.2rem; line-height: 1.25; } .article-card h2 a, .article-card h3 a { color: var(--ink); text-decoration: none; } .article-card > p { margin: 0; color: var(--muted); font-size: .92rem; } .article-card .card-meta { margin-top: auto; padding-top: 14px; font-size: .8rem; } .card-topic { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .article-related { padding: 56px 0 72px; background: var(--surface); } .pager { display: flex; gap: 20px; margin-top: 28px; } .article-preview-bar { background: var(--accent-b); color: var(--ink); font-size: .85rem; } .article-preview-bar .wrap { padding: 10px 0; }