/**
* VERIC - style "startera" rezerwacji dla stron klienta (Webflow itp.).
*
* Strona hostująca wpina to jednym `` w ``; logikę dowozi `veric-starter.js`.
* Kolor akcentu nadpisuje się po stronie klienta, bez naszego deployu:
*
*
* Domyślnie style zakładają CIEMNE tło sekcji hero. Na jasnym hero dodaj na kontenerze
* klasę `vr-starter--light`.
*/
.vr-starter {
width: 100%;
max-width: 760px;
}
.vr-starter__lead {
margin: 0 0 14px;
font-size: 15px;
font-weight: 500;
color: #fff;
opacity: .8;
}
/** Etykieta nad chipami - jasny sygnał, że to przyciski rezerwacji. */
.vr-starter__label {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
opacity: 0.92;
}
/** Meta pod chipami: kaucja z lewej, „Inne długości…” z prawej. */
.vr-starter__meta {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 16px;
margin: 10px 0 0;
width: 100%;
}
.vr-starter__deposit {
margin: 0;
flex: 0 1 auto;
min-width: 0;
font-size: 13px;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.72);
}
.vr-starter__more {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
margin: 0 0 0 auto;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.78);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-align: right;
white-space: nowrap;
transition: color 0.15s ease;
}
.vr-starter__more:hover,
.vr-starter__more:focus-visible {
color: var(--vr-accent, #F5E003);
}
.vr-starter__more:focus-visible {
outline: 2px solid var(--vr-accent, #F5E003);
outline-offset: 3px;
}
/**
* Delikatny wybór modelu nad 3 kafelkami - tylko gdy `data-vr-models` ma 2+ slugi.
* Nie ma wyglądać jak menu: małe, w jednej linii, bez „kart”.
*/
.vr-starter__models {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px;
}
.vr-starter__model {
appearance: none;
margin: 0;
padding: 7px 12px;
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.2;
color: rgba(255, 255, 255, .78);
background: transparent;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
transition: color .15s, border-color .15s, background .15s;
}
.vr-starter__model:hover {
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.vr-starter__model:focus-visible {
outline: 2px solid var(--vr-accent, #F5E003);
outline-offset: 2px;
}
.vr-starter__model[data-vr-active="true"] {
color: #111;
background: var(--vr-accent, #F5E003);
border-color: var(--vr-accent, #F5E003);
}
.vr-starter--light .vr-starter__model {
color: rgba(0, 0, 0, .62);
border-color: rgba(0, 0, 0, .16);
}
.vr-starter--light .vr-starter__model:hover {
color: #111;
border-color: rgba(0, 0, 0, .35);
}
.vr-starter--light .vr-starter__model[data-vr-active="true"] {
color: #111;
background: var(--vr-accent, #F5E003);
border-color: var(--vr-accent, #F5E003);
}
.vr-starter__chips {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.vr-starter__chips { grid-template-columns: repeat(3, 1fr); }
}
.vr-chip {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
/* Stała wysokość rzędu: cena zawsze w jednej linii między kafelkami,
nawet gdy jeden podtytuł ma 1 linię, a drugi 2. */
min-height: 132px;
padding: 18px 20px;
cursor: pointer;
text-align: left;
text-decoration: none;
font: inherit;
color: #fff;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 14px;
backdrop-filter: blur(6px);
transition: background .15s, border-color .15s, transform .15s;
}
.vr-chip:hover {
background: rgba(255, 255, 255, .14);
border-color: var(--vr-accent, #F5E003);
transform: translateY(-2px);
}
.vr-chip:focus-visible {
outline: 2px solid var(--vr-accent, #F5E003);
outline-offset: 3px;
}
.vr-chip[data-vr-active="true"] {
background: var(--vr-accent, #F5E003);
border-color: var(--vr-accent, #F5E003);
color: #111;
}
.vr-chip[data-vr-active="true"] .vr-chip__price { color: #111; }
.vr-chip[data-vr-active="true"] .vr-chip__sub { opacity: .7; }
.vr-chip__title {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.vr-chip__sub {
font-size: 13px;
line-height: 1.3;
opacity: .7;
/* Rezerwa na 2 linie - krótki podtytuł („Pełne 24 h”) nie podciąga ceny wyżej. */
min-height: calc(1.3em * 2);
}
.vr-chip__price {
margin-top: auto;
padding-top: 8px;
font-size: 30px;
font-weight: 800;
line-height: 1;
color: var(--vr-accent, #F5E003);
}
/**
* Kwota jeszcze nie dojechała z API - szara belka o wymiarach docelowej ceny.
* Zapobiega przeskokowi układu i temu, żeby mignęła cena innego sprzętu.
*/
.vr-chip__price[data-vr-loading] {
display: inline-block;
min-width: 78px;
min-height: 1em;
border-radius: 6px;
background: currentColor;
opacity: .16;
animation: vr-pulse 1.3s ease-in-out infinite;
}
@keyframes vr-pulse {
50% { opacity: .06; }
}
@media (prefers-reduced-motion: reduce) {
.vr-chip__price[data-vr-loading] { animation: none; }
}
.vr-starter__note {
margin: 14px 0 0;
font-size: 13px;
color: #fff;
opacity: .65;
}
/* Wariant na jasne tło hero. */
.vr-starter--light .vr-chip {
color: #111;
background: #fff;
border-color: rgba(0, 0, 0, .14);
}
.vr-starter--light .vr-starter__lead,
.vr-starter--light .vr-starter__note { color: #111; }
.vr-starter--light .vr-starter__label {
color: #111;
opacity: 0.85;
}
.vr-starter--light .vr-starter__deposit {
color: rgba(0, 0, 0, 0.55);
}
.vr-starter--light .vr-starter__more {
color: rgba(0, 0, 0, 0.62);
}
.vr-starter--light .vr-starter__more:hover,
.vr-starter--light .vr-starter__more:focus-visible {
color: #111;
}
/* Kotwica sekcji z widgetem - zapas na przyklejoną nawigację. */
#rezerwacja { scroll-margin-top: 90px; }
/* Loader nakładany przez skrypt na czas przeładowania iframe. */
@keyframes vr-spin { to { transform: rotate(360deg); } }