...
.robot-page template root (keeps [hidden] winning, see the end)
--balance-headings text-wrap: balance on .type-h2 and .type-h3
--balance-lede text-wrap: balance on .type-lede
--pretty-sub text-wrap: pretty on .type-sub
(the source pages differ here: set the ones the page's
helmet has; CC1 Pro has none)
Type scale (source t-* classes; fluid between 390 and 1440 px)
.type-h1 .type-h2 .type-h3 .type-lede .type-sub .type-title .type-body .type-small
.type-num (big statement number) with .type-unit inside
.type-val (spec / mode value) with .type-vunit next to it
Section tones (the source sets each section's background inline)
.tone-white .tone-ground .tone-night (white text; add .on-dark for the focus ring)
Blocks
.crumbs breadcrumb bar under the header
.robot-hero first section (#top): gallery + buy box
.gallery stage with cross-fading slides, thumbnail tabs (js: gallery)
.buy-box title, lede, key facts, price box, CTA (#x-buy-cta), call, promises
.statement dark section: copy + big number, then a wide video or image
.section-head title + lead at the top of a section (--center, --narrow, --compact)
.band full-bleed image or video band (2.56:1, 1.2:1 on phones)
.cards grid of three (or --two) cards: .card image + title + text
.split half text, half image (--media-right / --media-left)
.note small print under a dark section's cards
.spec-table technical data grid
.faq accordion (js: faq)
.inquiry dark inquiry section: intro, form with chips and validation, sent state (js: inquiry)
.footnotes numbered source notes before the footer
.media-toggle positions the shared .motion-btn in the corner of a video
Modifiers for the differences between the ten source pages
.buy-box__cta--compact <= 760 px: padding 0 18px, gap 10px, 16 px text (CC1 Pro, BG1, CC1, GT5, MT1 Vac)
.buy-box__cta--bare <= 760 px: padding 0 12px, 16 px text, no arrow (ET1)
.buy-box__cta--balance line-height 1.3, balanced wrapping, arrow never shrinks (GT3, GT7, MT1 Max)
.buy-box__call--center <= 760 px: label and number centred (CC1 Pro, BG1, CC1, MT1 Vac)
.buy-box__call-label label that never wraps (the pages whose label span is nowrap)
.buy-box__call-number 16 px number; add --dim for the 15 px, 72 % opacity number (ET1, GT3)
.cards--two two columns (GT3); .cards--after-head cards right under a head (no band)
.card__img--tile square image tile on a dark section (4:3 contain on phones)
.card__img--inset contained cut-out with 40 px padding inside a tile (ET1)
.card__frame square dark frame around a screenshot (4:3 on phones)
.spec-table__value--range "nuo 4 iki 6 val.": two .spec-table__part halves that never break inside;
.spec-table__mid for the inline "iki" between two values (MT1 Vac)
Source class -> port class
x-crumb -> crumbs, x-hero-sec -> robot-hero, x-hero -> robot-hero__grid, x-slide -> gallery__slide,
x-thumb -> gallery__thumb, x-keyrow -> buy-box__fact, x-buy -> buy-box__cta, x-call / x-btn-line ->
btn btn--line buy-box__call, x-btn-g -> btn btn--primary, x-stmt-sec -> statement, x-stmt -> statement__media,
x-gap48 -> (margin-top on .band / .statement__media), x-band -> band, x-cards3 -> cards, x-card-gap -> card,
x-tile -> card__img--tile, x-rtile -> card__frame, x-split(-r/-l) -> split(--media-right/--media-left),
x-split-text -> split__text, x-split-media -> split__media, x-specs -> spec-table, x-spec -> spec-table__item,
x-faq -> faq__button, x-ask -> inquiry, x-chip -> chip, x-two -> inquiry__fields, x-in -> inquiry__input,
x-pause -> motion-btn motion-btn--soft media-toggle, x-fade -> fade-up, t-* -> type-*,
x-modes* / x-barrow -> modes* (css/robots/cc1pro.css)
Per-image data is passed as CSS custom properties in the markup (the only inline styles):
--media-bg placeholder colour behind an image or video while it loads
--pos object-position of the image or video
--mpos object-position at <= 760 px (bands, statement)
--w bar width (CC1 Pro run-time bars)
========================================================================== */
/* --- Type scale ---------------------------------------------------------- */
/* --- Section tones ------------------------------------------------------- */
/* --- Breadcrumbs --------------------------------------------------------- */
/* --- Hero: gallery + buy box -------------------------------------------- */
/* Gallery. The selected slide has aria-hidden="false"; the selected thumb aria-selected="true". */
/* Buy box */
/*
(the header watches this id) */
/* label may wrap: balanced lines */
/* label + number, side by side or wrapped */
/* --- Statement: copy + number, then a wide video or image ----------------- */
/* Corner position for the shared .motion-btn (base.css) over a video */
/* --- Section head -------------------------------------------------------- */
/* --- Band: full-bleed image or video ------------------------------------- */
/* --- Cards --------------------------------------------------------------- */
/* cards straight under a section head (no band) */
/* square tile on a dark section */
/* cut-out product shot inside a tile */
/* The frame grows to fit a screenshot taller than the ratio allows (as in the original), so load those
screenshots eagerly (no loading="lazy"), or the page shifts when they arrive. */
/* --- Split: half text, half image ---------------------------------------- */
/* --- Technical data ------------------------------------------------------ */
/* "nuo 4 iki 6 val." as two unbreakable halves */
/* --- FAQ ----------------------------------------------------------------- */
/* --- Inquiry ------------------------------------------------------------- */
/* --- Footnotes ----------------------------------------------------------- */
/* --- Breakpoints (same as the source helmet) ----------------------------- */
/* Content toggled by js/robot.js uses the hidden attribute; it must beat the display rules above. */
/* ==========================================================================
Ginalas PUDU: robots/cc1pro.css
Page-only rules for pudu-cc1-pro.html, loaded after robot.css.
.modes "Tyliai šluostydamas ... 9 valandas": cleaning-mode tabs on the left,
run time, description and a bar for every mode on the right.
Behaviour: the generic tabs component in js/robot.js
(data-js="tabs", "tab", "tab-panel", "tab-pane", "tab-mark").
========================================================================== */
/* Tabs */
/* also over the selected tab, as in the original */
/* Panel: one detail per mode (only the selected one is shown), then the bars */
}
body.page-robot .type-num {
margin: 0;
font-size: clamp(72px, 72px + (100vw - 390px) * 0.0457, 120px);
line-height: 0.92;
font-weight: 200;
letter-spacing: -0.045em;
white-space: nowrap;
}
body.page-robot .type-unit {
font-size: 0.45em;
font-weight: 300;
letter-spacing: -0.02em;
}
body.page-robot .type-h1 {
margin: 0;
font-size: clamp(36px, 36px + (100vw - 390px) * 0.01143, 48px);
line-height: 1.04;
font-weight: 300;
letter-spacing: -0.03em;
}
body.page-robot .type-h2 {
margin: 0;
font-size: clamp(30px, 30px + (100vw - 390px) * 0.00952, 40px);
line-height: 1.12;
font-weight: 300;
letter-spacing: -0.02em;
}
body.page-robot .type-h3 {
margin: 0;
font-size: clamp(26px, 26px + (100vw - 390px) * 0.00571, 32px);
line-height: 1.18;
font-weight: 300;
letter-spacing: -0.015em;
}
body.page-robot .type-lede {
margin: 0;
font-size: clamp(20px, 20px + (100vw - 390px) * 0.00381, 24px);
line-height: 1.35;
font-weight: 300;
letter-spacing: -0.01em;
}
body.page-robot .type-sub {
margin: 0;
font-size: clamp(16px, 16px + (100vw - 390px) * 0.0019, 18px);
line-height: 1.55;
font-weight: 300;
}
body.page-robot .type-title {
margin: 0;
font-size: clamp(16px, 16px + (100vw - 390px) * 0.0019, 18px);
line-height: 1.35;
font-weight: 500;
}
body.page-robot .type-body {
margin: 0;
font-size: clamp(15px, 15px + (100vw - 390px) * 0.00095, 16px);
line-height: 1.55;
font-weight: 400;
}
body.page-robot .type-small {
margin: 0;
font-size: clamp(13px, 13px + (100vw - 390px) * 0.00095, 14px);
line-height: 1.5;
font-weight: 400;
}
body.page-robot .type-val {
font-size: 36px;
line-height: 1.1;
font-weight: 300;
letter-spacing: -0.02em;
}
body.page-robot .type-vunit {
font-size: 20px;
line-height: 1;
font-weight: 300;
letter-spacing: 0;
}
body.page-robot .robot-page--balance-headings .type-h2,
body.page-robot .robot-page--balance-headings .type-h3 {
text-wrap: balance;
}
body.page-robot .robot-page--balance-lede .type-lede {
text-wrap: balance;
}
body.page-robot .robot-page--pretty-sub .type-sub {
text-wrap: pretty;
}
body.page-robot .tone-white {
background: var(--c-white);
}
body.page-robot .tone-ground {
background: var(--c-ground);
}
body.page-robot .tone-night {
background: var(--c-night);
color: var(--c-white);
}
body.page-robot .crumbs {
border-bottom: 1px solid var(--c-line);
}
body.page-robot .crumbs__nav {
min-height: 56px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 400;
color: var(--c-muted);
}
body.page-robot .crumbs__link {
color: var(--c-muted);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
body.page-robot .crumbs__link:hover {
color: var(--c-green);
}
body.page-robot .crumbs__current {
font-weight: 500;
color: var(--c-ink);
}
body.page-robot .robot-hero {
padding: 40px 0 96px;
}
body.page-robot .robot-hero__grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
body.page-robot .gallery {
display: flex;
flex-direction: column;
gap: 12px;
}
body.page-robot .gallery__stage {
position: relative;
aspect-ratio: 3/2;
background: var(--c-white);
overflow: hidden;
}
body.page-robot .gallery__slide {
position: absolute;
inset: 0;
background: var(--media-bg, transparent);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.page-robot .gallery__slide[aria-hidden=false] {
opacity: 1;
visibility: visible;
}
body.page-robot .gallery__cutout {
position: absolute;
left: 0;
top: 14%;
width: 100%;
height: 72%;
object-fit: contain;
display: block;
}
body.page-robot .gallery__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
display: block;
}
body.page-robot .gallery__thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
body.page-robot .gallery__thumb {
position: relative;
aspect-ratio: 3/2;
padding: 0;
border: 0;
background: var(--c-night);
cursor: pointer;
overflow: hidden;
opacity: 0.72;
transition: opacity 0.2s ease;
}
body.page-robot .gallery__thumb--cut {
background: var(--c-white);
}
body.page-robot .gallery__thumb[aria-selected=true],
body.page-robot .gallery__thumb:hover {
opacity: 1;
}
body.page-robot .gallery__thumb-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
display: block;
}
body.page-robot .gallery__thumb--cut .gallery__thumb-img {
left: 10%;
top: 10%;
width: 80%;
height: 80%;
object-fit: contain;
}
body.page-robot .gallery__badge {
position: absolute;
right: 8px;
bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--c-white);
}
body.page-robot .gallery__ring {
position: absolute;
inset: 0;
border: 1px solid var(--c-line);
pointer-events: none;
}
body.page-robot .gallery__thumb[aria-selected=true] .gallery__ring {
border: 2px solid var(--c-ink);
}
body.page-robot .buy-box {
display: flex;
flex-direction: column;
}
body.page-robot .buy-box__title {
margin-bottom: 16px;
}
body.page-robot .buy-box__lede {
margin-bottom: 12px;
}
body.page-robot .buy-box__sub {
margin-bottom: 28px;
font-size: 16px;
color: var(--c-body);
}
body.page-robot .buy-box__facts {
display: flex;
flex-direction: column;
margin-bottom: 24px;
border-top: 1px solid var(--c-line);
}
body.page-robot .buy-box__fact {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 52px;
padding: 8px 0;
border-bottom: 1px solid var(--c-line);
}
body.page-robot .buy-box__fact-key {
font-size: 14px;
font-weight: 400;
color: var(--c-muted);
}
body.page-robot .buy-box__fact-value {
font-size: 16px;
font-weight: 400;
}
body.page-robot .buy-box__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
body.page-robot .buy-box__cta {
flex: 1 1 100%;
display: flex;
min-height: 64px;
padding: 0 28px;
text-align: center;
}
body.page-robot .buy-box__cta--balance {
line-height: 1.3;
text-wrap: balance;
}
body.page-robot .buy-box__cta--balance svg {
flex-shrink: 0;
}
body.page-robot .buy-box__call {
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2px 16px;
min-height: 64px;
padding: 10px 24px;
}
body.page-robot .buy-box__call-label {
white-space: nowrap;
}
body.page-robot .buy-box__call-number {
font-size: 16px;
font-weight: 400;
white-space: nowrap;
}
body.page-robot .buy-box__call-number--dim {
font-size: 15px;
opacity: 0.72;
}
body.page-robot .buy-box__promises {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 15px;
line-height: 1.45;
font-weight: 400;
color: var(--c-body);
}
body.page-robot .buy-box__promise {
display: flex;
align-items: flex-start;
gap: 12px;
}
body.page-robot .buy-box__promise-icon {
flex-shrink: 0;
margin-top: 1px;
}
body.page-robot .statement {
padding: 88px 0 0;
}
body.page-robot .statement__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
}
body.page-robot .statement__copy {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 600px;
}
body.page-robot .statement__lead {
color: var(--c-white-82);
}
body.page-robot .statement__figure {
display: flex;
flex-direction: column;
gap: 8px;
}
body.page-robot .statement__figure-note {
margin: 0;
font-size: 16px;
line-height: 1.4;
font-weight: 300;
color: rgba(255, 255, 255, 0.72);
}
body.page-robot .statement__media {
position: relative;
width: 100%;
aspect-ratio: 2.33/1;
min-height: 440px;
max-height: 680px;
margin-top: 48px;
overflow: hidden;
background: var(--media-bg, var(--c-night));
}
body.page-robot .statement__visual {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
display: block;
}
body.page-robot .media-toggle {
position: absolute;
right: 16px;
bottom: 16px;
}
body.page-robot .section-head {
display: flex;
flex-direction: column;
gap: 12px;
}
body.page-robot .section-head__lead {
color: var(--c-body);
}
body.page-robot .on-dark .section-head__lead {
color: var(--c-white-82);
}
body.page-robot .section-head--center {
align-items: center;
text-align: center;
}
body.page-robot .section-head--center .section-head__title {
max-width: 760px;
}
body.page-robot .section-head--center .section-head__lead {
max-width: 640px;
}
body.page-robot .section-head--narrow .section-head__title,
body.page-robot .section-head--narrow .section-head__lead {
max-width: 600px;
}
body.page-robot .section-head--compact {
max-width: 640px;
}
body.page-robot .band {
position: relative;
width: 100%;
aspect-ratio: 2.56/1;
max-height: 760px;
margin-top: 48px;
overflow: hidden;
background: var(--media-bg, transparent);
}
body.page-robot .band__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
display: block;
}
body.page-robot .cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
body.page-robot .cards--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-robot .band + .cards {
margin-top: 32px;
}
body.page-robot .cards--after-head {
margin-top: 48px;
}
body.page-robot .card {
display: flex;
flex-direction: column;
gap: 24px;
}
body.page-robot .card__img {
width: 100%;
height: auto;
aspect-ratio: 5/4;
object-fit: cover;
object-position: var(--pos, 50% 50%);
display: block;
background: var(--media-bg, transparent);
}
body.page-robot .card__img--tile {
aspect-ratio: 1/1;
}
body.page-robot .card__img--inset {
object-fit: contain;
padding: 40px;
}
body.page-robot .card__frame {
aspect-ratio: 1/1;
padding: 24px;
background: var(--c-night);
display: flex;
align-items: center;
justify-content: center;
}
body.page-robot .card__frame-img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
body.page-robot .card__body {
display: flex;
flex-direction: column;
gap: 8px;
}
body.page-robot .card__text {
color: var(--c-body);
}
body.page-robot .on-dark .card__text {
color: var(--c-white-82);
}
body.page-robot .note {
margin-top: 32px;
}
body.page-robot .note__text {
max-width: 760px;
color: rgba(255, 255, 255, 0.55);
}
body.page-robot .split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 560px;
}
body.page-robot .split__text {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 72px;
padding-bottom: 72px;
}
body.page-robot .split--media-right .split__text {
padding-left: max(var(--gutter), (100vw - 1440px) / 2 + 64px);
padding-right: 64px;
}
body.page-robot .split--media-left .split__text {
padding-left: 64px;
padding-right: max(var(--gutter), (100vw - 1440px) / 2 + 64px);
}
body.page-robot .split--media-left .split__media {
order: -1;
}
body.page-robot .split__copy {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 520px;
}
body.page-robot .split__lead {
color: var(--c-body);
}
body.page-robot .split__note {
margin-top: 8px;
color: var(--c-muted);
}
body.page-robot .split__media {
position: relative;
overflow: hidden;
min-height: 560px;
background: var(--media-bg, transparent);
}
body.page-robot .split__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--pos, 50% 50%);
display: block;
}
body.page-robot .spec-table__note {
margin-top: 12px;
color: var(--c-muted);
}
body.page-robot .spec-table {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 32px;
margin-top: 40px;
}
body.page-robot .spec-table__item {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 124px;
padding: 20px 0 24px;
border-bottom: 1px solid var(--c-line-strong);
}
body.page-robot .spec-table__key {
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: var(--c-muted);
}
body.page-robot .spec-table__value {
display: flex;
align-items: baseline;
flex-wrap: wrap;
color: var(--c-ink);
}
body.page-robot .spec-table__value--range {
column-gap: 6px;
}
body.page-robot .spec-table__part {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
body.page-robot .spec-table__pre {
margin-right: 6px;
}
body.page-robot .spec-table__mid {
margin: 0 6px;
}
body.page-robot .spec-table__unit {
margin-left: 4px;
}
body.page-robot .spec-table__text {
font-size: 18px;
line-height: 1.4;
font-weight: 300;
color: var(--c-ink);
}
body.page-robot .faq {
margin-top: 24px;
border-top: 1px solid var(--c-line);
}
body.page-robot .faq__item {
border-bottom: 1px solid var(--c-line);
}
body.page-robot .faq__q {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
body.page-robot .faq__button {
width: 100%;
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 0;
border: 0;
background: transparent;
color: var(--c-ink);
cursor: pointer;
font-family: inherit;
font-size: 18px;
line-height: 1.4;
font-weight: 400;
text-align: left;
}
body.page-robot .faq__button:hover {
color: var(--c-green);
}
body.page-robot .faq__icon {
flex-shrink: 0;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
body.page-robot .faq__button[aria-expanded=true] .faq__icon {
transform: rotate(180deg);
}
body.page-robot .faq__answer {
padding: 0 0 28px;
}
body.page-robot .faq__text {
margin: 0;
max-width: 720px;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
color: var(--c-body);
}
body.page-robot .inquiry {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 64px;
align-items: start;
}
body.page-robot .inquiry__intro {
display: flex;
flex-direction: column;
gap: 12px;
}
body.page-robot .inquiry__lead {
color: var(--c-white-82);
}
body.page-robot .inquiry__contacts {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--c-white-16);
}
body.page-robot .inquiry__contact-note {
font-size: 14px;
font-weight: 400;
color: var(--c-white-64);
}
body.page-robot .inquiry__phone,
body.page-robot .inquiry__mail {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--c-white);
font-size: 18px;
font-weight: 400;
}
body.page-robot .inquiry__phone {
text-decoration: none;
white-space: nowrap;
}
body.page-robot .inquiry__mail {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
body.page-robot .inquiry__form {
display: flex;
flex-direction: column;
gap: 20px;
}
body.page-robot .inquiry__fieldset {
margin: 0;
padding: 0;
border: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
body.page-robot .inquiry__legend {
padding: 0;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: var(--c-white-82);
}
body.page-robot .inquiry__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.page-robot .chip {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 18px;
border: 1px solid var(--c-white-24);
background: transparent;
color: var(--c-white);
cursor: pointer;
font-family: inherit;
font-size: 15px;
font-weight: 400;
transition: border-color 0.15s ease;
}
body.page-robot .chip[aria-pressed=true] {
border-color: var(--c-white);
background: var(--c-white);
color: var(--c-night);
}
body.page-robot .chip:hover {
border-color: var(--c-white);
}
body.page-robot .inquiry__fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 16px;
}
body.page-robot .inquiry__field {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--c-white-82);
}
body.page-robot .inquiry__input {
width: 100%;
height: 56px;
padding: 0 16px;
border: 1px solid var(--c-white-24);
border-radius: 0;
background: transparent;
color: var(--c-white);
font-family: inherit;
font-size: 16px;
font-weight: 400;
}
body.page-robot .inquiry__input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
body.page-robot .on-dark .inquiry__input:focus-visible,
body.page-robot .on-dark .inquiry__input:focus {
outline: 2px solid var(--c-white);
outline-offset: 0;
box-shadow: none;
}
body.page-robot .inquiry__hint {
margin-top: -8px;
font-size: 14px;
font-weight: 400;
color: var(--c-white-64);
}
body.page-robot .inquiry__error {
margin: 0;
font-size: 15px;
font-weight: 400;
color: var(--c-error-on-dark);
}
body.page-robot .inquiry__consent {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
color: var(--c-white-82);
}
body.page-robot .inquiry__check {
width: 20px;
height: 20px;
margin: 1px 0 0;
accent-color: var(--c-green);
flex-shrink: 0;
}
body.page-robot .inquiry__submit {
display: flex;
width: 100%;
min-height: 64px;
padding: 0 28px;
}
body.page-robot .inquiry__eta {
font-size: 14px;
font-weight: 400;
color: var(--c-white-64);
}
body.page-robot .inquiry__sent {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 8px;
}
body.page-robot .inquiry__sent-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: var(--c-green);
}
body.page-robot .inquiry__sent-text {
max-width: 520px;
color: var(--c-white-82);
}
body.page-robot .inquiry__sent-phone {
color: var(--c-white);
white-space: nowrap;
}
body.page-robot .inquiry__reset {
align-self: flex-start;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--c-white);
cursor: pointer;
font-family: inherit;
font-size: 15px;
font-weight: 400;
text-decoration: underline;
text-underline-offset: 4px;
}
body.page-robot .footnotes {
padding: 48px 0;
}
body.page-robot .footnotes__list {
margin: 0;
padding: 0;
list-style: none;
max-width: 960px;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
line-height: 1.5;
font-weight: 400;
color: var(--c-muted);
}
@media (max-width: 980px) {
body.page-robot .robot-hero__grid {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
body.page-robot .inquiry {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
}
body.page-robot .spec-table {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
body.page-robot .robot-hero {
padding-top: 24px;
padding-bottom: 64px;
}
body.page-robot .buy-box__fact {
grid-template-columns: 120px minmax(0, 1fr);
}
body.page-robot .buy-box__cta--compact {
padding: 0 18px;
gap: 10px;
font-size: 16px;
}
body.page-robot .buy-box__cta--bare {
padding: 0 12px;
font-size: 16px;
}
body.page-robot .buy-box__cta--bare svg {
display: none;
}
body.page-robot .buy-box__call--center {
justify-content: center;
text-align: center;
}
body.page-robot .statement {
padding-top: 56px;
}
body.page-robot .statement__media {
aspect-ratio: 4/5;
min-height: 0;
max-height: none;
margin-top: 32px;
}
body.page-robot .statement__visual {
object-position: var(--mpos, var(--pos, 50% 50%));
}
body.page-robot .band {
aspect-ratio: 1.2/1;
margin-top: 32px;
}
body.page-robot .band__media {
object-position: var(--mpos, 50% 50%);
}
body.page-robot .cards {
grid-template-columns: minmax(0, 1fr);
row-gap: 40px;
}
body.page-robot .card {
gap: 16px;
}
body.page-robot .card__img--tile {
aspect-ratio: 4/3;
object-fit: contain;
}
body.page-robot .card__frame {
aspect-ratio: 4/3;
}
body.page-robot .split {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
body.page-robot .split__media {
order: -1;
min-height: 0;
aspect-ratio: 4/3;
}
body.page-robot .split .split__text {
padding: 32px 20px 64px;
}
body.page-robot .spec-table {
column-gap: 16px;
}
body.page-robot .spec-table__item {
min-height: 104px;
}
body.page-robot .type-val {
font-size: 28px;
}
body.page-robot .type-vunit {
font-size: 16px;
}
body.page-robot .inquiry__fields {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 380px) {
body.page-robot .spec-table {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
body.page-robot .gallery__slide {
transition: none;
}
}
body.page-robot .robot-page [hidden] {
display: none;
}
body.page-robot .modes {
display: flex;
flex-direction: column;
gap: 48px;
}
body.page-robot .modes__grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 0;
align-items: stretch;
}
body.page-robot .modes__tabs {
display: flex;
flex-direction: column;
border-top: 1px solid var(--c-line-strong);
}
body.page-robot .modes__tab {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
min-height: 72px;
padding: 0 24px;
border: 0;
border-bottom: 1px solid var(--c-line-strong);
background: transparent;
color: var(--c-ink);
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background 0.2s ease;
}
body.page-robot .modes__tab[aria-selected=true] {
background: var(--c-white);
}
body.page-robot .modes__tab:hover {
background: rgba(255, 255, 255, 0.6);
}
body.page-robot .modes__tab-bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: transparent;
}
body.page-robot .modes__tab[aria-selected=true] .modes__tab-bar {
background: var(--c-ink);
}
body.page-robot .modes__tab-label {
font-size: 18px;
line-height: 1.35;
font-weight: 500;
}
body.page-robot .modes__tab-hours {
font-size: 16px;
font-weight: 400;
color: var(--c-muted);
white-space: nowrap;
}
body.page-robot .modes__panel {
display: flex;
flex-direction: column;
gap: 28px;
padding: 48px;
background: var(--c-white);
}
body.page-robot .modes__detail {
display: flex;
flex-direction: column;
gap: 28px;
}
body.page-robot .modes__figure {
display: flex;
flex-direction: column;
gap: 8px;
}
body.page-robot .modes__unit {
margin-left: 4px;
}
body.page-robot .modes__what {
font-size: 16px;
font-weight: 400;
color: var(--c-muted);
}
body.page-robot .modes__text {
max-width: 520px;
color: var(--c-body);
}
body.page-robot .modes__bars {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 24px;
border-top: 1px solid var(--c-line);
}
body.page-robot .modes__bar {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 56px;
gap: 8px 16px;
align-items: center;
font-size: 14px;
font-weight: 400;
color: var(--c-muted);
}
body.page-robot .modes__bar.is-selected {
color: var(--c-ink);
}
body.page-robot .modes__bar-track {
height: 8px;
background: var(--c-line-faint);
}
body.page-robot .modes__bar-fill {
height: 100%;
width: var(--w);
background: #B9C2BB;
}
body.page-robot .modes__bar.is-selected .modes__bar-fill {
background: var(--c-ink);
}
body.page-robot .modes__bar-hours {
text-align: right;
}
@media (max-width: 980px) {
body.page-robot .modes__grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 760px) {
body.page-robot .modes__panel {
padding: 28px 20px;
}
body.page-robot .modes__bar {
grid-template-columns: 118px minmax(0, 1fr) 48px;
column-gap: 12px;
}
}
body.produktas-bellabot-pro {
/* ==========================================================================
Ginalas PUDU: robots/bellabot-pro.css
Page-only rules for pudu-bellabot-pro.html, loaded after robot.css.
.gallery__cutout--tall the cut-out of this tall, narrow robot fills 90 % of the gallery stage height
(the shared template uses 72 % for the cleaning robots)
.card__img--photo-tile a square photo tile on a dark section, cropped to fill (4:3 on phones)
.section-gap the space between the dark section's heading and its tiles when there is no band (80 px; 64 px on phones)
========================================================================== */
}
body.produktas-bellabot-pro .gallery__cutout--tall {
top: 5%;
height: 90%;
}
body.produktas-bellabot-pro .card__img--photo-tile {
aspect-ratio: 1/1;
object-fit: cover;
}
body.produktas-bellabot-pro .section-gap {
height: 80px;
}
body.produktas-bellabot-pro .inquiry__sent-phone--underline {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
@media (max-width: 760px) {
body.produktas-bellabot-pro .card__img--photo-tile {
aspect-ratio: 4/3;
}
body.produktas-bellabot-pro .section-gap {
height: 64px;
}
}
body.produktas-cc1 {
/* ==========================================================================
Ginalas PUDU: robots/cc1.css
Page-only rules for pudu-cc1.html, loaded after robot.css.
Everything else on the page comes from the shared template (css/robot.css):
CC1 sets .robot-page--balance-headings, --balance-lede and --pretty-sub,
.buy-box__cta--compact, .buy-box__call--center and .cards--two there.
.gallery__badge--outlined
the play badge on the video thumbnail has a 1 px hairline border
(CC1 Pro's badge has none).
.card__frame--light
"Keturi valymo būdai": the cut-out sits on a light 5:4 panel at every
width (the shared frame is a dark square, 4:3 on phones). The panel
colour comes from --media-bg; the image keeps its natural size when it
fits and shrinks to fit otherwise, as in the shared frame.
.card__frame--fit
the two station cards: a dark 5:4 tile (4:3 on phones) whose image is
scaled to fit 24 px inside the tile, up or down (source x-rtile).
The tile colour comes from --media-bg.
========================================================================== */
}
body.produktas-cc1 .gallery__badge--outlined {
border: 1px solid var(--c-line);
}
body.produktas-cc1 .card__frame--light {
aspect-ratio: 5/4;
background: var(--media-bg, var(--c-night));
}
body.produktas-cc1 .card__frame--fit {
position: relative;
aspect-ratio: 5/4;
padding: 0;
overflow: hidden;
background: var(--media-bg, var(--c-night));
}
body.produktas-cc1 .card__frame--fit .card__frame-img {
position: absolute;
left: 24px;
top: 24px;
width: calc(100% - 48px);
height: calc(100% - 48px);
max-width: none;
max-height: none;
object-fit: contain;
}
@media (max-width: 760px) {
body.produktas-cc1 .card__frame--fit {
aspect-ratio: 4/3;
}
}
body.produktas-et1 {
/* ==========================================================================
Ginalas PUDU: robots/et1.css
Page-only rules for pudu-et1.html, loaded after robot.css.
Everything else on the page comes from the shared template (css/robot.css):
ET1 sets .robot-page--balance-headings, .buy-box__cta--bare,
.buy-box__call-number--dim and .card__img--inset there.
.inquiry__sent-phone--underline
the phone link in the thank-you block: ET1 draws its underline
1 px thick, 4 px below the text (CC1 Pro keeps the browser default).
========================================================================== */
}
body.produktas-et1 .inquiry__sent-phone--underline {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
body.produktas-gt3 {
/* ==========================================================================
Ginalas PUDU: robots/gt3.css
Page-only rules for pudu-gt3.html, loaded after robot.css.
Everything else on the page comes from the shared template (css/robot.css):
GT3 sets .robot-page--balance-headings, --balance-lede,
.buy-box__cta--balance, .buy-box__call-number--dim and .cards--two there.
Hero between 981 and 1180 px wide (the source's 1180 px breakpoint)
the gallery and the buy box share the row 1.3fr / 1fr with a
40 px gap (2fr / 1fr and 56 px above 1180 px; one column at
980 px and below, as in robot.css).
Key facts between 761 and 1180 px wide
the label column narrows to 110 px (140 px above 1180 px,
120 px at 760 px and below, as in robot.css).
The ranges stop where robot.css's own 980 / 760 px rules take over, so
this file does not have to restate them.
========================================================================== */
}
@media (min-width: 981px) and (max-width: 1180px) {
body.produktas-gt3 .robot-hero__grid {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 40px;
}
}
@media (min-width: 761px) and (max-width: 1180px) {
body.produktas-gt3 .buy-box__fact {
grid-template-columns: 110px minmax(0, 1fr);
}
}
body.produktas-gt5 {
/* ==========================================================================
Ginalas PUDU: robots/gt5.css
Page-only rules for pudu-gt5.html, loaded after robot.css.
Everything else on the page comes from the shared template (css/robot.css):
GT5 sets .robot-page--balance-headings, .buy-box__cta--compact and
.cards--two there, and its statement photo sits in a whose
portrait version (<= 760 px) and phone crop (--mpos) need no rule here.
.spec-table__nowrap
"nuo 8 iki 10 val." and "nuo 26 iki 152 mm": the second value and
its unit stay on one line when the value wraps. A plain inline
span, as in the original (robot.css's .spec-table__part is an
inline-flex box, which reads as two lines of text).
nuo26
iki
152mm
Key facts between 981 and 1180 px wide (the source's own breakpoint)
the label column narrows to 104 px (140 px above 1180 px and
between 761 and 980 px, 120 px at 760 px and below, as in
robot.css).
========================================================================== */
}
body.produktas-gt5 .spec-table__nowrap {
white-space: nowrap;
}
@media (min-width: 981px) and (max-width: 1180px) {
body.produktas-gt5 .buy-box__fact {
grid-template-columns: 104px minmax(0, 1fr);
}
}
body.produktas-mp2000 {
/* ==========================================================================
Ginalas PUDU: robots/mp2000.css
Page-only rules for pudu-mp2000.html, loaded after robot.css.
.gallery__cutout--tall the cut-out of this tall, narrow robot fills 90 % of the gallery stage height
(the shared template uses 72 % for the cleaning robots)
.card__img--photo-tile a square photo tile on a dark section, cropped to fill (4:3 on phones)
.section-gap the space between the dark section's heading and its tiles when there is no band (80 px; 64 px on phones)
========================================================================== */
}
body.produktas-mp2000 .gallery__cutout--tall {
top: 5%;
height: 90%;
}
body.produktas-mp2000 .card__img--photo-tile {
aspect-ratio: 1/1;
object-fit: cover;
}
body.produktas-mp2000 .section-gap {
height: 80px;
}
body.produktas-mp2000 .inquiry__sent-phone--underline {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
@media (max-width: 760px) {
body.produktas-mp2000 .card__img--photo-tile {
aspect-ratio: 4/3;
}
body.produktas-mp2000 .section-gap {
height: 64px;
}
}
body.produktas-mt1-max {
/* ==========================================================================
Ginalas PUDU: robots/mt1-max.css
Page-only rules for pudu-mt1-max.html, loaded after robot.css.
Everything else on the page comes from the shared template (css/robot.css):
MT1 Max sets .robot-page--balance-headings, --balance-lede,
.buy-box__cta--balance and .cards--two there.
.buy-box__cta--shrink-arrow
with .buy-box__cta--balance: the arrow may shrink when the label wraps
on narrow screens (about 15 px wide at 390 px, 13 px at 360 px), as in
the original MT1 Max; GT3 and GT7 keep it at 18 px (robot.css).
.buy-box__actions--dial
the buy box's action row: the CTA fills the first line; under it the
call link and the phone number with office hours sit side by side,
vertically centred, 20 px apart (12 px between the lines).
.buy-box__dial
the call link: a 64 px outlined button that shows only its label,
which never wraps (the number is in its aria-label and printed next
to it). Colours, border and hover come from .btn--line; the shared
14 px icon gap of .btn is reset, as the original link has none.
.buy-box__hours / .buy-box__hours-number
the phone number (16 px, ink, never breaks) above "nuo 8 iki 17 val."
(14 px, muted).
.card__img--square
the "Įkrovimo stotelė" photo on the dark station section: a square
photo cropped to fill (object-fit: cover) at every width, 4:3 on phones.
The other two station tiles use the shared .card__img--tile, which
switches to contain on phones. Tile colour and crop come from
--media-bg and --pos.
========================================================================== */
}
body.produktas-mt1-max .buy-box__cta--shrink-arrow svg {
flex-shrink: 1;
}
body.produktas-mt1-max .buy-box__actions--dial {
align-items: center;
gap: 12px 20px;
}
body.produktas-mt1-max .buy-box__dial {
gap: normal;
min-height: 64px;
padding: 0 24px;
white-space: nowrap;
}
body.produktas-mt1-max .buy-box__hours {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: var(--c-muted);
}
body.produktas-mt1-max .buy-box__hours-number {
font-size: 16px;
color: var(--c-ink);
white-space: nowrap;
}
body.produktas-mt1-max .card__img--square {
aspect-ratio: 1/1;
}
@media (max-width: 760px) {
body.produktas-mt1-max .card__img--square {
aspect-ratio: 4/3;
}
}
body.produktas-mt1-vac {
/* ==========================================================================
Ginalas PUDU: robots/mt1-vac.css
Page-only rules for pudu-mt1-vac.html, loaded after robot.css.
Everything else on the page comes from the shared template (css/robot.css):
MT1 Vac sets .buy-box__cta--compact and .buy-box__call--center there, uses
.spec-table__mid for "nuo 3 iki 6,5 val." and a .band with a video
(.band__media on the