:root {
--clr-bg: #0d0f12;
--clr-surface: #15181d;
--clr-surface-2: #1c2027;
--clr-border: #282d36;
--clr-text: #f4f5f7;
--clr-text-muted: #a2aab6;
--clr-primary: #e2261c;
--clr-primary-hover: #f03d31;
--clr-primary-ink: #ffffff;
--clr-primary-soft: rgba(226, 38, 28, .12); 
--clr-success: #37c07d;
--clr-error: #ff6b62;
--clr-star: #f4b400;
--clr-whatsapp: #25d366;
--clr-viber: #7360f2;
--ff-heading: "Sora", system-ui, -apple-system, sans-serif;
--ff-body: "Inter", system-ui, -apple-system, sans-serif;
--fs-900: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem);
--fs-800: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
--fs-700: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
--fs-600: 1.25rem;
--fs-500: 1.125rem;
--fs-400: 1rem;
--fs-300: .875rem;
--fs-200: .8125rem;
--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
--sp-section: clamp(4rem, 3rem + 5vw, 7rem);
--radius: 12px;
--radius-lg: 20px;
--radius-full: 999px;
--shadow-1: 0 2px 8px rgb(0 0 0 / .35);
--shadow-2: 0 12px 40px rgb(0 0 0 / .45);
--glow-primary: 0 0 24px rgb(226 38 28 / .3);
--transition: 200ms ease;
--transition-slow: 400ms cubic-bezier(.22, 1, .36, 1);
--container: 1200px;
--header-h: 76px;
--mobile-cta-h: 64px;
--z-header: 100;
--z-float: 200;
--z-modal: 300;
--z-toast: 400;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--ff-body);
font-size: var(--fs-400);
line-height: 1.65;
color: var(--clr-text);
background-color: var(--clr-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--ff-heading);
font-weight: 700;
line-height: 1.15;
text-wrap: balance;
}
p { max-width: 65ch; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--clr-primary); color: var(--clr-primary-ink); }
:focus-visible {
outline: 2px solid var(--clr-text);
outline-offset: 3px;
border-radius: 4px;
}
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb {
background: var(--clr-surface-2);
border-radius: var(--radius-full);
border: 3px solid var(--clr-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-border); }
.icon {
width: 1.25em;
height: 1.25em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }
.skip-link {
position: absolute;
top: -100px;
left: var(--sp-4);
z-index: calc(var(--z-toast) + 1);
padding: var(--sp-3) var(--sp-5);
background: var(--clr-primary);
color: var(--clr-primary-ink);
font-weight: 600;
border-radius: 0 0 var(--radius) var(--radius);
text-decoration: none;
transition: top var(--transition);
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--sp-4);
}
@media (min-width: 600px) {
.container { padding-inline: var(--sp-5); }
}
.section { padding-block: var(--sp-section); }
.section--surface {
background: var(--clr-surface);
border-block: 1px solid var(--clr-border);
}
.section__header {
max-width: 640px;
margin-inline: auto;
margin-bottom: var(--sp-7);
text-align: center;
}
.section__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
font-family: var(--ff-heading);
font-size: var(--fs-300);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--clr-primary);
}
.section__eyebrow::before,
.section__eyebrow::after {
content: "";
width: 24px;
height: 2px;
background: var(--clr-primary);
opacity: .6;
}
.section__title { font-size: var(--fs-800); }
.section__subtitle {
margin-top: var(--sp-4);
margin-inline: auto;
color: var(--clr-text-muted);
}
.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 600px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.header {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-header);
height: var(--header-h);
transition: background var(--transition), box-shadow var(--transition),
border-color var(--transition);
border-bottom: 1px solid transparent;
}
.header.is-scrolled {
background: rgba(13, 15, 18, .88);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom-color: var(--clr-border);
box-shadow: var(--shadow-1);
}
.header__inner {
display: flex;
align-items: center;
gap: var(--sp-5);
height: 100%;
}
.header__logo {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
margin-right: auto;
}
.header__logo-mark { width: 42px; height: 42px; }
.header__logo-text {
display: flex;
flex-direction: column;
font-family: var(--ff-heading);
line-height: 1.1;
}
.header__logo-name {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--clr-text);
}
.header__logo-sub {
font-size: .66rem;
font-weight: 600;
letter-spacing: .42em;
text-transform: uppercase;
color: var(--clr-primary);
}
.nav__list {
display: flex;
align-items: center;
gap: var(--sp-5);
}
.nav__link {
position: relative;
padding: var(--sp-2) 0;
font-size: var(--fs-300);
font-weight: 600;
letter-spacing: .02em;
color: var(--clr-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--clr-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}
.nav__link:hover { color: var(--clr-text); }
.nav__link.is-active { color: var(--clr-text); }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__cta { flex-shrink: 0; }
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
border-radius: var(--radius);
}
.nav-toggle__bar {
width: 100%;
height: 2px;
background: var(--clr-text);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
@media (max-width: 899px) {
.nav-toggle { display: flex; }
.nav {
position: fixed;
inset: var(--header-h) 0 0 0;
background: rgba(13, 15, 18, .97);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
}
.nav.is-open { opacity: 1; visibility: visible; }
.nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--sp-5);
}
.nav__item {
opacity: 0;
transform: translateY(12px);
transition: opacity .3s ease, transform .3s ease;
}
.nav.is-open .nav__item {
opacity: 1;
transform: none;
}
.nav.is-open .nav__item:nth-child(1) { transition-delay: .05s; }
.nav.is-open .nav__item:nth-child(2) { transition-delay: .1s; }
.nav.is-open .nav__item:nth-child(3) { transition-delay: .15s; }
.nav.is-open .nav__item:nth-child(4) { transition-delay: .2s; }
.nav.is-open .nav__item:nth-child(5) { transition-delay: .25s; }
.nav.is-open .nav__item:nth-child(6) { transition-delay: .3s; }
.nav__link {
display: block;
padding: var(--sp-4) var(--sp-2);
font-size: var(--fs-600);
border-bottom: 1px solid var(--clr-border);
}
.nav__link::after { display: none; }
.nav__cta { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
body.nav-locked { overflow: hidden; }
}
.footer {
background: var(--clr-surface);
border-top: 1px solid var(--clr-border);
padding-top: var(--sp-8);
font-size: var(--fs-300);
}
.footer__grid {
display: grid;
gap: var(--sp-6);
padding-bottom: var(--sp-7);
}
@media (min-width: 600px) {
.footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.footer__brand-desc {
margin-top: var(--sp-4);
color: var(--clr-text-muted);
}
.footer__title {
margin-bottom: var(--sp-4);
font-family: var(--ff-heading);
font-size: var(--fs-400);
font-weight: 600;
}
.footer__links { display: grid; gap: var(--sp-2); }
.footer__links a {
color: var(--clr-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.footer__links a:hover { color: var(--clr-primary); }
.footer__social {
display: flex;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.social-link {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--clr-border);
border-radius: var(--radius);
color: var(--clr-text-muted);
transition: color var(--transition), border-color var(--transition),
transform var(--transition);
}
.social-link:hover {
color: var(--clr-primary);
border-color: var(--clr-primary);
transform: translateY(-2px);
}
.footer__contact { display: grid; gap: var(--sp-3); }
.footer__contact-item {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
color: var(--clr-text-muted);
}
.footer__contact-item .icon { margin-top: 3px; color: var(--clr-primary); }
.footer__contact-item a {
color: var(--clr-text);
font-weight: 600;
text-decoration: none;
}
.footer__contact-item a:hover { color: var(--clr-primary); }
.footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--sp-3);
padding-block: var(--sp-5);
border-top: 1px solid var(--clr-border);
color: var(--clr-text-muted);
}
.footer__bottom a { color: var(--clr-text-muted); }
.footer__bottom a:hover { color: var(--clr-primary); }
.open-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: var(--fs-200);
font-weight: 600;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
}
.open-badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--clr-text-muted);
}
.open-badge.is-open { color: var(--clr-success); }
.open-badge.is-open::before { background: var(--clr-success); box-shadow: 0 0 8px var(--clr-success); }
.open-badge.is-closed { color: var(--clr-error); }
.open-badge.is-closed::before { background: var(--clr-error); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 12px 28px;
border-radius: var(--radius);
font-family: var(--ff-heading);
font-size: var(--fs-300);
font-weight: 600;
letter-spacing: .02em;
text-decoration: none;
white-space: nowrap;
transition: background var(--transition), color var(--transition),
border-color var(--transition), transform var(--transition),
box-shadow var(--transition);
}
.btn:active { transform: scale(.98); }
.btn__icon { width: 1.1em; height: 1.1em; }
.btn--primary {
background: var(--clr-primary);
color: var(--clr-primary-ink);
}
.btn--primary:hover {
background: var(--clr-primary-hover);
box-shadow: var(--glow-primary);
transform: translateY(-2px);
}
.btn--secondary {
background: transparent;
color: var(--clr-text);
border: 1px solid var(--clr-border);
}
.btn--secondary:hover {
border-color: var(--clr-primary);
color: var(--clr-primary);
transform: translateY(-2px);
}
.btn--ghost {
padding: var(--sp-2) var(--sp-3);
background: transparent;
color: var(--clr-text-muted);
}
.btn--ghost:hover { color: var(--clr-primary); }
.btn--lg {
padding: 16px 36px;
font-size: var(--fs-400);
border-radius: 14px;
}
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading {
opacity: .6;
pointer-events: none;
}
.btn.is-loading::after {
content: "";
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.service-card {
display: flex;
flex-direction: column;
padding: var(--sp-5);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
transition: transform var(--transition), border-color var(--transition),
box-shadow var(--transition);
}
.service-card:hover {
transform: translateY(-6px);
border-color: var(--clr-primary);
box-shadow: var(--shadow-2), 0 0 0 1px var(--clr-primary);
}
.service-card__icon-wrap {
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin-bottom: var(--sp-4);
background: var(--clr-primary-soft);
border-radius: var(--radius);
color: var(--clr-primary);
transition: transform var(--transition);
}
.service-card:hover .service-card__icon-wrap { transform: scale(1.08) rotate(-4deg); }
.service-card__icon { width: 26px; height: 26px; }
.service-card__title {
font-size: var(--fs-500);
margin-bottom: var(--sp-2);
}
.service-card__text {
font-size: var(--fs-300);
color: var(--clr-text-muted);
margin-bottom: var(--sp-4);
}
.service-card__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-top: auto;
padding-top: var(--sp-3);
border-top: 1px solid var(--clr-border);
}
.service-card__book {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 8px 16px;
background: var(--clr-primary-soft);
border-radius: var(--radius-full);
font-size: var(--fs-200);
font-weight: 600;
color: var(--clr-primary);
text-decoration: none;
transition: background var(--transition), color var(--transition);
}
.service-card__book:hover {
background: var(--clr-primary);
color: var(--clr-primary-ink);
}
.service-card__more {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--fs-200);
font-weight: 600;
color: var(--clr-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.service-card__more .icon { transition: transform var(--transition); }
.service-card__more:hover { color: var(--clr-text); }
.service-card__more:hover .icon { transform: translateX(4px); }
.feature {
display: flex;
gap: var(--sp-4);
padding: var(--sp-5);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
background: var(--clr-bg);
transition: border-color var(--transition), transform var(--transition);
}
.feature:hover {
border-color: rgba(226, 38, 28, .5);
transform: translateY(-4px);
}
.feature__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 46px;
height: 46px;
background: var(--clr-primary-soft);
border-radius: 50%;
color: var(--clr-primary);
}
.feature__icon .icon { width: 22px; height: 22px; }
.feature__title {
font-size: var(--fs-400);
margin-bottom: var(--sp-1);
}
.feature__text {
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.stats {
padding-block: var(--sp-6);
background: var(--clr-surface);
border-block: 1px solid var(--clr-border);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
}
@media (min-width: 900px) {
.stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.stat { text-align: center; }
.stat__number {
font-family: var(--ff-heading);
font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
font-weight: 700;
color: var(--clr-text);
}
.stat__suffix { color: var(--clr-primary); }
.stat__label {
margin-top: var(--sp-1);
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.steps {
display: grid;
gap: var(--sp-6);
counter-reset: step;
}
@media (min-width: 900px) {
.steps { grid-template-columns: repeat(3, 1fr); }
}
.step {
position: relative;
text-align: center;
padding: var(--sp-5);
}
.step__number {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-inline: auto;
margin-bottom: var(--sp-4);
border: 2px solid var(--clr-primary);
border-radius: 50%;
font-family: var(--ff-heading);
font-size: var(--fs-700);
font-weight: 700;
color: var(--clr-primary);
background: var(--clr-primary-soft);
}
@media (min-width: 900px) {
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 32px;
left: calc(50% + 48px);
width: calc(100% - 96px);
border-top: 2px dashed var(--clr-border);
}
}
.step__title {
font-size: var(--fs-500);
margin-bottom: var(--sp-2);
}
.step__text {
margin-inline: auto;
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.form__group { margin-bottom: var(--sp-4); }
.form__label {
display: block;
margin-bottom: var(--sp-2);
font-size: var(--fs-300);
font-weight: 600;
}
.form__label--required::after {
content: " *";
color: var(--clr-primary);
}
.form__input,
.form__select,
.form__textarea {
width: 100%;
padding: 12px 14px;
font-size: max(16px, 1rem);
color: var(--clr-text);
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
transition: border-color var(--transition), box-shadow var(--transition);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--clr-text-muted); opacity: .6; }
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
outline: none;
border-color: var(--clr-text);
box-shadow: 0 0 0 3px rgba(244, 245, 247, .1);
}
.form__select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a2aab6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
.form__textarea { resize: vertical; min-height: 96px; }
.form__input.is-invalid,
.form__select.is-invalid,
.form__textarea.is-invalid {
border-color: var(--clr-error);
}
.form__error {
display: none;
margin-top: var(--sp-1);
font-size: var(--fs-200);
color: var(--clr-error);
}
.form__error.is-visible { display: block; }
.form__hint {
margin-top: var(--sp-1);
font-size: var(--fs-200);
color: var(--clr-text-muted);
}
.form__row { display: grid; gap: var(--sp-4); }
@media (min-width: 600px) {
.form__row { grid-template-columns: 1fr 1fr; }
}
.form__consent {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
font-size: var(--fs-200);
color: var(--clr-text-muted);
cursor: pointer;
}
.form__consent input {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--clr-primary);
flex-shrink: 0;
}
.form__consent a { color: var(--clr-text); }
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
padding: 8px 16px;
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: var(--clr-surface-2);
font-size: var(--fs-300);
font-weight: 600;
color: var(--clr-text-muted);
transition: all var(--transition);
}
.pill:hover { border-color: var(--clr-text-muted); color: var(--clr-text); }
.pill.is-selected {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-primary-ink);
}
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.modal {
width: min(560px, calc(100vw - 2rem));
max-height: min(86vh, 900px);
padding: 0;
background: var(--clr-surface);
color: var(--clr-text);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
margin: auto;
}
.modal::backdrop {
background: rgba(5, 6, 8, .7);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.modal[open] {
animation: modal-in .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes modal-in {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: none; }
}
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-5) 0;
}
.modal__title {
font-size: var(--fs-600);
}
.modal__close {
display: grid;
place-items: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius);
color: var(--clr-text-muted);
transition: color var(--transition), background var(--transition);
}
.modal__close:hover {
color: var(--clr-text);
background: var(--clr-surface-2);
}
.modal__body {
padding: var(--sp-4) var(--sp-5) var(--sp-5);
overflow-y: auto;
max-height: calc(86vh - 90px);
}
body.modal-locked { overflow: hidden; }
.booking__progress {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: var(--sp-6);
}
.booking__progress::before {
content: "";
position: absolute;
top: 15px;
left: 8%;
right: 8%;
height: 2px;
background: var(--clr-border);
}
.booking__progress-fill {
position: absolute;
top: 15px;
left: 8%;
height: 2px;
width: 0;
max-width: 84%;
background: var(--clr-primary);
transition: width var(--transition-slow);
}
.progress-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
width: 25%;
}
.progress-step__dot {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--clr-surface-2);
border: 2px solid var(--clr-border);
font-size: var(--fs-200);
font-weight: 700;
color: var(--clr-text-muted);
transition: all var(--transition);
}
.progress-step__label {
font-size: .7rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--clr-text-muted);
transition: color var(--transition);
}
.progress-step.is-current .progress-step__dot {
border-color: var(--clr-primary);
color: var(--clr-primary);
box-shadow: var(--glow-primary);
}
.progress-step.is-current .progress-step__label { color: var(--clr-text); }
.progress-step.is-done .progress-step__dot {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-primary-ink);
}
.booking__step { display: none; }
.booking__step.is-active {
display: block;
animation: step-in .3s ease;
}
@keyframes step-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: none; }
}
.booking__step.is-active.is-back {
animation-name: step-in-back;
}
@keyframes step-in-back {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: none; }
}
.booking__step-title {
font-size: var(--fs-500);
margin-bottom: var(--sp-4);
}
.booking__service-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
}
@media (min-width: 600px) {
.booking__service-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-pick {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-4) var(--sp-2);
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
font-size: var(--fs-200);
font-weight: 600;
text-align: center;
color: var(--clr-text-muted);
transition: all var(--transition);
}
.service-pick:hover {
border-color: var(--clr-text-muted);
color: var(--clr-text);
transform: translateY(-2px);
}
.service-pick__icon {
width: 26px;
height: 26px;
color: var(--clr-primary);
}
.service-pick.is-selected {
border-color: var(--clr-primary);
background: var(--clr-primary-soft);
color: var(--clr-text);
box-shadow: 0 0 0 1px var(--clr-primary);
}
.booking__slots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.time-slot {
padding: 10px 4px;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
font-size: var(--fs-200);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--clr-text-muted);
transition: all var(--transition);
}
.time-slot:hover:not(.is-disabled) {
border-color: var(--clr-text-muted);
color: var(--clr-text);
}
.time-slot.is-selected {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-primary-ink);
}
.time-slot.is-disabled {
opacity: .35;
cursor: not-allowed;
text-decoration: line-through;
}
.booking__slots-note {
margin-top: var(--sp-3);
font-size: var(--fs-200);
color: var(--clr-text-muted);
}
.booking__summary {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--clr-surface-2);
border: 1px dashed var(--clr-border);
border-radius: var(--radius);
font-size: var(--fs-200);
}
.booking__summary-item {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-weight: 600;
}
.booking__summary-item:not(:last-child)::after {
content: "·";
margin-left: var(--sp-2);
color: var(--clr-text-muted);
}
.booking__summary-item .icon { color: var(--clr-primary); width: 1em; height: 1em; }
.booking__nav {
display: flex;
justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--clr-border);
}
.booking__nav .btn { flex: 1; }
.booking__back { max-width: 120px; }
.booking__success,
.booking__error { display: none; text-align: center; padding: var(--sp-5) 0; }
.booking__success.is-visible,
.booking__error.is-visible { display: block; animation: step-in .3s ease; }
.success-check {
width: 72px;
height: 72px;
margin-inline: auto;
margin-bottom: var(--sp-4);
}
.success-check__circle {
fill: none;
stroke: var(--clr-success);
stroke-width: 2.5;
stroke-dasharray: 166;
stroke-dashoffset: 166;
animation: check-draw .5s ease forwards;
}
.success-check__mark {
fill: none;
stroke: var(--clr-success);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: check-draw .35s ease .45s forwards;
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }
.booking__success-title {
font-size: var(--fs-600);
margin-bottom: var(--sp-2);
}
.booking__success-text {
margin-inline: auto;
color: var(--clr-text-muted);
font-size: var(--fs-300);
}
.booking__success-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.booking__error-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-inline: auto;
margin-bottom: var(--sp-4);
border-radius: 50%;
background: rgba(255, 107, 98, .12);
color: var(--clr-error);
}
.accordion {
display: grid;
gap: var(--sp-3);
max-width: 760px;
margin-inline: auto;
}
.accordion__item {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
transition: border-color var(--transition);
}
.accordion__item.is-open { border-color: rgba(226, 38, 28, .5); }
.accordion__heading { margin: 0; }
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
width: 100%;
padding: var(--sp-4) var(--sp-5);
text-align: left;
font-family: var(--ff-heading);
font-size: var(--fs-400);
font-weight: 600;
color: var(--clr-text);
}
.accordion__icon {
flex-shrink: 0;
color: var(--clr-primary);
transition: transform var(--transition);
}
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-slow);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__content { overflow: hidden; }
.accordion__content p {
padding: 0 var(--sp-5) var(--sp-4);
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.float-actions {
position: fixed;
right: var(--sp-4);
bottom: var(--sp-4);
z-index: var(--z-float);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
@media (max-width: 899px) {
.float-actions { bottom: calc(var(--mobile-cta-h) + var(--sp-4)); }
}
.float-btn {
position: relative;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
color: #fff;
box-shadow: var(--shadow-2);
text-decoration: none;
transition: transform var(--transition), box-shadow var(--transition);
}
.float-btn:hover { transform: scale(1.08); }
.float-btn .icon { width: 26px; height: 26px; }
.float-btn--viber { background: var(--clr-viber); }
.float-btn--whatsapp { background: var(--clr-whatsapp); }
.float-btn--phone { background: var(--clr-primary); }
.float-btn--phone::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--clr-primary);
animation: phone-pulse 8s ease-out infinite;
}
@keyframes phone-pulse {
0%, 88% { transform: scale(1); opacity: .8; }
94% { transform: scale(1.45); opacity: 0; }
95%, 100% { transform: scale(1); opacity: 0; }
}
@media (min-width: 900px) {
.float-btn::after {
content: attr(data-tooltip);
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
padding: 6px 12px;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
font-size: var(--fs-200);
font-weight: 600;
white-space: nowrap;
color: var(--clr-text);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition), transform var(--transition);
}
.float-btn:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
.float-btn--top {
width: 44px;
height: 44px;
margin-inline: auto;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
color: var(--clr-text-muted);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
}
.float-btn--top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.float-btn--top:hover { color: var(--clr-text); }
.float-btn--top .icon { width: 20px; height: 20px; }
.mobile-cta {
position: fixed;
inset: auto 0 0 0;
z-index: var(--z-float);
display: none;
grid-template-columns: 1fr 1.4fr;
gap: var(--sp-2);
height: var(--mobile-cta-h);
padding: var(--sp-2) var(--sp-3);
padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
background: rgba(13, 15, 18, .92);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-top: 1px solid var(--clr-border);
}
@media (max-width: 899px) {
.mobile-cta { display: grid; }
body { padding-bottom: var(--mobile-cta-h); }
}
.mobile-cta .btn { height: 100%; padding-block: 0; }
.ba-slider {
position: relative;
max-width: 720px;
margin-inline: auto;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--clr-border);
box-shadow: var(--shadow-2);
user-select: none;
}
.ba-slider__before,
.ba-slider__after {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ba-slider__after {
clip-path: inset(0 0 0 var(--ba-pos, 50%));
}
.ba-slider__handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--ba-pos, 50%);
width: 3px;
margin-left: -1.5px;
background: #fff;
box-shadow: 0 0 12px rgb(0 0 0 / .6);
pointer-events: none;
}
.ba-slider__handle::after {
content: "⟨ ⟩";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
color: var(--clr-bg);
font-size: 13px;
font-weight: 700;
letter-spacing: -1px;
box-shadow: var(--shadow-1);
}
.ba-slider__label {
position: absolute;
top: var(--sp-3);
z-index: 2;
padding: 4px 12px;
border-radius: var(--radius-full);
font-family: var(--ff-heading);
font-size: var(--fs-200);
font-weight: 700;
letter-spacing: .1em;
background: rgba(13, 15, 18, .75);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
pointer-events: none;
}
.ba-slider__label--before { left: var(--sp-3); color: var(--clr-text-muted); }
.ba-slider__label--after { right: var(--sp-3); color: var(--clr-success); }
.ba-slider__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: ew-resize;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.testimonials {
display: grid;
gap: var(--sp-5);
}
@media (min-width: 900px) {
.testimonials { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
.testimonials {
grid-auto-flow: column;
grid-auto-columns: 85%;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: var(--sp-3);
-webkit-overflow-scrolling: touch;
}
.testimonial { scroll-snap-align: center; }
}
.testimonial {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-5);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
}
.testimonial__stars {
display: flex;
gap: 2px;
color: var(--clr-star);
}
.testimonial__stars .icon { width: 16px; height: 16px; }
.testimonial__text {
font-size: var(--fs-300);
color: var(--clr-text);
flex: 1;
}
.testimonial__author {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.testimonial__avatar {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--clr-primary-soft);
font-family: var(--ff-heading);
font-weight: 700;
color: var(--clr-primary);
}
.testimonial__name { font-size: var(--fs-300); font-weight: 600; }
.testimonial__meta { font-size: var(--fs-200); color: var(--clr-text-muted); }
.testimonials__note {
margin-top: var(--sp-4);
text-align: center;
font-size: var(--fs-200);
color: var(--clr-text-muted);
font-style: italic;
}
.breadcrumbs { font-size: var(--fs-200); }
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
}
.breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--clr-text-muted);
}
.breadcrumbs__item:not(:first-child)::before {
content: "›";
opacity: .5;
}
.breadcrumbs__link {
color: var(--clr-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.breadcrumbs__link:hover { color: var(--clr-primary); }
.breadcrumbs__current { color: var(--clr-text); font-weight: 600; }
.lightbox {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: rgba(8, 9, 11, .96);
color: var(--clr-text);
}
.lightbox::backdrop { background: transparent; }
.lightbox__inner {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: var(--sp-6) var(--sp-4);
}
.lightbox__img {
max-width: min(1100px, 92vw);
max-height: 78vh;
border-radius: var(--radius);
box-shadow: var(--shadow-2);
animation: lb-fade .25s ease;
}
@keyframes lb-fade {
from { opacity: 0; transform: scale(.985); }
to { opacity: 1; transform: none; }
}
.lightbox__close {
position: absolute;
top: var(--sp-4);
right: var(--sp-4);
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
color: var(--clr-text);
transition: background var(--transition), transform var(--transition);
}
.lightbox__close:hover { background: var(--clr-primary); transform: rotate(90deg); }
.lightbox__prev,
.lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
color: var(--clr-text);
transition: background var(--transition), border-color var(--transition);
}
.lightbox__prev { left: var(--sp-4); }
.lightbox__next { right: var(--sp-4); }
.lightbox__prev:hover,
.lightbox__next:hover { background: var(--clr-primary); border-color: var(--clr-primary); }
.lightbox__prev .icon { transform: rotate(180deg); }
.lightbox__bar {
position: absolute;
bottom: var(--sp-4);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: var(--sp-4);
padding: 8px 18px;
border-radius: var(--radius-full);
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
font-size: var(--fs-200);
}
.lightbox__counter { font-weight: 700; font-variant-numeric: tabular-nums; }
.lightbox__caption { color: var(--clr-text-muted); }
@media (max-width: 599px) {
.lightbox__prev { left: var(--sp-2); }
.lightbox__next { right: var(--sp-2); }
.lightbox__img { max-height: 70vh; }
}
.hero {
position: relative;
display: flex;
align-items: center;
min-height: min(92vh, 900px);
padding-top: calc(var(--header-h) + var(--sp-7));
padding-bottom: var(--sp-8);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 60% 50% at 85% 15%, rgba(226, 38, 28, .13), transparent 65%),
radial-gradient(ellipse 50% 40% at 10% 90%, rgba(226, 38, 28, .06), transparent 60%),
var(--clr-bg);
}
.hero__bg::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(45deg, var(--clr-border) 1px, transparent 1px),
linear-gradient(-45deg, var(--clr-border) 1px, transparent 1px);
background-size: 56px 56px;
opacity: .18;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000, transparent 75%);
}
.hero__bg::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(transparent, var(--clr-bg));
}
.hero__content { max-width: 720px; }
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
padding: 6px 14px;
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: rgba(21, 24, 29, .6);
font-family: var(--ff-heading);
font-size: var(--fs-200);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--clr-text-muted);
}
.hero__eyebrow::before {
content: "";
width: 8px;
height: 8px;
background: var(--clr-primary);
transform: rotate(45deg); 
}
.hero__title {
font-size: var(--fs-900);
margin-bottom: var(--sp-4);
}
.hero__title em {
font-style: normal;
color: var(--clr-primary);
}
.hero__subtitle {
font-size: var(--fs-500);
color: var(--clr-text-muted);
margin-bottom: var(--sp-6);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
}
.hero__badges {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3) var(--sp-5);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-300);
font-weight: 600;
color: var(--clr-text-muted);
}
.hero-badge .icon { color: var(--clr-success); width: 18px; height: 18px; }
.hero__eyebrow, .hero__title, .hero__subtitle, .hero__actions, .hero__badges {
animation: hero-rise .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
.hero__title { animation-delay: .1s; }
.hero__subtitle { animation-delay: .2s; }
.hero__actions { animation-delay: .3s; }
.hero__badges { animation-delay: .4s; }
@keyframes hero-rise {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
.hero__scroll-hint {
position: absolute;
left: 50%;
bottom: var(--sp-4);
transform: translateX(-50%);
color: var(--clr-text-muted);
animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce {
0%, 100% { transform: translate(-50%, 0); opacity: .5; }
50% { transform: translate(-50%, 8px); opacity: 1; }
}
@media (max-width: 599px) {
.hero__scroll-hint { display: none; }
.hero__actions .btn { width: 100%; }
}
.about-teaser {
display: grid;
gap: var(--sp-6);
align-items: center;
}
@media (min-width: 900px) {
.about-teaser { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
.about-teaser__media {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--clr-border);
}
.about-teaser__media img { width: 100%; }
.about-teaser__text p {
color: var(--clr-text-muted);
margin-bottom: var(--sp-4);
}
.about-teaser__text .section__eyebrow { margin-bottom: var(--sp-2); }
.about-teaser__text .section__title { margin-bottom: var(--sp-4); }
.gallery-teaser {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
}
@media (min-width: 600px) {
.gallery-teaser { grid-template-columns: repeat(3, 1fr); }
}
.gallery-teaser__item {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--clr-border);
aspect-ratio: 4 / 3;
transition: transform var(--transition), border-color var(--transition);
}
.gallery-teaser__item:hover {
transform: translateY(-4px);
border-color: var(--clr-primary);
}
.gallery-teaser__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-teaser__more {
display: flex;
justify-content: center;
margin-top: var(--sp-6);
}
.final-cta {
position: relative;
overflow: hidden;
text-align: center;
padding-block: var(--sp-8);
background: var(--clr-surface);
border-block: 1px solid var(--clr-border);
}
.final-cta::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(226, 38, 28, .12), transparent 70%);
pointer-events: none;
}
.final-cta__inner { position: relative; }
.final-cta__title {
font-size: var(--fs-800);
margin-bottom: var(--sp-3);
}
.final-cta__text {
margin-inline: auto;
margin-bottom: var(--sp-6);
color: var(--clr-text-muted);
}
.final-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3);
}
.final-cta__phone {
margin-top: var(--sp-5);
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.final-cta__phone a {
color: var(--clr-text);
font-weight: 700;
text-decoration: none;
}
.final-cta__phone a:hover { color: var(--clr-primary); }
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--mobile-cta-h) + var(--sp-5));
transform: translateX(-50%) translateY(16px);
z-index: var(--z-toast);
padding: var(--sp-3) var(--sp-5);
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
font-size: var(--fs-300);
font-weight: 600;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
@media (min-width: 900px) {
.toast { bottom: var(--sp-6); }
}
.toast.is-visible {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.history-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
background:
radial-gradient(80% 120% at 100% 0%, rgba(226, 38, 28, .10), transparent 60%),
var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: var(--sp-6);
box-shadow: var(--shadow-1);
}
.history-cta .section__eyebrow { justify-content: flex-start; }
.history-cta .section__title { font-size: var(--fs-700); margin-bottom: var(--sp-2); }
.history-cta__desc {
color: var(--clr-text-muted);
max-width: 52ch;
}
.history-cta .btn { flex-shrink: 0; box-shadow: var(--glow-primary); }
@media (max-width: 720px) {
.history-cta { flex-direction: column; align-items: stretch; text-align: left; }
}
.page-hero {
position: relative;
padding-top: calc(var(--header-h) + var(--sp-7));
padding-bottom: var(--sp-7);
background:
radial-gradient(ellipse 55% 70% at 80% 0%, rgba(226, 38, 28, .1), transparent 65%),
var(--clr-bg);
border-bottom: 1px solid var(--clr-border);
}
.page-hero .breadcrumbs { margin-bottom: var(--sp-4); }
.page-hero__title { font-size: var(--fs-800); }
.page-hero__subtitle {
margin-top: var(--sp-3);
color: var(--clr-text-muted);
max-width: 640px;
}
.service-layout {
display: grid;
gap: var(--sp-7);
align-items: start;
}
@media (min-width: 900px) {
.service-layout { grid-template-columns: 1.4fr 1fr; }
}
.service-layout__text > p {
color: var(--clr-text-muted);
margin-bottom: var(--sp-3);
}
.service-layout__text h2 {
font-size: var(--fs-600);
margin: var(--sp-6) 0 var(--sp-4);
}
.service-layout__media {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--clr-border);
}
.service-layout__media img { width: 100%; }
.check-list { display: grid; gap: var(--sp-3); }
.check-list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
}
.check-list .icon {
margin-top: 3px;
color: var(--clr-success);
flex-shrink: 0;
}
.service-cta {
margin-top: var(--sp-7);
padding: var(--sp-6);
text-align: center;
background:
radial-gradient(ellipse 60% 100% at 50% 100%, rgba(226, 38, 28, .16), transparent 70%),
var(--clr-surface);
border: 1px solid rgba(226, 38, 28, .4);
border-radius: var(--radius-lg);
box-shadow: var(--glow-primary);
}
.service-cta__title { font-size: var(--fs-700); margin-bottom: var(--sp-2); }
.service-cta__text {
margin-inline: auto;
margin-bottom: var(--sp-5);
color: var(--clr-text-muted);
font-size: var(--fs-300);
}
.service-cta .btn--lg { box-shadow: var(--glow-primary); }
.service-cta__alt {
margin-top: var(--sp-4);
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.service-cta__alt a { color: var(--clr-text); font-weight: 700; text-decoration: none; }
.service-cta__alt a:hover { color: var(--clr-primary); }
.gallery__filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
margin-bottom: var(--sp-6);
}
.filter-btn {
padding: 8px 20px;
border: 1px solid var(--clr-border);
border-radius: var(--radius-full);
background: var(--clr-surface);
font-size: var(--fs-300);
font-weight: 600;
color: var(--clr-text-muted);
transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--clr-text-muted); color: var(--clr-text); }
.filter-btn.is-active {
background: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-primary-ink);
}
.gallery__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
}
@media (min-width: 600px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } }
.gallery__item {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--clr-border);
transition: transform var(--transition), border-color var(--transition);
}
.gallery__item:hover { transform: translateY(-4px); border-color: var(--clr-primary); }
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.gallery__item:hover img { transform: scale(1.05); }
.contact__grid {
display: grid;
gap: var(--sp-7);
align-items: start;
}
@media (min-width: 900px) {
.contact__grid { grid-template-columns: 1fr 1.2fr; }
}
.contact-info { display: grid; gap: var(--sp-4); }
.contact-info__item {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-4);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
}
.contact-info__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--radius);
background: var(--clr-primary-soft);
color: var(--clr-primary);
}
.contact-info__label {
font-size: var(--fs-200);
color: var(--clr-text-muted);
margin-bottom: 2px;
}
.contact-info__value { font-weight: 600; }
.contact-info__value a { color: var(--clr-text); text-decoration: none; }
.contact-info__value a:hover { color: var(--clr-primary); }
.contact-form-card {
padding: var(--sp-6);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
}
.contact-form-card__title { font-size: var(--fs-600); margin-bottom: var(--sp-5); }
.form-status {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4);
border-radius: var(--radius);
font-size: var(--fs-300);
}
.form-status--success {
background: rgba(55, 192, 125, .1);
border: 1px solid rgba(55, 192, 125, .4);
color: var(--clr-success);
}
.form-status--error {
background: rgba(255, 107, 98, .1);
border: 1px solid rgba(255, 107, 98, .4);
color: var(--clr-error);
}
.map-placeholder {
display: grid;
place-items: center;
min-height: 260px;
margin-top: var(--sp-7);
border: 1px dashed var(--clr-border);
border-radius: var(--radius-lg);
background: var(--clr-surface);
color: var(--clr-text-muted);
text-align: center;
padding: var(--sp-5);
}
.booking-page {
max-width: 640px;
margin-inline: auto;
padding: var(--sp-6);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
}
.booking-page__alt {
max-width: 640px;
margin: var(--sp-6) auto 0;
text-align: center;
color: var(--clr-text-muted);
font-size: var(--fs-300);
}
.booking-page__alt a { color: var(--clr-text); font-weight: 700; text-decoration: none; }
.booking-page__alt a:hover { color: var(--clr-primary); }
.prose { max-width: 720px; margin-inline: auto; }
.prose h2 {
font-size: var(--fs-600);
margin-top: var(--sp-6);
margin-bottom: var(--sp-3);
}
.prose p, .prose li { color: var(--clr-text-muted); margin-bottom: var(--sp-3); }
.prose ul { padding-left: var(--sp-5); list-style: disc; }
.prose a { color: var(--clr-text); }
.prose a:hover { color: var(--clr-primary); }
.blog-card__meta {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
font-size: var(--fs-200);
color: var(--clr-text-muted);
}
.blog-card__meta .icon { width: 16px; height: 16px; color: var(--clr-primary); }
.blog-card__title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.blog-card__title a:hover { color: var(--clr-primary); }
.post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2) var(--sp-4);
margin-bottom: var(--sp-5);
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--clr-border);
font-size: var(--fs-300);
color: var(--clr-text-muted);
}
.post-meta .icon { width: 16px; height: 16px; color: var(--clr-primary); vertical-align: -3px; margin-right: 6px; }
.prose h3 {
font-size: var(--fs-500);
margin-top: var(--sp-5);
margin-bottom: var(--sp-2);
}
.prose ol { padding-left: var(--sp-5); list-style: decimal; }
.prose strong { color: var(--clr-text); }
.error-page {
min-height: 100vh;
display: grid;
place-items: center;
text-align: center;
padding: var(--sp-6);
}
.error-page__code {
font-family: var(--ff-heading);
font-size: clamp(5rem, 20vw, 9rem);
font-weight: 700;
line-height: 1;
color: var(--clr-primary);
text-shadow: var(--glow-primary);
}
.error-page__title { font-size: var(--fs-700); margin: var(--sp-3) 0; }
.error-page__text { color: var(--clr-text-muted); margin-bottom: var(--sp-6); }
.error-page__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3);
}
.history { max-width: 720px; }
.history-form {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
box-shadow: var(--shadow-1);
}
.history-form__vin {
text-transform: uppercase;
letter-spacing: .08em;
font-family: var(--ff-heading);
}
.history-result { margin-top: var(--sp-5); }
.history-status {
color: var(--clr-text-muted);
text-align: center;
padding: var(--sp-5) 0;
}
.history-empty {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: var(--sp-5);
text-align: center;
color: var(--clr-text-muted);
}
.history-empty strong { color: var(--clr-text); }
.history-empty a { color: var(--clr-primary-hover); }
.history-vehicle {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-left: 4px solid var(--clr-success);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-4);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-1) var(--sp-3);
align-items: center;
animation: history-in .4s var(--transition-slow) both;
}
.history-vehicle .icon { color: var(--clr-success); width: 26px; height: 26px; }
.history-vehicle h2 { font-size: var(--fs-600); }
.history-vehicle p { grid-column: 2; color: var(--clr-text-muted); font-size: var(--fs-300); }
.history-item {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-3);
animation: history-in .4s var(--transition-slow) both;
}
.history-item:nth-child(3) { animation-delay: 60ms; }
.history-item:nth-child(4) { animation-delay: 120ms; }
.history-item:nth-child(5) { animation-delay: 180ms; }
@keyframes history-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.history-item__top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
flex-wrap: wrap;
}
.history-item__date { font-weight: 700; font-family: var(--ff-heading); }
.history-item__km { color: var(--clr-text-muted); font-size: var(--fs-300); }
.history-item__tags {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.history-item__tag {
font-size: var(--fs-200);
font-weight: 600;
background: var(--clr-primary-soft);
color: var(--clr-primary-hover);
border-radius: var(--radius-full);
padding: 4px 12px;
}
.history-item__desc {
margin-top: var(--sp-3);
font-size: var(--fs-300);
color: var(--clr-text-muted);
background: var(--clr-surface-2);
border-radius: var(--radius);
padding: var(--sp-3);
}
.history-info { margin-top: var(--sp-7); }
.history-info__title { font-size: var(--fs-600); margin-bottom: var(--sp-3); }
.history-info__list {
color: var(--clr-text-muted);
padding-left: 1.2em;
display: grid;
gap: var(--sp-2);
}
.history-info__list a { color: var(--clr-primary-hover); }
@media (prefers-reduced-motion: reduce) {
.history-vehicle, .history-item { animation: none; }
}
.u-text-center { text-align: center !important; }
.u-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.u-mt-6 { margin-top: var(--sp-6) !important; }
html.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
html.js .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js .reveal { opacity: 1; transform: none; }
}