/* * Rottest site.css: the one site-wide stylesheet (CLAUDE.md, errata E6), printed after Breakdance's CSS. * Generated by tools/build_site_css.py from yon-b-v21.css (the design reference) plus * tools/site-css/reset.css and adapt.css. Do not edit by hand: change the sources and rebuild. * --rt-rev changes on every build (handbook 23.5). */ :root { --rt-rev: "2026-10-16.1"; } :root {color-scheme: light; --rt-bg: var(--bde-palette-color-1-1d828a72-aa87-4523-95e1-5e8dca89cb9d); --rt-surface: var(--bde-palette-color-1-fcca4b0e-41d0-4972-99f9-20851e216d56); --rt-surface-2: #ECEEEB; --rt-ink: var(--bde-palette-color-1-ce54e1c3-7ac9-45ed-9890-06e0a28e4158); --rt-ink-2: var(--bde-palette-color-1-9698a1d7-16e5-469f-af4a-786aa752708e); --rt-ink-line: var(--bde-palette-color-1-e46e9c86-1bc0-4e82-8724-7d264e5e9557); --rt-text: var(--bde-palette-color-1-3980febe-09f7-496e-b54c-c36108298b6b); --rt-text-2: var(--bde-palette-color-1-d5178ef3-7875-4436-8eec-f90d78f0a998); --rt-text-3: var(--bde-palette-color-1-2e4b8cff-8459-4f6c-b069-cad0991acc0c); --rt-on-ink: var(--bde-palette-color-1-fcca4b0e-41d0-4972-99f9-20851e216d56); --rt-on-ink-2: var(--bde-palette-color-1-09d38dd5-3fa3-4f55-a80a-6b5179a0f103); --rt-line: var(--bde-palette-color-1-87cdf5cc-4651-46bf-8fe0-e973ecd29038); --rt-line-2: var(--bde-palette-color-1-32f9328d-f4ca-492f-8115-6e25c0bdc4e5); --rt-field: var(--bde-palette-color-1-f7f2f129-4377-4829-853f-630e21b41ac4); --rt-yellow: var(--bde-palette-color-1-6d2de38d-fc80-4785-8713-10c2bb971450); --rt-yellow-2: var(--bde-palette-color-1-785a29c7-84cc-411e-a50d-0477b8974756); --rt-on-yellow: var(--bde-palette-color-1-3980febe-09f7-496e-b54c-c36108298b6b); --rt-error: var(--bde-palette-color-1-34712f38-9b3d-4f70-b4e8-98f4e0dbc2ec); --rt-scrim: 10 12 14; --rt-shade: 19 20 21; --rt-stage: var(--rt-surface); --rt-stage-line: transparent; --rt-mark: var(--rt-yellow); --rt-shadow-card: 0 1px 2px rgb(var(--rt-shade) / .05), 0 22px 44px -26px rgb(var(--rt-shade) / .30); --rt-shadow-float: 0 2px 6px rgb(var(--rt-shade) / .06), 0 28px 60px -28px rgb(var(--rt-shade) / .40); --rt-shadow-bar: 0 -12px 32px -14px rgb(var(--rt-shade) / .32); --rt-font: "Instrument Sans", "Segoe UI", Arial, sans-serif; --rt-fs-display: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); --rt-fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3.125rem); --rt-fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.4375rem); --rt-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem); --rt-fs-body: 1.0625rem; --rt-fs-sm: .9375rem; --rt-fs-xs: .8125rem; --rt-fs-stat: clamp(2rem, 1.6rem + 1.4vw, 2.875rem); --rt-s1: 4px; --rt-s2: 8px; --rt-s3: 12px; --rt-s4: 16px; --rt-s5: 24px; --rt-s6: 32px; --rt-s7: 48px; --rt-s8: 64px; --rt-s9: 96px; --rt-s10: 128px; --rt-section: 128px; --rt-gutter: clamp(16px, 4vw, 48px); --rt-max: 1280px; --rt-pop-w: 520px; --rt-header-h: 76px; --rt-radius: 20px; --rt-radius-ctl: 12px; --rt-ease: cubic-bezier(.2, .7, .2, 1);} /* Breakdance 2.8.3 element defaults, undone on converted elements only (rt-bd-* markers from tools/bdgen/html2bd.py). Measured defaults (plugin elements' default.css, 11 Oct): .bde-section { position: relative; width: 100%; background-size: cover } and .section-container { max-width; padding; display: flex; flex-direction: column; align-items: flex-start; text-align: left; margin: 0 auto }; .bde-div and .bde-container-link the same flex column; .bde-text { max-width: 100%; margin: 0; color: var(--bde-text-color, var(--bde-body-text-color)) }; .bde-text-link { display: flex }; .bde-icon { display: flex }; .bde-heading { max-width: 100% }; themeless normalize.min.css h1-h6 { line-height: 1.2 }; global-settings.css .breakdance h1-h6 { color; font-size } (heading sizes from the type scale). The mockup's headings inherit line-height and color and keep the browser's font-size unless a class sets them. Editor-added elements keep Breakdance's behavior. */ .breakdance .rt-bd-section { position: static; width: auto; background-position: 0 0; background-size: auto; } .breakdance .rt-bd-section > .section-container { display: contents; } .breakdance .rt-bd-div { display: block; flex-direction: row; align-items: normal; text-align: inherit; max-width: none; position: static; background-size: auto; } .breakdance .rt-bd-text { max-width: none; color: inherit; } .breakdance .rt-bd-heading { max-width: none; color: inherit; line-height: inherit; font-size: revert; } .breakdance .rt-bd-link { display: inline; flex-direction: row; align-items: normal; text-align: inherit; max-width: none; position: static; background-size: auto; text-decoration: revert; transition: none; } .breakdance .rt-bd-icon, .breakdance .rt-bd-icon > .bde-icon-icon, .breakdance .rt-bd-svg { display: contents; } .breakdance .rt-bd-code { display: contents; } /* Code Block wrapper (.bde-code-block is a flex column) */ *, *::before, *::after {box-sizing: border-box;} html {-webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--rt-header-h) + 16px);} body.breakdance {margin: 0; background: var(--rt-bg); color: var(--rt-text); font: 400 var(--rt-fs-body)/1.65 var(--rt-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;} .breakdance img {display: block; max-width: 100%; height: auto;} .breakdance h1, .breakdance h2, .breakdance h3, .breakdance p, .breakdance ul, .breakdance ol, .breakdance .rt-tag-dl, .breakdance .rt-tag-dd, .breakdance figure {margin: 0;} .breakdance ul, .breakdance ol {padding: 0; list-style: none;} .breakdance a {color: inherit;} .breakdance a:hover {color: inherit;} .breakdance button, .breakdance input, .breakdance select, .breakdance textarea {font: inherit; color: inherit;} .breakdance :focus-visible {outline: 3px solid var(--rt-text); outline-offset: 3px; border-radius: 4px;} [hidden] {display: none !important;} .breakdance .rt-sprite {position: absolute; width: 0; height: 0; overflow: hidden;} .breakdance .rt-icon {width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;} .breakdance .rt-sr {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;} .breakdance .rt-skip {position: absolute; left: var(--rt-s4); top: -100px; z-index: 100; padding: var(--rt-s3) var(--rt-s4); border-radius: var(--rt-radius-ctl); background: var(--rt-yellow); color: var(--rt-on-yellow); font-weight: 600; text-decoration: none;} .breakdance .rt-skip:hover {color: var(--rt-on-yellow);} .breakdance .rt-skip:focus {top: var(--rt-s4);} .breakdance .rt-container {width: 100%; max-width: calc(var(--rt-max) + 2 * var(--rt-gutter)); margin-inline: auto; padding-inline: var(--rt-gutter);} .breakdance .rt-section {padding-block: var(--rt-section);} .breakdance .rt-section--surface {background: var(--rt-surface);} .breakdance .rt-head {display: grid; gap: var(--rt-s4); max-width: 760px; margin-bottom: var(--rt-s8);} .breakdance .rt-head--row {max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end;} .breakdance .rt-h1 {font-size: var(--rt-fs-display); font-weight: 600; font-stretch: 94%; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance;} .breakdance .rt-h2 {font-size: var(--rt-fs-h2); font-weight: 600; font-stretch: 96%; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance;} .breakdance .rt-h3 {font-size: var(--rt-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.015em;} .breakdance .rt-lead {font-size: var(--rt-fs-lead); line-height: 1.6; color: var(--rt-text-2); max-width: 58ch;} .breakdance .rt-eyebrow {font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;} .breakdance .rt-text {color: var(--rt-text-2); max-width: 62ch;} .breakdance .rt-num {font-variant-numeric: tabular-nums;} .breakdance .rt-code {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums;} .breakdance .rt-btn, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button {position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--rt-s2); min-height: 52px; padding: 0 var(--rt-s5); border: 1px solid transparent; border-radius: var(--rt-radius-ctl); font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate;} .breakdance .rt-btn--primary, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button.button-atom--primary {background: var(--rt-yellow); color: var(--rt-on-yellow);} .breakdance .rt-btn--primary:hover {color: var(--rt-on-yellow);} .breakdance .rt-btn--primary::after, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button.button-atom--primary::after {content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--rt-yellow-2); opacity: 0;} .breakdance .rt-btn--primary:hover::after, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button.button-atom--primary:hover::after {opacity: 1;} .breakdance .rt-btn--line {background: var(--rt-bg); border-color: var(--rt-line-2); color: var(--rt-text);} .breakdance .rt-btn--line:hover {color: var(--rt-text);} .breakdance .rt-btn--line:hover {border-color: var(--rt-text);} .breakdance .rt-btn--glass {background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .34); color: var(--rt-on-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);} .breakdance .rt-btn--glass:hover {color: var(--rt-on-ink);} .breakdance .rt-btn--glass:hover {border-color: rgb(255 255 255 / .7);} .breakdance .rt-btn--ink {background: var(--rt-ink); color: var(--rt-on-ink);} .breakdance .rt-btn--ink:hover {color: var(--rt-on-ink);} .breakdance .rt-btn--ink:hover {background: var(--rt-ink-2);} .breakdance .rt-btn--sm {min-height: 44px; padding: 0 var(--rt-s4); font-size: var(--rt-fs-sm);} .breakdance .rt-btn .rt-icon, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button .rt-icon {width: 18px; height: 18px;} .breakdance .rt-actions {display: flex; flex-wrap: wrap; gap: var(--rt-s3);} .breakdance .rt-link {display: inline-flex; align-items: center; gap: var(--rt-s2); min-height: 44px; font-weight: 600; text-decoration: none;} .breakdance .rt-link .rt-icon {width: 18px; height: 18px;} .breakdance .rt-iconbtn {display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rt-line-2); border-radius: 50%; background: transparent; color: inherit; cursor: pointer;} .breakdance .rt-iconbtn:hover {color: inherit;} .breakdance .rt-hl {isolation: isolate;} .breakdance .rt-hl__w {position: relative;} .breakdance .rt-hl__w::before {content: ""; position: absolute; left: -.2em; right: -.2em; top: .11em; bottom: -.05em; z-index: -1; border-radius: .08em; background: var(--rt-mark); transform: scaleX(0); transform-origin: 100% 50%;} .breakdance a:is(:hover, :focus-visible) .rt-hl__w::before {transform: scaleX(1); transform-origin: 0 50%;} .breakdance .rt-feature:is(:hover, :has(a:focus-visible)) .rt-feature__name .rt-hl__w::before {transform: scaleX(1); transform-origin: 0 50%;} .breakdance .rt-header {position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--rt-header-h); color: var(--rt-text);} .breakdance .rt-header::before, .breakdance .rt-header::after {content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); pointer-events: none;} .breakdance .rt-header::before {background: rgb(255 255 255 / .74); border-bottom: 1px solid rgb(var(--rt-shade) / .08);} .breakdance .rt-header::after {background: rgb(var(--rt-scrim) / .32); border-bottom: 1px solid rgb(255 255 255 / .12); opacity: 0;} body.breakdance:has(.rt-hero) .rt-header:not(.is-solid) {color: var(--rt-on-ink);} body.breakdance:has(.rt-hero) .rt-header:not(.is-solid)::before {opacity: 0;} body.breakdance:has(.rt-hero) .rt-header:not(.is-solid)::after {opacity: 1;} .breakdance .rt-header__inner {display: flex; align-items: center; gap: var(--rt-s6); height: 100%;} .breakdance .rt-brand {display: inline-flex; align-items: center; gap: var(--rt-s3); text-decoration: none;} .breakdance .rt-brand__mark {width: 38px; height: 38px; border-radius: 6px;} .breakdance .rt-brand__text {display: grid; line-height: 1.05;} .breakdance .rt-brand__word {font-size: 1.3125rem; font-weight: 700; letter-spacing: .06em;} .breakdance .rt-brand__sub {font-size: var(--rt-fs-xs); opacity: .72; letter-spacing: .01em;} .breakdance .rt-nav {display: flex; gap: var(--rt-s1); margin-left: var(--rt-s4);} .breakdance .rt-nav__link {position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; padding: var(--rt-s2) var(--rt-s3); border-radius: var(--rt-radius-ctl); font-size: var(--rt-fs-sm); font-weight: 500; text-decoration: none; opacity: .86; cursor: pointer;} .breakdance .rt-nav__link::before {content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0;} .breakdance .rt-nav__link:hover, .breakdance .rt-nav__item[open] > .rt-nav__link {opacity: 1;} .breakdance .rt-nav__link:hover::before, .breakdance .rt-nav__item[open] > .rt-nav__link::before {opacity: .07;} body.breakdance:has(.rt-hero) .rt-header:not(.is-solid) .rt-nav__link:hover::before, body.breakdance:has(.rt-hero) .rt-header:not(.is-solid) .rt-nav__item[open] > .rt-nav__link::before {opacity: .14;} .breakdance .rt-nav__item > summary {list-style: none;} .breakdance .rt-nav__item > summary::-webkit-details-marker {display: none;} .breakdance .rt-nav__chev {width: 14px; height: 14px;} .breakdance .rt-nav__item[open] .rt-nav__chev {transform: rotate(180deg);} .breakdance .rt-header__actions {display: flex; align-items: center; gap: var(--rt-s4); margin-left: auto;} .breakdance .rt-header__phone {display: inline-flex; align-items: center; gap: var(--rt-s2); font-weight: 600; font-size: var(--rt-fs-sm); text-decoration: none; font-variant-numeric: tabular-nums;} .breakdance .rt-header__phone .rt-icon {width: 18px; height: 18px;} .breakdance .rt-header__call, .breakdance .rt-menu-btn {display: none;} body.breakdance:has(.rt-hero) .rt-header:not(.is-solid) .rt-iconbtn {border-color: rgb(255 255 255 / .34);} .breakdance .rt-menu-btn .rt-icon--close {display: none;} .breakdance .rt-menu-btn[aria-expanded="true"] .rt-icon--open {display: none;} .breakdance .rt-menu-btn[aria-expanded="true"] .rt-icon--close {display: block;} .breakdance .rt-sheet {position: fixed; inset: var(--rt-header-h) 0 0; z-index: 49; overflow-y: auto; padding: var(--rt-s5) var(--rt-gutter) calc(var(--rt-s7) + env(safe-area-inset-bottom, 0px)); background: var(--rt-bg); color: var(--rt-text);} .breakdance .rt-sheet__nav {border-top: 1px solid var(--rt-line);} .breakdance .rt-sheet__link {display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--rt-line); font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; text-decoration: none;} .breakdance .rt-sheet__actions {display: grid; gap: var(--rt-s3); margin-top: var(--rt-s6);} .breakdance .rt-sheet__meta {margin-top: var(--rt-s5); color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-header__inner {position: relative;} .breakdance .rt-mega {position: absolute; top: calc(100% + 8px); left: var(--rt-gutter); right: var(--rt-gutter); padding: var(--rt-s6); border-radius: var(--rt-radius); background: var(--rt-bg); color: var(--rt-text); box-shadow: var(--rt-shadow-float);} .breakdance .rt-mega__grid {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rt-s7);} .breakdance .rt-mega__label {margin-bottom: var(--rt-s3); color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-mega__features {display: grid; gap: var(--rt-s2);} .breakdance .rt-mega__feature, .breakdance .rt-mega__item {display: grid; align-items: center; border-radius: var(--rt-radius-ctl); text-decoration: none;} .breakdance .rt-mega__feature {grid-template-columns: 136px minmax(0, 1fr); gap: var(--rt-s5); padding: var(--rt-s3);} .breakdance .rt-mega__item {grid-template-columns: 64px minmax(0, 1fr); gap: var(--rt-s4); padding: var(--rt-s2);} .breakdance .rt-mega__feature:hover, .breakdance .rt-mega__item:hover {background: rgb(var(--rt-shade) / .06);} .breakdance .rt-mega__stage, .breakdance .rt-mega__thumb {display: grid; place-items: center; overflow: hidden; background: var(--rt-stage);} .breakdance .rt-mega__stage {aspect-ratio: 4 / 3; border-radius: var(--rt-radius-ctl);} .breakdance .rt-mega__thumb {width: 64px; height: 52px; border-radius: 10px;} .breakdance .rt-mega__stage img, .breakdance .rt-mega__thumb img {width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply;} .breakdance .rt-mega__text {display: grid; gap: 4px;} .breakdance .rt-mega__name {font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;} .breakdance .rt-mega__desc {color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.45;} .breakdance .rt-mega__list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-s1) var(--rt-s4);} .breakdance .rt-mega__list .rt-mega__name {font-size: var(--rt-fs-sm);} .breakdance .rt-mega__list .rt-mega__desc {font-size: var(--rt-fs-xs);} .breakdance .rt-mega__foot {display: flex; align-items: center; justify-content: space-between; gap: var(--rt-s5); margin-top: var(--rt-s5); padding-top: var(--rt-s5); border-top: 1px solid var(--rt-line); color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-mega--sektor .rt-mega__list {grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--rt-s4);} .breakdance .rt-mega--sektor .rt-mega__item {grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--rt-s3); padding: 0;} .breakdance .rt-mega--sektor .rt-mega__item:hover {background: none;} .breakdance .rt-mega--sektor .rt-mega__thumb {width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--rt-radius-ctl);} .breakdance .rt-mega--sektor .rt-mega__thumb img, .breakdance .rt-sheet__thumb--photo img {width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal;} .breakdance .rt-sheet__group > summary {list-style: none; cursor: pointer;} .breakdance .rt-sheet__group > summary::-webkit-details-marker {display: none;} .breakdance .rt-sheet__group[open] > summary .rt-icon {transform: rotate(180deg);} .breakdance .rt-sheet__sub {display: grid; padding-block: var(--rt-s2) var(--rt-s4); border-bottom: 1px solid var(--rt-line);} .breakdance .rt-sheet__sub > li + li {border-top: 1px solid var(--rt-line);} .breakdance .rt-sheet__item {display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--rt-s4); min-height: 60px; padding-block: var(--rt-s2); font-size: 1rem; font-weight: 500; line-height: 1.3; text-decoration: none;} .breakdance .rt-sheet__thumb {display: grid; place-items: center; width: 56px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--rt-stage);} .breakdance .rt-sheet__thumb img {width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply;} .breakdance .rt-sheet__all {display: inline-flex; align-items: center; gap: var(--rt-s2); min-height: 44px; font-weight: 600; text-decoration: none;} .rt-lock, .rt-lock body.breakdance {overflow: hidden;} .breakdance .rt-hero {position: relative; isolation: isolate; margin-top: calc(-1 * var(--rt-header-h)); overflow-x: clip; color: var(--rt-on-ink); background: var(--rt-ink);} .breakdance .rt-hero__media {position: absolute; inset: 0; z-index: -1; overflow: hidden;} .breakdance .rt-hero__bg {width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%;} .breakdance .rt-hero__media::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--rt-scrim) / .94) 0%, rgb(var(--rt-scrim) / .82) 34%, rgb(var(--rt-scrim) / .38) 62%, rgb(var(--rt-scrim) / .30) 100%), linear-gradient(0deg, rgb(var(--rt-scrim) / .70) 0%, rgb(var(--rt-scrim) / 0) 38%), linear-gradient(180deg, rgb(var(--rt-scrim) / .55) 0%, rgb(var(--rt-scrim) / 0) 22%);} .breakdance .rt-hero__grid {display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 12fr); align-items: end; gap: var(--rt-s6); padding-top: calc(var(--rt-header-h) + 120px);} .breakdance .rt-hero__text {display: grid; gap: var(--rt-s5); padding-bottom: 136px;} .breakdance .rt-hero__text .rt-eyebrow {color: var(--rt-yellow);} .breakdance .rt-hero__text .rt-lead {max-width: 44ch; color: var(--rt-on-ink-2);} .breakdance .rt-hero__text .rt-actions {margin-top: var(--rt-s3);} .breakdance .rt-hero__product {position: relative; margin: 0 -14% -150px -9%; align-self: end;} .breakdance .rt-hero__product img {position: relative; width: 100%; filter: drop-shadow(0 12px 18px rgb(0 0 0 / .2));} .breakdance .rt-hero--page .rt-hero__grid {align-items: center; min-height: clamp(380px, 36vw, 560px); padding-top: calc(var(--rt-header-h) + 40px);} .breakdance .rt-hero--page .rt-hero__bg {object-position: 50% 50%;} .breakdance .rt-hero--page .rt-hero__bg--high {object-position: 50% 30%;} .breakdance .rt-hero--page .rt-hero__text {padding-bottom: var(--rt-s8);} .breakdance .rt-hero--page .rt-h1 {font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);} .breakdance .rt-hero--page .rt-hero__product {align-self: end; margin: calc(var(--rt-s6) + 77px) 0 -125px 6%;} .breakdance .rt-hero--page:has(.rt-hero__product) + .rt-section {padding-top: calc(125px + var(--rt-s7));} .breakdance .rt-hero .rt-crumbs ol {color: var(--rt-on-ink-2);} .breakdance .rt-hero .rt-crumbs li + li::before {color: rgb(255 255 255 / .32);} .breakdance .rt-hero .rt-crumbs a:hover, .breakdance .rt-hero .rt-crumbs [aria-current="page"] {color: var(--rt-on-ink);} .breakdance .rt-hero .rt-hl {--rt-mark: rgb(255 255 255 / .2);} .breakdance .rt-trust {padding-block: 200px var(--rt-s4);} .breakdance .rt-trust__list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));} .breakdance .rt-trust__item {display: grid; justify-items: center; align-content: start; gap: var(--rt-s5); padding-inline: var(--rt-s5); border-left: 1px solid var(--rt-line); text-align: center;} .breakdance .rt-trust__item:first-child {border-left: 0;} .breakdance .rt-trust__icon {--rt-ic-accent: var(--rt-bg); display: grid; place-items: center; width: 80px; height: 80px; border-radius: var(--rt-radius); background: var(--rt-yellow); color: var(--rt-ink);} .breakdance .rt-trust__icon .rt-icon {width: 54px; height: 54px; stroke-width: 2;} .breakdance .rt-trust__title {display: block; font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;} .breakdance .rt-trust__sub {display: block; margin-top: var(--rt-s2); color: var(--rt-text-2); font-size: 1rem; line-height: 1.5; text-wrap: balance;} .breakdance .rt-groups {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 104px var(--rt-s5); padding-top: 112px;} .breakdance .rt-groups > li {grid-column: span 4; display: grid;} .breakdance .rt-groups > .rt-groups__xl {grid-column: span 6;} .breakdance .rt-group {position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 330px; padding: var(--rt-s6); border-radius: var(--rt-radius); background: var(--rt-surface); color: var(--rt-text); text-decoration: none;} .breakdance .rt-group:hover {color: var(--rt-text);} .breakdance .rt-group--xl {min-height: 430px; padding: 36px;} .breakdance .rt-group__media {position: absolute; right: 22px; top: -70px; width: 60%;} .breakdance .rt-group--xl .rt-group__media {right: 30px; top: -108px; width: 62%;} .breakdance .rt-group--kopuk .rt-group__media {right: 44px; top: -92px; width: 30%;} .breakdance .rt-group--kompresor .rt-group__media {top: -40px; width: 68%;} .breakdance .rt-group--pompa .rt-group__media {top: -58px; width: 56%;} .breakdance .rt-group--aksesuar .rt-group__media {top: -18px; width: 70%;} .breakdance .rt-group--yedek .rt-group__media {top: -60px; width: 54%;} .breakdance .rt-group__media img {width: 100%; filter: drop-shadow(0 20px 18px rgb(var(--rt-shade) / .16));} .breakdance .rt-group__body {position: relative; display: grid; gap: 6px; max-width: 64%;} .breakdance .rt-group--xl .rt-group__body {max-width: 50%;} .breakdance .rt-group__meta {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-group__fig {font-size: clamp(2rem, 1.4rem + 1.4vw, 2.875rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;} .breakdance .rt-group__fig small {margin-left: 6px; color: var(--rt-text-2); font-size: 1rem; font-weight: 500; letter-spacing: 0;} .breakdance .rt-group--xl .rt-group__fig {font-size: clamp(2.5rem, 1.5rem + 2.6vw, 4.25rem);} .breakdance .rt-group__name {margin-top: var(--rt-s3); font-size: 1.3125rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;} .breakdance .rt-group--xl .rt-group__name {font-size: 1.75rem;} .breakdance .rt-group__desc {color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.45;} .breakdance .rt-group .rt-go {position: absolute; right: var(--rt-s5); bottom: var(--rt-s5); background: var(--rt-bg);} .breakdance .rt-go {position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rt-line-2); border-radius: 50%; isolation: isolate;} .breakdance .rt-go::before {content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; background: var(--rt-yellow); opacity: 0; transform: scale(.6);} .breakdance .rt-go .rt-icon {width: 20px; height: 20px;} .breakdance .rt-showcase {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rt-s5); padding-top: 72px;} .breakdance .rt-feature {display: grid; grid-template-rows: auto 1fr; border-radius: var(--rt-radius); background: var(--rt-bg); box-shadow: var(--rt-shadow-card);} .breakdance .rt-feature__stage {position: relative; display: grid; place-items: center; padding: 0 var(--rt-s8) var(--rt-s2);} .breakdance .rt-feature__stage img {width: min(100%, 560px); margin-top: -96px; filter: drop-shadow(0 22px 24px rgb(var(--rt-shade) / .22));} .breakdance .rt-feature__body {display: grid; gap: var(--rt-s5); padding: var(--rt-s5) var(--rt-s7) var(--rt-s7);} .breakdance .rt-tags {display: flex; flex-wrap: wrap; gap: var(--rt-s2);} .breakdance .rt-tag {display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--rt-s3); border: 1px solid var(--rt-line-2); border-radius: var(--rt-radius-ctl); color: var(--rt-text-2); font-size: var(--rt-fs-xs); font-weight: 500;} .breakdance .rt-feature__name {font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05;} .breakdance .rt-stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rt-line);} .breakdance .rt-stats > div {display: grid; grid-template-rows: auto 1fr; padding: var(--rt-s4) var(--rt-s4) 0; border-left: 1px solid var(--rt-line);} .breakdance .rt-stats > div:first-child {padding-left: 0; border-left: 0;} .breakdance .rt-stats .rt-tag-dt {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;} .breakdance .rt-stats .rt-tag-dd {align-self: end; margin-top: var(--rt-s1); font-size: var(--rt-fs-stat); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;} .breakdance .rt-stats .rt-tag-dd span {margin-left: 4px; color: var(--rt-text-2); font-size: var(--rt-fs-sm); font-weight: 500; letter-spacing: 0;} .breakdance .rt-feature__actions {display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-s5);} .breakdance .rt-minis {display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--rt-s5);} .breakdance .rt-mini {position: relative; display: grid; grid-template-columns: clamp(132px, 14vw, 216px) minmax(0, 1fr) 48px; grid-template-areas: "img head go" "img specs specs"; align-content: center; align-items: center; gap: var(--rt-s3) var(--rt-s5); height: 100%; padding: var(--rt-s4) var(--rt-s5) var(--rt-s4) var(--rt-s4); border-radius: var(--rt-radius); background: var(--rt-bg); box-shadow: var(--rt-shadow-card); text-decoration: none;} .breakdance .rt-mini__stage {grid-area: img; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 6 / 5;} .breakdance .rt-mini__stage img {width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px rgb(var(--rt-shade) / .16));} .breakdance .rt-mini__head {grid-area: head;} .breakdance .rt-mini .rt-go {grid-area: go;} .breakdance .rt-mini__head, .breakdance .rt-mini .rt-go {align-self: end;} .breakdance .rt-mini__type {display: block; color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-mini__name {margin-top: 4px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;} .breakdance .rt-mini__specs {grid-area: specs; align-self: start; display: flex; flex-wrap: wrap; gap: var(--rt-s2) var(--rt-s5); color: var(--rt-text-2); font-size: var(--rt-fs-xs); font-variant-numeric: tabular-nums;} .breakdance .rt-mini__specs b {display: block; color: var(--rt-text); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;} .breakdance .rt-specline {display: flex; flex-wrap: wrap; gap: 0 var(--rt-s3); margin-top: 6px; color: var(--rt-text-2); font-size: var(--rt-fs-sm); font-variant-numeric: tabular-nums;} .breakdance .rt-specline li + li {padding-left: var(--rt-s3); border-left: 1px solid var(--rt-line-2);} .breakdance .rt-specline b {color: var(--rt-text); font-weight: 600;} .breakdance .rt-eng {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--rt-s8);} .breakdance .rt-eng__media {position: relative; overflow: hidden; border-radius: var(--rt-radius); aspect-ratio: 4 / 3.2; background: var(--rt-ink);} .breakdance .rt-eng__media img {width: 100%; height: 100%; object-fit: cover;} .breakdance .rt-eng__cut {position: absolute; right: 5%; bottom: 6%; width: 38%; padding: var(--rt-s4); border-radius: 16px; background: var(--rt-bg); box-shadow: var(--rt-shadow-float);} .breakdance .rt-eng__text {display: grid; gap: var(--rt-s5);} .breakdance .rt-facts {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--rt-s3); border-top: 1px solid var(--rt-line);} .breakdance .rt-fact {padding: var(--rt-s5) var(--rt-s5) var(--rt-s5) 0; border-bottom: 1px solid var(--rt-line);} .breakdance .rt-fact:nth-child(even) {padding-left: var(--rt-s5); border-left: 1px solid var(--rt-line);} .breakdance .rt-fact__value {font-size: var(--rt-fs-stat); font-weight: 600; letter-spacing: -.035em; line-height: 1.05;} .breakdance .rt-fact__text {margin-top: var(--rt-s2); color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.5;} .breakdance .rt-bento {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 272px; gap: var(--rt-s4);} .breakdance .rt-tile {position: relative; overflow: hidden; border-radius: var(--rt-radius); background: var(--rt-ink); isolation: isolate;} .breakdance .rt-tile a {position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rt-s4); padding: var(--rt-s5); color: var(--rt-on-ink); text-decoration: none;} .breakdance .rt-tile a:hover {color: var(--rt-on-ink);} .breakdance .rt-tile img {position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.04);} .breakdance .rt-tile a::before {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--rt-scrim) / 0) 38%, rgb(var(--rt-scrim) / .78) 100%);} .breakdance .rt-tile__name {font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance;} .breakdance .rt-tile--xl .rt-tile__name {font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -.03em;} .breakdance .rt-tile .rt-go, .breakdance .rt-lb .rt-go {flex: none; border-color: rgb(255 255 255 / .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgb(255 255 255 / .06);} .breakdance .rt-tile .rt-go::before {inset: -1px;} .breakdance .rt-tile--1 {grid-column: 1 / 8; grid-row: span 2;} .breakdance .rt-tile--2 {grid-column: 8 / 13;} .breakdance .rt-tile--3 {grid-column: 8 / 13;} .breakdance .rt-tile--4 {grid-column: 1 / 5;} .breakdance .rt-tile--5 {grid-column: 5 / 9;} .breakdance .rt-tile--6 {grid-column: 9 / 13;} .breakdance .rt-counts {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--rt-s8); padding-block: 36px 40px; border-radius: var(--rt-radius); background: var(--rt-ink);} .breakdance .rt-counts > div {display: grid; align-content: start; gap: var(--rt-s2); padding: var(--rt-s2) var(--rt-s5) 0; border-left: 1px solid var(--rt-ink-line);} .breakdance .rt-counts > div:first-child {border-left: 0;} .breakdance .rt-counts .rt-tag-dt {order: 2; color: var(--rt-on-ink); font-size: var(--rt-fs-sm);} .breakdance .rt-counts .rt-tag-dd {order: 1; color: var(--rt-yellow); font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;} .breakdance .rt-reviews {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rt-s5);} .breakdance .rt-reviews > li:first-child {grid-row: span 2;} .breakdance .rt-review {display: grid; align-content: space-between; gap: var(--rt-s6); height: 100%; margin: 0; padding: var(--rt-s6); border-radius: var(--rt-radius); background: var(--rt-surface);} .breakdance .rt-review blockquote {margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.45; text-wrap: pretty;} .breakdance .rt-review blockquote::before {content: "\201C"; display: block; height: .5em; color: var(--rt-ink); font-size: 4rem; font-weight: 600; line-height: 1;} .breakdance .rt-review--lead {padding: var(--rt-s7);} .breakdance .rt-review--lead blockquote {font-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.75rem); letter-spacing: -.025em; line-height: 1.22;} .breakdance .rt-review--lead blockquote::before {font-size: 6rem;} .breakdance .rt-review figcaption {display: flex; align-items: center; gap: var(--rt-s4); color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-review__mono {flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rt-ink); color: var(--rt-on-ink); font-size: .9375rem; font-weight: 600; letter-spacing: .02em;} .breakdance .rt-review__who {display: grid; gap: 2px;} .breakdance .rt-review figcaption strong {color: var(--rt-text); font-size: 1rem; font-weight: 600;} .breakdance .rt-quote {display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rt-s8); align-items: start;} .breakdance .rt-quote__intro {display: grid; gap: var(--rt-s5); position: sticky; top: calc(var(--rt-header-h) + 32px);} .breakdance .rt-quote__dealer {color: var(--rt-text-2); font-size: var(--rt-fs-sm); max-width: 46ch;} .breakdance .rt-contacts {display: grid; margin-top: var(--rt-s3); border-top: 1px solid var(--rt-line-2);} .breakdance .rt-contacts li {display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--rt-s4); align-items: start; padding-block: var(--rt-s4); border-bottom: 1px solid var(--rt-line-2);} .breakdance .rt-contacts .rt-icon {margin-top: 3px; color: var(--rt-text-2);} .breakdance .rt-contacts small {display: block; color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;} .breakdance .rt-contacts a {text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;} .breakdance .rt-contacts .rt-contacts__big {font-size: 1.625rem; letter-spacing: -.02em;} .breakdance .rt-formcard {padding: var(--rt-s7); border-radius: var(--rt-radius); background: var(--rt-bg); box-shadow: var(--rt-shadow-float);} .breakdance .rt-formcard__title {margin-bottom: var(--rt-s2);} .breakdance .rt-formcard__note {margin-bottom: var(--rt-s6); color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-form, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-s5);} .breakdance .rt-field, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field {display: grid; gap: var(--rt-s2); align-content: start;} .breakdance .rt-field--full {grid-column: 1 / -1;} .breakdance .rt-field__label, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__label {font-size: var(--rt-fs-sm); font-weight: 600;} .breakdance .rt-field__opt {color: var(--rt-text-3); font-weight: 400;} .breakdance .rt-input, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__input {width: 100%; min-height: 54px; padding: 0 var(--rt-s4); border: 1px solid var(--rt-field); border-radius: var(--rt-radius-ctl); background: var(--rt-bg); font-size: 1rem;} .breakdance textarea.rt-input, .breakdance :is(.rt-formcard, .rt-pop) textarea.breakdance-form-field__input {min-height: 120px; padding-block: var(--rt-s3); resize: vertical;} .breakdance .rt-input:focus-visible, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__input:focus-visible {outline: 3px solid var(--rt-yellow); outline-offset: 0; border-color: var(--rt-text); border-radius: var(--rt-radius-ctl);} .breakdance .rt-input[aria-invalid="true"], .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__input[aria-invalid="true"] {border-color: var(--rt-error);} .breakdance .rt-input[readonly], .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__input[readonly] {background: var(--rt-surface); color: var(--rt-text-2);} .breakdance .rt-select {position: relative;} .breakdance .rt-select select {appearance: none; padding-right: var(--rt-s7);} .breakdance .rt-select .rt-icon {position: absolute; right: var(--rt-s4); top: 50%; translate: 0 -50%; pointer-events: none;} .breakdance .rt-field__error {min-height: 0; color: var(--rt-error); font-size: var(--rt-fs-sm); font-weight: 500;} .breakdance .rt-field__error:empty {display: none;} .breakdance .rt-hp {position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;} .breakdance .rt-consent {grid-column: 1 / -1; color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-consent a {color: var(--rt-text); text-underline-offset: 3px;} .breakdance .rt-consent a:hover {color: var(--rt-text);} .breakdance .rt-checkbox {grid-column: 1 / -1; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--rt-s3); align-items: start; font-size: var(--rt-fs-sm); color: var(--rt-text-2); cursor: pointer;} .breakdance .rt-checkbox input {width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rt-text);} .breakdance .rt-form__foot, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-footer {grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-s4); margin-top: var(--rt-s2);} .breakdance .rt-form__foot .rt-btn, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-footer .breakdance-form-button {min-width: 220px;} .breakdance .rt-form__hint {color: var(--rt-text-3); font-size: var(--rt-fs-xs);} .breakdance .rt-done {display: grid; gap: var(--rt-s3); padding-block: var(--rt-s6);} .breakdance .rt-done__icon {display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--rt-yellow); color: var(--rt-on-yellow);} .breakdance .rt-done__icon .rt-icon {width: 26px; height: 26px; stroke-width: 2.25;} .breakdance .rt-done__text {color: var(--rt-text-2); max-width: 52ch;} .breakdance .rt-pop {position: relative; display: grid; gap: var(--rt-s5); width: min(100%, var(--rt-pop-w)); padding: var(--rt-s7); border-radius: var(--rt-radius); background: var(--rt-bg); color: var(--rt-text); box-shadow: var(--rt-shadow-float);} .breakdance .rt-pop__head {display: grid; gap: var(--rt-s3); padding-right: var(--rt-s7);} .breakdance .rt-pop__title {font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;} .breakdance .rt-pop__lead {color: var(--rt-text-2);} .breakdance .rt-pop__close {position: absolute; top: var(--rt-s4); right: var(--rt-s4); background: var(--rt-bg); cursor: pointer;} .breakdance .rt-pop .rt-form, .breakdance .rt-pop .breakdance-form {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s4);} .breakdance .rt-pop .rt-form__foot .rt-btn, .breakdance .rt-pop .breakdance-form-footer .breakdance-form-button {flex: 1 1 auto;} .breakdance .rt-footer {padding-block: var(--rt-s9) var(--rt-s6); background: var(--rt-ink); color: var(--rt-on-ink);} .breakdance .rt-footer__top {display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: var(--rt-s7);} .breakdance .rt-footer .rt-brand__sub {opacity: .66;} .breakdance .rt-footer__about {margin-top: var(--rt-s4); max-width: 34ch; color: var(--rt-on-ink-2); font-size: var(--rt-fs-sm);} .breakdance .rt-footer__call {margin-top: var(--rt-s5);} .breakdance .rt-footer__title {margin-bottom: var(--rt-s4); color: var(--rt-on-ink-2); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;} .breakdance .rt-footer__list {display: grid; gap: var(--rt-s2); font-size: var(--rt-fs-sm);} .breakdance .rt-footer__list a {display: inline-block; padding-block: 3px; text-decoration: none; opacity: .86;} .breakdance .rt-footer__list a:hover {opacity: 1; color: var(--rt-yellow);} .breakdance .rt-footer__address {display: grid; gap: var(--rt-s3); font-style: normal; color: var(--rt-on-ink-2); font-size: var(--rt-fs-sm);} .breakdance .rt-footer__address a {color: var(--rt-on-ink); text-decoration: none;} .breakdance .rt-footer__address a:hover {color: var(--rt-on-ink);} .breakdance .rt-footer__address a:hover {color: var(--rt-yellow);} .breakdance .rt-footer__bottom {display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rt-s4); margin-top: var(--rt-s8); padding-top: var(--rt-s5); border-top: 1px solid var(--rt-ink-line); color: var(--rt-on-ink-2); font-size: var(--rt-fs-xs);} .breakdance .rt-footer__bottom a {color: var(--rt-on-ink);} .breakdance .rt-footer__bottom a:hover {color: var(--rt-on-ink);} .breakdance .rt-footer :focus-visible {outline-color: var(--rt-yellow);} .breakdance .rt-cookie {position: fixed; left: var(--rt-s5); bottom: var(--rt-s5); z-index: 60; display: grid; gap: var(--rt-s4); width: min(440px, calc(100% - 2 * var(--rt-s5))); max-height: calc(100vh - 2 * var(--rt-s5)); max-height: calc(100dvh - 2 * var(--rt-s5)); overflow-y: auto; overscroll-behavior: contain; padding: var(--rt-s5); border: 1px solid var(--rt-line); border-radius: var(--rt-radius); background: var(--rt-bg); box-shadow: var(--rt-shadow-float);} .breakdance .rt-cookie__text {color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.55;} .breakdance .rt-cookie__text a {color: var(--rt-text); text-underline-offset: 3px;} .breakdance .rt-cookie__text a:hover {color: var(--rt-text);} .breakdance .rt-cookie__actions {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-s2);} .breakdance .rt-cookie__actions .rt-btn {min-height: 44px; padding: 0 var(--rt-s3); font-size: var(--rt-fs-sm);} .breakdance .rt-cookie__prefs {display: grid; gap: var(--rt-s3); padding-top: var(--rt-s4); border-top: 1px solid var(--rt-line);} .breakdance .rt-cookie__option {display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--rt-s3); color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.5; cursor: pointer;} .breakdance .rt-cookie__option input {width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rt-ink);} .breakdance .rt-cookie__option b {display: block; color: var(--rt-text); font-weight: 600;} .breakdance .rt-cookie__prefs .rt-btn {min-height: 44px; font-size: var(--rt-fs-sm);} .breakdance .rt-mbar {display: none;} @media (prefers-reduced-motion: no-preference) { .breakdance .rt-header::before, .breakdance .rt-header::after {transition: opacity .35s var(--rt-ease);} .breakdance .rt-nav__link, .breakdance .rt-nav__link::before, .breakdance .rt-footer__list a {transition: opacity .25s var(--rt-ease);} .breakdance .rt-nav__chev, .breakdance .rt-sheet__group > summary .rt-icon {transition: transform .25s var(--rt-ease);} .breakdance .rt-nav__item[open] .rt-mega {animation: rt-drop .26s var(--rt-ease) both;} .breakdance .rt-mega__stage img, .breakdance .rt-mega__thumb img {transition: transform .5s var(--rt-ease);} .breakdance .rt-mega__feature:hover .rt-mega__stage img, .breakdance .rt-mega__item:hover .rt-mega__thumb img {transform: translateY(-4px) scale(1.035);} .breakdance .rt-mega--sektor .rt-mega__item:hover .rt-mega__thumb img {transform: scale(1.05);} @keyframes rt-drop { from { opacity: 0; transform: translateY(-6px); } } .breakdance .rt-link .rt-icon {transition: transform .35s var(--rt-ease);} .breakdance .rt-link:hover .rt-icon {transform: translateX(4px);} .breakdance .rt-hl__w::before {transition: transform var(--t, .3s) linear var(--d, 0s);} .rt-js .breakdance .rt-reveal {opacity: 0; transform: translateY(28px); transition: opacity .6s var(--rt-ease) var(--rd, 0ms), transform .7s var(--rt-ease) var(--rd, 0ms);} .rt-js .breakdance .rt-reveal.is-in {opacity: 1; transform: none;} .breakdance .rt-btn, .breakdance .rt-go, .breakdance .rt-group__media img, .breakdance .rt-mini__stage img, .breakdance .rt-feature__stage img, .breakdance .rt-tile img, .breakdance .rt-card__stage img, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button {transition: transform .5s var(--rt-ease);} .breakdance .rt-btn--primary::after, .breakdance .rt-go::before, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button.button-atom--primary::after {transition: opacity .25s var(--rt-ease), transform .35s var(--rt-ease);} .breakdance .rt-card {transition: transform .45s var(--rt-ease);} .breakdance .rt-btn:active, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-button:active {transform: translateY(1px);} .breakdance .rt-group:hover .rt-group__media img {transform: translateY(-8px);} .breakdance .rt-mini:hover .rt-mini__stage img, .breakdance .rt-card:hover .rt-card__stage img {transform: translateY(-4px) scale(1.035);} .breakdance .rt-feature:hover .rt-feature__stage img {transform: translateY(-6px);} .breakdance .rt-card:hover {transform: translateY(-3px);} .breakdance .rt-tile:hover img {transform: scale(1.05);} .breakdance .rt-rise {animation: rt-rise .9s var(--rt-ease) both;} .breakdance .rt-rise--2 {animation-delay: .08s;} .breakdance .rt-rise--3 {animation-delay: .16s;} .breakdance .rt-rise--4 {animation-delay: .24s;} .breakdance .rt-arrive {animation: rt-arrive 1.1s var(--rt-ease) .12s both;} @keyframes rt-rise { from { opacity: 0; transform: translateY(18px); } } @keyframes rt-arrive { from { opacity: 0; transform: translateX(40px); } } } .breakdance .rt-group:hover .rt-go::before, .breakdance .rt-mini:hover .rt-go::before, .breakdance .rt-tile:hover .rt-go::before, .breakdance .rt-card:hover .rt-go::before, .breakdance .rt-gal__slide:hover .rt-go::before, .breakdance .rt-gal__open:focus-visible .rt-go::before, .breakdance .rt-lb .rt-go:hover::before {opacity: 1; transform: scale(1);} .breakdance .rt-group:hover .rt-go, .breakdance .rt-card:hover .rt-go {border-color: var(--rt-yellow);} .breakdance .rt-tile:hover .rt-go, .breakdance .rt-mini:hover .rt-go, .breakdance .rt-gal__slide:hover .rt-go, .breakdance .rt-gal__open:focus-visible .rt-go, .breakdance .rt-lb .rt-go:hover {border-color: var(--rt-yellow); color: var(--rt-on-yellow);} .breakdance .rt-group:focus-visible, .breakdance .rt-mini:focus-visible, .breakdance .rt-tile a:focus-visible, .breakdance .rt-card a:focus-visible, .breakdance .rt-acc__link:focus-visible {outline-offset: 4px; border-radius: var(--rt-radius);} @media (max-width: 1024px) { :root {--rt-section: 96px; --rt-header-h: 68px; --rt-hero-img: min(.78 * (100vw - 2 * var(--rt-gutter)), 620px); /* hero product width (the container is 100vw minus its gutters) */ --rt-hero-drop: calc(.232 * var(--rt-hero-img) * 808 / 960); /* as on desktop, the image's lower 23 % (wheels, floor glow, shadow) hangs below the photo */ --rt-page-img: min(.62 * (100vw - 2 * var(--rt-gutter)), 440px); /* a page hero's product (İletişim: ST 2500 C, 960 x 880) */ --rt-page-drop: calc(.232 * var(--rt-page-img) * 880 / 960);} .breakdance .rt-nav, .breakdance .rt-header__phone {display: none;} .breakdance .rt-header__call, .breakdance .rt-menu-btn {display: inline-grid;} .breakdance .rt-header__actions {gap: var(--rt-s2);} .breakdance .rt-hero__grid {grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: calc(var(--rt-header-h) + 72px);} .breakdance .rt-hero__text {padding-bottom: var(--rt-s6); max-width: 640px;} .breakdance .rt-hero__text .rt-lead {max-width: 58ch;} .breakdance .rt-hero__text .rt-actions {flex-wrap: nowrap;} .breakdance .rt-hero__text .rt-actions .rt-btn--primary {flex: 1 1 auto;} .breakdance .rt-hero--page .rt-hero__product {width: var(--rt-page-img); margin: 0 0 calc(-1 * var(--rt-page-drop)) auto;} .breakdance .rt-hero--page:has(.rt-hero__product) + .rt-section {padding-top: calc(var(--rt-page-drop) + 40px);} .breakdance .rt-hero__product {width: var(--rt-hero-img); margin: 0 0 calc(-1 * var(--rt-hero-drop)) auto;} .breakdance .rt-trust {padding-top: calc(var(--rt-hero-drop) + 40px);} .breakdance .rt-trust__list {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--rt-s6);} .breakdance .rt-trust__item:nth-child(3) {border-left: 0;} .breakdance .rt-groups {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px var(--rt-s4); padding-top: 96px;} .breakdance .rt-groups > li, .breakdance .rt-groups > .rt-groups__xl {grid-column: auto;} .breakdance .rt-group--xl {min-height: 380px; padding: var(--rt-s6);} .breakdance .rt-group--xl .rt-group__media {top: -92px;} .breakdance .rt-group--xl .rt-group__body {max-width: 72%;} .breakdance .rt-showcase {grid-template-columns: minmax(0, 1fr); row-gap: var(--rt-s5);} .breakdance .rt-minis {grid-template-rows: none;} .breakdance .rt-eng {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s7);} .breakdance .rt-bento {grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px;} .breakdance .rt-tile--1 {grid-column: 1 / -1; grid-row: span 2;} .breakdance .rt-tile--2, .breakdance .rt-tile--3, .breakdance .rt-tile--4, .breakdance .rt-tile--5 {grid-column: auto;} .breakdance .rt-tile--6 {grid-column: 1 / -1;} .breakdance .rt-counts > div {padding-inline: var(--rt-s4);} .breakdance .rt-reviews {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-reviews > li:first-child {grid-row: auto;} .breakdance .rt-quote {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-quote__intro {position: static;} .breakdance .rt-footer__top {grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 767px) { :root {--rt-section: 72px; --rt-header-h: 64px; --rt-hero-img: calc(.92 * (100vw - 2 * var(--rt-gutter))); --rt-page-img: calc(.72 * (100vw - 2 * var(--rt-gutter)));} body.breakdance {padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));} .breakdance .rt-sheet {padding-bottom: calc(var(--rt-s7) + 76px + env(safe-area-inset-bottom, 0px));} .breakdance .rt-brand__mark {width: 34px; height: 34px;} .breakdance .rt-brand__word {font-size: 1.1875rem;} .breakdance .rt-header__cta {display: none;} .breakdance .rt-head {margin-bottom: var(--rt-s6);} .breakdance .rt-head--row {grid-template-columns: minmax(0, 1fr); align-items: start;} .breakdance .rt-hero__media::after {background: linear-gradient(180deg, rgb(var(--rt-scrim) / .86) 0%, rgb(var(--rt-scrim) / .74) 52%, rgb(var(--rt-scrim) / .35) 78%, rgb(var(--rt-scrim) / .65) 100%);} .breakdance .rt-hero__bg {object-position: 58% 50%;} .breakdance .rt-hero__grid {padding-top: calc(var(--rt-header-h) + 32px);} .breakdance .rt-hero__text {gap: var(--rt-s4); padding-bottom: var(--rt-s7);} .breakdance .rt-hero__text .rt-actions {display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--rt-s2);} .breakdance .rt-hero__product {margin: 0 auto calc(-1 * var(--rt-hero-drop));} .breakdance .rt-hero--page .rt-hero__text {padding-bottom: var(--rt-s6);} .breakdance .rt-hero--page .rt-hero__media::after {background: linear-gradient(180deg, rgb(var(--rt-scrim) / .9) 0%, rgb(var(--rt-scrim) / .78) 100%);} .breakdance .rt-hero--page .rt-hero__product {width: var(--rt-page-img); margin: 0 auto calc(-1 * var(--rt-page-drop));} .breakdance .rt-hero--page:has(.rt-hero__product) + .rt-section {padding-top: calc(var(--rt-page-drop) + 36px);} .breakdance .rt-trust {padding-block: calc(var(--rt-hero-drop) + 36px) 0;} .breakdance .rt-trust__list {grid-template-columns: minmax(0, 1fr); row-gap: 0;} .breakdance .rt-trust__item, .breakdance .rt-trust__item:nth-child(3) {grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: start; gap: var(--rt-s4); padding: var(--rt-s5) 0; border-left: 0; text-align: left; border-top: 1px solid var(--rt-line);} .breakdance .rt-trust__sub {text-wrap: pretty;} .breakdance .rt-trust__item:first-child {border-top: 0;} .breakdance .rt-trust__icon {width: 64px; height: 64px; border-radius: 16px;} .breakdance .rt-trust__icon .rt-icon {width: 44px; height: 44px;} .breakdance .rt-trust__title {font-size: 1.1875rem;} .breakdance .rt-groups {gap: 76px var(--rt-s3); padding-top: 72px;} .breakdance .rt-groups > .rt-groups__xl {grid-column: 1 / -1;} .breakdance .rt-group--xl {min-height: 320px; padding: var(--rt-s5);} .breakdance .rt-group--xl .rt-group__media {right: 16px; top: -64px; width: 58%;} .breakdance .rt-group--xl .rt-group__body {max-width: 78%;} .breakdance .rt-group--xl .rt-group__fig {font-size: 2.75rem;} .breakdance .rt-group--xl .rt-group__name {font-size: 1.375rem;} .breakdance .rt-group:not(.rt-group--xl) {min-height: 210px; padding: var(--rt-s4);} .breakdance .rt-group:not(.rt-group--xl) .rt-group__media {right: 10px; top: -44px; width: 74%;} .breakdance .rt-group--kopuk:not(.rt-group--xl) .rt-group__media {top: -52px; width: 36%;} .breakdance .rt-group:not(.rt-group--xl) .rt-group__body {max-width: none;} .breakdance .rt-group:not(.rt-group--xl) .rt-group__fig {font-size: 1.5rem;} .breakdance .rt-group:not(.rt-group--xl) .rt-group__fig small {font-size: .875rem;} .breakdance .rt-group:not(.rt-group--xl) .rt-group__name {margin-top: 6px; font-size: 1.0625rem;} .breakdance .rt-group:not(.rt-group--xl) .rt-group__desc, .breakdance .rt-group:not(.rt-group--xl) .rt-go {display: none;} .breakdance .rt-go {width: 40px; height: 40px;} .breakdance .rt-feature__stage {padding: 0 var(--rt-s5) var(--rt-s2);} .breakdance .rt-feature__stage img {margin-top: -64px;} .breakdance .rt-feature__body {padding: var(--rt-s5);} .breakdance .rt-stats > div {padding-inline: var(--rt-s3);} .breakdance .rt-stats .rt-tag-dd {font-size: 1.5rem;} .breakdance .rt-stats .rt-tag-dd span {font-size: var(--rt-fs-xs);} .breakdance .rt-mini {grid-template-columns: 112px minmax(0, 1fr) 40px; gap: var(--rt-s2) var(--rt-s4); padding: var(--rt-s3) var(--rt-s4) var(--rt-s3) var(--rt-s3);} .breakdance .rt-mini__specs {gap: var(--rt-s1) var(--rt-s4);} .breakdance .rt-mini__specs b {font-size: 1.0625rem;} .breakdance .rt-mini__name {font-size: 1.1875rem;} .breakdance .rt-specline {font-size: var(--rt-fs-xs);} .breakdance .rt-eng__cut {width: 44%; padding: var(--rt-s3);} .breakdance .rt-facts {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-fact, .breakdance .rt-fact:nth-child(even) {padding: var(--rt-s4) 0; border-left: 0;} .breakdance .rt-counts {grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--rt-s5); margin-bottom: var(--rt-s6); padding-block: var(--rt-s5);} .breakdance .rt-counts > div {padding-top: 0;} .breakdance .rt-counts > div:nth-child(3) {border-left: 0;} .breakdance .rt-review {padding: var(--rt-s5);} .breakdance .rt-review blockquote {font-size: 1.125rem;} .breakdance .rt-review blockquote::before {font-size: 3.5rem;} .breakdance .rt-review--lead blockquote {font-size: 1.375rem;} .breakdance .rt-review--lead blockquote::before {font-size: 4.5rem;} .breakdance .rt-bento {grid-auto-rows: 168px; gap: var(--rt-s3);} .breakdance .rt-tile:not(.rt-tile--1, .rt-tile--6) .rt-go {position: absolute; top: var(--rt-s3); right: var(--rt-s3); background: rgb(var(--rt-scrim) / .32);} .breakdance .rt-tile a {padding: var(--rt-s4);} .breakdance .rt-tile .rt-go {width: 36px; height: 36px;} .breakdance .rt-formcard {padding: var(--rt-s5);} .breakdance .rt-pop {padding: var(--rt-s6) var(--rt-s5) var(--rt-s5);} .breakdance .rt-pop__close {top: var(--rt-s3); right: var(--rt-s3);} .breakdance .rt-form, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-form__foot .rt-btn, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-footer .breakdance-form-button {width: 100%;} .breakdance .rt-footer__top {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s6);} .breakdance .rt-cookie {left: var(--rt-s3); right: var(--rt-s3); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100vh - 84px - env(safe-area-inset-bottom, 0px) - 2 * var(--rt-s3)); max-height: calc(100dvh - 84px - env(safe-area-inset-bottom, 0px) - 2 * var(--rt-s3)); padding: var(--rt-s4); gap: var(--rt-s3);} .breakdance .rt-mbar {position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-s2); padding: var(--rt-s3) var(--rt-s3) calc(var(--rt-s3) + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--rt-line-2); box-shadow: var(--rt-shadow-bar);} .breakdance .rt-mbar .rt-btn {min-height: 52px;} } @media (max-width: 374px) { .breakdance .rt-mini {grid-template-columns: 92px minmax(0, 1fr) 40px;} .breakdance .rt-gal__thumbs {gap: 4px;} .breakdance .rt-counts .rt-tag-dd {font-size: 2.25rem;} } .breakdance .rt-section--flush-top {padding-top: 0;} .breakdance .rt-head--flush {margin-bottom: 0;} .breakdance .rt-help__title {font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance;} .breakdance .rt-crumbs ol {display: flex; flex-wrap: wrap; gap: 0 var(--rt-s2); color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-crumbs li + li::before {content: "/"; margin-right: var(--rt-s2); color: var(--rt-line-2);} .breakdance .rt-crumbs a {display: inline-block; padding-block: 10px; text-decoration: none;} .breakdance .rt-crumbs a:hover {color: var(--rt-text);} .breakdance .rt-crumbs [aria-current="page"] {display: inline-block; padding-block: 10px; color: var(--rt-text);} .breakdance .rt-phead {position: relative; overflow: clip; background: var(--rt-surface);} .breakdance .rt-phead__grid {position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--rt-s6); padding-top: var(--rt-s5);} .breakdance .rt-phead__text {display: grid; gap: var(--rt-s5); padding-bottom: var(--rt-s8);} .breakdance .rt-phead__text .rt-h1 {font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);} .breakdance .rt-phead__media {position: relative; align-self: end; margin-bottom: -2px;} .breakdance .rt-phead__media img {width: min(100%, 500px); margin-left: auto; filter: drop-shadow(0 26px 26px rgb(var(--rt-shade) / .22));} .breakdance .rt-keyfacts {display: flex; flex-wrap: wrap; gap: var(--rt-s5) var(--rt-s7); margin-top: var(--rt-s2);} .breakdance .rt-keyfacts li {display: grid; gap: 2px;} .breakdance .rt-keyfacts b {font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;} .breakdance .rt-keyfacts span {color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-filterbar {position: sticky; top: var(--rt-header-h); z-index: 20; border-bottom: 1px solid var(--rt-line); background: rgb(255 255 255 / .94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);} .breakdance .rt-filterbar__inner {display: flex; align-items: center; gap: var(--rt-s5); min-height: 80px; padding-block: var(--rt-s3);} .breakdance .rt-filters {display: flex; flex-wrap: wrap; align-items: center; gap: var(--rt-s3) var(--rt-s6);} .breakdance .rt-fgroup {display: flex; align-items: center; gap: var(--rt-s3); margin: 0; padding: 0; border: 0;} .breakdance .rt-fgroup legend {float: left; margin-right: var(--rt-s2); color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;} .breakdance .rt-fgroup__opts {display: flex; flex-wrap: wrap; gap: 6px;} .breakdance .rt-chip {position: relative;} .breakdance .rt-chip input {position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;} .breakdance .rt-chip span {display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--rt-s4); border: 1px solid var(--rt-line-2); border-radius: var(--rt-radius-ctl); background: var(--rt-bg); font-size: var(--rt-fs-sm); font-weight: 500; white-space: nowrap;} .breakdance .rt-chip input:checked + span {border-color: var(--rt-text); background: var(--rt-text); color: var(--rt-bg);} .breakdance .rt-chip input:focus-visible + span {outline: 3px solid var(--rt-yellow); outline-offset: 2px;} .breakdance .rt-chip:hover span {border-color: var(--rt-text);} .breakdance .rt-count {margin-left: auto; white-space: nowrap; color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-count b {color: var(--rt-text); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums;} .breakdance .rt-filter-toggle {display: none;} .breakdance .rt-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rt-s6) var(--rt-s5);} @media (max-width: 1240px) { .breakdance .rt-grid {grid-template-columns: repeat(3, minmax(0, 1fr));} } .breakdance .rt-card {position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--rt-radius); background: var(--rt-bg); box-shadow: var(--rt-shadow-card);} .breakdance .rt-card__stage {position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; aspect-ratio: 16 / 12; padding: var(--rt-s7) var(--rt-s5) var(--rt-s3); background: var(--rt-stage); box-shadow: inset 0 -1px 0 var(--rt-stage-line);} .breakdance .rt-card__stage img {width: 78%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 16px rgb(var(--rt-shade) / .2));} .breakdance .rt-card__bar {position: absolute; left: var(--rt-s5); top: var(--rt-s4); display: flex; align-items: baseline; gap: 4px; color: var(--rt-text);} .breakdance .rt-card__bar b {font-size: 1.875rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;} .breakdance .rt-card__bar span {color: var(--rt-text-2); font-size: var(--rt-fs-sm); font-weight: 500;} .breakdance .rt-card__body {display: grid; align-content: start; gap: var(--rt-s2); padding: var(--rt-s5);} .breakdance .rt-card__type {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-card__name {font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;} .breakdance .rt-card__name a {text-decoration: none;} .breakdance .rt-card__name a::after {content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--rt-radius);} .breakdance .rt-card__foot {display: flex; align-items: center; justify-content: space-between; gap: var(--rt-s3); margin-top: var(--rt-s3); padding-top: var(--rt-s4); border-top: 1px solid var(--rt-line);} .breakdance .rt-card__foot .rt-btn {position: relative; z-index: 2;} .breakdance .rt-card__more {display: inline-flex; align-items: center; gap: 6px; color: var(--rt-text); font-weight: 600; font-size: var(--rt-fs-sm);} .breakdance .rt-card__more .rt-icon {width: 18px; height: 18px;} .breakdance .rt-card--self {outline: 2px solid var(--rt-yellow); outline-offset: -2px;} .breakdance .rt-empty {display: grid; justify-items: start; gap: var(--rt-s4); padding: var(--rt-s8) 0; color: var(--rt-text-2);} .breakdance .rt-help {position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--rt-s6); overflow: hidden; padding: var(--rt-s7) var(--rt-s8); border-radius: var(--rt-radius); background: var(--rt-ink); color: var(--rt-on-ink);} .breakdance .rt-help .rt-lead {margin-top: var(--rt-s3); color: var(--rt-on-ink-2);} .breakdance .rt-help :focus-visible {outline-color: var(--rt-yellow);} .breakdance .rt-faq {display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--rt-s8); align-items: start;} .breakdance .rt-qa {border-top: 1px solid var(--rt-line-2);} .breakdance .rt-qa details {border-bottom: 1px solid var(--rt-line-2);} .breakdance .rt-qa summary {display: flex; align-items: center; justify-content: space-between; gap: var(--rt-s4); min-height: 72px; padding-block: var(--rt-s4); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; list-style: none;} .breakdance .rt-qa summary::-webkit-details-marker {display: none;} .breakdance .rt-plus {position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--rt-line-2); border-radius: 50%;} .breakdance .rt-plus::before, .breakdance .rt-plus::after {content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor;} .breakdance .rt-plus::after {transform: rotate(90deg);} .breakdance .rt-qa details[open] .rt-plus::after {transform: rotate(0deg);} .breakdance .rt-qa details p {max-width: 62ch; padding-bottom: var(--rt-s5); color: var(--rt-text-2);} .breakdance .rt-prose {display: grid; gap: var(--rt-s4); max-width: 68ch; color: var(--rt-text-2);} .breakdance .rt-prose .rt-h2 {margin-bottom: var(--rt-s2); color: var(--rt-text);} .breakdance .rt-phead--text .rt-phead__grid {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-phead--text .rt-phead__text {max-width: 56rem; padding-bottom: var(--rt-s8);} .breakdance .rt-prose--doc .rt-h3 {margin-top: var(--rt-s4); color: var(--rt-text);} .breakdance .rt-prose--doc ul {display: grid; gap: var(--rt-s2); padding-left: 1.25em; list-style: disc;} .breakdance .rt-prose--doc a {color: var(--rt-text); text-underline-offset: 3px;} .breakdance .rt-prose--doc a:hover {color: var(--rt-text);} .breakdance .rt-posts {display: grid; max-width: 68ch; border-top: 1px solid var(--rt-line-2);} .breakdance .rt-posts li {position: relative; display: grid; gap: var(--rt-s2); padding-block: var(--rt-s6); border-bottom: 1px solid var(--rt-line-2);} .breakdance .rt-posts small {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;} .breakdance .rt-posts a {text-decoration: none;} .breakdance .rt-posts a::after {content: ""; position: absolute; inset: 0;} .breakdance .rt-posts p {color: var(--rt-text-2);} .breakdance .rt-pager ul {display: flex; flex-wrap: wrap; gap: var(--rt-s2); margin-top: var(--rt-s6);} .breakdance .rt-pager a, .breakdance .rt-pager span {display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--rt-s4); border: 1px solid var(--rt-line-2); border-radius: var(--rt-radius-ctl); text-decoration: none;} .breakdance .rt-pager [aria-current="page"] {border-color: var(--rt-text); background: var(--rt-text); color: var(--rt-bg);} .breakdance .rt-pd {padding-block: var(--rt-s4) var(--rt-s9);} .breakdance .rt-pd__grid {display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--rt-s8); align-items: start; margin-top: var(--rt-s3);} .breakdance .rt-gal {display: grid; gap: var(--rt-s3); min-width: 0;} .breakdance .rt-gal__track {position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-rows: minmax(0, 1fr); aspect-ratio: 4 / 3.3; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--rt-radius); background: var(--rt-stage);} .breakdance .rt-gal__slide {display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-width: 0; padding: var(--rt-s8); scroll-snap-align: start;} .breakdance .rt-gal__slide img {width: 88%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(var(--rt-shade) / .14));} .breakdance .rt-gal__slide--photo, .breakdance .rt-gal__slide--framed {padding: 0;} .breakdance .rt-gal__slide--photo img, .breakdance .rt-gal__slide--framed img {width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none;} .breakdance .rt-gal__thumbs {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--rt-s3);} .breakdance .rt-gal__thumb {display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1; padding: 8px; overflow: hidden; border: 1px solid var(--rt-line); border-radius: var(--rt-radius-ctl); background: var(--rt-stage); cursor: pointer;} .breakdance .rt-gal__thumb:hover {border-color: var(--rt-line-2);} .breakdance .rt-gal__thumb[aria-current="true"] {border-color: var(--rt-text); box-shadow: inset 0 0 0 1px var(--rt-text);} .breakdance .rt-gal__thumb img {width: 100%; height: 100%; object-fit: contain;} .breakdance .rt-gal__thumb--photo, .breakdance .rt-gal__thumb--framed {padding: 0;} .breakdance .rt-gal__thumb--photo img, .breakdance .rt-gal__thumb--framed img {object-fit: cover;} .breakdance .rt-gal__open {display: none;} .breakdance .rt-pd__info {display: grid; gap: var(--rt-s5); padding-top: var(--rt-s3);} .breakdance .rt-pd__info .rt-h1 {font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.375rem);} .breakdance .rt-pd__info .rt-actions {flex-wrap: nowrap;} .breakdance .rt-pd__info .rt-actions .rt-btn--primary {flex: 1 1 auto;} .breakdance .rt-pd__note {color: var(--rt-text-3); font-size: var(--rt-fs-sm);} .breakdance .rt-assure {display: grid; gap: var(--rt-s3); padding-top: var(--rt-s5); border-top: 1px solid var(--rt-line);} .breakdance .rt-assure li {display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--rt-s3); align-items: center; color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-assure .rt-icon {--rt-ic-accent: var(--rt-bg); width: 34px; height: 34px; padding: 4px; border-radius: 9px; background: var(--rt-yellow); stroke-width: 2.4; color: var(--rt-ink);} .breakdance .rt-subnav {position: sticky; top: var(--rt-header-h); z-index: 20; border-block: 1px solid var(--rt-line); background: rgb(255 255 255 / .94); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);} .breakdance .rt-subnav ul {display: flex; gap: var(--rt-s6); overflow-x: auto; scrollbar-width: none;} .breakdance .rt-subnav a {position: relative; display: inline-flex; align-items: center; min-height: 60px; color: var(--rt-text-2); font-size: var(--rt-fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none;} .breakdance .rt-subnav a:hover {color: var(--rt-text-2);} .breakdance .rt-subnav a::after {content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rt-text); transform: scaleX(0); transform-origin: left;} .breakdance .rt-subnav a[aria-current="true"] {color: var(--rt-text);} .breakdance .rt-subnav a[aria-current="true"]:hover {color: var(--rt-text);} .breakdance .rt-subnav a[aria-current="true"]::after {transform: scaleX(1);} .breakdance .rt-subnav a:hover {color: var(--rt-text);} .breakdance .rt-split {display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--rt-s8); align-items: start;} .breakdance .rt-checklist {display: grid; gap: var(--rt-s4);} .breakdance .rt-checklist__title {margin-bottom: var(--rt-s5);} .breakdance .rt-checklist li {display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--rt-s4); align-items: start;} .breakdance .rt-checklist .rt-dot {display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rt-yellow); color: var(--rt-on-yellow);} .breakdance .rt-checklist .rt-icon {width: 16px; height: 16px; stroke-width: 2.5;} .breakdance .rt-specs {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-s5);} .breakdance .rt-specgroup {padding: var(--rt-s6); border-radius: var(--rt-radius); background: var(--rt-bg);} .breakdance .rt-specgroup h3 {margin-bottom: var(--rt-s4); color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-specgroup .rt-tag-dl {display: grid; gap: var(--rt-s4);} .breakdance .rt-specgroup .rt-tag-dt {color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-specgroup .rt-tag-dd {font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums;} .breakdance .rt-specgroup .rt-tag-dd span {margin-left: 4px; color: var(--rt-text-2); font-size: var(--rt-fs-sm); font-weight: 500; letter-spacing: 0;} .breakdance .rt-accs {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rt-s5);} .breakdance .rt-acc {display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--rt-radius); background: var(--rt-bg); box-shadow: var(--rt-shadow-card);} .breakdance .rt-acc__stage {aspect-ratio: 4 / 3; overflow: hidden; padding: var(--rt-s5); background: var(--rt-stage); box-shadow: inset 0 -1px 0 var(--rt-stage-line);} .breakdance .rt-acc__stage img {width: 100%; height: 100%; object-fit: contain;} .breakdance .rt-acc__stage--photo {padding: 0;} .breakdance .rt-acc__stage--photo img {width: 100%; height: 100%; object-fit: cover;} .breakdance .rt-acc__name {padding: var(--rt-s4) var(--rt-s5) var(--rt-s5); font-weight: 600; line-height: 1.35;} .breakdance .rt-acc__sub {display: block; margin-top: 4px; color: var(--rt-text-2); font-size: var(--rt-fs-xs); font-weight: 500;} .breakdance .rt-acc__link {display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none;} .breakdance .rt-acc__link:hover {color: inherit;} @media (min-width: 1025px) { .breakdance .rt-gal__track {grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: var(--rt-s3); aspect-ratio: auto; overflow: visible; scroll-snap-type: none; border-radius: 0; background: none;} .breakdance .rt-gal__slide {position: relative; aspect-ratio: 1; padding: var(--rt-s6); border-radius: var(--rt-radius); background: var(--rt-stage);} .breakdance .rt-gal__slide:first-child {grid-column: 1 / -1; aspect-ratio: 4 / 3.3; padding: var(--rt-s8);} .breakdance .rt-gal__slide:last-child {grid-column: 1 / -1; aspect-ratio: 16 / 10;} .breakdance .rt-gal__slide--photo, .breakdance .rt-gal__slide.rt-gal__slide--framed {padding: 0; overflow: hidden;} .breakdance .rt-gal__thumbs {display: none;} .breakdance .rt-pd__info {position: sticky; top: calc(var(--rt-header-h) + var(--rt-s5));} .breakdance .rt-gal__open {position: absolute; inset: 0; display: block; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer;} .breakdance .rt-gal__open:focus-visible {outline: 0;} .breakdance .rt-gal__slide:has(.rt-gal__open:focus-visible) {outline: 3px solid var(--rt-text); outline-offset: 4px;} .breakdance .rt-gal__open .rt-go {position: absolute; top: var(--rt-s5); right: var(--rt-s5); opacity: 0;} .breakdance .rt-gal__slide:hover .rt-go, .breakdance .rt-gal__open:focus-visible .rt-go {opacity: 1;} } .breakdance .rt-lb {inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--rt-s4) var(--rt-s6) var(--rt-s5); overflow: hidden; border: 0; background: var(--rt-ink); color: var(--rt-on-ink);} .breakdance .rt-lb[open] {display: grid; grid-template: 48px minmax(0, 1fr) auto / 48px minmax(0, 1fr) 48px; gap: var(--rt-s4) var(--rt-s6); place-items: center;} .breakdance .rt-lb__close {grid-area: 1 / 3;} .breakdance .rt-lb__img {grid-area: 2 / 2; width: auto; max-height: 100%; border-radius: var(--rt-radius); background: var(--rt-bg);} .breakdance .rt-lb__img[srcset*="studyo-"]:not([srcset*="-fl"]) {padding: var(--rt-s7);} .breakdance .rt-lb__prev {grid-area: 2 / 1;} .breakdance .rt-lb__next {grid-area: 2 / 3;} .breakdance .rt-lb__prev .rt-icon {transform: scaleX(-1);} .breakdance .rt-lb__count {grid-area: 3 / 2; color: var(--rt-on-ink-2); font-size: var(--rt-fs-sm); font-variant-numeric: tabular-nums;} .breakdance .rt-lb .rt-go {padding: 0; cursor: pointer;} .breakdance .rt-lb :focus-visible {outline-color: var(--rt-yellow);} html:has(.rt-lb[open]), html:has(.rt-lb[open]) body {overflow: hidden;} .breakdance img.rt-studio {mix-blend-mode: multiply; filter: none;} @media (prefers-reduced-motion: no-preference) { .breakdance .rt-plus::after, .breakdance .rt-subnav a::after {transition: transform .3s var(--rt-ease);} .breakdance .rt-lb[open] {animation: rt-fade .3s var(--rt-ease) both;} .breakdance .rt-lb[open] .rt-lb__img {animation: rt-rise .6s var(--rt-ease) both;} @keyframes rt-fade { from { opacity: 0; } } } @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) { .breakdance .rt-gal__slide img {transition: transform .5s var(--rt-ease);} .breakdance .rt-gal__open .rt-go {transition: opacity .25s var(--rt-ease);} .breakdance .rt-gal__slide:hover img, .breakdance .rt-gal__slide:has(.rt-gal__open:focus-visible) img {transform: scale(1.05);} } @media (max-width: 1024px) { .breakdance .rt-phead__grid {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-phead__text {padding-bottom: 0;} .breakdance .rt-phead__media img {width: min(70%, 420px);} .breakdance .rt-filterbar__inner {flex-wrap: wrap;} .breakdance .rt-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} .breakdance .rt-help {grid-template-columns: minmax(0, 1fr); padding: var(--rt-s7);} .breakdance .rt-faq {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s5);} .breakdance .rt-pd__grid {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s6);} .breakdance .rt-split {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s6);} .breakdance .rt-specs {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-accs {display: flex; gap: var(--rt-s4); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--rt-gutter)); padding: 4px var(--rt-gutter) var(--rt-s4); scrollbar-width: none;} .breakdance .rt-acc {flex: 0 0 36%; scroll-snap-align: start;} } @media (max-width: 767px) { .breakdance .rt-crumbs li {display: none;} .breakdance .rt-crumbs li:has(+ li [aria-current="page"]) {display: block;} .breakdance .rt-crumbs li:has(+ li [aria-current="page"])::before {content: none;} .breakdance .rt-phead__text {gap: var(--rt-s4);} .breakdance .rt-phead__media img {width: 72%; margin-inline: auto;} .breakdance .rt-keyfacts {gap: var(--rt-s4) var(--rt-s5);} .breakdance .rt-keyfacts b {font-size: 1.375rem;} .breakdance .rt-filterbar__inner {min-height: 64px;} .breakdance .rt-filter-toggle {display: inline-flex;} .breakdance .rt-filters {display: none; order: 3; width: 100%; padding-bottom: var(--rt-s3);} .breakdance .rt-filters.is-open {display: flex;} .breakdance .rt-fgroup {flex-wrap: wrap; gap: var(--rt-s2);} .breakdance .rt-fgroup legend {float: none; width: 100%; margin: 0;} .breakdance .rt-grid {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s4);} .breakdance .rt-card {grid-template-columns: 42% minmax(0, 1fr); grid-template-rows: none;} .breakdance .rt-card__stage {aspect-ratio: auto; height: 100%; padding: var(--rt-s6) var(--rt-s2) var(--rt-s3);} .breakdance .rt-card__stage img {width: 100%;} .breakdance .rt-card__bar {left: var(--rt-s3); top: var(--rt-s3);} .breakdance .rt-card__bar b {font-size: 1.375rem;} .breakdance .rt-card__body {gap: 4px; padding: var(--rt-s4);} .breakdance .rt-card__name {font-size: 1.1875rem;} .breakdance .rt-card__foot {gap: var(--rt-s2); margin-top: var(--rt-s2); padding-top: var(--rt-s3);} .breakdance .rt-card__foot .rt-btn {min-height: 44px; padding: 0 var(--rt-s3);} .breakdance .rt-help {padding: var(--rt-s6) var(--rt-s5);} .breakdance .rt-help .rt-actions {display: grid; grid-template-columns: minmax(0, 1fr);} .breakdance .rt-qa summary {font-size: 1.0625rem;} .breakdance .rt-gal__track {aspect-ratio: 16 / 12;} .breakdance .rt-gal__slide {padding: var(--rt-s6) var(--rt-s4) var(--rt-s4);} .breakdance .rt-gal__thumbs {grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 6px;} .breakdance .rt-gal__thumb {padding: 4px;} .breakdance .rt-gal__slide--photo, .breakdance .rt-gal__thumb--photo, .breakdance .rt-gal__slide--framed, .breakdance .rt-gal__thumb--framed {padding: 0;} .breakdance .rt-stats .rt-tag-dt {font-size: .6875rem; letter-spacing: .03em;} .breakdance .rt-pd__info .rt-actions {display: grid; grid-template-columns: minmax(0, 1fr);} .breakdance .rt-subnav ul {gap: var(--rt-s5);} .breakdance .rt-subnav a {min-height: 52px;} .breakdance .rt-specgroup {padding: var(--rt-s5);} .breakdance .rt-accs {gap: var(--rt-s3);} .breakdance .rt-acc {flex-basis: 64%;} } .breakdance .rt-hero--sector .rt-hero__grid {grid-template-columns: minmax(0, 1fr); min-height: clamp(560px, 50vw, 780px); align-items: end;} .breakdance .rt-hero--sector .rt-hero__text {max-width: 640px; padding-bottom: var(--rt-s9);} .breakdance .rt-hero--sector .rt-hero__bg {object-position: 64% 50%;} .breakdance .rt-section--band {padding-block: 0;} .breakdance .rt-facts--row {grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; border-top: 0; border-bottom: 1px solid var(--rt-line);} .breakdance .rt-facts--row .rt-fact, .breakdance .rt-facts--row .rt-fact:nth-child(even) {padding: var(--rt-s6) var(--rt-s5); border-left: 1px solid var(--rt-line); border-bottom: 0;} .breakdance .rt-facts--row .rt-fact:first-child {padding-left: 0; border-left: 0;} .breakdance .rt-flow {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rt-s6) var(--rt-s5); counter-reset: rt-step;} .breakdance .rt-flow__step {display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--rt-s4); align-content: start; counter-increment: rt-step;} .breakdance .rt-flow__media {position: relative; overflow: hidden; border-radius: var(--rt-radius); aspect-ratio: 4 / 3;} .breakdance .rt-flow__media img {width: 100%; height: 100%; object-fit: cover;} .breakdance .rt-flow__num {position: absolute; left: var(--rt-s4); top: var(--rt-s4); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rt-bg); color: var(--rt-text); font-weight: 600; font-variant-numeric: tabular-nums;} .breakdance .rt-flow__num::before {content: counter(rt-step);} .breakdance .rt-flow__step p {color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-flow__pick {display: flex; flex-wrap: wrap; align-content: start; gap: var(--rt-s2);} .breakdance .rt-compare {overflow-x: auto; border: 1px solid var(--rt-line); border-radius: var(--rt-radius); background: var(--rt-bg);} .breakdance .rt-compare table {width: 100%; min-width: 760px; border-collapse: collapse; font-variant-numeric: tabular-nums;} .breakdance .rt-compare th, .breakdance .rt-compare td {padding: var(--rt-s4) var(--rt-s5); border-bottom: 1px solid var(--rt-line); text-align: left; vertical-align: top;} .breakdance .rt-compare thead th {color: var(--rt-text-2); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-compare tbody tr:last-child td, .breakdance .rt-compare tbody tr:last-child th {border-bottom: 0;} .breakdance .rt-compare tbody th {font-weight: 600; white-space: nowrap;} .breakdance .rt-compare tbody th a {color: var(--rt-text); text-decoration: none;} .breakdance .rt-compare tbody th a:hover {color: var(--rt-text);} .breakdance .rt-compare td {white-space: nowrap;} .breakdance .rt-compare td:last-child {min-width: 16em; color: var(--rt-text-2); white-space: normal;} @media (max-width: 1024px) { .breakdance .rt-facts--row {grid-template-columns: repeat(2, minmax(0, 1fr));} .breakdance .rt-facts--row .rt-fact:nth-child(3) {padding-left: 0; border-left: 0;} .breakdance .rt-facts--row .rt-fact:nth-child(n+3) {border-top: 1px solid var(--rt-line);} .breakdance .rt-flow {grid-template-columns: repeat(2, minmax(0, 1fr));} .breakdance .rt-compare {overflow: visible; border: 0; border-radius: 0; background: none;} .breakdance .rt-compare table, .breakdance .rt-compare tbody, .breakdance .rt-compare tr, .breakdance .rt-compare th, .breakdance .rt-compare td {display: block;} .breakdance .rt-compare table {min-width: 0;} .breakdance .rt-compare thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);} .breakdance .rt-compare tbody {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-s4);} .breakdance .rt-compare tr {padding: var(--rt-s4) var(--rt-s5); border: 1px solid var(--rt-line); border-radius: var(--rt-radius); background: var(--rt-bg);} .breakdance .rt-compare tbody th {padding: 0 0 var(--rt-s3); border-bottom: 0; font-size: 1.0625rem;} .breakdance .rt-compare td, .breakdance .rt-compare td:last-child {display: flex; justify-content: space-between; gap: var(--rt-s4); min-width: 0; padding: var(--rt-s2) 0; border-bottom: 1px solid var(--rt-line); color: var(--rt-text); white-space: normal; text-align: right;} .breakdance .rt-compare td::before {content: attr(data-label); flex: none; color: var(--rt-text-2); text-align: left;} .breakdance .rt-compare tbody tr:last-child td {border-bottom: 1px solid var(--rt-line);} .breakdance .rt-compare tbody tr td:last-child {border-bottom: 0;} } @media (max-width: 767px) { .breakdance .rt-hero--sector .rt-hero__media {position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3;} .breakdance .rt-hero--sector .rt-hero__media::after {background: linear-gradient(180deg, rgb(var(--rt-scrim) / .55) 0%, rgb(var(--rt-scrim) / 0) 30%, rgb(var(--rt-scrim) / 0) 64%, var(--rt-ink) 100%);} .breakdance .rt-hero--sector .rt-hero__bg {object-position: 80% 50%;} .breakdance .rt-hero--sector .rt-hero__grid {min-height: 0; padding-top: var(--rt-s2);} .breakdance .rt-hero--sector .rt-hero__text {padding-bottom: var(--rt-s7);} .breakdance .rt-facts--row .rt-fact, .breakdance .rt-facts--row .rt-fact:nth-child(even) {padding: var(--rt-s5) var(--rt-s4);} .breakdance .rt-flow {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-compare tbody {grid-template-columns: minmax(0, 1fr);} } .breakdance .rt-hero--post .rt-hero__grid {min-height: clamp(520px, 44vw, 680px);} .breakdance .rt-hero--post .rt-hero__text {max-width: 780px; padding-bottom: var(--rt-s8);} .breakdance .rt-hero--post .rt-h1 {max-width: 22ch;} .breakdance .rt-hero--post .rt-hero__bg {object-position: 60% 45%;} .breakdance .rt-meta {display: flex; flex-wrap: wrap; gap: 0 var(--rt-s3); color: var(--rt-text-2); font-size: var(--rt-fs-sm);} .breakdance .rt-meta span + span::before {content: "·"; margin-right: var(--rt-s3); color: var(--rt-line-2);} .breakdance .rt-hero--post .rt-meta {color: var(--rt-on-ink-2);} .breakdance .rt-hero--post .rt-meta span + span::before {color: rgb(255 255 255 / .32);} .breakdance .rt-a-body {display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: var(--rt-s7); align-items: start;} .breakdance .rt-toc {position: sticky; top: calc(var(--rt-header-h) + 24px); display: grid; gap: var(--rt-s5);} .breakdance .rt-toc__title {font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;} .breakdance .rt-toc ol {display: grid; border-left: 1px solid var(--rt-line-2);} .breakdance .rt-toc__link {display: block; margin-left: -1px; padding: var(--rt-s2) 0 var(--rt-s2) var(--rt-s4); border-left: 3px solid transparent; color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.45; text-decoration: none;} .breakdance .rt-toc__link:hover {color: var(--rt-text-2);} .breakdance .rt-toc__link:hover {color: var(--rt-text);} .breakdance .rt-toc__link[aria-current="true"] {border-left-color: var(--rt-yellow); color: var(--rt-text); font-weight: 600;} .breakdance .rt-toc__link[aria-current="true"]:hover {color: var(--rt-text);} .breakdance .rt-toc-m {display: none;} .breakdance .rt-art {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rt-s5); max-width: 68ch; color: var(--rt-text-2); font-size: 1.125rem; line-height: 1.75;} .breakdance .rt-art > h2 {margin-top: var(--rt-s7); color: var(--rt-text); font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; scroll-margin-top: calc(var(--rt-header-h) + 24px);} .breakdance .rt-art > h2:first-child {margin-top: 0;} .breakdance .rt-art > ul {display: grid; gap: var(--rt-s2); padding-left: 1.25em; list-style: disc;} .breakdance .rt-art > ul li::marker {color: var(--rt-text-3);} .breakdance .rt-art a {color: var(--rt-text); text-underline-offset: 3px;} .breakdance .rt-art a:hover {color: var(--rt-text);} .breakdance .rt-a-sum {display: grid; gap: var(--rt-s4); padding: var(--rt-s6); border-radius: var(--rt-radius); background: var(--rt-surface); color: var(--rt-text); font-size: var(--rt-fs-body);} .breakdance .rt-a-sum ul {display: grid; gap: var(--rt-s3);} .breakdance .rt-a-sum li {display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--rt-s3); line-height: 1.55;} .breakdance .rt-a-sum .rt-icon {margin-top: 3px; stroke-width: 2.25;} .breakdance .rt-pair {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rt-s4);} .breakdance .rt-pair img, .breakdance .rt-figure img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rt-radius);} .breakdance .rt-pair figcaption, .breakdance .rt-figure figcaption {margin-top: var(--rt-s2); color: var(--rt-text-3); font-size: var(--rt-fs-sm); line-height: 1.5;} .breakdance .rt-note {display: grid; gap: var(--rt-s1); padding: var(--rt-s5); border-radius: var(--rt-radius); background: var(--rt-surface); color: var(--rt-text); font-size: var(--rt-fs-body); line-height: 1.65;} .breakdance .rt-note__label {font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;} .breakdance .rt-compare--art table {min-width: 0; table-layout: fixed; font-size: var(--rt-fs-sm); line-height: 1.5;} .breakdance .rt-compare--art th:first-child {width: 22%;} .breakdance .rt-compare--art th, .breakdance .rt-compare--art td {padding: var(--rt-s3) var(--rt-s4);} .breakdance .rt-compare--art thead th {letter-spacing: .04em; line-height: 1.35;} .breakdance .rt-compare--art tbody th, .breakdance .rt-compare--art td {white-space: normal;} .breakdance .rt-compare--art tbody th {color: var(--rt-text);} .breakdance .rt-compare--art td:last-child {min-width: 0;} .breakdance .rt-dl {border-top: 1px solid var(--rt-line);} .breakdance .rt-dl > div {display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--rt-s5); padding-block: var(--rt-s4); border-bottom: 1px solid var(--rt-line);} .breakdance .rt-dl .rt-tag-dt {color: var(--rt-text); font-weight: 600;} .breakdance .rt-dl .rt-tag-dt a {text-decoration: none;} .breakdance .rt-dl .rt-tag-dd {margin: 0;} .breakdance .rt-art .rt-checklist {font-size: var(--rt-fs-body);} .breakdance .rt-art .rt-checklist li {color: var(--rt-text);} .breakdance .rt-pick {display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; align-items: center; gap: var(--rt-s5); padding: var(--rt-s4) var(--rt-s5) var(--rt-s4) var(--rt-s4); border-radius: var(--rt-radius); background: var(--rt-surface);} .breakdance .rt-pick__stage {display: grid; place-items: center; aspect-ratio: 6 / 5;} .breakdance .rt-pick__stage img {width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;} .breakdance .rt-pick__type {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;} .breakdance .rt-pick__name {margin-top: 2px; color: var(--rt-text); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25;} .breakdance .rt-pick__name a {text-decoration: none;} .breakdance .rt-pick .rt-specline {margin-top: 4px;} .breakdance .rt-a-body .rt-pick {display: none;} .breakdance .rt-a-author {display: flex; align-items: center; gap: var(--rt-s4); margin-top: var(--rt-s6); padding-top: var(--rt-s5); border-top: 1px solid var(--rt-line); color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.5;} .breakdance .rt-a-author b {display: block; color: var(--rt-text); font-size: var(--rt-fs-body);} .breakdance .rt-mono {display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--rt-ink); color: var(--rt-on-ink); font-size: var(--rt-fs-sm); font-weight: 600; letter-spacing: .04em;} .breakdance .rt-rail {position: sticky; top: calc(var(--rt-header-h) + 24px); display: grid; gap: var(--rt-s5);} .breakdance .rt-rail__models {display: grid; gap: var(--rt-s4);} .breakdance .rt-rail__title {font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;} .breakdance .rt-rail__list {display: grid; border-top: 1px solid var(--rt-line);} .breakdance .rt-rail__item {position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--rt-s3); padding-block: var(--rt-s3); border-bottom: 1px solid var(--rt-line);} .breakdance .rt-rail__item img {width: 76px; height: 64px; object-fit: contain; border-radius: var(--rt-radius-ctl); background: var(--rt-surface); mix-blend-mode: multiply;} .breakdance .rt-rail__item a {color: var(--rt-text); font-weight: 600; text-decoration: none;} .breakdance .rt-rail__item a:hover {color: var(--rt-text);} .breakdance .rt-rail__item a::after {content: ""; position: absolute; inset: 0;} .breakdance .rt-rail__item p > span {display: block; color: var(--rt-text-2); font-size: var(--rt-fs-xs);} .breakdance .rt-rail__cta {display: grid; gap: var(--rt-s4); padding: var(--rt-s6) var(--rt-s5); border-radius: var(--rt-radius); background: var(--rt-ink); color: var(--rt-on-ink);} .breakdance .rt-rail__cta p {color: var(--rt-on-ink-2); font-size: var(--rt-fs-sm); line-height: 1.55;} .breakdance .rt-rail__cta p b {display: block; margin-bottom: var(--rt-s1); color: var(--rt-on-ink); font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.3;} .breakdance .rt-rail__cta :focus-visible {outline-color: var(--rt-yellow);} .breakdance .rt-rail__cta .rt-btn {width: 100%;} .breakdance .rt-pcard {position: relative; display: grid; align-content: start; gap: var(--rt-s4);} .breakdance .rt-pcard__media img {width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rt-radius); background: var(--rt-surface);} .breakdance .rt-pcard__body {display: grid; gap: var(--rt-s2);} .breakdance .rt-pcard__cat {color: var(--rt-text-3); font-size: var(--rt-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;} .breakdance .rt-pcard__title {color: var(--rt-text); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance;} .breakdance .rt-pcard__title a {text-decoration: none;} .breakdance .rt-pcard__title a::after {content: ""; position: absolute; inset: 0;} .breakdance .rt-pcard__text {color: var(--rt-text-2); font-size: var(--rt-fs-sm); line-height: 1.6;} .breakdance .rt-pgrid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-s7) var(--rt-s6);} .breakdance .rt-topics {display: flex; flex-wrap: wrap; gap: var(--rt-s2);} .breakdance .rt-topics a {display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--rt-s4); border: 1px solid var(--rt-line-2); border-radius: var(--rt-radius-ctl); background: var(--rt-bg); color: var(--rt-text); font-size: var(--rt-fs-sm); font-weight: 500; text-decoration: none;} .breakdance .rt-topics a:hover {color: var(--rt-text);} .breakdance .rt-topics a:hover {border-color: var(--rt-text);} .breakdance .rt-topics a[aria-current="page"] {border-color: var(--rt-text); background: var(--rt-text); color: var(--rt-bg);} .breakdance .rt-topics a[aria-current="page"]:hover {color: var(--rt-bg);} .breakdance .rt-a-lead {display: grid; gap: var(--rt-s6);} .breakdance .rt-a-feature {position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--rt-s7);} .breakdance .rt-a-feature .rt-pcard__media img {aspect-ratio: 16 / 10;} .breakdance .rt-a-feature .rt-pcard__title {font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); line-height: 1.15;} .breakdance .rt-a-feature .rt-pcard__text {font-size: var(--rt-fs-body);} @media (max-width: 1279px) { .breakdance .rt-a-body {grid-template-columns: minmax(0, 1fr) 300px;} .breakdance .rt-toc {display: none;} .breakdance .rt-toc-m {display: block; margin-bottom: var(--rt-s5); border-top: 1px solid var(--rt-line-2); border-bottom: 1px solid var(--rt-line-2);} .breakdance .rt-toc-m summary {display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-weight: 600; cursor: pointer; list-style: none;} .breakdance .rt-toc-m summary::-webkit-details-marker {display: none;} .breakdance .rt-toc-m ol {display: grid; gap: var(--rt-s1); padding-bottom: var(--rt-s4);} .breakdance .rt-toc-m a {display: block; padding-block: var(--rt-s2); color: var(--rt-text-2); text-decoration: none;} .breakdance .rt-toc-m a:hover {color: var(--rt-text-2);} } @media (max-width: 1024px) { .breakdance .rt-compare--art th:first-child {width: auto;} .breakdance .rt-compare--art td, .breakdance .rt-compare--art td:last-child {display: grid; gap: 2px; text-align: left;} .breakdance .rt-compare--art td::before {font-size: var(--rt-fs-xs);} } @media (max-width: 1023px) { .breakdance .rt-a-body {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s7);} .breakdance .rt-a-body .rt-rail {position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--rt-s6);} .breakdance .rt-a-body .rt-pick {display: grid;} .breakdance .rt-pgrid {grid-template-columns: repeat(2, minmax(0, 1fr));} .breakdance .rt-a-feature {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s5);} } @media (max-width: 767px) { .breakdance .rt-hero--post {display: flex; flex-direction: column-reverse; margin-top: 0; padding-bottom: var(--rt-s6); color: var(--rt-text); background: var(--rt-surface);} .breakdance .rt-hero--post .rt-hero__media {position: relative; inset: auto; z-index: 0; margin-inline: var(--rt-gutter); aspect-ratio: 4 / 3; border-radius: var(--rt-radius);} .breakdance .rt-hero--post .rt-hero__media::after {content: none;} .breakdance .rt-hero--post .rt-hero__grid {min-height: 0; padding-top: var(--rt-s5);} .breakdance .rt-hero--post .rt-hero__text {padding-bottom: var(--rt-s6);} .breakdance .rt-hero--post .rt-hero__text .rt-eyebrow {color: var(--rt-text);} .breakdance .rt-hero--post .rt-hero__text .rt-lead {color: var(--rt-text-2);} .breakdance .rt-hero--post .rt-meta {color: var(--rt-text-2);} .breakdance .rt-hero--post .rt-meta span + span::before {color: var(--rt-line-2);} .breakdance .rt-hero--post .rt-crumbs ol {color: var(--rt-text-2);} .breakdance .rt-hero--post .rt-crumbs li + li::before {color: var(--rt-line-2);} .breakdance .rt-hero--post .rt-crumbs a:hover, .breakdance .rt-hero--post .rt-crumbs [aria-current="page"] {color: var(--rt-text);} .breakdance .rt-hero--post .rt-hl {--rt-mark: var(--rt-yellow);} body.breakdance:has(.rt-hero--post) .rt-header:not(.is-solid) {color: var(--rt-text);} body.breakdance:has(.rt-hero--post) .rt-header:not(.is-solid)::before {opacity: 1;} body.breakdance:has(.rt-hero--post) .rt-header:not(.is-solid)::after {opacity: 0;} body.breakdance:has(.rt-hero--post) .rt-header:not(.is-solid) .rt-iconbtn {border-color: var(--rt-line-2);} .breakdance .rt-a-body .rt-rail {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-a-sum {padding: var(--rt-s5);} .breakdance .rt-art {font-size: 1.0625rem;} .breakdance .rt-pair {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-dl > div {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s1);} .breakdance .rt-pick {grid-template-columns: 96px minmax(0, 1fr); padding: var(--rt-s4);} .breakdance .rt-pick__cta {grid-column: 1 / -1; width: 100%;} .breakdance .rt-pgrid {grid-template-columns: minmax(0, 1fr); gap: var(--rt-s6);} } .breakdance .rt-hblog__intro {display: grid; gap: var(--rt-s4); max-width: 760px;} .breakdance .rt-hblog-a {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rt-s6);} @media (max-width: 1023px) { .breakdance .rt-hblog-a {grid-template-columns: minmax(0, 1fr);} .breakdance .rt-hblog-a .rt-pcard {grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--rt-s5);} } @media (max-width: 767px) { .breakdance .rt-hblog-a {gap: 0; border-top: 1px solid var(--rt-line-2);} .breakdance .rt-hblog-a .rt-pcard {grid-template-columns: 112px minmax(0, 1fr); gap: var(--rt-s4); padding-block: var(--rt-s4); border-bottom: 1px solid var(--rt-line-2);} .breakdance .rt-hblog-a .rt-pcard__media img {border-radius: 12px;} .breakdance .rt-hblog-a .rt-pcard__title {font-size: 1.0625rem; line-height: 1.3;} .breakdance .rt-hblog-a .rt-pcard__text {display: none;} } .breakdance .rt-actions--fill {flex-wrap: nowrap; max-width: 7.42em; font-size: var(--rt-fs-display);} .breakdance .rt-actions--fill .rt-btn--primary {flex: 1 1 auto;} @media (max-width: 1024px) { .breakdance .rt-actions--fill {max-width: none;} } .breakdance .rt-section--cta {padding-bottom: 0;} .breakdance .rt-cta {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--rt-s6) var(--rt-s8); padding: var(--rt-s8); border-radius: var(--rt-radius); background: var(--rt-ink); color: var(--rt-on-ink);} .breakdance .rt-cta__text {display: grid; gap: var(--rt-s3); max-width: 640px;} .breakdance .rt-cta__title {font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); font-weight: 600; font-stretch: 96%; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance;} .breakdance .rt-cta__lead {color: var(--rt-on-ink-2); font-size: var(--rt-fs-lead); line-height: 1.55;} .breakdance .rt-cta__actions {flex-wrap: nowrap;} .breakdance .rt-cta__actions .rt-btn {min-width: 160px;} .breakdance .rt-cta :focus-visible {outline-color: var(--rt-yellow);} @media (max-width: 1023px) { .breakdance .rt-cta {grid-template-columns: minmax(0, 1fr); padding: var(--rt-s7);} } @media (max-width: 767px) { .breakdance .rt-cta {padding: var(--rt-s6) var(--rt-s5);} .breakdance .rt-cta__actions {display: grid; grid-template-columns: minmax(0, 1fr);} } /* Adaptations to Breakdance's markup (measured differences from the mockup). */ /* Quote form: the mockup's form rules reach the Form Builder through FORM_ALIASES (tools/build_site_css.py); these cover the parts whose markup differs. Breakdance's form.css and Global Settings form variables (11 Oct): the form sets color and font-size from --bde-form-*, fields span 12 grid columns, labels take a bottom margin, required labels add a star, textarea line-height 1.4, inputs a focus ring, select a background chevron, the success message is a padded green box with a dismiss button. The forms have no checkbox since 13 Oct (no marketing box: no newsletter, owner's note). */ .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form { color: inherit; font-size: inherit; } .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field { grid-column: auto; } .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field--textarea, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field--html, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-footer { grid-column: 1 / -1; } /* .rt-field--full, .rt-consent, .rt-form__foot */ .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__label { margin-bottom: 0; color: inherit; line-height: inherit; cursor: default; } /* form.css: .breakdance-form label { line-height: 1 } */ .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__required { display: none; } /* the mockup marks optional fields instead */ .breakdance :is(.rt-formcard, .rt-pop) textarea.breakdance-form-field__input { line-height: inherit; } .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field__input:focus { box-shadow: none; background-color: var(--rt-bg); } .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field--hidden, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field--condition-hidden, .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form--hidden .breakdance-form-field { display: none; } /* form.css hides these; the .rt-field twin (display: grid) must not show them */ /* .rt-select: the chevron sits in the select's grid cell (the field is a grid: label, control, error). */ .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field--select select { grid-row: 2; grid-column: 1; background-image: none; padding-right: var(--rt-s7); } /* placed, or the chevron's cell pushes it down a row */ .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-field--select::after { content: ""; grid-row: 2; grid-column: 1; justify-self: end; align-self: center; width: 20px; height: 20px; margin-right: var(--rt-s4); background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } /* the mockup's #i-chevron at .rt-icon size and stroke */ /* Success: the message holds the mockup's .rt-done block (success_message); the box and its dismiss button go. */ .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-message--success { display: block; margin-top: 0; padding: 0; border-radius: 0; background: none; color: inherit; } .breakdance :is(.rt-formcard, .rt-pop) .breakdance-form-message-dismiss { display: none; } /* Quote popups (owner's design, 13 Oct): Breakdance's Popup element is the frame, the mockup's .rt-pop card the content. Measured (Popup default.css, popups.css, 13 Oct): the frame is a 750 px box centered in a fixed overlay; its content box has a 30 px padding, the body background and overflow: auto (which would clip the card's shadow). Here the frame takes the card's width and the content box is bare; a card taller than the screen scrolls in the overlay, whose auto margins keep its top reachable. The overlay is the mockup's scrim (its review page); the element's own color (post-.css, .breakdance .bde-popup--100) has the same specificity and prints earlier. A touch screen focuses the card itself when it opens (site.js): no ring around the whole dialog. */ .breakdance .bde-popup { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: var(--rt-s5) var(--rt-gutter); background-color: rgb(var(--rt-scrim) / .62); } .breakdance .bde-popup .breakdance-popup { width: var(--rt-pop-w); max-height: none; margin-block: auto; } .breakdance .bde-popup .breakdance-popup-content { padding: 0; background: none; overflow: visible; } .breakdance .rt-pop:focus { outline: none; } /* Option B (owner, 13 Oct): when the card is taller than the screen the submit button stays at the bottom of the screen and the form scrolls under it; where the card fits it sits where it always did. It sticks at the overlay's bottom padding (24 px, measured); the white shadows fill that padding below the button and a 16 px band above it, and at rest lie in the card's own bottom padding (24 px or more) and the 24 px gap above the button. */ .breakdance .rt-pop .breakdance-form-footer { position: sticky; bottom: 0; z-index: 1; background: var(--rt-bg); box-shadow: 0 var(--rt-s5) 0 0 var(--rt-bg), 0 calc(-1 * var(--rt-s4)) 0 0 var(--rt-bg); } /* form.css gives every field `transition: all 0.3s` (.breakdance-form .breakdance-form-field__input); in a popup that includes the visibility the field inherits from the frame, so it could not take focus when the popup opened. */ .breakdance .bde-popup .breakdance-form-field__input { transition-property: border-color, background-color, box-shadow, color; } /* Marker: the mockup's script times every title at load; site.js times a title when a pointer or the keyboard first reaches it (data-rt-timed). Reading the layout there applied the hover before the timing, so the first hover started every word at once with the default timing (owner's note, 13 Oct). Until timed, the band stays put; these selectors outrank the two hover rules (0,3,2 and 0,5,2). */ .breakdance .rt-hl:not([data-rt-timed]) .rt-hl__w::before, .breakdance .rt-feature .rt-feature__name.rt-hl:not([data-rt-timed]) .rt-hl__w::before { transform: scaleX(0); } /* Filter bar: themeless normalize.min.css sets legend { padding: 0 }; the mockup's legends keep the browser's 2px. */ .breakdance .rt-fgroup legend { padding-inline: 2px; } /* Product cards: the mockup only shows machine pictures (wider than tall). A square product photo (pumps, parts) made the card's implicit column grow past the card (the stage's min-content); grid items may shrink instead. */ .breakdance .rt-card > * { min-width: 0; } /* Converted crumbs (content pages): Breakdance prints whitespace inside each li's Div and Text, which rendered as a 3px space after the "/" separator; as flex containers the li drop whitespace-only runs. The mockup's phone rules (only the parent link shows) are restated because this rule outranks them. */ .breakdance .rt-crumbs li.rt-bd-div { display: flex; align-items: baseline; } @media (max-width: 767px) { .breakdance .rt-crumbs li.rt-bd-div { display: none; } .breakdance .rt-crumbs li.rt-bd-div:has(+ li [aria-current="page"]) { display: block; } } /* WordPress admin bar (signed-in users): the sticky header and the sticky bars under it sit below the bar instead of behind it (owner's note, 12 Oct). Under 600 px the admin bar scrolls away (WordPress's admin-bar.css), so no offset. */ body.admin-bar .rt-header { top: var(--wp-admin--admin-bar--height, 32px); } body.admin-bar .rt-filterbar, body.admin-bar .rt-subnav { top: calc(var(--rt-header-h) + var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 600px) { body.admin-bar .rt-header { top: 0; } body.admin-bar .rt-filterbar, body.admin-bar .rt-subnav { top: var(--rt-header-h); } }