@font-face {
font-family: "Bebas Neue Cyrillic";
src: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/BebasNeueCyrillic/BebasNeueCyrillic.woff2) format("woff2"),
url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/BebasNeueCyrillic/BebasNeueCyrillic.ttf)   format("truetype");
font-weight: 400;
font-style: normal;
font-display: optional;
unicode-range: U+0000-00FF, U+0400-04FF, U+0500-052F;
}
@font-face {
font-family: "Riverhack Cyrillic";
src: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/RiverhackCyr/RiverhackCyr.woff2) format("woff2"),
url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/RiverhackCyr/RIVERHACK_CYR.otf)  format("opentype");
font-weight: 400;
font-style: normal;
font-display: optional;
unicode-range: U+0000-00FF, U+0400-04FF, U+0500-052F;
}
@font-face {
font-family: "Inter";
src: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/Inter/Inter-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: optional;
unicode-range: U+0000-00FF, U+0100-024F, U+0400-04FF;
}
@font-face {
font-family: "Inter";
src: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/Inter/Inter-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: optional;
unicode-range: U+0000-00FF, U+0100-024F, U+0400-04FF;
}
@font-face {
font-family: "Inter";
src: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/Inter/Inter-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: optional;
unicode-range: U+0000-00FF, U+0100-024F, U+0400-04FF;
}
@font-face {
font-family: "Inter";
src: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/fonts/Inter/Inter-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: optional;
unicode-range: U+0000-00FF, U+0100-024F, U+0400-04FF;
} :root { --brand-blue:        #1B1B3A;
--brand-blue-light:  #5B5BB7;
--brand-blue-dark:   #0A0A1F;
--brand-yellow:      #F0FF42;
--brand-orange:      #FF3CAC;
--text-accent:       #CC0088;
--brand-bg:          #F5F5FF;
--brand-paper:       #FFFFFF;
--brand-ink:         #1F1F1F;
--brand-sky:         #2DA0FF;
--brand-shadow:      rgba(0, 0, 0, 0.05); --bg:              var(--brand-bg);
--bg-paper:        var(--brand-paper);
--bg-hero:         var(--brand-yellow);
--bg-step-panel:   var(--brand-orange);
--bg-faq-panel:    var(--brand-yellow);
--fg:              var(--brand-blue);
--fg-muted:        var(--brand-blue-light);
--fg-on-blue:      var(--brand-paper);
--fg-on-yellow:    var(--brand-blue);
--fg-on-orange:    var(--brand-paper);
--fg-ink:          var(--brand-ink);
--stroke-button:   5px solid var(--brand-blue);
--divider:         1px solid var(--brand-blue); --font-display:    Impact, "Oswald", "Arial Narrow Bold", "Haettenschweiler", sans-serif;
--font-brush:      "Riverhack Cyrillic", "Caveat", "Marck Script", cursive;
--font-logo:       "Bebas Neue Cyrillic", "Bebas Neue", Impact, sans-serif;
--font-body:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-money:      Impact, "Oswald", sans-serif; --fs-display-xl: 126px;
--fs-display:     84px;
--fs-h2:          64px;
--fs-h3:          32px;
--fs-h4:          24px;
--fs-body:        18px;
--fs-body-sm:     16px;
--fs-cap:         12px; --lh-display:     1;
--lh-body:        1;
--tk-display:     -0.030em;
--tk-label:        0.020em;
--tk-body:        -0.030em; --space-1:  4px;
--space-2: 10px;
--space-3: 20px;
--space-4: 32px;
--space-5: 40px;
--space-6: 60px;
--space-7: 99px;
--space-band: 150px;
--gutter:    240px;
--col:      1440px; --radius-input:    15px;
--radius-card:     20px;
--radius-chip:     24px;
--radius-panel-md: 36px;
--radius-panel-lg: 44px;
--radius-pill:     84px; --shadow-card:   0 1px 2px 0 var(--brand-shadow); --t-fast:    120ms linear;
--t-base:    200ms cubic-bezier(.2,.8,.2,1);
--t-stagger: 400ms cubic-bezier(.2,.8,.2,1);
}*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
@supports (overflow: clip) {
html,
body,
.page {
overflow-x: clip;
}
}
img, svg { display: block; max-width: 100%; }
.svg-sprite { display: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg-muted); }
button, input, textarea, select { font: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; } .sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:focus-visible {
outline: 3px solid var(--brand-blue);
outline-offset: 2px;
} .page {
background: var(--brand-bg);
color: var(--brand-blue);
overflow-x: hidden;
min-height: 100vh;
} .icon {
display: inline-block;
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
vertical-align: middle;
flex-shrink: 0;
} .no-select { user-select: none; } .brush {
font-family: var(--font-brush);
font-weight: 700;
color: var(--brand-blue);
letter-spacing: 0;
display: inline-block;
transform: rotate(-2deg);
}
.logo {
font-family: var(--font-logo);
font-size: 45px;
line-height: 1;
letter-spacing: -0.03em;
color: var(--fg);
text-transform: lowercase;
}
.caption {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-cap);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
} .social {
display: flex;
gap: 6px;
align-items: center;
}
.social__link {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--t-fast);
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
color: var(--brand-blue);
}
.social__link:hover { transform: rotate(-6deg) scale(1.1); color: var(--brand-blue); }
.social__link svg { display: block; } .on-yellow { background: var(--bg-hero);          color: var(--fg-on-yellow); }
.on-blue   { background: var(--brand-blue);        color: var(--fg-on-blue); }
.on-orange { background: var(--bg-step-panel);     color: var(--fg-on-orange); }
.on-paper  { background: var(--bg-paper);          color: var(--fg); } .meta-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(27,27,58,0.08);
border-radius: var(--radius-chip);
padding: 6px 14px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--brand-blue);
white-space: nowrap;
} .eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brand-orange);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 14px;
}
.eyebrow::before {
content: "";
display: block;
width: 40px;
height: 3px;
background: var(--brand-orange);
flex-shrink: 0;
}.site-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--brand-yellow);
border-bottom: 2px solid rgba(10,58,197,0.10);
}
.site-header__inner {
max-width: 1440px;
margin: 0 auto;
height: 76px;
padding: 0 32px;
display: grid;
grid-template-columns: minmax(150px, auto) minmax(0, 1fr) minmax(260px, auto);
align-items: center;
gap: 32px;
} .site-header__brand svg {
display: block;
height: 44px;
width: auto;
flex: none;
}
.site-header__brand {
display: flex; flex-direction: column;
gap: 4px;
align-items: flex-start;
cursor: pointer;
line-height: 1;
}
.site-header__brand .tag {
font-family: var(--font-body);
font-weight: 700;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
white-space: nowrap;
opacity: 0.85;
} .site-header__nav {
display: flex;
align-items: center;
gap: 4px;
justify-self: center;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
cursor: pointer;
padding: 10px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: 0;
color: var(--brand-blue);
white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast);
text-decoration: none;
}
.nav-link:hover {
background: rgba(27,27,58,0.10);
color: var(--brand-blue);
text-decoration: none;
}
.nav-link.active {
background: var(--brand-blue);
color: #fff;
}
.nav-link__chev {
transition: transform var(--t-base);
display: inline-block;
}
.nav-item { position: relative; } .site-header__end {
display: flex; align-items: center; gap: 14px;
justify-self: end;
min-width: 260px;
justify-content: flex-end;
}
.site-header__contact-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
min-width: 154px;
}
.site-header__phone {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--brand-blue);
white-space: nowrap;
text-decoration: none;
padding: 8px 4px;
transition: color var(--t-fast);
min-width: 154px;
justify-content: flex-end;
}
.site-header__phone:hover { color: var(--brand-blue-dark); text-decoration: none; }
.site-header__phone svg { opacity: 0.85; }
.site-header__social {
justify-content: flex-end;
}
.site-header__social .social-dot {
width: 30px;
height: 30px;
}
.site-header__social .social-dot__icon {
width: 16px;
height: 16px;
}
.site-header__end .btn-sm { font-size: 18px; padding: 12px 22px; } .site-header__burger {
display: none;
background: transparent; border: 0;
width: 40px; height: 40px;
cursor: pointer;
padding: 0;
flex-direction: column; align-items: center; justify-content: center;
gap: 5px;
}
.site-header__burger span {
display: block;
width: 22px; height: 3px;
background: var(--brand-blue);
border-radius: 2px;
}
.site-header__mobile {
display: none;
background: var(--brand-yellow);
padding: 16px 24px 20px;
flex-direction: column;
border-top: 1px solid rgba(10,58,197,0.10);
}
.mobile-link {
background: transparent; border: 0; cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
color: var(--brand-blue);
padding: 14px 8px;
border-radius: var(--radius-input);
transition: background var(--t-fast);
text-decoration: none;
display: block;
}
.mobile-link:hover { background: rgba(27,27,58,0.10); text-decoration: none; }
.mobile-link.active { background: var(--brand-blue); color: #fff; }
.mobile-link--sub { padding-left: 20px; font-size: 15px; }
.mobile-booking-link {
width: 100%;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
border: 0;
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: #fff;
font-family: var(--font-display);
font-size: 22px;
line-height: 1;
text-transform: lowercase;
cursor: pointer;
}
.mobile-social-row {
margin-top: 12px;
padding: 14px 8px 4px;
border-top: 1px solid rgba(10,58,197,0.16);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.mobile-social-row__label {
font-family: var(--font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.mobile-social-row__links {
display: flex;
align-items: center;
gap: 8px;
}
.mobile-social-row .social-dot {
width: 38px;
height: 38px;
}
.mobile-group {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--brand-blue-light);
padding: 14px 8px 6px;
} .nav-dropdown { position: relative; }
.nav-dropdown__menu {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: 8px;
min-width: 260px;
box-shadow: 0 12px 32px rgba(27,27,58,0.22);
display: flex; flex-direction: column;
z-index: 80;
animation: dropFade 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes dropFade {
from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nav-dropdown__item {
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
padding: 12px 16px;
border-radius: var(--radius-input);
display: flex; flex-direction: column; gap: 4px;
transition: background var(--t-fast);
}
.nav-dropdown__item:hover { background: var(--brand-bg); }
.nav-dropdown__item.active { background: var(--brand-yellow); }
.nav-dropdown__item-title {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.02em;
color: var(--brand-blue);
text-transform: uppercase;
line-height: 1;
}
.nav-dropdown__item-sub {
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--brand-blue-light);
text-transform: uppercase;
} .social-row { display: flex; gap: 6px; align-items: center; }
.social-dot {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: #fff;
cursor: pointer;
text-decoration: none;
transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
box-shadow: 0 3px 0 rgba(27,27,58,0.16);
}
.social-dot:hover {
background: var(--brand-blue-dark);
border-color: var(--brand-blue-dark);
color: #fff;
text-decoration: none;
transform: translateY(-1px) rotate(-4deg);
}
.social-dot:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
.social-dot__icon {
display: block;
width: 20px;
height: 20px;
} .btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 0.02em;
line-height: 1;
padding: 22px 44px;
border-radius: var(--radius-pill);
border: 0;
cursor: pointer;
text-transform: lowercase;
transition: background-color var(--t-fast), color var(--t-fast),
border-color var(--t-fast), transform var(--t-fast);
font-weight: normal;
white-space: nowrap;
text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary   { background: var(--brand-blue); color: #fff; }
.btn-primary:hover { background: var(--brand-blue-dark); color: #fff; text-decoration: none; }
.btn-secondary { background: transparent; color: var(--brand-blue); border: 5px solid var(--brand-blue); padding: 17px 39px; }
.btn-secondary:hover { background: var(--brand-blue); color: #fff; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--brand-blue); padding: 12px 20px; }
.btn-ghost:hover { color: var(--brand-blue-light); text-decoration: none; }
.btn-sm { font-size: 22px; padding: 14px 28px; }
.btn-sm.btn-secondary { padding: 9px 23px; border-width: 4px; }
.btn-lg { font-size: 40px; padding: 28px 56px; }
.btn-disabled { opacity: 0.35; pointer-events: none; } @media (max-width: 1280px) {
.nav-link { padding: 10px 12px; font-size: 13px; }
}
@media (max-width: 1100px) {
.site-header__inner { grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto; }
.site-header__end { min-width: 0; }
.site-header__nav { display: none; }
.site-header__burger { display: flex; }
.site-header__contact-stack { min-width: 28px; }
.site-header__social { display: none; }
.site-header__phone { min-width: 28px; width: 28px; justify-content: center; padding-inline: 0; }
.site-header__phone span { display: none; }
}
@media (max-width: 720px) {
.site-header__inner {
height: 64px;
padding: 0 16px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
}
.site-header__brand {
min-width: 0;
}
.site-header__brand svg {
height: 36px;
max-width: min(168px, 52vw);
}
.site-header__brand .tag {
display: none;
}
.site-header__end {
gap: 8px;
}
.site-header__end .js-open-booking {
display: none;
}
.site-header__contact-stack { display: none; }
.site-header__phone { display: none; }
.site-header__mobile {
padding: 10px 16px 18px;
}
.mobile-link {
padding: 12px 8px;
font-size: 15px;
}
.btn {
max-width: 100%;
white-space: normal;
text-align: center;
line-height: 1.05;
}
.btn-sm {
font-size: 18px;
padding: 12px 20px;
}
.btn-sm.btn-secondary {
padding: 8px 16px;
border-width: 3px;
}
.btn-lg {
font-size: 30px;
padding: 20px 28px;
}
}
body.nav-open .site-header__mobile { display: flex; }.page-anchor-nav {
position: fixed;
z-index: 55;
top: 0;
right: 0;
left: 0;
border-bottom: 2px solid var(--brand-yellow);
background: var(--brand-blue);
color: var(--brand-paper);
box-shadow: 0 8px 22px rgba(27, 27, 58, .18);
}
.page-anchor-nav[hidden],
body.nav-open .page-anchor-nav {
display: none;
}
.page-anchor-nav__inner {
display: flex;
width: min(100%, 1440px);
min-height: 56px;
margin: 0 auto;
padding: 6px 32px;
box-sizing: border-box;
align-items: center;
gap: 20px;
}
.page-anchor-nav__label {
flex: none;
color: var(--brand-yellow);
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.page-anchor-nav__list {
display: flex;
min-width: 0;
margin: 0;
padding: 0 0 2px;
align-items: center;
gap: 8px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scrollbar-color: rgba(240, 255, 66, .64) transparent;
list-style: none;
}
.page-anchor-nav__item {
flex: none;
}
.page-anchor-nav__link {
display: inline-flex;
min-height: 42px;
padding: 8px 13px;
border: 2px solid rgba(255, 255, 255, .22);
border-radius: var(--radius-pill);
box-sizing: border-box;
align-items: center;
color: var(--brand-paper);
font-size: 13px;
font-weight: 800;
line-height: 1.15;
text-decoration: none;
white-space: nowrap;
}
.page-anchor-nav__link:hover {
border-color: var(--brand-yellow);
color: var(--brand-yellow);
text-decoration: none;
}
.page-anchor-nav__link.is-active {
border-color: var(--brand-yellow);
background: var(--brand-yellow);
color: var(--brand-blue);
}
.page-anchor-nav__link:focus-visible {
outline: 3px solid var(--brand-orange);
outline-offset: 2px;
}
.page-anchor-target {
scroll-margin-top: 76px;
}
@media (max-width: 720px) {
.page-anchor-nav__inner {
min-height: 52px;
padding-inline: 16px;
}
.page-anchor-nav__label {
display: none;
}
.page-anchor-nav__list {
gap: 6px;
}
.page-anchor-nav__link {
min-height: 40px;
padding: 7px 11px;
font-size: 12px;
}
.page-anchor-target {
scroll-margin-top: 68px;
}
}
@media (prefers-reduced-motion: reduce) {
.page-anchor-nav__list {
scroll-behavior: auto;
}
}.site-footer {
background: var(--brand-bg);
padding-top: 80px;
border-top: 4px solid var(--brand-yellow);
position: relative;
overflow: hidden;
}
.site-footer__cols {
max-width: 1440px;
margin: 0 auto;
padding: 0 60px 60px;
display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer__col h3 {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0 0 18px;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__featured-nav {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(91,91,183,0.28);
}
.site-footer__col li a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--brand-blue-light);
cursor: pointer;
}
.site-footer__col li a:hover { color: var(--brand-blue); text-decoration: underline; }
.site-footer__col li a:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: 3px;
border-radius: 4px;
}
.site-footer__contact-phone {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 0.02em;
color: var(--brand-blue);
}
.site-footer__rating {
margin: 14px 0 18px;
}
.site-footer__rating iframe {
display: block;
max-width: 100%;
border: 0;
}
.site-footer__rating iframe:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: 3px;
border-radius: 4px;
}
.site-footer__brand-tag {
margin-top: 16px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--brand-blue);
max-width: 240px;
}
.site-footer__social {
margin-top: 20px;
}
.site-footer__legal-details {
margin: 20px 0 0;
padding-top: 16px;
border-top: 1px solid rgba(91,91,183,0.28);
font-family: var(--font-body);
font-size: 12px;
line-height: 1.5;
color: var(--brand-blue-light);
}
.site-footer__legal-details div + div {
margin-top: 8px;
}
.site-footer__legal-details dt {
font-weight: 700;
}
.site-footer__legal-details dd {
margin: 0;
overflow-wrap: anywhere;
}
.site-footer__bottom {
border-top: 2px solid var(--brand-blue);
padding: 24px 60px;
display: flex; justify-content: space-between; align-items: center;
max-width: 1440px;
margin: 0 auto;
flex-wrap: wrap;
gap: 16px;
}
.site-footer__bottom span {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
color: var(--brand-blue-light);
}
.site-footer__deco-fish {
position: absolute;
right: -100px; top: 60px;
width: 260px;
opacity: 0.5;
transform: scaleX(-1) rotate(-6deg);
pointer-events: none;
} .peek-fish {
position: absolute;
pointer-events: none;
width: 220px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.peek-fish.left  { left: -100px; }
.peek-fish.right { right: -100px; transform: scaleX(-1); }
@media (max-width: 1100px) {
.site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 32px 48px; }
.site-footer__bottom { padding: 24px 32px; }
}
@media (max-width: 760px) {
.site-footer { padding-top: 48px; }
.site-footer__cols { grid-template-columns: 1fr; gap: 28px; padding: 0 24px 36px; }
.site-footer__bottom { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__deco-fish { display: none; }
}.legal-check-list {
display: grid;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.legal-check-list li {
position: relative;
padding-left: 28px;
font-family: var(--font-body);
line-height: 1.5;
}
.legal-check-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand-yellow);
box-shadow: 0 0 0 3px rgba(255,218,69,0.32);
}
.legal-soft-card {
border-radius: var(--radius-card);
background: var(--brand-bg);
padding: 24px;
}
.legal-text-link {
color: var(--brand-blue-light);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.site-request-form-shell {
min-width: 0;
}
.site-request-form,
.site-request-form__success {
padding: clamp(24px, 4vw, 40px);
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
}
.site-request-form__success[hidden] {
display: none;
}
.site-request-form__success {
display: grid;
gap: 12px;
min-height: 240px;
align-content: center;
}
.site-request-form__success:focus {
outline: none;
}
.site-request-form__success h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 56px);
line-height: 1;
text-transform: uppercase;
}
.site-request-form__success p {
max-width: 640px;
margin: 0;
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 17px;
font-weight: 700;
line-height: 1.45;
}
.site-request-form__head h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 56px);
line-height: 1;
text-transform: uppercase;
}
.site-request-form__head p {
max-width: 760px;
margin: 12px 0 0;
font-size: 16px;
line-height: 1.45;
}
.site-request-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 26px;
}
.site-request-field {
display: grid;
gap: 8px;
min-width: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.site-request-field--wide {
grid-column: 1 / -1;
}
.site-request-field input,
.site-request-field select,
.site-request-field textarea {
width: 100%;
min-width: 0;
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: #fff;
color: var(--brand-blue);
font: 600 16px/1.35 var(--font-body);
}
.site-request-field input,
.site-request-field select {
min-height: 52px;
padding: 0 14px;
}
.site-request-field textarea {
padding: 14px;
resize: vertical;
}
.site-request-field input:focus,
.site-request-field select:focus,
.site-request-field textarea:focus {
outline: 3px solid var(--brand-orange);
outline-offset: 2px;
}
.site-request-date {
position: relative;
min-width: 0;
}
.site-request-date input {
padding-right: 58px;
cursor: pointer;
}
.site-request-date__toggle {
position: absolute;
top: 6px;
right: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 8px;
background: var(--brand-yellow);
color: var(--brand-blue);
cursor: pointer;
}
.site-request-date__toggle .icon {
width: 20px;
height: 20px;
}
.site-request-date__toggle:hover,
.site-request-date__toggle:focus-visible {
background: var(--brand-orange);
color: #fff;
}
.site-request-datepicker[hidden] {
display: none;
}
.site-request-datepicker {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 8;
width: min(340px, calc(100vw - 48px));
padding: 14px;
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 0 18px 48px rgba(10, 10, 31, 0.22);
}
.site-request-datepicker__head {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 38px;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
.site-request-datepicker__title {
overflow: hidden;
font-family: var(--font-body);
font-size: 14px;
font-weight: 900;
line-height: 1.2;
text-align: center;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.site-request-datepicker__nav,
.site-request-datepicker__day {
border: 2px solid transparent;
border-radius: 8px;
background: var(--brand-bg);
color: var(--brand-blue);
cursor: pointer;
font-family: var(--font-body);
font-weight: 900;
}
.site-request-datepicker__nav {
min-height: 38px;
font-size: 18px;
}
.site-request-datepicker__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
}
.site-request-datepicker__weekday {
font-family: var(--font-body);
font-size: 11px;
font-weight: 900;
line-height: 1;
text-align: center;
text-transform: uppercase;
opacity: 0.65;
}
.site-request-datepicker__empty {
min-height: 38px;
}
.site-request-datepicker__day {
min-height: 38px;
font-size: 14px;
}
.site-request-datepicker__day:hover,
.site-request-datepicker__day:focus-visible,
.site-request-datepicker__nav:hover,
.site-request-datepicker__nav:focus-visible {
border-color: var(--brand-blue);
outline: none;
}
.site-request-datepicker__day.is-selected {
border-color: var(--brand-blue);
background: var(--brand-blue);
color: #fff;
}
.site-request-datepicker__day:disabled,
.site-request-datepicker__nav:disabled {
opacity: 0.34;
cursor: not-allowed;
}
.site-request-consent {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
align-items: start;
margin-top: 18px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
}
.site-request-consent input {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--brand-blue);
}
.site-request-consent a {
color: var(--brand-blue-light);
text-decoration: underline;
text-underline-offset: 3px;
}
.site-request-form__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-top: 24px;
}
.site-request-form__status {
min-height: 22px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
}
.site-request-form__status.is-success {
color: #0f7a3d;
}
.site-request-form__status.is-error {
color: #b42318;
}
.site-request-modal[hidden]:not(.is-open):not(:target) {
display: none !important;
}
.site-request-modal {
position: fixed;
inset: 0;
z-index: 300;
display: grid;
place-items: center;
padding: 24px;
}
.site-request-modal.is-open,
.site-request-modal:target {
display: grid;
}
.site-request-modal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 10, 31, 0.68);
cursor: pointer;
}
.site-request-modal__panel {
position: relative;
z-index: 1;
width: min(920px, 100%);
max-height: min(860px, calc(100vh - 48px));
overflow: auto;
padding: clamp(24px, 4vw, 40px);
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 0 24px 80px rgba(10, 10, 31, 0.28);
}
.site-request-modal__close {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 2px solid var(--brand-blue);
border-radius: 50%;
background: var(--brand-paper);
color: var(--brand-blue);
cursor: pointer;
font: 700 28px/1 var(--font-body);
}
.site-request-modal__close:hover,
.site-request-modal__close:focus-visible {
background: var(--brand-yellow);
}
.site-request-modal .site-request-form,
.site-request-modal .site-request-form__success {
padding: 0;
border: 0;
background: transparent;
}
.site-request-modal .site-request-form__success {
min-height: 280px;
}
body.site-request-modal-open {
overflow: hidden;
}
@media (max-width: 760px) {
.site-request-form__grid {
grid-template-columns: 1fr;
}
.site-request-field--wide {
grid-column: auto;
}
.site-request-form__actions .btn {
width: 100%;
justify-content: center;
}
.site-request-modal {
padding: 12px;
align-items: start;
}
.site-request-modal__panel {
max-height: calc(100vh - 24px);
padding: 24px 18px;
}
.site-request-modal__close {
top: 10px;
right: 10px;
}
}
.sales-closed-status {
display: grid;
max-width: 620px;
gap: 8px;
margin-top: 24px;
padding: 16px 18px;
border: 2px solid currentColor;
border-radius: var(--radius-card);
}
.sales-closed-status strong {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 34px);
line-height: 1;
text-transform: uppercase;
}
.sales-closed-status span {
font-size: 15px;
line-height: 1.5;
}
.sales-closed-status--location {
color: var(--brand-blue);
}
.js-open-booking.is-sales-closed {
border-color: var(--brand-blue);
background: var(--brand-yellow);
color: var(--brand-blue);
}.entity-price {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
max-width: 100%;
color: var(--fg);
line-height: 1.15;
}
.entity-price__values {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 7px;
}
.entity-price__regular {
color: var(--fg-muted);
font-size: .72em;
font-weight: 700;
text-decoration-thickness: 2px;
}
.entity-price__current {
font-size: 1em;
font-weight: 900;
}
.entity-price--discounted .entity-price__current {
color: var(--text-accent);
font-size: 1.14em;
}
.entity-price--card {
font-size: clamp(22px, 2.4vw, 32px);
}
.entity-price--hero {
font-size: clamp(26px, 3.3vw, 44px);
}
.entity-price--compact {
font-size: 16px;
}
.entity-price--inverse,
.entity-price--inverse .entity-price__regular,
.entity-price--inverse.entity-price--discounted .entity-price__current {
color: var(--fg-on-blue);
}
.price-card .entity-price,
.price-card .entity-price__regular {
color: var(--fg-on-blue);
}
.price-card .entity-price--discounted .entity-price__current {
color: var(--brand-yellow);
}
.entity-price__prefix,
.entity-price__suffix {
font-size: .6em;
font-weight: 700;
}
.entity-price__help {
position: relative;
display: inline-flex;
z-index: 3;
}
.entity-price__help-button {
display: inline-grid;
place-items: center;
flex: 0 0 26px;
width: 26px;
height: 26px;
padding: 0;
border: 2px solid currentColor;
border-radius: 50%;
background: transparent;
color: inherit;
cursor: help;
line-height: 0;
}
.entity-price__help-button .icon {
width: 16px;
height: 16px;
}
.entity-price__help-button:hover {
background: var(--brand-blue);
color: var(--brand-paper);
}
.entity-price__tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
width: max-content;
max-width: min(280px, calc(100vw - 32px));
padding: 12px 14px;
border: 2px solid var(--brand-blue);
border-radius: 12px;
background: var(--brand-paper);
box-shadow: 5px 5px 0 var(--brand-blue);
color: var(--brand-blue);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-align: left;
transform: translate(-50%, 5px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 150ms ease,
transform 150ms ease,
visibility 150ms ease;
}
.entity-price__help:hover .entity-price__tooltip,
.entity-price__help:focus-within .entity-price__tooltip {
transform: translate(-50%, 0);
opacity: 1;
visibility: visible;
}
@media (max-width: 520px) {
.price-card:hover,
.price-card.featured:hover,
.walk-card:hover,
.event-card:hover {
transform: none !important;
}
.entity-price__tooltip {
position: fixed;
right: 16px;
bottom: 24px;
left: 16px;
z-index: 1000;
width: auto;
max-width: none;
transform: translateY(5px);
}
.entity-price__help:hover .entity-price__tooltip,
.entity-price__help:focus-within .entity-price__tooltip {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.entity-price__tooltip {
transition: none;
}
}.hero {
position: relative;
background: var(--brand-yellow);
padding: 36px 60px 56px;
min-height: calc(100vh - 80px);
display: flex; flex-direction: column; justify-content: center;
overflow: hidden;
}
.hero__band {
position: relative;
z-index: 2;
text-align: center;
min-height: clamp(208px, 21vw, 318px);
}
.hero__eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--brand-blue);
margin-bottom: 64px;
}
.hero__eyebrow .dot { color: var(--brand-orange); margin: 0 10px; }
.brush-headline {
font-family: var(--font-brush);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--brand-blue);
display: inline-block;
white-space: nowrap;
margin: 0; padding: 0.06em 0;
min-height: 1.12em;
}
.hero__l1 {
font-size: clamp(110px, 14vw, 200px);
transform: rotate(-2deg);
margin-bottom: 8px;
}
.hero__l2 { font-size: clamp(58px, 7vw, 100px);
transform: rotate(1.5deg) translateX(-12px);
}
.hero__cta-wrap {
position: relative;
z-index: 5;
margin-top: 56px;
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.hero__byline {
margin-top: 20px;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-blue);
} .hero__big-word {
font-family: var(--font-brush);
font-weight: 700;
font-size: clamp(180px, 22vw, 360px);
line-height: 0.85;
letter-spacing: -0.03em;
color: var(--brand-blue);
text-align: center;
transform: rotate(-2deg);
margin: 0;
position: relative;
z-index: 2;
}
.hero__big-sub {
position: relative;
z-index: 2;
text-align: center;
font-family: var(--font-display);
font-size: clamp(24px, 2vw, 36px);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-blue);
margin-top: 18px;
line-height: 1;
} .hero__sticker {
position: absolute;
pointer-events: none;
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08));
transition: transform var(--t-base);
height: auto;
object-fit: contain;
}
.hero__sticker.beri  { right: 12%; top: 14%; width: 180px; transform: rotate(8deg); }
.hero__sticker.leto  { right: 6%;  top: 53%; width: 200px; transform: rotate(-12deg); }
.hero__sticker.poplyli { left: 6%; top: 16%; width: 220px; transform: rotate(-8deg); }
.hero__sticker.fish-l { left: -120px; top: 50%; width: 280px; transform: translateY(-50%) rotate(-8deg); }
.hero__sticker.fish-r { right: -130px; top: 50%; width: 300px; transform: translateY(-50%) scaleX(-1) rotate(-12deg); }
.hero__sticker.thumb  { left: 9%;  bottom: 30px; width: 120px; transform: rotate(-14deg); }
.hero__sticker.hvatai { right: 9%; bottom: 24px; width: 170px; transform: rotate(10deg); } .hero__strip {
height: 6px;
background: var(--brand-blue);
width: 100%;
position: relative;
z-index: 3;
} .section {
max-width: 1440px;
margin: 0 auto;
padding: 85px 60px;
position: relative;
}
.section--tight { padding: 80px 60px; }
.section--wide  { max-width: 1680px; }
.section__eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-accent);
margin-bottom: 18px;
display: flex; align-items: center; gap: 14px;
}
.section__eyebrow::before {
content: "";
display: block;
width: 40px; height: 3px; background: var(--text-accent);
}
.section__title {
font-family: var(--font-display);
font-size: clamp(56px, 5.4vw, 96px);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--brand-blue);
margin: 0 0 60px;
text-transform: uppercase;
}
.section__title.orange { color: var(--brand-orange); }
.section__title--compact { margin-bottom: 0; }
.section__title.center { text-align: center; }
.section__title.right { text-align: right; }
.section__title.brush {
font-family: var(--font-brush);
font-size: clamp(120px, 12vw, 220px);
line-height: 0.85;
text-transform: none;
transform: rotate(-2deg);
} .about {
display: grid;
grid-template-columns: 1.3fr 1fr 0.7fr;
grid-template-rows: auto auto;
gap: 32px 48px;
align-items: start;
}
.about__photo-lg {
height: 580px;
border-radius: var(--radius-card);
background: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/css/b794888e-2214-473d-bdf2-3d4bd8662fa0) center/cover;
grid-row: 1 / span 2;
position: relative;
overflow: hidden;
}
.about__photo-lg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(77,82,240,0.18));
pointer-events: none;
}
.about__copy {
grid-row: 1;
grid-column: 2;
font-family: var(--font-body);
font-size: 19px;
line-height: 1.45;
color: var(--brand-blue);
font-weight: 500;
}
.about__copy strong { font-weight: 700; }
.about__copy em { font-style: normal; color: var(--brand-orange); font-weight: 700; }
.about__brush {
grid-row: 2;
grid-column: 2;
font-family: var(--font-brush);
font-size: 92px;
line-height: 0.9;
color: var(--brand-blue);
transform: rotate(-3deg);
align-self: end;
}
.about__photo-sm {
height: 380px;
border-radius: var(--radius-card);
background: url(//grebem-prokat.ru/wp-content/themes/grebem/assets/css/81723f4d-a65f-4fc8-b228-ea962e726b89) center/cover;
grid-row: 1;
grid-column: 3;
}
.about__sticker {
grid-row: 2;
grid-column: 3;
width: 200px;
height: auto;
align-self: start;
justify-self: center;
transform: rotate(8deg);
}
.about__stats {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
padding: 30px 40px;
background: var(--brand-blue);
border-radius: var(--radius-panel-md);
color: #fff;
}
.stat {
display: flex; flex-direction: column; gap: 4px;
border-right: 2px solid rgba(255,255,255,0.18);
padding-right: 28px;
}
.stat:last-child { border-right: 0; }
.stat__num {
font-family: var(--font-display);
font-size: 72px;
line-height: 0.95;
letter-spacing: -0.03em;
}
.stat__num small { font-size: 36px; }
.stat__label {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
} .locations-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 56px;
}
.locations-head__brush {
font-family: var(--font-brush);
font-size: 120px;
line-height: 0.9;
color: var(--brand-blue);
transform: rotate(-2deg);
}
.locations-head__sub {
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
line-height: 1.45;
max-width: 320px;
color: var(--brand-blue);
}
.locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.loc-card {
position: relative;
background: var(--brand-paper);
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex; flex-direction: column;
transition: transform var(--t-base), box-shadow var(--t-base);
cursor: pointer;
border: 2px solid transparent;
}
.loc-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(77,82,240,0.18);
border-color: var(--brand-blue);
}
.loc-card__link {
color: inherit;
display: flex;
flex: 1;
flex-direction: column;
text-decoration: none;
}
.loc-card__link:hover { text-decoration: none; }
.loc-card__link:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: -6px;
}
.loc-card__photo { height: 260px; background-size: cover; background-position: center; position: relative; }
.loc-card__tag {
position: absolute;
top: 16px; left: 16px;
background: var(--brand-yellow);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-chip);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.loc-card__sales-state {
position: absolute;
right: 16px;
bottom: 16px;
max-width: calc(100% - 32px);
padding: 8px 12px;
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: var(--brand-paper);
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.loc-card__body { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.loc-card__title-lg {
font-family: var(--font-display);
font-size: 36px;
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--brand-blue);
text-transform: uppercase;
margin: 0;
}
.loc-card__sub {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.02em;
color: var(--text-accent);
text-transform: uppercase;
margin: 0;
}
.loc-card__blurb {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--brand-blue);
margin: 0;
flex: 1;
}
.loc-card__meta {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 4px;
}
.meta-chip {
background: var(--brand-bg);
color: var(--brand-blue);
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: var(--radius-chip);
}
.loc-card__cta {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
padding: 0 28px 28px;
}
.loc-card__closed-note {
color: var(--brand-blue);
font-size: 13px;
font-weight: 900;
line-height: 1.3;
text-transform: uppercase;
}
.loc-card__sticker {
position: absolute;
top: -18px; right: -10px;
width: 110px;
height: auto;
transform: rotate(-12deg);
pointer-events: none;
z-index: 2;
} .how-wrap { position: relative; }
.steps-grid {
background: var(--brand-orange);
border-radius: var(--radius-panel-md);
padding: 56px 60px;
color: #fff;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 80px;
}
.step {
display: grid;
grid-template-columns: 88px 1fr;
align-items: start;
gap: 24px;
position: relative;
}
.step__num {
font-family: var(--font-display);
font-size: 88px;
line-height: 0.85;
letter-spacing: -0.03em;
color: #fff;
text-align: center;
border-right: 4px solid rgba(255,255,255,0.4);
padding-right: 20px;
}
.step__title {
font-family: var(--font-display);
font-size: 32px;
line-height: 1;
letter-spacing: 0.02em;
color: #fff;
text-transform: uppercase;
}
.step__desc {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.45;
color: rgba(255,255,255,0.94);
margin-top: 10px;
}
.steps-grid .deco-paddle {
position: absolute; right: -120px; bottom: -120px;
width: 280px; transform: rotate(15deg);
pointer-events: none;
opacity: 0.35;
z-index: 0;
}
.steps-grid .deco-poplyli {
position: absolute; right: 32px; top: 5px;
width: 220px; height: auto; transform: rotate(-10deg);
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
pointer-events: none;
z-index: 2;
}
.steps-grid .deco-eye {
position: absolute; right: -260px; top: 50%;
width: 400px; transform: translateY(-50%);
pointer-events: none; opacity: 0.18;
z-index: 0;
}
.steps-grid .step { position: relative; z-index: 1; }
.info-panel {
background: var(--brand-orange);
border-radius: var(--radius-panel-md);
color: #fff;
padding: 56px 60px;
overflow: hidden;
}
.info-panel__title {
margin-bottom: 32px;
max-width: 980px;
}
.info-panel__text {
color: rgba(255,255,255,0.94);
font-family: var(--font-body);
font-size: 19px;
line-height: 1.55;
margin: 0;
max-width: 920px;
} .pricing-head {
display: flex; align-items: end; justify-content: space-between;
margin-bottom: 56px; gap: 40px;
}
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-more {
display: flex;
justify-content: center;
margin-top: 32px;
}
.price-card {
position: relative;
background: var(--brand-blue);
color: #fff;
border-radius: var(--radius-input);
padding: 32px;
display: flex; flex-direction: column; gap: 12px;
min-height: 320px;
cursor: default;
transition: transform var(--t-base), background-color var(--t-fast);
overflow: visible;
}
.price-card:hover { transform: translateY(-6px); background: var(--brand-blue-dark); }
.price-card.featured {
background: var(--brand-orange);
transform: translateY(-12px);
}
.price-card.featured:hover { background: var(--brand-orange); transform: translateY(-18px); }
.price-card__name {
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 0.02em;
line-height: 1;
text-transform: uppercase;
}
.price-chip {
align-self: flex-start;
background: var(--brand-yellow);
color: var(--brand-ink);
border-radius: var(--radius-chip);
padding: 6px 12px;
font-family: var(--font-display);
font-size: 16px;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
}
.price-card__desc {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.4;
color: rgba(255,255,255,0.94);
flex: 1;
margin-top: 4px;
}
.price-card__amount {
display: flex; align-items: baseline; gap: 6px;
margin-top: 16px;
}
.price-card__button {
position: relative;
z-index: 2;
align-self: flex-start;
margin-top: auto;
}
.price-card__amount .from {
font-family: var(--font-display);
font-size: 18px;
line-height: 1;
align-self: center;
opacity: 0.85;
text-transform: lowercase;
}
.price-card__amount .num {
font-family: var(--font-display);
font-size: 84px;
letter-spacing: -0.03em;
line-height: 0.9;
}
.price-card__amount .rub {
font-family: var(--font-display);
font-size: 56px;
line-height: 1;
}
.price-card .sticker-popular {
position: absolute;
right: -16px; top: -20px;
width: 130px; height: auto; transform: rotate(14deg);
pointer-events: none;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
} .quote-band {
background: var(--brand-bg);
position: relative;
overflow: hidden;
}
.quote-section {
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: 60px;
position: relative;
z-index: 2;
}
.quote-section__quote {
font-family: var(--font-display);
font-size: clamp(40px, 3.6vw, 60px);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--brand-blue);
text-transform: uppercase;
position: relative;
margin: 0;
}
.quote-section__quote .sticker-beri {
width: 160px; vertical-align: middle; margin: 0 8px;
transform: rotate(-10deg) translateY(-4px);
display: inline-block;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}
.quote-section__lede {
margin-top: 24px;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.5;
color: var(--brand-blue);
max-width: 460px;
text-transform: none;
} .use-cases {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
position: relative;
}
.use-case {
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: 22px;
display: flex; flex-direction: column;
gap: 10px;
border: 2px solid transparent;
transition: border-color var(--t-base), transform var(--t-base);
position: relative;
overflow: hidden;
}
.use-case--link {
color: inherit;
text-decoration: none;
}
.use-case--link:focus-visible {
outline: 3px solid var(--brand-orange);
outline-offset: 4px;
}
.use-case:hover { border-color: var(--brand-yellow); transform: translateY(-2px); }
.use-case__q {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--brand-orange);
}
.use-case__a {
font-family: var(--font-display);
font-size: 26px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.use-case__sub {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--brand-blue);
margin-top: auto;
}
.use-case:nth-child(2) .use-case__q { color: var(--brand-blue); }
.use-case:nth-child(2) .use-case__a { color: var(--brand-orange); }
.use-case:nth-child(3) .use-case__q { color: var(--brand-blue); }
.use-case:nth-child(3) .use-case__a { color: var(--brand-orange); } .quote-section__callouts,
.callout,
.callout-sup,
.quote-band .deco-fish-right { display: none; } .reviews-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 40px;
margin-bottom: 48px;
}
.reviews-hero__copy {
max-width: 920px;
position: relative;
z-index: 2;
}
.reviews-hero__title {
max-width: 520px;
}
.reviews-main-title {
max-width: 980px;
margin: 18px 0 0;
font-family: Impact, var(--font-display), "Arial Narrow Bold", sans-serif;
font-size: clamp(44px, 5vw, 82px);
line-height: 0.96;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.reviews-hero__intro {
max-width: 760px;
margin-top: 18px;
font-family: var(--font-body);
font-size: 20px;
line-height: 1.45;
color: var(--brand-ink);
}
.reviews-trust {
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(180px, 240px);
align-items: stretch;
gap: 14px;
margin-top: 28px;
max-width: 560px;
}
.reviews-trust__item {
position: relative;
min-width: 0;
padding: 18px 20px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-blue);
overflow: hidden;
}
.reviews-trust__item::after {
content: "";
position: absolute;
right: -18px;
bottom: -18px;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--brand-yellow);
border: 3px solid var(--brand-blue);
opacity: 0.9;
}
.reviews-trust__item--score {
background: var(--brand-blue);
color: #fff;
}
.reviews-trust__item--score::after {
background: var(--brand-orange);
}
.reviews-trust__eyebrow {
display: block;
position: relative;
z-index: 1;
font-family: var(--font-body);
font-size: 12px;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: inherit;
opacity: 0.78;
}
.reviews-trust__value {
display: block;
position: relative;
z-index: 1;
margin-top: 8px;
font-family: var(--font-display);
font-size: 64px;
line-height: 0.86;
letter-spacing: 0;
color: inherit;
}
.reviews-trust__item--count .reviews-trust__value {
color: var(--brand-blue);
}
.reviews-trust__stars {
display: block;
position: relative;
z-index: 1;
margin-top: 8px;
color: var(--brand-yellow);
font-size: 20px;
letter-spacing: 0;
line-height: 1;
}
.reviews-trust__label {
display: block;
position: relative;
z-index: 1;
margin-top: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 800;
line-height: 1.25;
color: inherit;
}
.reviews-trust__item--count .reviews-trust__label {
color: var(--brand-blue-light);
}
.reviews-source-note,
.reviews-head__copy {
max-width: 760px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--brand-ink);
}
.reviews-source-note {
margin-top: 16px;
}
.reviews-hero__sticker {
position: absolute;
display: block;
pointer-events: none;
z-index: 1;
filter: drop-shadow(0 8px 14px rgba(10,58,197,0.12));
height: auto;
}
.reviews-hero__sticker--poplyli {
right: 9%;
top: 28%;
width: 220px;
height: auto;
transform: rotate(8deg);
}
.reviews-hero__sticker--fish {
right: -72px;
bottom: -72px;
width: 260px;
height: auto;
transform: rotate(-18deg);
opacity: 0.42;
}
.reviews-hero__sticker--thumb {
right: 26%;
top: 16%;
width: 132px;
height: auto;
transform: rotate(-13deg);
}
.reviews-hero__sticker--leto {
right: 4%;
top: 48%;
width: 162px;
height: auto;
transform: rotate(-10deg);
}
.reviews-hero__sticker--mascot {
right: 19%;
bottom: 48px;
width: 148px;
height: auto;
transform: rotate(8deg);
}
.reviews-head__meta {
display: flex; flex-direction: column;
align-items: flex-end;
gap: 6px;
text-align: right;
}
.reviews-head__rating {
font-family: var(--font-display);
font-size: 64px;
line-height: 0.9;
letter-spacing: -0.03em;
color: var(--brand-blue);
}
.reviews-head__rating span {
font-size: 28px;
color: var(--brand-blue-light);
}
.reviews-head__count {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.reviews-section .reviews-head {
margin-bottom: 24px;
}
.reviews-cta {
display: flex; justify-content: center;
margin-top: 40px;
}
.reviews-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.reviews-tabs {
display: flex; gap: 10px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.reviews-tab {
background: transparent;
border: 3px solid var(--brand-blue);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0;
text-transform: uppercase;
padding: 10px 20px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all var(--t-fast);
display: inline-flex; align-items: center; gap: 10px;
min-height: 48px;
}
.reviews-tab:hover { background: var(--brand-blue-light); color: #fff; border-color: var(--brand-blue-light); }
.reviews-tab.active,
.reviews-tab.is-active { background: var(--brand-blue); color: #fff; }
.reviews-tab:focus-visible,
.reviews-related a:focus-visible,
.rev-card__toggle:focus-visible,
.reviews-final-cta .btn:focus-visible {
outline: 3px solid var(--brand-orange);
outline-offset: 3px;
}
.reviews-tab__count {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
background: rgba(255,255,255,0.22);
color: inherit;
padding: 2px 8px;
border-radius: 12px;
min-width: 22px;
text-align: center;
}
.reviews-tab:not(.active) .reviews-tab__count {
background: var(--brand-yellow);
color: var(--brand-blue);
} .review-card-wrap {
min-width: 0;
display: flex;
}
.review-card-wrap.review-card-wrap--hidden {
display: none;
}
.is-hidden { display: none; }
.reviews-grid__empty {
grid-column: 1 / -1;
text-align: center;
padding: 56px 24px;
font-family: var(--font-display);
font-size: 24px;
color: var(--brand-blue-light);
text-transform: none;
background: var(--brand-paper);
border: 2px dashed rgba(27,27,58,0.28);
border-radius: 8px;
}
.reviews-grid__empty-title {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.reviews-grid__empty p {
margin: 0 auto 18px;
max-width: 420px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.45;
color: var(--brand-ink);
}
.rev-card {
--review-card-height: 324px;
width: 100%;
height: var(--review-card-height);
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: 24px;
display: grid;
grid-template-rows: 104px minmax(0, 1fr) 30px;
gap: 14px;
box-shadow: var(--shadow-card);
border: 2px solid transparent;
overflow: hidden;
transition: border-color var(--t-base), transform var(--t-base);
}
.rev-card:hover { border-color: var(--brand-yellow); transform: translateY(-2px); }
.rev-card__head {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: start;
gap: 14px;
min-width: 0;
overflow: hidden;
}
.rev-avatar {
position: relative;
width: 52px; height: 52px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--brand-blue);
color: #fff;
font-family: var(--font-display);
font-size: 20px;
letter-spacing: 0;
flex: none;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.rev-avatar__swatch {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
}
.rev-avatar__initials {
position: relative;
z-index: 1;
}
.rev-avatar--blue { background: #4D52F0; }
.rev-avatar--orange { background: #FF6F40; }
.rev-avatar--green { background: #10b981; }
.rev-avatar--amber { background: #f59e0b; }
.rev-avatar--purple { background: #8b5cf6; }
.rev-avatar--pink { background: #ec4899; }
.rev-avatar--cyan { background: #06b6d4; }
.rev-avatar--lime { background: #84cc16; }
.rev-avatar--red { background: #ef4444; }
.rev-avatar--custom { background: transparent; }
.rev-card__meta {
min-width: 0;
overflow: hidden;
}
.rev-card__name {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.rev-card__sub {
margin-top: 6px;
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--brand-blue-light);
display: flex; gap: 8px; align-items: center; flex-wrap: nowrap;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rev-card__dot { opacity: 0.5; }
.rev-card__loc { color: var(--brand-blue); font-weight: 700; }
.rev-card__source {
display: inline-flex;
align-items: center;
max-width: 100%;
min-height: 24px;
margin-top: 7px;
padding: 4px 9px;
border-radius: 6px;
background: rgba(240,255,66,0.72);
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 12px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rev-card__source--link {
cursor: pointer;
text-decoration: none;
}
.rev-card__source--link:hover {
background: var(--brand-yellow);
color: var(--brand-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.rev-card__source--link:focus-visible {
outline: 3px solid var(--brand-orange);
outline-offset: 2px;
}
.rev-stars {
display: flex;
gap: 2px;
align-items: center;
justify-content: flex-end;
min-width: 96px;
padding-top: 18px;
}
.rev-card__short {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--brand-ink);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
max-height: 6em;
overflow: hidden;
}
.rev-card__action {
min-height: 30px;
display: flex;
align-items: end;
}
.rev-card__toggle {
align-self: flex-start;
background: transparent;
border: 0;
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 16px;
letter-spacing: 0;
text-transform: uppercase;
cursor: pointer;
padding: 4px 0;
transition: color var(--t-fast);
}
.rev-card__toggle:hover { color: var(--brand-orange); }
.rev-card__toggle.is-hidden {
display: inline-flex;
visibility: hidden;
pointer-events: none;
}
.rev-card__toggle-placeholder {
display: inline-flex;
min-height: 30px;
visibility: hidden;
font-family: var(--font-display);
font-size: 16px;
line-height: 1;
text-transform: uppercase;
} body.modal-open { overflow: hidden; }
.rev-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.rev-modal[hidden] { display: none; }
.rev-modal__overlay {
position: absolute;
inset: 0;
background: rgba(10, 58, 197, 0.45);
cursor: pointer;
}
.rev-modal__panel {
position: relative;
z-index: 1;
background: var(--brand-paper);
border-radius: var(--radius-panel-md);
max-width: 640px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
box-shadow: 0 24px 64px rgba(10,58,197,0.22);
display: flex;
flex-direction: column;
gap: 20px;
}
.rev-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
background: var(--brand-bg);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast);
}
.rev-modal__close:hover { background: var(--brand-yellow); }
.rev-modal__head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
}
.rev-modal__avatar {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-display);
font-size: 20px;
flex: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.rev-modal__name {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.rev-modal__sub {
margin-top: 4px;
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--brand-blue-light);
}
.rev-modal__text {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--brand-ink);
white-space: pre-line;
}
.reviews-insights {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
gap: 32px;
align-items: stretch;
}
.reviews-insights__list {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.reviews-insights__list li {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 14px;
min-height: 142px;
padding: 20px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 6px 6px 0 var(--brand-yellow);
}
.reviews-insights__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 2px solid var(--brand-blue);
border-radius: 50%;
background: var(--brand-yellow);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 20px;
line-height: 1;
}
.reviews-insights__item-copy {
display: grid;
gap: 8px;
min-width: 0;
}
.reviews-insights__item-copy strong {
font-family: var(--font-display);
font-size: 26px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.reviews-insights__item-copy span {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.4;
color: var(--brand-ink);
}
.reviews-insights__aside {
position: relative;
display: grid;
align-content: start;
gap: 18px;
padding: 24px;
border-radius: 8px;
background: var(--brand-yellow);
border: 2px solid var(--brand-blue);
box-shadow: 8px 8px 0 var(--brand-blue);
}
.reviews-insights__score {
padding: 22px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
transform: rotate(-2deg);
}
.reviews-insights__score span {
display: block;
font-family: var(--font-display);
font-size: 76px;
line-height: 0.85;
letter-spacing: 0;
color: var(--brand-blue);
}
.reviews-insights__score small {
display: block;
margin-top: 10px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
color: var(--brand-blue);
}
.reviews-related {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: flex-start;
}
.reviews-related a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 14px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 15px;
font-weight: 800;
color: var(--brand-blue);
background: var(--brand-paper);
}
.reviews-related a:hover {
background: var(--brand-blue);
color: #fff;
}
.reviews-final-cta {
margin: 56px auto 72px;
max-width: 1200px;
padding: 0 32px;
}
.reviews-final-cta__body {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 330px);
gap: 32px;
align-items: center;
padding: 46px;
border-radius: 8px;
background: var(--brand-yellow);
border: 3px solid var(--brand-blue);
color: var(--brand-blue);
overflow: hidden;
box-shadow: 12px 12px 0 var(--brand-blue);
}
.reviews-final-cta__body::before {
content: "";
position: absolute;
inset: 18px;
border: 2px dashed rgba(27,27,58,0.35);
border-radius: 8px;
pointer-events: none;
}
.reviews-final-cta__content,
.reviews-final-cta__aside {
position: relative;
z-index: 1;
min-width: 0;
}
.reviews-final-cta__kicker {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0 0 12px;
padding: 7px 12px;
border-radius: var(--radius-pill);
background: var(--brand-paper);
border: 2px solid var(--brand-blue);
font-family: var(--font-body);
font-size: 12px;
font-weight: 900;
letter-spacing: 0;
text-transform: uppercase;
}
.reviews-final-cta__title {
font-family: var(--font-display);
font-size: clamp(38px, 6vw, 68px);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
overflow-wrap: break-word;
}
.reviews-final-cta__text {
max-width: 760px;
margin-top: 14px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.45;
}
.reviews-final-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
min-width: 0;
}
.reviews-final-cta__aside {
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.reviews-final-cta__proof {
position: relative;
z-index: 2;
width: min(100%, 250px);
padding: 24px 22px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-orange);
transform: rotate(-2deg);
}
.reviews-final-cta__proof-value {
display: block;
font-family: var(--font-display);
font-size: 86px;
line-height: 0.82;
letter-spacing: 0;
color: var(--brand-blue);
}
.reviews-final-cta__proof-label {
display: block;
margin-top: 10px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 800;
line-height: 1.25;
color: var(--brand-ink);
}
.reviews-final-cta__sticker {
position: absolute;
pointer-events: none;
height: auto;
filter: drop-shadow(0 8px 14px rgba(10,58,197,0.12));
}
.reviews-final-cta__sticker--hvatai {
right: -18px;
top: -18px;
width: 150px;
transform: rotate(12deg);
}
.reviews-final-cta__sticker--thumb {
left: 2px;
bottom: -16px;
width: 112px;
transform: rotate(-12deg);
}
body.review-modal-open {
overflow: hidden;
}
.reviews-form-modal[hidden] {
display: none;
}
.reviews-form-modal {
position: fixed;
inset: 0;
z-index: 140;
display: grid;
place-items: center;
padding: 32px;
}
.reviews-form-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10,10,31,0.68);
}
.reviews-form-modal__panel {
position: relative;
width: min(100%, 980px);
max-height: min(860px, calc(100vh - 64px));
overflow: auto;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-yellow);
box-shadow: 12px 12px 0 var(--brand-blue);
}
.reviews-form-modal__close {
position: absolute;
z-index: 4;
top: 18px;
right: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 3px solid var(--brand-blue);
border-radius: 50%;
background: var(--brand-paper);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 32px;
line-height: 1;
cursor: pointer;
}
.reviews-form[hidden],
.reviews-form-success[hidden] {
display: none;
}
.reviews-form {
position: relative;
z-index: 1;
display: grid;
gap: 24px;
margin: 22px;
padding: 40px;
border: 2px dashed rgba(27,27,58,0.38);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-orange);
}
.reviews-form__trap {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.reviews-form__head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: 16px;
padding-right: 48px;
}
.reviews-form__title {
max-width: 620px;
font-family: var(--font-display);
font-size: clamp(30px, 4vw, 46px);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.reviews-form__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.reviews-form__field {
display: grid;
gap: 12px;
min-width: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 900;
color: var(--brand-blue);
}
.reviews-form__field--wide {
grid-column: 1 / -1;
}
.reviews-form__field span,
.reviews-form__rating legend {
text-transform: uppercase;
}
.reviews-form__field input,
.reviews-form__field select,
.reviews-form__field textarea {
width: 100%;
min-height: 54px;
padding: 15px 16px;
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: #fff;
color: var(--brand-ink);
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
.reviews-form__field textarea {
resize: vertical;
min-height: 150px;
}
.reviews-form__field input:focus,
.reviews-form__field select:focus,
.reviews-form__field textarea:focus {
outline: 3px solid var(--brand-orange);
outline-offset: 2px;
}
.reviews-form__rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.reviews-form__rating legend {
margin-right: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 900;
color: var(--brand-blue);
}
.reviews-form__rating label {
cursor: pointer;
}
.reviews-form__rating input {
position: absolute;
opacity: 0;
}
.reviews-form__rating span {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 10px 14px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-pill);
background: #fff;
color: var(--brand-blue);
font-size: 16px;
line-height: 1;
}
.reviews-form__rating input:checked + span {
background: var(--brand-blue);
color: var(--brand-yellow);
}
.reviews-form__rating input:focus-visible + span {
outline: 3px solid var(--brand-orange);
outline-offset: 2px;
}
.reviews-form__consent {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
align-items: start;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: var(--brand-ink);
}
.reviews-form__consent input {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--brand-blue);
}
.reviews-form__consent a {
color: var(--brand-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.reviews-form__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
padding-top: 4px;
}
.reviews-form__submit {
min-width: 240px;
}
.reviews-form__submit:disabled {
cursor: wait;
opacity: 0.72;
}
.reviews-form__status {
flex: 1;
min-width: 220px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 800;
line-height: 1.35;
color: var(--brand-blue);
}
.reviews-form__status.is-error {
color: #b42318;
}
.reviews-form__status.is-success {
color: #047857;
}
.reviews-form-success {
position: relative;
display: grid;
justify-items: center;
gap: 16px;
min-height: 560px;
margin: 22px;
padding: 72px 40px 52px;
overflow: hidden;
border: 2px dashed rgba(27,27,58,0.38);
border-radius: 8px;
background: var(--brand-paper);
text-align: center;
}
.reviews-form-success__mark {
position: relative;
width: 116px;
height: 116px;
border: 5px solid var(--brand-blue);
border-radius: 50%;
background: var(--brand-yellow);
box-shadow: 8px 8px 0 var(--brand-orange);
animation: reviewSuccessPop 520ms cubic-bezier(.2,1.4,.4,1) both;
}
.reviews-form-success__mark::after {
content: "";
position: absolute;
left: 31px;
top: 31px;
width: 52px;
height: 28px;
border-left: 7px solid var(--brand-blue);
border-bottom: 7px solid var(--brand-blue);
transform: rotate(-45deg);
transform-origin: center;
animation: reviewSuccessCheck 420ms ease-out 280ms both;
}
.reviews-form-success__title {
max-width: 680px;
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 72px);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.reviews-form-success__text {
max-width: 560px;
font-family: var(--font-body);
font-size: 20px;
font-weight: 800;
line-height: 1.4;
color: var(--brand-ink);
}
.reviews-form-success__sticker {
position: absolute;
pointer-events: none;
height: auto;
filter: drop-shadow(0 8px 14px rgba(10,58,197,0.12));
}
.reviews-form-success__sticker--poplyli {
left: 34px;
top: 30px;
width: 180px;
transform: rotate(-10deg);
}
.reviews-form-success__sticker--thumb {
right: 42px;
top: 40px;
width: 118px;
transform: rotate(12deg);
}
.reviews-form-success__sticker--mascot {
right: 72px;
bottom: 40px;
width: 110px;
transform: rotate(-8deg);
}
@keyframes reviewSuccessPop {
0% { opacity: 0; transform: scale(0.6) rotate(-8deg); }
70% { opacity: 1; transform: scale(1.08) rotate(2deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes reviewSuccessCheck {
0% { opacity: 0; transform: rotate(-45deg) scale(0.6); }
100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}
@media (max-width: 600px) {
.reviews-trust {
grid-template-columns: 1fr;
max-width: 100%;
}
.reviews-trust__value {
font-size: 56px;
}
.reviews-hero__sticker--poplyli {
display: none;
}
.reviews-hero__sticker--fish {
display: none;
}
.reviews-hero__sticker--thumb,
.reviews-hero__sticker--leto,
.reviews-hero__sticker--mascot {
display: none;
}
.reviews-final-cta {
margin: 40px auto 56px;
padding: 0 20px;
}
.reviews-final-cta__body {
gap: 24px;
padding: 32px 20px 24px;
box-shadow: 6px 6px 0 var(--brand-blue);
}
.reviews-final-cta__body::before {
inset: 10px;
}
.reviews-final-cta__actions .btn {
width: 100%;
justify-content: center;
min-width: 0;
padding: 18px 12px;
font-size: 24px;
line-height: 1.05;
white-space: normal;
text-align: center;
overflow-wrap: anywhere;
}
.reviews-final-cta__title {
font-size: 34px;
}
.reviews-final-cta__text {
font-size: 16px;
}
.reviews-final-cta__proof {
width: min(100%, 220px);
transform: none;
}
.reviews-final-cta__sticker--hvatai {
right: -24px;
top: -22px;
width: 110px;
}
.reviews-final-cta__sticker--thumb {
left: auto;
right: 10px;
bottom: -18px;
width: 84px;
opacity: 0.85;
}
.reviews-form-modal {
padding: 14px;
align-items: start;
}
.reviews-form-modal__panel {
max-height: calc(100vh - 28px);
box-shadow: 6px 6px 0 var(--brand-blue);
}
.reviews-form-modal__close {
top: 12px;
right: 12px;
width: 38px;
height: 38px;
font-size: 28px;
}
.reviews-form {
gap: 20px;
margin: 12px;
padding: 20px;
box-shadow: 6px 6px 0 var(--brand-orange);
}
.reviews-form__head {
padding-right: 44px;
}
.reviews-form__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.reviews-form__field {
gap: 10px;
}
.reviews-form__rating {
align-items: flex-start;
}
.reviews-form__rating legend {
width: 100%;
}
.reviews-form__rating span {
padding-inline: 10px;
}
.reviews-form__submit {
width: 100%;
min-width: 0;
font-size: 26px;
padding-inline: 14px;
white-space: normal;
}
.reviews-form__status {
min-width: 0;
}
.reviews-form-success {
min-height: 520px;
margin: 12px;
padding: 74px 20px 34px;
}
.reviews-form-success__mark {
width: 92px;
height: 92px;
}
.reviews-form-success__mark::after {
left: 24px;
top: 24px;
width: 42px;
height: 23px;
}
.reviews-form-success__text {
font-size: 17px;
}
.reviews-form-success__sticker--poplyli {
left: 14px;
top: 18px;
width: 116px;
}
.reviews-form-success__sticker--thumb {
right: 58px;
top: 18px;
width: 72px;
}
.reviews-form-success__sticker--mascot {
right: 18px;
bottom: 18px;
width: 76px;
opacity: 0.75;
}
.rev-modal__panel { padding: 28px 20px; }
.rev-modal__head { grid-template-columns: auto 1fr; }
.rev-modal__head .rev-stars { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
.reviews-grid, .reviews-list { grid-template-columns: 1fr; }
.reviews-head { grid-template-columns: 1fr; }
.reviews-insights { grid-template-columns: 1fr; }
.reviews-insights__list { grid-template-columns: 1fr; }
.reviews-insights__aside { max-width: 520px; }
.reviews-hero__sticker--poplyli { right: 24px; top: 118px; width: 150px; opacity: 0.9; }
.reviews-hero__sticker--fish { right: -96px; bottom: -84px; width: 220px; }
.reviews-hero__sticker--thumb { right: 16px; top: 280px; width: 96px; opacity: 0.72; }
.reviews-hero__sticker--leto { right: 28px; top: 420px; width: 118px; opacity: 0.62; }
.reviews-hero__sticker--mascot { display: none; }
.reviews-final-cta__body { grid-template-columns: 1fr; }
.reviews-final-cta__aside { min-height: 190px; justify-content: flex-start; }
} .why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.why-card {
display: flex; flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 24px 16px;
border-radius: var(--radius-card);
transition: background var(--t-base), transform var(--t-base);
cursor: default;
}
.why-card:hover { background: rgba(255,223,66,0.45); transform: translateY(-4px); }
.why-card img {
height: 220px;
width: auto;
transition: transform var(--t-base);
}
.why-card:hover img { transform: rotate(-6deg) scale(1.05); }
.why-card__title {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 0.02em;
line-height: 1;
color: var(--brand-blue);
text-transform: uppercase;
white-space: pre-line;
}
.why-card__desc {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.45;
color: var(--brand-blue);
} .faq-panel {
background: var(--brand-yellow);
border-radius: var(--radius-panel-lg);
padding: 64px 72px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
max-width: 1440px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.faq-panel__heading {
font-family: var(--font-display);
font-size: clamp(56px, 5.6vw, 92px);
line-height: 0.92;
letter-spacing: -0.03em;
color: var(--brand-blue);
text-transform: uppercase;
margin: 0;
}
.faq-panel__deco {
margin-top: 36px;
display: block;
width: 160px;
height: auto;
transform: rotate(-8deg);
}
.faq-panel__brush {
font-family: var(--font-brush);
font-size: 60px;
line-height: 0.9;
color: var(--brand-blue);
transform: rotate(-3deg);
margin-top: 18px;
}
.faq-list { display: flex; flex-direction: column; }
.faq-row {
display: grid;
grid-template-columns: 1fr 48px;
align-items: start;
gap: 24px;
padding: 22px 0;
border-bottom: 2px solid rgba(77,82,240,0.22);
cursor: pointer;
transition: color var(--t-base);
}
.faq-row:last-child { border-bottom: 0; }
.faq-row__title {
font-family: var(--font-display);
font-size: 28px;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--brand-blue);
text-transform: uppercase;
transition: color var(--t-fast);
}
.faq-row:hover .faq-row__title { color: var(--brand-blue-light); }
.faq-row--open .faq-row__title { color: var(--brand-blue-light); }
.faq-row__arrow {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
color: var(--brand-blue);
transition: transform var(--t-base), color var(--t-fast);
}
.faq-row--open .faq-row__arrow { transform: rotate(180deg); color: var(--brand-blue-light); }
.faq-row__answer {
grid-column: 1 / -1;
max-height: 0; overflow: hidden;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.5;
letter-spacing: 0;
color: var(--brand-blue);
transition: max-height var(--t-base), padding var(--t-base);
}
.faq-row--open .faq-row__answer { max-height: 260px; padding-top: 12px; } .cta-strip {
background: var(--brand-blue);
color: #fff;
padding: 64px 60px 64px 80px;
border-radius: var(--radius-panel-md);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 60px;
align-items: center;
position: relative;
overflow: hidden;
max-width: 1440px;
margin: 80px auto;
}
.cta-strip__title {
font-family: var(--font-display);
font-size: clamp(40px, 4vw, 64px);
line-height: 0.98;
letter-spacing: -0.025em;
text-transform: uppercase;
margin: 0;
position: relative;
z-index: 2;
}
.cta-strip__title em { font-style: normal; color: var(--brand-yellow); }
.cta-strip__body {
display: flex; flex-direction: column; gap: 18px;
position: relative;
z-index: 2;
}
.cta-strip__sub {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
}
.cta-strip .btn-primary {
background: var(--brand-yellow);
color: var(--brand-blue);
align-self: flex-start;
}
.cta-strip .btn-primary:hover { background: #fff; color: var(--brand-blue-dark); }
.cta-strip__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.cta-strip__actions .btn {
min-height: 54px;
padding: 15px 26px;
border: 3px solid transparent;
font-size: 24px;
}
.cta-strip__action--corporate {
background: var(--brand-paper);
color: var(--brand-blue);
}
.cta-strip__action--corporate:hover {
border-color: var(--brand-orange);
background: var(--brand-orange);
color: var(--brand-blue);
}
.cta-strip__action--walks {
border-color: var(--brand-yellow) !important;
background: transparent;
color: var(--brand-yellow);
}
.cta-strip__action--walks:hover {
background: var(--brand-yellow);
color: var(--brand-blue);
}
.cta-strip__actions .btn:focus-visible {
outline-color: var(--brand-paper);
} .cta-strip__sticker {
position: absolute;
left: -50px;
bottom: -60px;
width: 180px;
height: auto;
transform: rotate(-12deg);
pointer-events: none;
opacity: 0.35;
z-index: 0;
} @media (max-width: 1100px) {
.section { padding: 80px 32px; }
.section--tight { padding: 60px 32px; }
.about { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.about__photo-lg { grid-row: 1; grid-column: 1; height: 480px; }
.about__copy { grid-row: 1; grid-column: 2; }
.about__brush { grid-row: 2; grid-column: 1; }
.about__photo-sm { grid-row: 2; grid-column: 2; height: 280px; }
.about__sticker { display: none; }
.about__stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.about__stats .stat { border-right: 0; padding-right: 0; }
.about__stats .stat:nth-child(odd) {
border-right: 2px solid rgba(255,255,255,0.18);
padding-right: 20px;
}
.why { grid-template-columns: 1fr 1fr; gap: 24px; }
.why-card img { height: 180px; }
.locations { grid-template-columns: 1fr 1fr; }
.locations > .loc-card:nth-child(3) {
grid-column: 1 / -1;
max-width: 560px;
justify-self: center;
width: 100%;
}
.pricing { grid-template-columns: 1fr 1fr; }
.pricing > .price-card.featured {
grid-column: 1 / -1;
transform: none;
}
.pricing > .price-card.featured:hover { transform: translateY(-4px); }
.steps-grid { grid-template-columns: 1fr; padding: 40px 36px; gap: 24px; }
.steps-grid .deco-paddle, .steps-grid .deco-eye { display: none; }
.info-panel { padding: 40px 36px; }
.quote-section { grid-template-columns: 1fr; gap: 32px; }
.quote-section__quote { font-size: clamp(36px, 5vw, 56px); }
.faq-panel { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
.faq-panel__heading { font-size: 56px; }
.faq-panel__brush { font-size: 44px; }
.faq-panel__deco { display: none; }
.cta-strip { grid-template-columns: 1fr; padding: 48px 36px; gap: 28px; margin: 60px 24px; }
.cta-strip__title { font-size: clamp(32px, 5vw, 48px); }
.hero { padding: 32px 32px 56px; }
.hero__sticker.fish-l, .hero__sticker.fish-r { display: none; }
.hero__sticker.beri  { width: 140px; right: 4%; top: 8%; }
.hero__sticker.leto  { width: 140px; right: 2%; top: 24%; }
.hero__sticker.poplyli { width: 160px; left: 2%; top: 12%; }
.hero__sticker.thumb { width: 120px; left: 4%; bottom: 16px; }
.hero__sticker.hvatai { width: 130px; right: 4%; bottom: 14px; }
}
@media (max-width: 760px) {
.section { padding: 56px 20px; }
.section--tight { padding: 40px 20px; }
.section__title { font-size: clamp(40px, 9vw, 64px); }
.section__title.brush { font-size: clamp(72px, 18vw, 120px); }
.section__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
.hero { padding: 32px 18px 48px; min-height: calc(100vh - 64px); }
.hero__band { min-height: clamp(146px, 27vw, 196px); }
.hero__eyebrow { font-size: 10px; letter-spacing: 0.24em; margin-bottom: 36px; }
.hero__l1 { font-size: clamp(72px, 16vw, 110px); margin-bottom: 4px; }
.hero__l2 { font-size: clamp(42px, 9vw, 64px); }
.hero__cta-wrap { margin-top: 36px; }
.hero__sticker.beri, .hero__sticker.leto, .hero__sticker.thumb, .hero__sticker.hvatai { display: none; }
.hero__sticker.poplyli { width: 118px; left: 6px; top: 8%; opacity: 0.85; }
.about { grid-template-columns: 1fr; }
.about__photo-lg,
.about__copy,
.about__photo-sm,
.about__brush {
grid-row: auto;
grid-column: 1;
}
.about__photo-lg { height: 340px; }
.about__copy { font-size: 17px; }
.about__brush { font-size: 58px; line-height: 0.95; }
.about__photo-sm { height: 220px; }
.about__stats { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 24px; }
.about__stats .stat:nth-child(odd) { border-right: 0; padding-right: 0; }
.stat__num { font-size: 48px; }
.stat__num small { font-size: 24px; }
.stat__label { font-size: 10px; }
.locations, .pricing, .why, .reviews-grid { grid-template-columns: 1fr; }
.locations > .loc-card:nth-child(3) { max-width: 100%; }
.pricing > .price-card.featured { grid-column: 1; }
.price-card { min-height: auto; }
.price-card .sticker-popular {
right: -6px;
top: -8px;
width: 112px;
}
.price-card__amount .num { font-size: 64px; }
.price-card__amount .rub { font-size: 44px; }
.locations-head { grid-template-columns: 1fr; gap: 16px; }
.locations-head .section__title.brush {
font-size: clamp(56px, 15vw, 66px);
transform: rotate(-1deg);
}
.locations-head__brush { font-size: 72px; }
.pricing-head { flex-direction: column; align-items: flex-start; gap: 16px; }
.why-card img { height: 160px; }
.why-card__title { font-size: 24px; }
.steps-grid { padding: 28px 24px; }
.step { grid-template-columns: 60px 1fr; gap: 16px; }
.step__num { font-size: 56px; padding-right: 12px; }
.step__title { font-size: 24px; }
.step__desc { font-size: 14px; }
.info-panel { padding: 28px 24px; }
.info-panel__title { margin-bottom: 24px; }
.info-panel__text { font-size: 16px; }
.use-cases { grid-template-columns: 1fr 1fr; gap: 10px; }
.use-case { padding: 16px; }
.use-case__a { font-size: 22px; }
.faq-panel { padding: 28px 22px; border-radius: 28px; }
.faq-panel__heading { font-size: 40px; }
.faq-panel__brush { font-size: 32px; }
.faq-row { grid-template-columns: 1fr 36px; padding: 14px 0; gap: 12px; }
.faq-row__title { font-size: 19px; }
.faq-row__arrow { width: 36px; height: 36px; }
.faq-row__answer { font-size: 15px; }
.faq-row--open .faq-row__answer { max-height: 400px; }
.reviews-head { gap: 16px; }
.reviews-head__meta { align-items: flex-start; text-align: left; }
.reviews-head__rating { font-size: 48px; }
.rev-card {
--review-card-height: 356px;
padding: 18px;
gap: 12px;
grid-template-rows: 132px minmax(0, 1fr) 30px;
}
.rev-card__head { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.rev-card__head .rev-stars {
grid-column: 1 / -1;
justify-content: flex-start;
min-width: 0;
padding-top: 0;
}
.rev-card__name { font-size: 20px; }
.rev-avatar { width: 44px; height: 44px; font-size: 16px; }
.reviews-tabs { gap: 6px; }
.reviews-tab { font-size: 16px; padding: 8px 14px; }
.cta-strip { padding: 36px 24px; margin: 40px 16px; border-radius: 28px; }
.cta-strip__title { font-size: clamp(28px, 8vw, 40px); }
.cta-strip__sticker { display: none; }
.cta-strip__actions {
align-items: stretch;
flex-direction: column;
}
.cta-strip__actions .btn {
width: 100%;
}
.quote-section__quote { font-size: clamp(30px, 7vw, 44px); }
.quote-section__lede { font-size: 15px; }
}
@media (max-width: 400px) {
.hero__l1 { font-size: 64px; }
.hero__l2 { font-size: 36px; }
.section__title { font-size: 36px; }
.use-cases { grid-template-columns: 1fr; }
}.sub-hero {
background: var(--brand-yellow);
padding: 60px 60px 80px;
position: relative;
overflow: hidden;
}
.sub-hero__inner {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 56px;
align-items: end;
position: relative;
z-index: 2;
}
.sub-hero__copy { min-width: 0; }
.sub-hero__crumbs {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-blue);
margin-bottom: 24px;
}
.sub-hero__crumbs a {
color: var(--brand-blue-light);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.sub-hero__crumbs a:hover { color: var(--brand-blue); text-decoration: underline; }
.sub-hero__title {
font-family: var(--font-brush);
font-size: clamp(96px, 10vw, 130px);
line-height: 0.9;
color: var(--brand-blue);
transform: rotate(-2deg);
margin: 0;
padding: 0.08em 0;
}
.sub-hero__sub {
margin-top: 12px;
font-family: var(--font-display);
font-size: clamp(24px, 2vw, 32px);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.sub-hero__chip-row {
margin-top: 24px;
display: flex; gap: 8px; flex-wrap: wrap;
}
.sub-hero__chip {
background: var(--brand-paper);
color: var(--brand-blue);
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 8px 14px;
border-radius: var(--radius-chip);
}
.sub-hero__photo {
position: relative;
height: 360px;
width: 100%;
max-width: 100%;
aspect-ratio: 5 / 3;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: 0 12px 32px rgba(10,58,197,0.18);
}
.sub-hero__photo > picture,
.sub-hero__photo-img {
display: block;
width: 100%;
height: 100%;
}
.sub-hero__photo-img {
object-fit: cover;
object-position: center;
}
.sub-hero__photo-tag {
position: absolute;
top: 16px; left: 16px;
background: var(--brand-blue);
color: #fff;
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 14px;
border-radius: var(--radius-chip);
}
.sub-hero__photo-sticker {
position: absolute;
top: -28px;
right: -28px;
width: 130px;
height: auto;
transform: rotate(14deg);
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
pointer-events: none;
z-index: 2;
}
.sub-hero__sticker { display: none; }
.sub-hero__fish {
position: absolute;
right: -160px;
bottom: -180px;
width: 280px;
transform: rotate(-12deg);
pointer-events: none;
opacity: 0.5;
z-index: 0;
} .location-main-title {
font-family: Impact, var(--font-display), "Arial Narrow Bold", sans-serif;
font-size: clamp(44px, 5vw, 82px);
line-height: 0.96;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--brand-blue);
max-width: 980px;
margin: 0 0 76px;
}
.loc-detail {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 60px;
align-items: start;
}
.loc-detail__photo {
width: 100%;
max-width: 100%;
min-width: 0;
height: 540px;
aspect-ratio: 6 / 5;
border-radius: var(--radius-card);
overflow: hidden;
}
.loc-detail__photo > picture,
.loc-detail__photo-img {
display: block;
width: 100%;
height: 100%;
}
.loc-detail__photo-img {
object-fit: cover;
object-position: center;
}
.loc-detail__copy {
display: flex; flex-direction: column; gap: 28px;
min-width: 0;
max-width: 100%;
}
.loc-detail__lead {
font-family: var(--font-display);
font-size: 28px;
line-height: 1.05;
text-transform: uppercase;
color: var(--brand-blue);
letter-spacing: 0.02em;
}
.loc-detail__body {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
color: var(--brand-blue);
overflow-wrap: anywhere;
}
.loc-detail__body h2,
.location-after-pricing__content h2 {
font-family: var(--font-display);
font-size: 30px;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0 0 12px;
}
.loc-detail__body p,
.location-after-pricing__content p {
margin: 0 0 18px;
}
.loc-detail__body ul,
.loc-detail__body ol,
.location-after-pricing__content ul,
.location-after-pricing__content ol {
margin: 0 0 18px;
padding-left: 1.4em;
}
.loc-detail__body ul,
.location-after-pricing__content ul {
list-style: disc;
}
.loc-detail__body ol,
.location-after-pricing__content ol {
list-style: decimal;
}
.loc-detail__body li,
.location-after-pricing__content li {
margin-bottom: 8px;
}
.loc-detail__body li:last-child,
.location-after-pricing__content li:last-child {
margin-bottom: 0;
}
.loc-detail__info {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
padding: 24px;
background: var(--brand-bg);
border-radius: var(--radius-card);
}
.info-row {
display: flex; flex-direction: column; gap: 4px;
}
.info-row__k {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.info-row__v {
font-family: var(--font-display);
font-size: 24px;
text-transform: uppercase;
color: var(--brand-blue);
letter-spacing: 0.02em;
} .loc-map-section {
padding-inline: 60px;
max-width: var(--col);
margin-inline: auto;
margin-block: var(--space-12) 0;
}
.loc-map {
height: 460px;
min-height: 460px;
position: relative;
border-radius: var(--radius-card);
overflow: hidden;
background: linear-gradient(135deg, #c8e8ff, #e3f4ff);
box-shadow: var(--shadow-card);
} .site-landing {
background: var(--brand-bg);
color: var(--brand-blue);
}
.site-landing__section {
max-width: var(--col);
margin-inline: auto;
padding-inline: 60px;
}
.site-landing-hero {
background:
linear-gradient(120deg, rgba(240,255,66,0.95), rgba(45,160,255,0.20)),
var(--brand-yellow);
}
.site-landing-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: clamp(28px, 5vw, 72px);
align-items: end;
}
.site-landing-hero__title {
max-width: 980px;
}
.site-landing-hero__h1 {
max-width: 980px;
margin: 18px 0 0;
font-family: var(--font-display);
font-size: clamp(30px, 4.2vw, 54px);
line-height: 0.98;
text-transform: uppercase;
color: var(--brand-blue);
}
.site-landing-hero__lead {
max-width: 760px;
}
.site-landing__section p {
max-width: 780px;
margin: 22px 0 0;
font-family: var(--font-body);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.45;
}
.site-landing__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.site-landing__hero-panel {
display: grid;
gap: 12px;
padding: 22px;
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: rgba(255,255,255,0.86);
}
.site-landing__hero-panel div {
display: grid;
gap: 4px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(27,27,58,0.18);
}
.site-landing__hero-panel div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.site-landing__hero-panel strong {
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
text-transform: uppercase;
}
.site-landing__hero-panel span {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.35;
color: var(--brand-blue-light);
}
.site-landing__section {
padding-block: clamp(56px, 7vw, 96px);
}
.site-landing__section--accent {
background: var(--brand-paper);
}
.site-landing__section--form {
padding-block-start: 0;
}
.site-landing__section--cta {
padding-block-start: 0;
}
.site-landing__section--split {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
gap: clamp(28px, 5vw, 72px);
align-items: start;
}
.site-landing__section-head {
margin-bottom: 28px;
}
.site-landing__section h2 {
margin: 0;
max-width: 900px;
font-family: var(--font-display);
font-size: clamp(38px, 5vw, 72px);
line-height: 0.98;
text-transform: uppercase;
}
.site-landing__cards {
display: grid;
gap: 18px;
}
.site-landing__cards--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-landing__cards--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-landing__cards--five {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.site-landing-card {
min-height: 220px;
padding: 24px;
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
}
.site-landing-card h3,
.site-landing-faq__item h3 {
margin: 0;
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
text-transform: uppercase;
}
.site-landing-card p,
.site-landing-faq__item p {
margin-top: 14px;
font-size: 16px;
line-height: 1.45;
}
.site-landing-checklist {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.site-landing-checklist li {
position: relative;
padding: 18px 18px 18px 48px;
border-radius: 8px;
background: var(--brand-paper);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.4;
}
.site-landing-checklist li::before {
content: "";
position: absolute;
top: 22px;
left: 20px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brand-orange);
}
.site-landing-faq {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.site-landing-faq__item {
padding: 24px;
border-radius: 8px;
background: var(--brand-bg);
}
.site-landing-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: clamp(24px, 4vw, 40px);
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
}
.site-landing-cta h2 {
max-width: 760px;
}
.site-landing-cta p {
max-width: 720px;
}
.loc-map--idle,
.loc-map--loading {
background-image:
linear-gradient(rgba(77,82,240,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(77,82,240,0.06) 1px, transparent 1px);
background-size: 40px 40px;
}
.loc-map--loading::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255,255,255,0.18);
pointer-events: none;
}
.loc-map--ready {
background: transparent;
}
.loc-map__iframe {
position: absolute;
inset: 0;
display: none;
width: 100%;
height: 100%;
border: 0;
}
.loc-map--widget {
background: #e3f4ff;
}
.loc-map--widget .loc-map__iframe {
display: block;
}
.loc-map__pin {
width: 20px;
height: 20px;
background: var(--brand-blue);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.loc-map--idle > .loc-map__pin--static,
.loc-map--loading > .loc-map__pin--static {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loc-map--ready > .loc-map__pin--static {
display: none;
}
.loc-map--widget > .loc-map__pin--static {
display: none;
}
.loc-detail__note {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--brand-orange);
font-weight: 700;
}
.loc-detail__buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.location-faq .section__title {
margin-bottom: 34px;
}
.location-faq__list {
background: var(--brand-paper);
border-radius: var(--radius-panel-md);
padding: 24px 36px;
box-shadow: var(--shadow-card);
}
.location-pricing {
padding-top: 72px;
}
.location-after-pricing {
padding-top: 0;
}
.location-after-pricing__content {
max-width: 980px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: var(--brand-blue);
}
.location-after-pricing__content > :first-child { margin-top: 0; }
.location-after-pricing__content > :last-child { margin-bottom: 0; }
.location-reviews {
padding-top: 0;
}
.location-reviews__head {
grid-template-columns: 1fr;
justify-items: start;
margin-bottom: 34px;
}
.location-reviews .reviews-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.location-reviews .rev-card {
min-width: 0;
height: 100%;
}
.location-reviews + .location-faq {
padding-top: 0;
}
.map-placeholder {
height: 460px;
border-radius: var(--radius-card);
background: linear-gradient(135deg, #c8e8ff, #e3f4ff);
position: relative;
overflow: hidden;
border: 4px solid var(--brand-paper);
box-shadow: var(--shadow-card);
}
.map-placeholder::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(77,82,240,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(77,82,240,0.06) 1px, transparent 1px);
background-size: 40px 40px;
}
.map-pin {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -100%);
width: 56px; height: 72px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.map-pin svg { width: 100%; height: 100%; }
.map-label {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, 16px);
background: var(--brand-blue);
color: #fff;
font-family: var(--font-display);
font-size: 18px;
padding: 8px 14px;
border-radius: var(--radius-chip);
text-transform: uppercase;
white-space: nowrap;
} .contacts-page {
overflow-x: clip;
}
.contacts-hero__inner {
grid-template-columns: minmax(0, 980px);
}
.contacts-hero__title {
font-family: var(--font-display);
font-size: clamp(46px, 7vw, 92px);
line-height: 0.96;
transform: none;
letter-spacing: 0;
max-width: 980px;
}
.contacts-hero__intro {
max-width: 760px;
margin: 22px 0 0;
font-family: var(--font-body);
font-size: clamp(18px, 2vw, 24px);
line-height: 1.35;
color: var(--brand-blue);
}
.contacts-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.contacts-grid {
display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 32px;
align-items: start;
}
.contact-card {
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: clamp(24px, 4vw, 40px);
display: flex; flex-direction: column; gap: 20px;
box-shadow: var(--shadow-card);
}
.contact-card h2,
.contacts-section h2 {
font-family: var(--font-display);
font-size: clamp(30px, 4vw, 44px);
text-transform: uppercase;
color: var(--brand-blue);
margin: 0;
letter-spacing: 0;
line-height: 1;
}
.contact-card p,
.contacts-section p,
.contacts-section li {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--brand-blue);
}
.contact-card p {
margin: 0;
}
.contact-row {
display: flex; align-items: center; gap: 18px;
padding: 16px 0;
border-top: 2px solid var(--brand-bg);
color: inherit;
text-align: left;
text-decoration: none;
}
.contact-row--button {
width: 100%;
background: transparent;
border-right: 0;
border-bottom: 0;
border-left: 0;
cursor: pointer;
}
.contact-row:first-of-type { border-top: 0; padding-top: 0; }
.contact-row:hover .contact-row__value,
.contact-row:focus-visible .contact-row__value {
color: var(--brand-blue-light);
}
.contact-row__icon {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--brand-yellow);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 22px;
color: var(--brand-blue);
flex: none;
}
.contact-row__body { display: flex; flex-direction: column; }
.contact-row__label {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brand-blue-light);
}
.contact-row__value {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 26px);
color: var(--brand-blue);
text-transform: uppercase;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.contact-row__hint {
margin-top: 4px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.35;
color: var(--brand-blue);
}
.contact-card__notice {
border-radius: var(--radius-input);
background: var(--brand-bg);
padding: 14px 16px;
font-family: var(--font-body);
font-weight: 800;
font-size: 14px;
color: var(--brand-blue);
}
.contacts-section {
padding: 72px 60px;
}
.contacts-section__inner {
max-width: 1180px;
margin: 0 auto;
}
.contacts-section__head {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.8fr);
gap: 28px;
align-items: end;
margin-bottom: 28px;
}
.contacts-booking-hint {
background: var(--brand-bg);
}
.contacts-checklist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.contacts-checklist li {
min-height: 48px;
display: flex;
align-items: center;
border-radius: var(--radius-input);
background: var(--brand-paper);
padding: 12px 16px;
font-weight: 700;
}
.contacts-location-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.contacts-location-card {
min-width: 0;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
border-radius: var(--radius-card);
background: var(--brand-paper);
padding: 26px;
box-shadow: var(--shadow-card);
}
.contacts-location-card h3,
.contacts-faq__item h3 {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.contacts-location-card p {
margin: 0;
}
.contacts-location-card__subtitle {
font-weight: 800;
color: var(--brand-blue-light);
}
.contacts-location-card__actions {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.contacts-location-card__page-link {
align-self: flex-start;
border-width: 3px;
padding: 10px 18px;
font-size: 18px;
}
.contacts-location-card__map {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.4;
color: var(--brand-blue);
}
a.contacts-location-card__map {
font-weight: 800;
color: var(--brand-blue-light);
text-decoration: underline;
text-underline-offset: 3px;
}
.contacts-trust {
background: var(--brand-yellow);
}
.contacts-trust__grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 28px;
align-items: start;
}
.contacts-legal,
.contacts-docs {
min-width: 0;
}
.contacts-legal__list {
display: grid;
gap: 12px;
margin: 24px 0 0;
}
.contacts-legal__list div {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 16px;
border-top: 2px solid rgba(27,27,58,0.12);
padding-top: 12px;
}
.contacts-legal__list dt {
font-family: var(--font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.contacts-legal__list dd {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.45;
color: var(--brand-blue);
overflow-wrap: anywhere;
}
.contacts-legal__list a,
.contacts-link-list a,
.contacts-related__links a {
color: var(--brand-blue);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 4px;
}
.contacts-link-list {
display: grid;
gap: 12px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.contacts-related {
display: grid;
grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.contacts-related__links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.contacts-related__links a {
min-height: 44px;
display: inline-flex;
align-items: center;
border-radius: var(--radius-chip);
background: var(--brand-paper);
padding: 10px 16px;
text-decoration: none;
box-shadow: var(--shadow-soft);
}
.contacts-faq {
padding-top: 0;
}
.contacts-faq__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 24px;
}
.contacts-faq__item {
border-radius: var(--radius-card);
background: var(--brand-paper);
padding: 24px;
box-shadow: var(--shadow-soft);
}
.contacts-faq__item p {
margin: 0;
} .doc-page {
max-width: 980px;
margin: 0 auto;
padding: 80px 60px;
background: var(--brand-paper);
border-radius: var(--radius-panel-md);
position: relative;
z-index: 2;
}
.doc-page h2 {
font-family: var(--font-display);
font-size: 36px;
text-transform: uppercase;
color: var(--brand-blue);
letter-spacing: -0.02em;
margin: 40px 0 16px;
}
.doc-page h3 {
font-family: var(--font-display);
font-size: 22px;
text-transform: uppercase;
color: var(--brand-orange);
margin: 28px 0 10px;
}
.doc-page p, .doc-page li {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--brand-ink);
}
.doc-page ul { padding-left: 20px; }
.doc-page p strong { color: var(--brand-blue); } .faq-hero__title {
max-width: 980px;
font-family: var(--font-display);
font-size: clamp(44px, 5.6vw, 86px);
line-height: 0.96;
transform: none;
text-transform: uppercase;
}
.faq-hero__intro {
max-width: 820px;
line-height: 1.1;
}
.faq-category-nav {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.faq-category-nav__link {
display: inline-flex;
align-items: center;
min-height: 38px;
background: var(--brand-paper);
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 14px;
border: 2px solid transparent;
border-radius: var(--radius-chip);
}
.faq-category-nav__link:hover,
.faq-category-nav__link:focus-visible {
border-color: var(--brand-blue);
}
.faq-page {
padding: 0 60px 24px;
max-width: 1180px;
margin: 72px auto 0;
}
.faq-category {
scroll-margin-top: 96px;
margin-bottom: 44px;
}
.faq-category__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.faq-category__title {
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 48px);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.faq-category__count {
min-width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brand-yellow);
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 13px;
font-weight: 800;
}
.faq-page-list {
display: flex; flex-direction: column;
background: var(--brand-yellow);
border-radius: var(--radius-card);
padding: 32px 56px;
max-width: 100%;
margin: 0 auto;
}
.faq-empty {
padding: 60px 0;
text-align: center;
font-family: var(--font-body);
color: var(--brand-blue);
}
.faq-related {
display: grid;
grid-template-columns: minmax(220px, 0.34fr) 1fr;
gap: 24px;
align-items: start;
margin: 64px 0 24px;
padding-top: 28px;
border-top: 1px solid rgba(27, 27, 58, 0.18);
}
.faq-related__title {
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
text-transform: uppercase;
color: var(--brand-blue);
}
.faq-related__links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.faq-related__link {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 8px 14px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-chip);
background: var(--brand-paper);
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.faq-related__link:hover,
.faq-related__link:focus-visible {
background: var(--brand-blue);
color: var(--brand-paper);
} .faq-row__trigger {
width: 100%;
display: grid;
grid-template-columns: 1fr 48px;
align-items: center;
gap: 24px;
background: none;
border: none;
cursor: pointer;
padding: 0;
text-align: left;
}
.faq-row__q {
font-family: var(--font-display);
font-size: 28px;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--brand-blue);
text-transform: uppercase;
transition: color var(--t-fast);
}
.faq-row--open .faq-row__q,
.faq-row:hover .faq-row__q { color: var(--brand-blue-light); }
.faq-row__icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
color: var(--brand-blue);
transition: transform var(--t-base), color var(--t-fast);
}
.faq-row--open .faq-row__icon { transform: rotate(180deg); color: var(--brand-blue-light); }
.faq-row__body {
grid-column: 1 / -1;
max-height: 0;
overflow: hidden;
transition: max-height var(--t-base), padding var(--t-base);
}
.faq-row--open .faq-row__body { max-height: 400px; padding-top: 12px; }
.faq-row__a {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.5;
color: var(--brand-blue);
overflow-wrap: anywhere;
}
.faq-row__a p + p {
margin-top: 10px;
}
.faq-row__a a {
color: var(--brand-blue-light);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
} .prices-page {
background: var(--brand-bg);
color: var(--brand-blue);
overflow-x: hidden;
}
.prices-hero {
background: var(--brand-yellow);
padding: 56px 60px 76px;
}
.prices-hero__inner,
.prices-hero__tariffs,
.prices-section__inner {
max-width: 1440px;
margin: 0 auto;
}
.prices-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
.prices-hero__copy,
.prices-section__head,
.prices-info {
min-width: 0;
}
.prices-hero__crumbs {
margin-bottom: 22px;
}
.prices-hero__title {
font-family: var(--font-display);
font-size: 76px;
line-height: 0.95;
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
max-width: 980px;
}
.prices-hero__lead,
.prices-section__intro,
.prices-info {
font-family: var(--font-body);
font-size: 18px;
line-height: 1.55;
}
.prices-hero__lead {
max-width: 760px;
margin-top: 28px;
}
.prices-hero__lead p + p,
.prices-section__intro p + p,
.prices-info p + p {
margin-top: 16px;
}
.prices-hero__aside {
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--shadow-card);
}
.prices-hero__aside-kicker {
font-family: var(--font-display);
font-size: 34px;
line-height: 1;
text-transform: uppercase;
}
.prices-hero__aside p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.45;
}
.prices-pricing-head {
margin-bottom: 28px;
}
.prices-pricing-head .section__eyebrow,
.prices-pricing-head .section__title {
color: var(--brand-blue);
}
.prices-pricing-head .section__eyebrow::before {
background: var(--brand-blue);
}
.prices-pricing .price-card {
min-height: 360px;
}
.price-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 8px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.14);
color: #fff;
font-family: var(--font-body);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.prices-hero__note {
max-width: 920px;
margin-top: 32px;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
}
.prices-section {
padding: 84px 60px;
}
.prices-section--conditions,
.prices-section--locations,
.prices-section--faq {
background: var(--brand-paper);
}
.prices-section__head {
margin-bottom: 36px;
}
.prices-section__head--wide {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.8fr);
gap: 48px;
align-items: end;
}
.prices-section__title,
.prices-info h2 {
font-family: var(--font-display);
font-size: 48px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
}
.prices-info h2 {
margin-bottom: 18px;
}
.prices-section__title-sticker {
display: block;
width: 170px;
height: auto;
margin-top: 24px;
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
}
.prices-section__title-sticker--hvatai {
transform: rotate(8deg);
}
.prices-section__title-sticker--beri {
transform: rotate(-7deg);
}
.prices-content-grid,
.prices-duo {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 36px;
align-items: start;
}
.prices-content-grid--included {
grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
}
.prices-info {
color: var(--brand-blue);
}
.prices-info--with-sticker {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.prices-info__sticker {
display: block;
width: 130px;
height: auto;
margin-top: 24px;
transform: rotate(-8deg);
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
}
.prices-info--accent,
.prices-info--yellow,
.prices-info--blue {
border-radius: var(--radius-card);
padding: 30px;
}
.prices-info--accent,
.prices-info--yellow {
background: var(--brand-yellow);
}
.prices-info--blue {
background: var(--brand-blue);
color: #fff;
}
.prices-kit-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.prices-kit-list li {
min-height: 42px;
display: flex;
align-items: center;
padding: 10px 14px;
border-radius: var(--radius-input);
background: rgba(255,255,255,0.72);
font-weight: 700;
}
.prices-note {
margin-top: 20px;
padding-top: 18px;
border-top: 2px solid rgba(27,27,58,0.16);
font-weight: 800;
}
.prices-locations {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.prices-location-card {
min-width: 0;
min-height: 230px;
border-radius: var(--radius-card);
background: var(--brand-bg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.prices-location-card h3 {
font-family: var(--font-display);
font-size: 34px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
}
.prices-location-card p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
flex: 1;
}
.prices-location-card a,
.prices-related-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--brand-blue-light);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 4px;
}
.prices-related-links {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 28px;
}
.prices-section--day-rental .btn {
margin-top: 24px;
}
.prices-faq-list {
margin-block: 0;
max-width: 100%;
} .legal-page {
background: var(--brand-paper);
color: var(--brand-blue);
}
.legal-hero {
padding: 48px 60px 72px;
background: var(--brand-bg);
border-bottom: 4px solid var(--brand-yellow);
}
.legal-hero__inner,
.legal-section__inner,
.legal-document {
max-width: 1120px;
margin: 0 auto;
}
.legal-hero__eyebrow,
.legal-hero__meta {
font-family: var(--font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-blue-light);
margin: 0 0 14px;
}
.legal-hero__title {
max-width: 920px;
font-family: var(--font-display);
font-size: clamp(42px, 6vw, 82px);
line-height: 0.95;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 24px;
}
.legal-hero__intro {
max-width: 760px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
}
.legal-hero__intro p {
margin: 0;
}
.legal-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.legal-breadcrumbs {
margin-bottom: 28px;
font-family: var(--font-body);
font-size: 13px;
}
.legal-breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.legal-breadcrumbs li:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: var(--brand-blue-light);
}
.legal-breadcrumbs a {
color: var(--brand-blue-light);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-section {
padding: 72px 60px;
}
.legal-section--summary {
background: var(--brand-paper);
}
.legal-section--related {
padding-top: 24px;
}
.legal-section__title {
font-family: var(--font-display);
font-size: 42px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 28px;
}
.legal-summary-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
list-style: none;
padding: 0;
margin: 0;
}
.legal-summary-grid li {
min-width: 0;
min-height: 126px;
padding: 22px;
border-radius: var(--radius-card);
background: var(--brand-bg);
font-family: var(--font-body);
font-weight: 800;
line-height: 1.45;
}
.legal-summary-grid--privacy li {
background: #fff;
border: 2px solid rgba(27,27,58,0.12);
}
.legal-document {
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.legal-document__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
.legal-toc {
position: sticky;
top: 96px;
padding: 22px;
border-radius: var(--radius-card);
background: var(--brand-bg);
}
.legal-toc__title {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 16px;
}
.legal-toc__list {
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 20px;
margin: 0;
}
.legal-toc a {
color: var(--brand-blue-light);
font-family: var(--font-body);
font-weight: 800;
line-height: 1.35;
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-doc-section {
min-width: 0;
padding-bottom: 28px;
border-bottom: 2px solid rgba(27,27,58,0.12);
}
.legal-doc-section h2 {
font-family: var(--font-display);
font-size: 32px;
line-height: 1.08;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 14px;
}
.legal-doc-section p,
.legal-doc-section li {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
}
.legal-doc-section p {
margin: 0 0 14px;
}
.legal-doc-section p:last-child {
margin-bottom: 0;
}
.legal-callout {
padding: 24px;
border-radius: var(--radius-card);
background: var(--brand-yellow);
color: var(--brand-blue);
}
.legal-callout__title {
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 10px;
}
.legal-callout__text {
font-family: var(--font-body);
font-weight: 700;
line-height: 1.5;
}
.legal-callout__text p {
margin: 0;
}
.legal-requisites__list {
display: grid;
gap: 12px;
margin: 0;
}
.legal-requisites__list div {
display: grid;
grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(27,27,58,0.12);
}
.legal-requisites__list dt {
font-family: var(--font-body);
font-weight: 900;
color: var(--brand-blue-light);
}
.legal-requisites__list dd {
min-width: 0;
margin: 0;
font-family: var(--font-body);
overflow-wrap: anywhere;
}
.legal-faq-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.legal-faq-item {
min-width: 0;
padding: 24px;
border-radius: var(--radius-card);
background: var(--brand-bg);
}
.legal-faq-item h3 {
font-family: var(--font-display);
font-size: 24px;
line-height: 1.05;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 12px;
}
.legal-faq-item p {
font-family: var(--font-body);
line-height: 1.55;
margin: 0;
}
.legal-related {
padding: 28px;
border-radius: var(--radius-card);
background: var(--brand-bg);
}
.legal-related__title {
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
margin: 0 0 16px;
}
.legal-related__list {
display: flex;
flex-wrap: wrap;
gap: 14px;
list-style: none;
padding: 0;
margin: 0;
}
.legal-related__list a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--brand-blue-light);
font-family: var(--font-body);
font-weight: 900;
text-decoration: underline;
text-underline-offset: 4px;
} @media (max-width: 1100px) {
.site-landing__cards--four,
.site-landing__cards--three,
.site-landing-faq {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sub-hero { padding: 48px 32px 60px; }
.sub-hero__inner { grid-template-columns: 1fr; gap: 28px; }
.sub-hero__title {
font-size: clamp(68px, 10vw, 92px);
line-height: 0.95;
}
.sub-hero__photo { height: clamp(220px, 36vw, 280px); }
.location-main-title { margin-bottom: 52px; }
.loc-detail { grid-template-columns: 1fr; }
.loc-detail__photo { height: 340px; }
.location-reviews .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contacts-grid { grid-template-columns: 1fr; }
.contacts-section { padding-inline: 32px; }
.loc-map-section,
.site-landing__section { padding-inline: 32px; }
.contacts-section__head,
.contacts-location-grid,
.contacts-trust__grid,
.contacts-related,
.contacts-faq__list { grid-template-columns: 1fr; }
.contacts-location-grid { gap: 16px; }
.prices-hero,
.prices-section { padding-inline: 32px; }
.prices-hero__inner,
.prices-section__head--wide,
.prices-content-grid,
.prices-content-grid--included,
.prices-duo { grid-template-columns: 1fr; }
.prices-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal-hero,
.legal-section { padding-inline: 32px; }
.legal-document { grid-template-columns: 1fr; gap: 28px; }
.legal-toc { position: static; }
.legal-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-page { padding-inline: 32px; margin-top: 60px; }
.faq-related { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.site-landing-hero__inner,
.site-landing__section--split {
grid-template-columns: 1fr;
}
.site-landing-hero__h1 {
font-size: 30px;
}
.site-landing-hero__lead,
.site-landing__section p {
font-size: 16px;
}
.site-landing__cards--four,
.site-landing__cards--five,
.site-landing__cards--three,
.site-landing-faq {
grid-template-columns: 1fr;
}
.site-landing-card,
.site-landing-faq__item {
min-height: auto;
padding: 22px;
}
.site-landing__actions .btn {
width: 100%;
justify-content: center;
}
.site-landing-cta {
grid-template-columns: 1fr;
}
.site-landing-cta .btn {
width: 100%;
justify-content: center;
}
.loc-map-section,
.site-landing__section { padding-inline: 20px; }
.sub-hero { padding: 32px 20px 48px; }
.sub-hero__title {
font-size: clamp(48px, 13.5vw, 64px);
line-height: 1;
transform: rotate(-1deg);
}
.sub-hero__fish {
display: none;
}
.contacts-hero__title {
font-size: 42px;
line-height: 1;
}
.contacts-hero__intro {
font-size: 17px;
}
.contacts-hero__actions .btn {
width: 100%;
justify-content: center;
}
.contacts-grid {
padding-inline: 20px;
gap: 20px;
}
.contacts-section {
padding: 52px 20px;
}
.contacts-checklist {
grid-template-columns: 1fr;
}
.contact-card,
.contacts-location-card,
.contacts-faq__item {
padding: 22px;
}
.contacts-location-card__page-link {
width: 100%;
}
.contact-row {
align-items: flex-start;
}
.contact-row__icon {
width: 42px;
height: 42px;
font-size: 18px;
}
.contacts-legal__list div {
grid-template-columns: 1fr;
gap: 4px;
}
.faq-hero__title { font-size: 42px; }
.faq-hero__intro { font-size: 19px; line-height: 1.15; }
.faq-category-nav__link { width: 100%; justify-content: center; }
.sub-hero__photo {
width: 100%;
max-width: calc(100vw - 40px);
height: clamp(190px, 54vw, 280px);
}
.loc-detail__body h2,
.location-after-pricing__content h2 { font-size: 24px; }
.loc-detail__photo {
aspect-ratio: auto;
width: 100%;
max-width: 100%;
}
.loc-detail__lead {
font-size: 24px;
line-height: 1.05;
overflow-wrap: anywhere;
}
.loc-detail__info {
grid-template-columns: 1fr;
padding: 20px;
}
.loc-detail__buttons .btn {
width: 100%;
}
.location-reviews .reviews-grid { grid-template-columns: 1fr; }
.location-reviews__head { margin-bottom: 24px; }
.doc-page { padding: 48px 24px; }
.faq-page { padding: 0 20px 8px; margin-top: 48px; }
.faq-category { margin-bottom: 34px; }
.faq-page-list { padding: 24px 20px; border-radius: 16px; }
.faq-row__trigger { grid-template-columns: 1fr 36px; gap: 14px; }
.faq-row__q { font-size: 20px; line-height: 1.12; }
.faq-row__icon { width: 36px; height: 36px; }
.faq-row--open .faq-row__body { max-height: 680px; }
.faq-row__a { font-size: 16px; }
.faq-related { margin-top: 42px; }
.prices-hero { padding: 34px 20px 52px; }
.prices-section { padding: 56px 20px; }
.prices-hero__inner { gap: 28px; margin-bottom: 36px; }
.prices-hero__title { font-size: 42px; }
.prices-section__title,
.prices-info h2 { font-size: 34px; }
.prices-hero__lead,
.prices-section__intro,
.prices-info { font-size: 16px; }
.prices-pricing .price-card { min-height: auto; }
.prices-kit-list,
.prices-locations { grid-template-columns: 1fr; }
.prices-info--accent,
.prices-info--yellow,
.prices-info--blue,
.prices-location-card { padding: 24px; }
.prices-section__title-sticker {
width: 132px;
margin-top: 18px;
}
.legal-hero { padding: 34px 20px 52px; }
.legal-section { padding: 52px 20px; }
.legal-hero__title { font-size: 42px; }
.legal-hero__intro,
.legal-doc-section p,
.legal-doc-section li { font-size: 16px; }
.legal-summary-grid,
.legal-faq-list { grid-template-columns: 1fr; }
.legal-summary-grid li { min-height: auto; }
.legal-doc-section h2,
.legal-section__title { font-size: 30px; }
.legal-requisites__list div { grid-template-columns: 1fr; gap: 4px; }
.legal-related { padding: 24px; }
}.blog-teaser-section {
background: var(--brand-bg);
}
.blog-teaser-head {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 40px;
margin-bottom: 48px;
}
.blog-teaser-head__title {
font-family: var(--font-display);
font-size: 48px;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.blog-teaser-head__link {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-blue);
text-decoration: none;
justify-self: end;
align-self: end;
}
.blog-teaser-head__link:hover { text-decoration: underline; }
.blog-teaser-head__sub {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.5;
color: var(--brand-blue);
display: flex; flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.blog-grid {
display: grid;
gap: 28px;
margin-block-start: var(--space-5);
}
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); }
.blog-grid--2 { grid-template-columns: repeat(2, 1fr); }
.blog-grid__empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 0;
font-family: var(--font-display);
font-size: 24px;
color: var(--brand-blue-light);
text-transform: uppercase;
}
.blog-grid__empty-text {
margin: 0 0 16px;
}
.blog-grid__empty-reset {
min-height: 44px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: #fff;
font-family: var(--font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 12px 18px;
cursor: pointer;
}
.blog-grid__empty-reset:hover {
background: var(--brand-blue-dark);
} .blog-filter-section { padding-block: var(--space-4); }
.blog-filter {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 40px;
}
.blog-filter__tab {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 10px 20px;
border-radius: var(--radius-pill);
border: 2px solid var(--brand-blue);
background: transparent;
color: var(--brand-blue);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.blog-filter__tab:hover { background: var(--brand-blue); color: #fff; }
.blog-filter__tab.active { background: var(--brand-blue); color: #fff; } .art-card-wrap--hidden { display: none; }
.blog-featured--hidden { display: none; } .art-card {
background: var(--brand-paper);
border-radius: var(--radius-card);
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
cursor: pointer;
border: 2px solid transparent;
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
text-decoration: none;
}
.art-card:hover {
transform: translateY(-4px);
border-color: var(--brand-yellow);
box-shadow: 0 14px 36px rgba(10,58,197,0.18);
text-decoration: none;
}
.art-card__cover {
height: 220px;
background-size: cover;
background-position: center;
position: relative;
}
.art-card__cat {
position: absolute;
top: 14px; left: 14px;
color: #fff;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-chip);
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.art-card__body {
padding: 22px 24px 24px;
display: flex; flex-direction: column;
gap: 12px;
flex: 1;
}
.art-card__title {
font-family: var(--font-display);
font-size: 24px;
line-height: 1.05;
letter-spacing: 0;
color: var(--brand-blue);
text-transform: uppercase;
margin: 0;
}
.art-card__excerpt {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--brand-blue);
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.art-card__meta {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-blue-light);
font-weight: 700;
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.art-card__meta-dot { opacity: 0.5; } .blog-featured {
background: var(--brand-paper);
border-radius: var(--radius-panel-md);
overflow: hidden;
display: grid;
grid-template-columns: 1.1fr 1fr;
cursor: pointer;
box-shadow: var(--shadow-card);
border: 2px solid transparent;
transition: border-color var(--t-base), box-shadow var(--t-base);
text-decoration: none;
}
.blog-featured:hover { border-color: var(--brand-yellow); box-shadow: 0 18px 40px rgba(10,58,197,0.18); text-decoration: none; }
.blog-featured__cover {
min-height: 380px;
background-size: cover;
background-position: center;
}
.blog-featured__body {
padding: 40px;
display: flex; flex-direction: column; gap: 14px;
position: relative;
}
.blog-featured__cat {
align-self: flex-start;
color: #fff;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-chip);
}
.blog-featured__eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-orange);
}
.blog-featured__title {
font-family: var(--font-display);
font-size: 40px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0;
}
.blog-featured__excerpt {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--brand-blue);
margin: 0;
}
.blog-featured__meta {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-blue-light);
font-weight: 700;
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.blog-featured__body > .btn { align-self: flex-start; margin-top: 8px; } .blog-page {
overflow-x: clip;
background: var(--brand-bg);
}
.blog-page__display-title,
.blog-page__main-title,
.blog-section-head__title,
.blog-prelaunch__title,
.blog-topic-card__title,
.blog-featured__title,
.art-card__title {
letter-spacing: 0;
}
.blog-page__hero .sub-hero__inner {
grid-template-columns: minmax(0, 980px);
}
.blog-page__display-title {
max-width: 980px;
font-family: var(--font-brush);
font-size: 124px;
line-height: 0.9;
transform: rotate(-2deg);
text-transform: none;
overflow-wrap: anywhere;
}
.blog-page__main-title {
max-width: 980px;
margin: 18px 0 0;
font-family: var(--font-display);
font-size: 46px;
line-height: 1.02;
color: var(--brand-blue);
text-transform: uppercase;
overflow-wrap: anywhere;
}
.blog-page__hero .sub-hero__sub {
max-width: 760px;
font-size: 26px;
line-height: 1.15;
letter-spacing: 0;
}
.blog-prelaunch {
padding-block: var(--space-5);
}
.blog-prelaunch__intro {
max-width: 820px;
display: grid;
gap: 16px;
}
.blog-prelaunch__date,
.blog-section-head__eyebrow {
margin: 0;
font-family: var(--font-body);
font-size: 12px;
line-height: 1.35;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-orange);
}
.blog-prelaunch__title,
.blog-section-head__title {
margin: 0;
font-family: var(--font-display);
font-size: 44px;
line-height: 1;
text-transform: uppercase;
color: var(--brand-blue);
}
.blog-prelaunch__text {
margin: 0;
max-width: 720px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: var(--brand-ink);
}
.blog-section-head {
display: grid;
gap: 10px;
margin-bottom: 28px;
}
.blog-archive {
padding-block: var(--space-5);
}
.blog-featured {
display: block;
margin-bottom: 32px;
background: var(--brand-paper);
}
.blog-featured__link {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
min-height: 360px;
color: inherit;
text-decoration: none;
}
.blog-featured__link:hover {
text-decoration: none;
}
.blog-featured__cover,
.art-card__cover {
background: var(--brand-blue);
overflow: hidden;
}
.blog-featured__cover {
min-height: 360px;
}
.blog-featured__image,
.art-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-featured__image-fallback,
.art-card__image-fallback {
width: 100%;
height: 100%;
min-height: inherit;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 44px;
color: var(--brand-yellow);
background: var(--brand-blue);
}
.blog-featured__cat,
.art-card__cat {
background: var(--brand-orange);
}
.blog-featured__title,
.art-card__title {
overflow-wrap: anywhere;
}
.blog-featured__title {
font-size: 40px;
}
.blog-featured__action,
.art-card__action {
align-self: flex-start;
margin-top: auto;
font-family: var(--font-body);
font-size: 12px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
border-bottom: 2px solid var(--brand-yellow);
padding-bottom: 4px;
}
.blog-filter {
margin-top: 12px;
}
.blog-filter__tab {
min-height: 44px;
}
.blog-filter__tab:focus-visible,
.art-card:focus-visible,
.blog-featured__link:focus-visible,
.blog-useful-card:focus-visible,
.blog-grid__empty-reset:focus-visible,
.blog-cta .btn:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: 3px;
}
.blog-topic-grid,
.blog-useful__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.blog-topic-card,
.blog-useful-card {
min-height: 100%;
padding: 24px;
border-radius: var(--radius-card);
background: var(--brand-paper);
box-shadow: var(--shadow-card);
}
.blog-topic-card__title,
.blog-useful-card__title {
display: block;
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 24px;
line-height: 1.05;
text-transform: uppercase;
color: var(--brand-blue);
}
.blog-topic-card__text,
.blog-useful-card__text {
display: block;
margin: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--brand-ink);
}
.blog-planned__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.blog-planned__item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: 18px 22px;
border-radius: var(--radius-card);
background: var(--brand-paper);
box-shadow: var(--shadow-card);
}
.blog-planned__title {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.4;
font-weight: 800;
color: var(--brand-blue);
}
.blog-planned__date {
font-family: var(--font-body);
font-size: 12px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-orange);
white-space: nowrap;
}
.blog-useful-card {
color: inherit;
text-decoration: none;
border: 2px solid transparent;
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.blog-useful-card:hover {
transform: translateY(-3px);
border-color: var(--brand-yellow);
box-shadow: 0 14px 36px rgba(10,58,197,0.16);
text-decoration: none;
}
.blog-cta {
margin-top: var(--space-4);
}
.art-card {
height: 100%;
}
.art-card__cover {
height: 220px;
}
.art-card__cat {
z-index: 1;
}
.art-card__body {
min-height: 250px;
} .article-hero {
background-color: var(--brand-blue);
color: #fff;
padding: 100px 60px 80px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.article-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(3,35,122,0.82), rgba(3,35,122,0.46));
}
.article-hero__image {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
}
.article-hero__inner {
max-width: 920px;
margin: 0 auto;
display: flex; flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.article-hero__crumbs {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
.article-hero__crumbs a { color: rgba(255,255,255,0.65); cursor: pointer; }
.article-hero__crumbs a:hover { color: #fff; }
.article-hero__cat {
position: static;
top: auto; left: auto;
}
.article-hero__title {
font-family: var(--font-display);
font-size: 56px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: #fff;
margin: 0;
max-width: 900px;
}
.article-hero__meta {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
} .article-body {
max-width: 760px;
margin: 0 auto;
padding-inline: 20px;
}
.article-body__lead {
font-family: var(--font-body);
font-size: 22px;
line-height: 1.45;
color: var(--brand-blue);
font-weight: 500;
margin: 0 0 36px;
padding-bottom: 28px;
border-bottom: 4px solid var(--brand-yellow);
}
.article-body__section { margin-bottom: 28px; }
.article-body__content {
display: flow-root;
}
.article-body__h {
font-family: var(--font-display);
font-size: 30px;
line-height: 1.05;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0 0 12px;
}
.article-body__p {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--brand-ink);
margin: 0;
}
.article-body__content > p,
.article-body__content .wp-block-paragraph {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--brand-ink);
margin: 0 0 24px;
}
.article-body__content > h2,
.article-body__content > h3,
.article-body__content .wp-block-heading {
font-family: var(--font-display);
line-height: 1.05;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
margin: 42px 0 14px;
}
.article-body__content > h2 { font-size: 36px; }
.article-body__content > h3,
.article-body__content .wp-block-heading { font-size: 30px; }
.article-body__quote {
margin: 36px 0;
padding: 24px 28px 24px 32px;
background: var(--brand-yellow);
border-radius: var(--radius-card);
font-family: var(--font-display);
font-size: 26px;
line-height: 1.15;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
position: relative;
}
.article-body__quote::before {
content: "\201C";
position: absolute;
left: 12px; top: -10px;
font-family: var(--font-display);
font-size: 80px;
line-height: 1;
color: var(--brand-orange);
opacity: 0.4;
}
.article-body__quote p {
margin: 0;
}
.article-body__content blockquote,
.article-body__content .wp-block-quote {
margin: 36px 0;
padding: 24px 28px 24px 32px;
background: var(--brand-yellow);
border: 0;
border-radius: var(--radius-card);
font-family: var(--font-display);
font-size: 26px;
line-height: 1.15;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
position: relative;
}
.article-body__content blockquote::before,
.article-body__content .wp-block-quote::before {
content: "\201C";
position: absolute;
left: 12px;
top: -10px;
font-family: var(--font-display);
font-size: 80px;
line-height: 1;
color: var(--brand-orange);
opacity: 0.4;
}
.article-body__content blockquote p,
.article-body__content .wp-block-quote p {
margin: 0;
}
.article-body__content figure,
.article-body__content .wp-block-image {
margin: 36px 0;
}
.article-body__content img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius-card);
}
.article-body__content figcaption,
.article-body__content .wp-element-caption {
margin-top: 10px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: var(--brand-blue-light);
text-align: left;
}
.article-body__cta {
margin: 48px 0 32px;
padding: 32px 36px;
background: var(--brand-blue);
color: #fff;
border-radius: var(--radius-panel-md);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
}
.article-body__cta .btn-primary {
background: var(--brand-yellow);
color: var(--brand-blue);
}
.article-body__cta .btn-primary:hover { background: #fff; color: var(--brand-blue-dark); }
.article-body__cta-eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-yellow);
}
.article-body__cta-title {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 0;
text-transform: uppercase;
margin-top: 6px;
}
.article-body__share {
display: flex; align-items: center; gap: 18px;
padding-top: 24px;
border-top: 2px solid var(--brand-bg);
}
.article-body__share-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.article-related {
padding-block: var(--space-6);
}
.article-related__title {
margin-bottom: var(--space-4);
} @media (max-width: 1100px) {
.blog-teaser-head { grid-template-columns: 1fr; gap: 20px; }
.blog-grid--3 { grid-template-columns: 1fr 1fr; }
.blog-grid--2 { grid-template-columns: 1fr 1fr; }
.blog-featured { grid-template-columns: 1fr; }
.blog-featured__link { grid-template-columns: 1fr; }
.blog-featured__cover { min-height: 280px; }
.blog-featured__body { padding: 28px; }
.blog-page__display-title { font-size: 96px; }
.blog-page__main-title { font-size: 38px; }
.blog-page__hero .sub-hero__sub { font-size: 22px; }
.blog-topic-grid,
.blog-useful__grid { grid-template-columns: 1fr 1fr; }
.article-hero { padding: 64px 32px 56px; }
.article-body__cta { grid-template-columns: 1fr; padding: 24px 24px 28px; }
}
@media (max-width: 760px) {
.blog-grid--3, .blog-grid--2 { grid-template-columns: 1fr; }
.blog-topic-grid,
.blog-useful__grid { grid-template-columns: 1fr; }
.blog-planned__item { grid-template-columns: 1fr; gap: 10px; }
.blog-planned__date { white-space: normal; }
.blog-prelaunch__title,
.blog-section-head__title { font-size: 30px; }
.blog-page__display-title { font-size: 74px; }
.blog-page__main-title { font-size: 28px; }
.blog-page__hero .sub-hero__sub { font-size: 19px; }
.blog-featured__title { font-size: 28px; }
.blog-featured__link { min-height: 0; }
.blog-featured__cover { min-height: 220px; }
.blog-filter__tab { flex: 1 1 140px; }
.article-hero { padding: 48px 20px 40px; }
.article-hero__title { font-size: 34px; }
.article-body__lead { font-size: 18px; padding-bottom: 20px; }
.article-body__h { font-size: 24px; }
.article-body__p { font-size: 16px; }
.article-body__quote { font-size: 20px; padding: 20px 22px; }
.article-body__content > p,
.article-body__content .wp-block-paragraph { font-size: 16px; }
.article-body__content > h2 { font-size: 28px; }
.article-body__content > h3,
.article-body__content .wp-block-heading { font-size: 24px; }
.article-body__content blockquote,
.article-body__content .wp-block-quote { font-size: 20px; padding: 20px 22px; }
.article-body__cta { padding: 22px; }
.article-body__cta-title { font-size: 22px; }
.art-card__title { font-size: 20px; }
.art-card__cover { height: 180px; }
}.events-teaser-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.events-teaser-head__title {
font-family: var(--font-display);
font-size: 48px;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.events-teaser-head__link {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brand-blue);
text-decoration: none;
}
.events-teaser-head__link:hover { text-decoration: underline; } .events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.events-month { margin-bottom: 56px; }
.events-month__h {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--brand-yellow);
}
.events-empty {
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: 40px;
text-align: center;
font-family: var(--font-body);
font-size: 16px;
color: var(--brand-blue);
box-shadow: var(--shadow-card);
} .event-card {
position: relative;
background: var(--brand-paper);
border-radius: var(--radius-card);
overflow: visible;
display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
border: 2px solid transparent;
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.event-card:hover { border-color: var(--brand-yellow); transform: translateY(-4px); box-shadow: 0 14px 36px rgba(10,58,197,0.16); }
.event-card__link {
color: inherit;
text-decoration: none;
}
.event-card__link::after {
position: absolute;
inset: 0;
content: "";
}
.event-card__link:hover { text-decoration: none; }
.event-card__link:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: -6px;
}
.event-card .entity-price__help,
.event-card__cta {
position: relative;
z-index: 2;
}
.event-card__cover {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--brand-yellow), var(--brand-bg));
overflow: hidden;
border-radius: var(--radius-card) var(--radius-card) 0 0;
position: relative;
}
.event-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.event-card__cover--empty::before {
content: "SUP";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(27, 27, 58, 0.18);
font-family: var(--font-display);
font-size: 64px;
line-height: 1;
}
.event-card__type {
position: absolute;
top: 14px; left: 14px;
color: #fff;
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: var(--radius-chip);
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.event-date {
position: absolute;
right: 14px; bottom: 14px;
width: 72px;
background: var(--brand-yellow);
color: var(--brand-blue);
border-radius: 14px;
padding: 8px 0 10px;
text-align: center;
font-family: var(--font-display);
line-height: 1;
box-shadow: 0 6px 14px rgba(0,0,0,0.16);
border: 3px solid var(--brand-paper);
}
.event-date__dow {
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.75;
}
.event-date__day { font-size: 28px; letter-spacing: -0.02em; margin: 2px 0; }
.event-date__mon,
.event-date__month {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.85;
}
.event-card__body {
padding: 24px 24px 22px;
display: flex; flex-direction: column;
gap: 12px;
flex: 1;
}
.event-card__head {
display: flex; justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
.event-card__title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0;
flex: 1;
}
.event-card__price {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.01em;
color: var(--brand-orange);
white-space: nowrap;
line-height: 1;
text-align: right;
}
.event-card__free {
color: var(--brand-blue);
background: var(--brand-yellow);
padding: 4px 10px;
border-radius: var(--radius-chip);
font-size: 16px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.event-card__blurb {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--brand-blue);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.event-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.event-card__meta-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--brand-bg);
color: var(--brand-blue);
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: var(--radius-chip);
}
.event-card__meta-chip.warn { background: rgba(255,60,172,0.16); color: var(--brand-orange); }
.event-card__meta-chip.danger { background: var(--brand-orange); color: #fff; }
.event-card__cta { margin-top: auto; padding: 4px 24px 22px; }
.event-card__cta .btn { width: 100%; } .event-modal-card {
background: var(--brand-yellow);
border-radius: var(--radius-card);
padding: 18px 20px;
margin-bottom: 18px;
display: flex; flex-direction: column; gap: 8px;
}
.event-modal-card__head {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.event-modal-card__date {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-modal-card__title {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.event-modal-card__loc {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--brand-blue);
} .events-filter {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 40px;
}
.events-filter__tab {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 10px 20px;
border-radius: var(--radius-pill);
border: 2px solid var(--brand-blue);
background: transparent;
color: var(--brand-blue);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.events-filter__tab:hover { background: var(--brand-blue); color: #fff; }
.events-filter__tab.active { background: var(--brand-blue); color: #fff; } .event-detail-hero {
background: var(--brand-yellow);
color: var(--brand-blue);
}
.event-detail-hero__inner {
max-width: 1440px;
margin: 0 auto;
padding: 64px 60px 76px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
gap: 56px;
align-items: center;
}
.event-detail-hero__copy {
min-width: 0;
}
.event-detail-hero__crumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 24px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}
.event-detail-hero__crumbs a {
color: var(--brand-blue-light);
text-decoration: underline;
text-underline-offset: 3px;
}
.event-detail-hero__type {
display: inline-flex;
align-items: center;
min-height: 34px;
margin-bottom: 18px;
padding: 8px 14px;
border-radius: 8px;
background: var(--brand-blue);
color: #fff;
font-family: var(--font-body);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.event-detail-hero__title {
max-width: 840px;
margin: 0;
font-family: var(--font-display);
font-size: 82px;
line-height: 0.96;
letter-spacing: 0;
text-transform: uppercase;
}
.event-detail-hero__lead {
max-width: 760px;
margin-top: 22px;
font-family: var(--font-body);
font-size: 20px;
font-weight: 750;
line-height: 1.45;
color: var(--brand-blue);
}
.event-detail-hero__lead p {
margin: 0 0 12px;
}
.event-detail-hero__lead p:last-child {
margin-bottom: 0;
}
.event-detail-hero__facts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.event-detail-hero__facts span {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 9px 14px;
border: 2px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
font-family: var(--font-body);
font-size: 13px;
font-weight: 850;
line-height: 1.1;
}
.event-detail-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.event-detail-hero__media {
position: relative;
min-height: 420px;
border: 4px solid var(--brand-blue);
border-radius: 8px;
overflow: hidden;
background: var(--brand-paper);
box-shadow: 14px 14px 0 var(--brand-blue);
}
.event-detail-hero__media--empty {
display: grid;
place-items: center;
background: var(--brand-bg);
}
.event-detail-hero__media--empty::before {
content: "SUP EVENT";
color: rgba(27, 27, 58, 0.16);
font-family: var(--font-display);
font-size: 76px;
line-height: 0.9;
text-align: center;
}
.event-detail-hero__image {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
object-position: center;
}
.event-detail-date {
position: absolute;
left: 18px;
bottom: 18px;
width: 92px;
padding: 12px 8px 14px;
border: 3px solid var(--brand-paper);
border-radius: 8px;
background: var(--brand-yellow);
color: var(--brand-blue);
text-align: center;
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.event-detail-date__day {
display: block;
font-family: var(--font-display);
font-size: 42px;
line-height: 0.9;
}
.event-detail-date__month {
display: block;
margin-top: 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.1;
text-transform: uppercase;
}
.event-detail-status {
position: absolute;
top: 18px;
right: 18px;
max-width: calc(100% - 36px);
padding: 9px 13px;
border-radius: 8px;
background: var(--brand-blue);
color: #fff;
font-family: var(--font-body);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.event-detail-main {
padding-block-start: 72px;
}
.event-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
gap: 40px;
align-items: start;
}
.event-detail-content {
min-width: 0;
}
.event-detail-eyebrow {
margin: 0 0 10px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.event-detail-heading {
margin: 0;
font-family: var(--font-display);
font-size: 48px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-detail-copy {
max-width: 820px;
margin-top: 24px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.55;
color: var(--brand-blue);
}
.event-detail-copy p,
.event-detail-copy ul,
.event-detail-copy ol {
margin: 0 0 18px;
}
.event-detail-copy a {
color: var(--brand-blue-light);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.event-detail-table-scroll,
.event-detail-copy .wp-block-table {
max-width: 100%;
margin: 28px 0;
overflow-x: auto;
border: 2px solid rgba(27, 27, 58, 0.16);
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 24px rgba(27, 27, 58, 0.08);
-webkit-overflow-scrolling: touch;
}
.event-detail-table-scroll:focus-visible,
.event-detail-copy .wp-block-table:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: 3px;
}
.event-detail-copy table {
width: 100%;
min-width: 620px;
margin: 0;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
line-height: 1.4;
}
.event-detail-copy caption {
padding: 12px 16px;
color: var(--brand-blue-light);
font-size: 13px;
font-weight: 800;
text-align: left;
}
.event-detail-copy th,
.event-detail-copy td {
padding: 14px 16px;
border-right: 1px solid rgba(27, 27, 58, 0.12);
border-bottom: 1px solid rgba(27, 27, 58, 0.12);
text-align: left;
vertical-align: top;
}
.event-detail-copy th:last-child,
.event-detail-copy td:last-child {
border-right: 0;
}
.event-detail-copy tr:last-child td {
border-bottom: 0;
}
.event-detail-copy th {
background: var(--brand-blue);
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.event-detail-copy thead th:first-child {
border-top-left-radius: 6px;
}
.event-detail-copy thead th:last-child {
border-top-right-radius: 6px;
}
.event-detail-copy tbody tr:nth-child(even) td {
background: rgba(27, 27, 58, 0.035);
}
.event-detail-copy tbody tr:hover td {
background: rgba(240, 255, 66, 0.22);
}
.event-detail-copy .wp-block-table table {
margin: 0;
}
.event-detail-copy .wp-block-table figcaption {
margin: 0;
padding: 10px 16px 12px;
border-top: 1px solid rgba(27, 27, 58, 0.12);
color: var(--brand-blue-light);
font-size: 13px;
font-weight: 750;
line-height: 1.35;
}
.event-detail-disclaimer {
max-width: 820px;
margin-top: 24px;
padding: 18px 20px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: rgba(240, 255, 66, 0.36);
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 15px;
font-weight: 750;
line-height: 1.45;
}
.event-detail-disclaimer p {
margin: 0 0 12px;
}
.event-detail-disclaimer p:last-child {
margin-bottom: 0;
}
.event-detail-note {
max-width: 820px;
margin-top: 28px;
padding: 18px 20px;
border-left: 6px solid var(--brand-yellow);
border-radius: 8px;
background: var(--brand-paper);
color: var(--brand-blue);
font-family: var(--font-body);
font-size: 16px;
font-weight: 750;
line-height: 1.4;
}
.event-detail-panel {
position: sticky;
top: 104px;
padding: 24px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 10px 10px 0 var(--brand-yellow);
}
.event-detail-panel__title {
margin: 0 0 18px;
font-family: var(--font-display);
font-size: 34px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-detail-list {
margin: 0;
}
.event-detail-list__row {
display: grid;
gap: 6px;
padding: 14px 0;
border-top: 1px solid rgba(27, 27, 58, 0.14);
}
.event-detail-list__row:first-child {
border-top: 0;
padding-top: 0;
}
.event-detail-list dt {
font-family: var(--font-body);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.event-detail-list dd {
margin: 0;
font-family: var(--font-body);
font-size: 17px;
font-weight: 800;
line-height: 1.25;
color: var(--brand-blue);
}
.event-detail-list dd span {
display: block;
margin-top: 4px;
font-size: 13px;
font-weight: 650;
line-height: 1.3;
opacity: 0.75;
}
.event-detail-list dd a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.event-detail-panel__button {
width: 100%;
margin-top: 20px;
}
.event-detail-steps {
padding-block-start: 48px;
}
.event-detail-steps__head {
max-width: 760px;
margin-bottom: 24px;
}
.event-detail-steps__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.event-detail-step {
min-width: 0;
padding: 24px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
}
.event-detail-step span {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--brand-yellow);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 24px;
line-height: 1;
}
.event-detail-step h3 {
margin: 18px 0 10px;
font-family: var(--font-display);
font-size: 26px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-detail-step p {
margin: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.45;
color: var(--brand-blue);
}
.event-detail-related {
padding-block-start: 48px;
}
.event-detail-faq {
padding-block-start: 48px;
}
.event-detail-faq__head {
max-width: 760px;
margin-bottom: 24px;
}
.event-detail-faq__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.event-detail-faq__item {
min-width: 0;
padding: 24px;
border: 3px solid var(--brand-blue);
border-radius: 8px;
background: var(--brand-paper);
}
.event-detail-faq__item h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 26px;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-detail-faq__item div {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--brand-blue);
}
.event-detail-faq__item p {
margin: 0 0 12px;
}
.event-detail-faq__item p:last-child {
margin-bottom: 0;
} .event-signup-modal { display: none; }
.event-signup-modal--open { display: block; }
.event-signup-modal__bg {
position: fixed; inset: 0;
background: rgba(31,31,31,0.55);
z-index: 200;
cursor: pointer;
}
.event-signup-modal__card {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 201;
background: var(--brand-paper);
border-radius: var(--radius-panel-md);
width: 480px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 48px);
overflow-y: auto;
padding: 32px 28px;
}
.event-signup-modal__close {
position: absolute;
top: 14px; right: 14px;
background: none; border: none;
font-size: 20px; line-height: 1;
cursor: pointer; color: var(--brand-blue);
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast);
}
.event-signup-modal__close:hover { background: var(--brand-yellow); }
.event-signup-modal__event-title {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1.1;
margin-bottom: 6px;
}
.event-signup-modal__event-meta {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--brand-blue);
opacity: 0.7;
margin-bottom: 20px;
}
.event-signup-modal__form { display: flex; flex-direction: column; gap: 16px; }
.event-signup-modal__field { display: flex; flex-direction: column; gap: 6px; }
.event-signup-modal__label {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-signup-modal__input {
font-family: var(--font-body);
font-size: 16px;
color: var(--brand-blue);
background: var(--brand-bg);
border: 2px solid transparent;
border-radius: var(--radius-input, 10px);
padding: 12px 16px;
width: 100%;
transition: border-color var(--t-fast);
outline: none;
box-sizing: border-box;
}
.event-signup-modal__input:focus { border-color: var(--brand-blue); }
.event-signup-modal__input[type="number"] { max-width: 120px; }
.event-signup-modal__error {
font-family: var(--font-body);
font-size: 14px;
color: var(--brand-orange);
min-height: 0;
}
.event-signup-modal__error--visible { min-height: 20px; }
.event-signup-modal__submit { margin-top: 4px; }
.event-signup-modal__submit-button { width: 100%; }
.event-signup-modal__consent {
margin: 0;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.45;
color: var(--brand-blue);
}
.event-signup-modal__consent a {
color: var(--brand-blue-light);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.event-signup-modal__success {
display: none;
text-align: center;
padding: 20px 0;
flex-direction: column; gap: 12px; align-items: center;
}
.event-signup-modal__success--visible { display: flex; }
.event-signup-modal__success-icon { font-size: 48px; }
.event-signup-modal__success-title {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--brand-blue);
}
.event-signup-modal__success-text {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--brand-blue);
opacity: 0.8;
} @media (max-width: 1100px) {
.events-grid { grid-template-columns: 1fr 1fr; }
.event-detail-hero__inner {
grid-template-columns: 1fr;
padding-inline: 40px;
}
.event-detail-hero__title {
font-size: 68px;
}
.event-detail-layout {
grid-template-columns: 1fr;
}
.event-detail-panel {
position: static;
}
}
@media (max-width: 760px) {
.events-teaser-head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.events-teaser-head__title {
font-size: 40px;
}
.events-teaser-head__link {
font-size: 12px;
letter-spacing: 0.04em;
}
.events-grid { grid-template-columns: 1fr; }
.event-card__title { font-size: 20px; }
.event-card__price { font-size: 18px; }
.events-month__h { font-size: 22px; }
.event-signup-modal__card { padding: 28px 20px; }
.event-detail-hero__inner {
padding: 34px 20px 48px;
gap: 32px;
}
.event-detail-hero__title {
font-size: 48px;
}
.event-detail-hero__lead {
font-size: 16px;
line-height: 1.5;
}
.event-detail-hero__actions .btn {
width: 100%;
}
.event-detail-hero__media,
.event-detail-hero__image {
min-height: 280px;
}
.event-detail-hero__media {
box-shadow: 8px 8px 0 var(--brand-blue);
}
.event-detail-hero__media--empty::before {
font-size: 48px;
}
.event-detail-main {
padding-block-start: 48px;
}
.event-detail-heading {
font-size: 38px;
}
.event-detail-copy {
font-size: 16px;
}
.event-detail-copy table {
min-width: 540px;
font-size: 14px;
}
.event-detail-copy th,
.event-detail-copy td {
padding: 12px 14px;
}
.event-detail-steps__grid {
grid-template-columns: 1fr;
}
.event-detail-faq__list {
grid-template-columns: 1fr;
}
}.walk-archive-hero,
.walk-single-hero {
background: var(--brand-yellow);
color: var(--brand-blue);
}
.walk-archive-hero .section {
padding-top: clamp(72px, 8vw, 132px);
padding-bottom: clamp(56px, 7vw, 110px);
}
.walk-breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
color: var(--fg-muted);
font-size: 14px;
font-weight: 600;
text-transform: lowercase;
}
.walk-breadcrumbs a {
color: inherit;
}
.walk-breadcrumbs a:hover {
color: var(--brand-blue);
}
.walk-breadcrumbs a:focus-visible,
.home-walks__all:focus-visible,
.walk-card__link:focus-visible {
outline: 3px solid var(--brand-orange);
outline-offset: 4px;
}
.walk-archive-hero__title,
.walk-single-hero__title {
max-width: 1000px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(54px, 8vw, 118px);
font-weight: 900;
letter-spacing: var(--tk-display);
line-height: .92;
text-transform: uppercase;
}
.walk-archive-hero__lead {
max-width: 760px;
margin: 28px 0 0;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.45;
}
.walk-archive {
padding-top: clamp(56px, 8vw, 120px);
padding-bottom: clamp(72px, 10vw, 150px);
}
.walk-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.4vw, 36px);
}
.walk-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: visible;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-card);
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-blue);
transition: transform var(--t-base), box-shadow var(--t-base);
}
.walk-card:hover {
transform: translate(-3px, -3px);
box-shadow: 12px 12px 0 var(--brand-blue);
}
.walk-card__link {
color: inherit;
text-decoration: none;
}
.walk-card__link::after {
position: absolute;
inset: 0;
content: "";
}
.walk-card .entity-price__help {
position: relative;
z-index: 2;
}
.walk-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0;
background: var(--brand-blue-light);
}
.walk-card__media--empty {
background:
linear-gradient(135deg, rgba(240, 255, 66, .9), rgba(255, 60, 172, .76)),
var(--brand-blue);
}
.walk-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-stagger);
}
.walk-card:hover .walk-card__image {
transform: scale(1.035);
}
.walk-card__badge {
position: absolute;
top: 16px;
left: 16px;
padding: 8px 12px;
border-radius: var(--radius-pill);
background: var(--brand-yellow);
color: var(--brand-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.walk-card__sales-state {
position: absolute;
right: 16px;
bottom: 16px;
max-width: calc(100% - 32px);
padding: 8px 12px;
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: var(--brand-paper);
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.walk-card__body {
display: flex;
flex: 1;
padding: clamp(20px, 2.2vw, 32px);
flex-direction: column;
}
.walk-card__title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 44px);
letter-spacing: -.02em;
line-height: 1;
text-transform: uppercase;
}
.walk-card__summary {
margin: 18px 0 24px;
color: var(--fg-muted);
font-size: 16px;
line-height: 1.5;
}
.walk-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-top: auto;
}
.walk-card__price {
max-width: 160px;
font-weight: 800;
line-height: 1.25;
}
.walk-card__more {
color: var(--text-accent);
font-size: 14px;
font-weight: 800;
text-align: right;
}
.walk-archive__empty {
max-width: 760px;
padding: clamp(28px, 5vw, 64px);
border-radius: var(--radius-panel-md);
background: var(--brand-paper);
}
.walk-archive__empty h2 {
margin-top: 0;
font-family: var(--font-display);
font-size: clamp(38px, 5vw, 62px);
line-height: 1;
text-transform: uppercase;
}
.home-walks {
padding-top: clamp(64px, 9vw, 130px);
padding-bottom: clamp(72px, 10vw, 150px);
}
.home-walks__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: clamp(32px, 4vw, 56px);
}
.home-walks__all {
display: inline-flex;
min-height: 44px;
align-items: center;
color: var(--brand-blue);
font-weight: 800;
text-decoration: none;
}
.walk-single-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
align-items: center;
column-gap: clamp(36px, 6vw, 92px);
row-gap: 24px;
padding-top: clamp(70px, 8vw, 124px);
padding-bottom: clamp(60px, 8vw, 120px);
}
.walk-single-hero__copy {
grid-column: 1;
grid-row: 1;
}
.walk-single-hero__sticker-rail {
display: flex;
grid-column: 1;
grid-row: 2;
align-items: center;
}
.walk-single-sticker {
display: block;
max-width: 100%;
height: auto;
pointer-events: none;
user-select: none;
}
.walk-single-sticker--hero {
width: clamp(150px, 17vw, 220px);
transform: rotate(-3deg);
}
.walk-single-hero__subtitle {
max-width: 680px;
margin: 24px 0;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.45;
}
.walk-single-hero__price {
display: flex;
align-items: baseline;
gap: 12px;
margin: 28px 0;
}
.walk-single-hero__price strong {
font-family: var(--font-money);
font-size: clamp(34px, 4vw, 56px);
}
.walk-single-schedule {
max-width: 640px;
margin: -4px 0 28px;
padding: 18px 20px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-panel-md);
background: rgba(255, 255, 255, .62);
}
.walk-single-schedule__row {
display: grid;
grid-template-columns: minmax(110px, .38fr) minmax(0, 1fr);
gap: 16px;
padding: 5px 0;
line-height: 1.4;
}
.walk-single-schedule__row span {
color: var(--fg-muted);
font-size: 14px;
font-weight: 700;
}
.walk-single-schedule__slots {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.walk-single-schedule__slots li {
padding: 7px 11px;
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: var(--brand-paper);
font-family: var(--font-money);
font-size: 14px;
font-weight: 800;
}
.walk-single-hero__media {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
width: 100%;
max-height: 680px;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 3px solid var(--brand-blue);
border-radius: var(--radius-panel-md);
box-shadow: 12px 12px 0 var(--brand-blue);
}
.walk-single-hero__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.walk-content {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
align-items: start;
gap: clamp(36px, 7vw, 110px);
padding-top: clamp(72px, 9vw, 140px);
padding-bottom: clamp(52px, 7vw, 100px);
}
.walk-content__main,
.walk-content__body {
min-width: 0;
}
.walk-content__lead {
margin: 0 0 28px;
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
line-height: 1.35;
}
.walk-content__body {
font-size: 18px;
line-height: 1.7;
}
.walk-content__body > p,
.walk-content__body .wp-block-paragraph {
margin: 0 0 28px;
}
.walk-content__body ul,
.walk-content__body ol {
margin-top: 0;
margin-bottom: 28px;
padding-left: 1.55em;
}
.walk-content__body ul {
list-style: disc;
}
.walk-content__body ol {
list-style: decimal;
}
.walk-content__body ul ul {
list-style: circle;
}
.walk-content__body ul ul ul {
list-style: square;
}
.walk-content__body li {
margin-bottom: 10px;
padding-left: .3em;
}
.walk-content__body li::marker {
color: var(--brand-orange);
font-weight: 900;
}
.walk-content__body li:last-child {
margin-bottom: 0;
}
.walk-content__body li > ul,
.walk-content__body li > ol {
margin-top: 10px;
margin-bottom: 0;
}
.walk-content__body > h2,
.walk-content__body > h3,
.walk-content__body .wp-block-heading {
margin-top: 42px;
margin-bottom: 18px;
}
.walk-content__body > :first-child {
margin-top: 0;
}
.walk-content__body > :last-child {
margin-bottom: 0;
}
.walk-content__body figure,
.walk-content__body .wp-block-image {
max-width: 100%;
margin: 40px 0;
}
.walk-content__body > img,
.walk-content__body > p > img,
.walk-content__body > p > a > img,
.walk-content__body figure img,
.walk-content__body .wp-block-image img {
display: block;
width: auto;
max-width: 100%;
height: auto;
border: 3px solid var(--brand-blue);
border-radius: var(--radius-card);
box-shadow: 8px 8px 0 var(--brand-yellow);
}
.walk-content__body .aligncenter img,
.walk-content__body figure.aligncenter {
margin-right: auto;
margin-left: auto;
}
.walk-content__body .alignwide,
.walk-content__body .alignfull {
width: 100%;
max-width: 100%;
margin-right: 0;
margin-left: 0;
}
.walk-content__body figcaption,
.walk-content__body .wp-element-caption {
margin: 16px 8px 0;
padding-left: 12px;
border-left: 4px solid var(--brand-orange);
color: var(--brand-blue-light);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: left;
}
.walk-content__body figure a:focus-visible img,
.walk-content__body > p > a:focus-visible img {
outline: 3px solid var(--brand-orange);
outline-offset: 4px;
}
.walk-content-table-scroll,
.walk-content__body .wp-block-table {
max-width: 100%;
margin: 32px 0;
overflow-x: auto;
border: 2px solid rgba(27, 27, 58, .16);
border-radius: 8px;
background: var(--brand-paper);
box-shadow: 0 10px 24px rgba(27, 27, 58, .08);
-webkit-overflow-scrolling: touch;
}
.walk-content-table-scroll:focus-visible,
.walk-content__body .wp-block-table:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: 3px;
}
.walk-content__body table {
width: 100%;
min-width: 620px;
margin: 0;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
line-height: 1.45;
}
.walk-content__body caption {
padding: 12px 16px;
color: var(--brand-blue-light);
font-size: 13px;
font-weight: 800;
text-align: left;
}
.walk-content__body th,
.walk-content__body td {
padding: 14px 16px;
border-right: 1px solid rgba(27, 27, 58, .12);
border-bottom: 1px solid rgba(27, 27, 58, .12);
text-align: left;
vertical-align: top;
}
.walk-content__body th:last-child,
.walk-content__body td:last-child {
border-right: 0;
}
.walk-content__body tr:last-child td {
border-bottom: 0;
}
.walk-content__body th {
background: var(--brand-blue);
color: var(--brand-paper);
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.walk-content__body thead th:first-child {
border-top-left-radius: 6px;
}
.walk-content__body thead th:last-child {
border-top-right-radius: 6px;
}
.walk-content__body tbody tr:nth-child(even) td {
background: rgba(27, 27, 58, .035);
}
.walk-content__body tbody tr:hover td {
background: rgba(240, 255, 66, .22);
}
.walk-content__body .wp-block-table table {
margin: 0;
}
.walk-content__body .wp-block-table figcaption {
margin: 0;
padding: 10px 16px 12px;
border-top: 1px solid rgba(27, 27, 58, .12);
color: var(--brand-blue-light);
font-size: 13px;
font-weight: 750;
line-height: 1.35;
}
.walk-facts {
padding: 26px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-card);
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-yellow);
}
.walk-content__aside {
display: grid;
min-width: 0;
gap: 28px;
}
.walk-content__sticker-rail {
display: flex;
min-height: 123px;
align-items: center;
justify-content: center;
}
.walk-single-sticker--facts {
width: min(210px, 82%);
transform: rotate(4deg);
}
.walk-facts__row {
display: grid;
grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr);
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid rgba(27, 27, 58, .16);
}
.walk-facts__row:first-child {
padding-top: 0;
}
.walk-facts__row:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.walk-facts__row span {
color: var(--fg-muted);
font-size: 14px;
}
.walk-route {
padding-top: clamp(50px, 7vw, 100px);
padding-bottom: clamp(72px, 10vw, 150px);
}
.walk-route__note {
max-width: 820px;
margin: 0 0 30px;
font-size: 18px;
line-height: 1.55;
}
.walk-route__heading-row {
display: flex;
min-width: 0;
align-items: flex-end;
justify-content: space-between;
gap: clamp(14px, 3vw, 36px);
margin-bottom: 24px;
}
.walk-route__heading-row .section__title {
min-width: 0;
margin: 0;
}
.walk-route__sticker-rail {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
.walk-single-sticker--route {
width: clamp(72px, 7vw, 88px);
transform: rotate(5deg);
}
.walk-route-map-shell {
overflow: hidden;
min-height: 240px;
border: 3px solid var(--brand-blue);
border-radius: var(--radius-panel-md);
background: var(--brand-paper);
}
.walk-route-map {
width: 100%;
height: clamp(360px, 55vw, 620px);
}
.walk-constructor-map {
width: 100%;
min-height: clamp(360px, 55vw, 720px);
overflow: hidden;
background: var(--brand-paper);
}
.walk-constructor-map iframe {
display: block;
width: 100% !important;
max-width: 100%;
height: clamp(360px, 55vw, 720px) !important;
border: 0;
}
.walk-route-map__status {
margin: 0;
padding: clamp(36px, 8vw, 90px);
font-size: 18px;
line-height: 1.5;
text-align: center;
}
.walk-route-map__marker {
display: flex;
min-width: 64px;
min-height: 44px;
padding: 8px 14px;
border: 3px solid var(--brand-blue);
border-radius: var(--radius-pill);
align-items: center;
justify-content: center;
background: var(--brand-yellow);
color: var(--brand-blue);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
transform: translate(-50%, -50%);
}
.walk-route-map__marker--finish {
background: var(--brand-orange);
color: var(--brand-paper);
}
.walk-booking-section {
padding-bottom: clamp(80px, 12vw, 170px);
}
.walk-booking {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(36px, 7vw, 100px);
padding: clamp(28px, 6vw, 72px);
border-radius: var(--radius-panel-lg);
background: var(--brand-blue);
color: var(--brand-paper);
}
.walk-booking__eyebrow {
display: block;
margin-bottom: 18px;
color: var(--brand-yellow);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.walk-booking__title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 82px);
line-height: .95;
text-transform: uppercase;
}
.walk-booking__text {
max-width: 520px;
font-size: 18px;
line-height: 1.5;
}
.walk-booking__fixed-price {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 34px;
}
.walk-booking__fixed-price span {
color: rgba(255, 255, 255, .72);
font-size: 14px;
}
.walk-booking__fixed-price strong {
color: var(--brand-yellow);
font-family: var(--font-money);
font-size: clamp(28px, 3vw, 42px);
}
.walk-booking-form {
min-width: 0;
}
.walk-booking-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.walk-booking-form__field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
font-size: 14px;
font-weight: 700;
}
.walk-booking-form__field small {
color: rgba(255, 255, 255, .64);
font-weight: 400;
}
.walk-booking-form input,
.walk-booking-form select,
.walk-booking-form textarea {
width: 100%;
min-height: 52px;
box-sizing: border-box;
border: 2px solid transparent;
border-radius: var(--radius-input);
padding: 13px 16px;
background: var(--brand-paper);
color: var(--brand-blue);
font: inherit;
}
.walk-booking-form textarea {
min-height: 116px;
resize: vertical;
}
.walk-booking-form input:focus-visible,
.walk-booking-form select:focus-visible,
.walk-booking-form textarea:focus-visible {
border-color: var(--brand-yellow);
outline: 3px solid rgba(240, 255, 66, .42);
outline-offset: 2px;
}
.walk-booking-form select:disabled {
cursor: not-allowed;
opacity: .68;
}
.walk-booking-form__slot-note {
min-height: 20px;
line-height: 1.4;
}
.walk-booking-unavailable {
align-self: center;
padding: clamp(24px, 4vw, 42px);
border: 2px solid var(--brand-yellow);
border-radius: var(--radius-panel-md);
background: rgba(255, 255, 255, .08);
}
.walk-booking-unavailable strong {
display: block;
color: var(--brand-yellow);
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 48px);
line-height: 1;
text-transform: uppercase;
}
.walk-booking-unavailable p {
margin: 18px 0 24px;
font-size: 17px;
line-height: 1.5;
}
.walk-booking-unavailable__link {
background: var(--brand-yellow);
color: var(--brand-blue);
}
.walk-booking-form__summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin: 8px 0 22px;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, .26);
border-bottom: 1px solid rgba(255, 255, 255, .26);
}
.walk-booking-form__summary strong {
color: var(--brand-yellow);
font-family: var(--font-money);
font-size: 32px;
}
.walk-booking-form__consent {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: start;
gap: 12px;
margin-bottom: 24px;
font-size: 13px;
line-height: 1.45;
}
.walk-booking-form__consent input {
width: 22px;
min-height: 22px;
margin: 0;
}
.walk-booking-form__consent a {
color: var(--brand-yellow);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.walk-booking-form__submit {
width: 100%;
min-height: 54px;
background: var(--brand-yellow);
color: var(--brand-blue);
box-shadow: 5px 5px 0 var(--brand-orange);
}
.walk-booking-form__submit:hover {
background: var(--brand-paper);
color: var(--brand-blue-dark);
}
.walk-booking-form__submit:focus-visible {
outline-color: var(--brand-orange);
}
.walk-booking-form__status {
min-height: 24px;
margin: 16px 0 0;
line-height: 1.4;
}
.walk-booking-form__status.is-error {
color: #ffb5de;
}
.walk-booking-form__status.is-success {
color: var(--brand-yellow);
font-weight: 700;
}
.walk-faq {
padding-top: 0;
}
.walk-faq .section__title {
margin-bottom: 34px;
}
.walk-faq__list {
border-radius: var(--radius-panel-md);
padding: 24px 36px;
background: var(--brand-paper);
box-shadow: var(--shadow-card);
}
@media (max-width: 980px) {
.walk-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.walk-single-hero__inner,
.walk-content,
.walk-booking {
grid-template-columns: 1fr;
}
.walk-single-hero__copy,
.walk-single-hero__sticker-rail,
.walk-single-hero__media {
grid-column: 1;
grid-row: auto;
max-width: 720px;
}
}
@media (max-width: 680px) {
.walk-grid,
.walk-booking-form__grid {
grid-template-columns: 1fr;
}
.home-walks__head {
align-items: flex-start;
flex-direction: column;
}
.walk-card {
box-shadow: 5px 5px 0 var(--brand-blue);
}
.walk-card__footer {
align-items: flex-start;
flex-direction: column;
}
.walk-card__more {
text-align: left;
}
.walk-single-hero__inner,
.walk-content {
gap: 30px;
}
.walk-single-schedule__row {
grid-template-columns: 1fr;
gap: 3px;
}
.walk-single-schedule__slots {
align-items: flex-start;
flex-direction: column;
}
.walk-single-hero__sticker-rail {
min-height: 64px;
}
.walk-single-sticker--hero {
width: 150px;
}
.walk-single-hero__media {
box-shadow: 7px 7px 0 var(--brand-blue);
}
.walk-content__sticker-rail {
min-height: 98px;
justify-content: flex-start;
padding-left: 12px;
}
.walk-single-sticker--facts {
width: 168px;
}
.walk-facts__row {
grid-template-columns: 1fr;
gap: 6px;
}
.walk-route__sticker-rail {
align-self: flex-start;
}
.walk-single-sticker--route {
width: 58px;
}
.walk-route-map {
height: 420px;
}
.walk-booking {
border-radius: var(--radius-card);
}
.walk-faq__list {
padding: 18px 20px;
}
.walk-content__body figure,
.walk-content__body .wp-block-image {
margin: 32px 0;
}
.walk-content__body > img,
.walk-content__body > p > img,
.walk-content__body > p > a > img,
.walk-content__body figure img,
.walk-content__body .wp-block-image img {
box-shadow: 6px 6px 0 var(--brand-yellow);
}
}
@media (prefers-reduced-motion: reduce) {
.walk-card,
.walk-card__image {
transition: none;
}
}.promotion-archive-hero {
background: var(--brand-orange);
color: var(--brand-blue);
}
.promotion-single-hero {
background: var(--brand-yellow);
color: var(--brand-blue);
}
.promotion-archive-hero .section {
padding-top: clamp(72px, 8vw, 132px);
padding-bottom: clamp(56px, 7vw, 110px);
}
.promotion-breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
color: var(--brand-blue);
font-size: 14px;
font-weight: 700;
text-transform: lowercase;
}
.promotion-breadcrumbs a {
color: inherit;
}
.promotion-breadcrumbs a:focus-visible,
.home-promotions__all:focus-visible,
.promotion-card__link:focus-visible {
outline: 3px solid var(--brand-yellow);
outline-offset: 4px;
}
.promotion-archive-hero__title,
.promotion-single-hero__title {
max-width: 1040px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(58px, 9vw, 128px);
font-weight: 900;
letter-spacing: var(--tk-display);
line-height: .9;
text-transform: uppercase;
}
.promotion-archive-hero__lead {
max-width: 760px;
margin: 28px 0 0;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.5;
}
.home-promotions,
.promotion-archive {
padding-top: clamp(64px, 9vw, 130px);
padding-bottom: clamp(72px, 10vw, 150px);
}
.home-promotions {
background: var(--brand-paper);
}
.home-promotions__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: clamp(32px, 4vw, 56px);
}
.home-promotions__all {
display: inline-flex;
min-height: 44px;
align-items: center;
color: var(--brand-blue);
font-weight: 800;
text-decoration: none;
}
.promotion-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.4vw, 36px);
}
.promotion-card {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
overflow: visible;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-card);
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-blue);
transition: transform var(--t-base), box-shadow var(--t-base);
}
.promotion-card:hover {
transform: translate(-3px, -3px);
box-shadow: 12px 12px 0 var(--brand-blue);
}
.promotion-card__media {
position: relative;
overflow: hidden;
border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0;
background: var(--brand-paper);
}
.promotion-card__media--empty {
aspect-ratio: 16 / 9;
background:
radial-gradient(circle at 75% 25%, var(--brand-yellow) 0 12%, transparent 13%),
linear-gradient(135deg, var(--brand-orange), var(--brand-pink));
}
.promotion-card__image {
display: block;
width: 100%;
height: auto;
transition: filter var(--t-base);
}
.promotion-card:hover .promotion-card__image {
filter: saturate(1.06);
}
.promotion-card__badge,
.promotion-card__deadline {
position: absolute;
z-index: 1;
padding: 8px 12px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.promotion-card__badge {
top: 16px;
left: 16px;
background: var(--brand-yellow);
color: var(--brand-blue);
}
.promotion-card__deadline {
right: 16px;
bottom: 16px;
max-width: calc(100% - 32px);
background: var(--brand-blue);
color: var(--brand-paper);
}
.promotion-card__body {
display: flex;
flex: 1;
min-width: 0;
padding: clamp(20px, 2.2vw, 32px);
flex-direction: column;
}
.promotion-card__title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 44px);
letter-spacing: -.02em;
line-height: 1;
text-transform: uppercase;
}
.promotion-card__link {
color: inherit;
text-decoration: none;
}
.promotion-card__link::after {
position: absolute;
inset: 0;
content: "";
}
.promotion-card__lead {
margin: 18px 0 26px;
color: var(--fg-muted);
font-size: 16px;
line-height: 1.55;
}
.promotion-card__footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-top: auto;
}
.promotion-card .entity-price__help {
position: relative;
z-index: 2;
}
.promotion-card__more {
color: var(--text-accent);
font-size: 14px;
font-weight: 900;
text-align: right;
}
.promotion-archive__empty {
max-width: 760px;
padding: clamp(28px, 5vw, 64px);
border: 2px solid var(--brand-blue);
border-radius: var(--radius-panel-md);
background: var(--brand-paper);
box-shadow: 8px 8px 0 var(--brand-yellow);
}
.promotion-archive__empty h2 {
margin-top: 0;
font-family: var(--font-display);
font-size: clamp(38px, 5vw, 62px);
line-height: 1;
text-transform: uppercase;
}
.promotion-single-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
align-items: center;
gap: clamp(36px, 6vw, 92px);
padding-top: clamp(70px, 8vw, 124px);
padding-bottom: clamp(60px, 8vw, 120px);
}
.promotion-single-hero__eyebrow {
display: inline-flex;
margin-bottom: 22px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--brand-blue);
color: var(--brand-paper);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.promotion-single-hero__lead {
max-width: 720px;
margin-top: 28px;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.5;
}
.promotion-single-hero__lead > :first-child {
margin-top: 0;
}
.promotion-single-hero__lead > :last-child {
margin-bottom: 0;
}
.promotion-single-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.promotion-single-hero__badge {
display: inline-flex;
max-width: 100%;
min-height: 34px;
padding: 7px 13px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-pill);
align-items: center;
background: var(--brand-yellow);
color: var(--brand-blue);
font-size: 13px;
font-weight: 900;
line-height: 1.2;
overflow-wrap: anywhere;
}
.promotion-single-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 26px;
margin: 30px 0;
font-weight: 800;
}
.promotion-single-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.promotion-single-hero__closed {
display: inline-flex;
min-height: 52px;
padding: 12px 20px;
border: 2px solid var(--brand-blue);
border-radius: var(--radius-pill);
align-items: center;
font-weight: 900;
text-transform: uppercase;
}
.promotion-single-hero__media {
width: 100%;
overflow: hidden;
border: 3px solid var(--brand-blue);
border-radius: var(--radius-panel-md);
background: var(--brand-paper);
box-shadow: 12px 12px 0 var(--brand-blue);
}
.promotion-single-hero__media--empty {
display: grid;
aspect-ratio: 4 / 3;
place-items: center;
background: var(--brand-bg);
}
.promotion-single-hero__media--empty::before {
color: rgba(27, 27, 58, .16);
content: "АКЦИЯ";
font-family: var(--font-display);
font-size: clamp(58px, 8vw, 92px);
line-height: .9;
text-align: center;
}
.promotion-single-hero__image {
display: block;
width: 100%;
height: auto;
}
.promotion-conditions,
.promotion-description,
.promotion-faq {
padding-top: clamp(64px, 9vw, 130px);
padding-bottom: clamp(64px, 9vw, 130px);
}
.promotion-description {
padding-top: 0;
}
.promotion-content-layout {
display: grid;
grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
gap: clamp(32px, 7vw, 110px);
}
.promotion-rich-text {
min-width: 0;
font-size: 18px;
line-height: 1.75;
}
.promotion-rich-text p,
.promotion-rich-text ul,
.promotion-rich-text ol {
margin-top: 0;
margin-bottom: 28px;
}
.promotion-rich-text ul,
.promotion-rich-text ol {
padding-left: 1.55em;
}
.promotion-rich-text ul {
list-style: disc;
}
.promotion-rich-text ol {
list-style: decimal;
}
.promotion-rich-text li {
margin-bottom: 10px;
}
.promotion-rich-text li::marker {
color: var(--brand-orange);
font-weight: 900;
}
.promotion-rich-text img {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 36px 0;
border: 3px solid var(--brand-blue);
border-radius: var(--radius-card);
box-shadow: 8px 8px 0 var(--brand-yellow);
}
.promotion-rich-text .wp-block-table,
.promotion-table-scroll {
max-width: 100%;
}
.promotion-rich-text .wp-block-table,
.promotion-table-scroll {
margin: 32px 0;
overflow-x: auto;
border: 2px solid rgba(27, 27, 58, .16);
border-radius: 8px;
background: var(--brand-paper);
-webkit-overflow-scrolling: touch;
}
.promotion-rich-text table {
width: 100%;
min-width: 620px;
margin: 0;
border-collapse: collapse;
}
.promotion-rich-text th,
.promotion-rich-text td {
padding: 14px 16px;
border: 1px solid rgba(27, 27, 58, .14);
text-align: left;
vertical-align: top;
}
.promotion-rich-text th {
background: var(--brand-blue);
color: var(--brand-paper);
}
.promotion-faq {
padding-top: 0;
}
.promotion-faq .section__title {
margin-bottom: 34px;
}
.promotion-faq__list {
padding: 24px 36px;
border-radius: var(--radius-panel-md);
background: var(--brand-paper);
box-shadow: var(--shadow-card);
}
.promotion-booking-section {
padding-top: 0;
padding-bottom: clamp(80px, 12vw, 170px);
}
.promotion-booking {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(36px, 7vw, 100px);
padding: clamp(28px, 6vw, 72px);
border-radius: var(--radius-panel-lg);
background: var(--brand-blue);
color: var(--brand-paper);
}
.promotion-booking__intro,
.promotion-booking-form {
min-width: 0;
}
.promotion-booking__eyebrow {
display: block;
margin-bottom: 18px;
color: var(--brand-yellow);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.promotion-booking-unavailable {
align-self: center;
padding: clamp(24px, 4vw, 42px);
border: 2px solid var(--brand-yellow);
border-radius: var(--radius-panel-md);
background: rgba(255, 255, 255, .08);
}
.promotion-booking-unavailable strong {
display: block;
color: var(--brand-yellow);
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 48px);
line-height: 1;
text-transform: uppercase;
}
.promotion-booking-unavailable p {
margin: 18px 0 0;
font-size: 17px;
line-height: 1.5;
}
.promotion-booking__title {
max-width: 100%;
margin: 0;
font-family: var(--font-display);
font-size: clamp(44px, 3.9vw, 64px);
line-height: .94;
text-transform: uppercase;
scroll-margin-top: 96px;
}
.promotion-booking__intro > p {
max-width: 520px;
font-size: 18px;
line-height: 1.55;
}
.promotion-booking__price {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 32px;
}
.promotion-booking__price > span {
color: rgba(255, 255, 255, .7);
font-size: 14px;
}
.promotion-booking-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.promotion-booking-form__field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
font-size: 14px;
font-weight: 700;
}
.promotion-booking-form__field small {
color: rgba(255, 255, 255, .64);
font-weight: 400;
}
.promotion-booking-form input,
.promotion-booking-form select,
.promotion-booking-form textarea {
width: 100%;
min-height: 52px;
box-sizing: border-box;
padding: 13px 16px;
border: 2px solid transparent;
border-radius: var(--radius-input);
background: var(--brand-paper);
color: var(--brand-blue);
font: inherit;
}
.promotion-booking-form textarea {
min-height: 116px;
resize: vertical;
}
.promotion-booking-form input:focus-visible,
.promotion-booking-form select:focus-visible,
.promotion-booking-form textarea:focus-visible {
border-color: var(--brand-yellow);
outline: 3px solid rgba(240, 255, 66, .42);
outline-offset: 2px;
}
.promotion-booking-form select {
cursor: pointer;
}
.promotion-booking-form__date {
color: var(--brand-blue);
}
.promotion-booking-form__date .site-request-datepicker {
color: var(--brand-blue);
}
.promotion-booking-form__date .site-request-date__toggle {
top: 6px;
}
.promotion-booking-form__summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
margin: 8px 0 22px;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, .26);
border-bottom: 1px solid rgba(255, 255, 255, .26);
}
.promotion-booking-form__summary strong {
color: var(--brand-yellow);
font-family: var(--font-money);
font-size: 32px;
}
.promotion-booking-form__consent {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: start;
gap: 12px;
margin-bottom: 24px;
font-size: 13px;
line-height: 1.45;
}
.promotion-booking-form__consent input {
width: 22px;
min-height: 22px;
margin: 0;
}
.promotion-booking-form__consent a {
color: var(--brand-yellow);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.promotion-booking-form__submit {
width: 100%;
min-height: 54px;
background: var(--brand-yellow);
color: var(--brand-blue);
box-shadow: 5px 5px 0 var(--brand-orange);
}
.promotion-booking-form__submit:hover {
background: var(--brand-paper);
color: var(--brand-blue);
}
.promotion-booking-form__status {
min-height: 24px;
margin: 16px 0 0;
line-height: 1.4;
}
.promotion-booking-form__status.is-error {
color: #ffb5de;
}
.promotion-booking-form__status.is-success {
color: var(--brand-yellow);
font-weight: 700;
}
@media (max-width: 980px) {
.promotion-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.promotion-single-hero__inner,
.promotion-content-layout,
.promotion-booking {
grid-template-columns: 1fr;
}
.promotion-single-hero__media {
max-width: 720px;
}
}
@media (max-width: 680px) {
.promotion-grid,
.promotion-booking-form__grid {
grid-template-columns: 1fr;
}
.home-promotions__head {
align-items: flex-start;
flex-direction: column;
}
.promotion-card {
box-shadow: 5px 5px 0 var(--brand-blue);
}
.promotion-card__footer {
align-items: flex-start;
flex-direction: column;
}
.promotion-card__more {
text-align: left;
}
.promotion-single-hero__media {
box-shadow: 7px 7px 0 var(--brand-blue);
}
.promotion-single-hero__actions .btn {
width: 100%;
}
.promotion-faq__list {
padding: 18px 20px;
}
.promotion-booking {
border-radius: var(--radius-card);
}
.promotion-booking__title {
font-size: clamp(34px, 10vw, 50px);
}
}
@media (prefers-reduced-motion: reduce) {
.promotion-card,
.promotion-card__image {
transition: none;
}
}.modal-bg[hidden],
.modal-loading[hidden],
.modal-body[hidden],
.modal-error[hidden],
.modal-sales-closed[hidden],
.modal-step[hidden],
.modal-progress[hidden],
.modal-progress__label[hidden],
.modal-actions[hidden],
.modal-actions .btn[hidden] { display: none !important; }
.modal-bg {
position: fixed; inset: 0;
background: rgba(31,31,31,0.55);
display: flex; align-items: center; justify-content: center;
z-index: 300;
animation: fade 180ms ease;
padding: 20px;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
background: var(--brand-paper);
border-radius: var(--radius-panel-md);
width: 560px;
max-width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 40px 44px;
position: relative;
animation: pop 220ms cubic-bezier(.2,.8,.2,1);
}
@keyframes pop {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
}
.modal-card__head h3 {
font-family: var(--font-display);
font-size: 44px;
letter-spacing: -0.02em;
color: var(--brand-blue);
text-transform: uppercase;
line-height: 0.95;
margin: 0;
}
.modal-card__sub {
font-family: var(--font-body); font-size: 14px; line-height: 1.5;
color: var(--brand-blue); margin: 0 0 24px;
}
.modal-card .close {
background: var(--brand-bg);
border: 0; cursor: pointer;
font-family: var(--font-display); font-size: 28px;
color: var(--brand-blue);
width: 44px; height: 44px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex: none;
transition: background var(--t-fast);
}
.modal-card .close:hover { background: var(--brand-yellow); }
.modal-sales-closed p {
margin: 24px 0 28px;
color: var(--brand-blue);
font-size: 18px;
line-height: 1.55;
} .modal-progress {
display: flex; gap: 10px;
margin-bottom: 24px;
align-items: center;
}
.modal-progress__step {
flex: 1;
height: 6px;
background: var(--brand-bg);
border-radius: 3px;
position: relative;
overflow: hidden;
}
.modal-progress__step.done { background: var(--brand-blue-light); }
.modal-progress__step.current { background: var(--brand-blue); }
.modal-progress__label {
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-blue-light);
margin-bottom: 12px;
} .field {
width: 100%;
height: 56px;
padding: 0 22px;
border-radius: var(--radius-input);
background: var(--brand-bg);
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.02em;
color: var(--brand-blue);
border: 2px solid transparent;
margin-bottom: 14px;
outline: none;
transition: border-color var(--t-fast), background var(--t-fast);
text-transform: lowercase;
}
.field::placeholder { color: rgba(27,27,58,0.35); }
.field:focus { border-color: var(--brand-blue); background: var(--brand-paper); }
.form-error {
color: #b42318;
font-family: var(--font-body);
font-weight: 800;
font-size: 14px;
line-height: 1.4;
margin: 0 0 14px;
}
.field-textarea {
height: 100px;
resize: none;
padding: 16px 22px;
font-family: var(--font-body);
font-size: 15px;
}
.modal-note,
.modal-consent {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: var(--brand-blue);
margin-bottom: 14px;
}
.modal-consent a {
color: var(--brand-blue-light);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.field-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0 0 8px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .radio-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.radio-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 22px;
border-radius: var(--radius-input);
background: var(--brand-bg);
border: 2px solid transparent;
cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast);
}
.radio-card:hover { border-color: var(--brand-blue-light); }
.radio-card.selected { border-color: var(--brand-blue); background: var(--brand-paper); }
.radio-card__dot {
width: 22px; height: 22px;
border-radius: 50%;
border: 3px solid var(--brand-blue);
flex: none;
position: relative;
}
.radio-card.selected .radio-card__dot::after {
content: ""; position: absolute; inset: 3px;
background: var(--brand-blue);
border-radius: 50%;
}
.radio-card__body { flex: 1; }
.radio-card__title {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.radio-card__sub {
font-family: var(--font-body);
font-size: 13px;
color: var(--brand-blue);
margin-top: 4px;
}
.radio-card__pill {
background: var(--brand-yellow);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 14px;
padding: 4px 10px;
border-radius: var(--radius-chip);
text-transform: uppercase;
} .stepper {
display: flex; align-items: center; justify-content: space-between;
background: var(--brand-bg);
border-radius: var(--radius-input);
padding: 14px 22px;
margin-bottom: 14px;
}
.stepper__label {
display: flex; flex-direction: column; gap: 2px;
}
.stepper__title {
font-family: var(--font-display);
font-size: 22px;
text-transform: uppercase;
color: var(--brand-blue);
letter-spacing: 0.02em;
line-height: 1;
}
.stepper__sub {
font-family: var(--font-body);
font-size: 12px;
color: var(--brand-blue-light);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.stepper__ctrl {
display: flex; align-items: center; gap: 14px;
}
.stepper__btn {
width: 40px; height: 40px;
border-radius: 50%;
border: 0;
background: var(--brand-blue);
color: #fff;
font-family: var(--font-display);
font-size: 28px;
line-height: 0.85;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast), opacity var(--t-fast);
}
.stepper__btn:hover { background: var(--brand-blue-dark); }
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper__count {
font-family: var(--font-display);
font-size: 28px;
color: var(--brand-blue);
min-width: 32px;
text-align: center;
} .date-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
margin-bottom: 14px;
}
.date-cell {
background: var(--brand-bg);
border-radius: var(--radius-input);
padding: 12px 8px;
text-align: center;
cursor: pointer;
border: 2px solid transparent;
transition: all var(--t-fast);
}
.date-cell:hover { border-color: var(--brand-blue-light); }
.date-cell.selected { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.date-cell.disabled { opacity: 0.35; cursor: not-allowed; }
.date-cell__dow {
font-family: var(--font-body);
font-weight: 700;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.65;
}
.date-cell__day {
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
margin-top: 4px;
}
.date-cell__month {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 4px;
opacity: 0.75;
} .time-chips {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 18px;
}
.time-chip {
background: var(--brand-bg);
color: var(--brand-blue);
font-family: var(--font-display);
font-size: 18px;
padding: 8px 16px;
border-radius: var(--radius-chip);
cursor: pointer;
border: 2px solid transparent;
transition: all var(--t-fast);
}
.time-chip:hover { border-color: var(--brand-blue-light); }
.time-chip.selected { background: var(--brand-blue); color: #fff; } .summary {
background: var(--brand-bg);
border-radius: var(--radius-input);
padding: 18px 22px;
margin-bottom: 18px;
display: flex; flex-direction: column; gap: 10px;
}
.summary-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.summary-row__k {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand-blue-light);
}
.summary-row__v {
font-family: var(--font-display);
font-size: 20px;
color: var(--brand-blue);
text-transform: uppercase;
text-align: right;
}
.summary-row.total .summary-row__v {
font-size: 36px;
color: var(--brand-orange);
}
.modal-actions {
display: flex; justify-content: space-between; align-items: center;
gap: 16px;
margin-top: 8px;
} .modal-success {
text-align: center;
padding: 20px 0;
}
.modal-success img {
width: 240px;
margin: 0 auto 20px;
display: block;
transform: rotate(-6deg);
}
.modal-success h3 {
font-family: var(--font-display);
font-size: 52px;
text-transform: uppercase;
color: var(--brand-blue);
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.modal-success p {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--brand-blue);
margin: 0 0 24px;
max-width: 380px;
margin-left: auto;
margin-right: auto;
} @media (max-width: 600px) {
.modal-bg {
align-items: flex-start;
padding: 12px;
}
.modal-card {
width: 100%;
max-height: calc(100dvh - 24px);
padding: 24px 16px;
border-radius: 24px;
}
.modal-card__head {
gap: 10px;
}
.modal-card__head h3 {
font-size: 30px;
line-height: 1;
}
.modal-card .close {
width: 38px;
height: 38px;
}
.modal-card__sub,
.modal-note,
.modal-consent {
font-size: 13px;
line-height: 1.4;
}
.modal-progress {
gap: 6px;
margin-bottom: 18px;
}
.modal-progress__label,
.field-label {
font-size: 10px;
letter-spacing: 0.08em;
line-height: 1.25;
}
.field {
height: 50px;
padding: 0 16px;
font-size: 18px;
}
.field-textarea {
height: 88px;
padding: 14px 16px;
font-size: 14px;
}
.radio-group {
gap: 8px;
margin-bottom: 16px;
}
.radio-card {
align-items: flex-start;
gap: 10px;
padding: 14px 12px;
}
.radio-card__dot {
width: 18px;
height: 18px;
border-width: 2px;
margin-top: 1px;
}
.radio-card.selected .radio-card__dot::after {
inset: 3px;
}
.radio-card__title {
font-size: 18px;
line-height: 1.05;
}
.radio-card__sub {
font-size: 12px;
line-height: 1.35;
}
.radio-card__pill {
padding: 4px 8px;
font-size: 12px;
white-space: nowrap;
}
.stepper {
align-items: flex-start;
gap: 14px;
padding: 14px;
}
.stepper__title {
font-size: 18px;
}
.stepper__sub {
font-size: 10px;
letter-spacing: 0.06em;
line-height: 1.25;
}
.stepper__ctrl {
gap: 10px;
}
.stepper__btn {
width: 36px;
height: 36px;
font-size: 24px;
}
.stepper__count {
font-size: 24px;
min-width: 24px;
}
.date-grid { grid-template-columns: repeat(3, 1fr); }
.date-cell {
padding: 10px 6px;
}
.date-cell__dow,
.date-cell__month {
font-size: 9px;
letter-spacing: 0.08em;
}
.date-cell__day {
font-size: 24px;
}
.time-chip {
flex: 1 1 calc(33.333% - 8px);
min-width: 76px;
padding: 8px 10px;
font-size: 16px;
text-align: center;
}
.summary {
padding: 14px;
gap: 8px;
}
.summary-row {
gap: 10px;
}
.summary-row__k {
font-size: 10px;
letter-spacing: 0.08em;
line-height: 1.25;
}
.summary-row__v {
font-size: 17px;
line-height: 1;
}
.summary-row.total .summary-row__v {
font-size: 30px;
}
.modal-actions {
gap: 10px;
}
.modal-actions .btn {
flex: 1 1 0;
min-width: 0;
padding-inline: 12px;
font-size: 18px;
}
.field-row { grid-template-columns: 1fr; }
.modal-success img {
width: 180px;
}
.modal-success h3 {
font-size: 36px;
}
.modal-success p {
font-size: 14px;
}
}.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 150;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--space-6);
background: var(--brand-blue);
color: #fff;
font-size: var(--fs-body-sm);
line-height: 1.5;
border-block-start: 3px solid var(--brand-yellow);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text {
flex: 1;
min-width: 0;
color: rgb(255 255 255 / .8);
}
.cookie-banner__text a {
color: var(--brand-yellow);
text-decoration: underline;
text-underline-offset: 3px;
}
.cookie-banner__text a:hover { color: #fff; }
.cookie-banner__btn { flex-shrink: 0; }
@media (max-width: 600px) {
.cookie-banner {
flex-direction: column;
align-items: flex-start;
padding: var(--space-4);
gap: var(--space-3);
}
.cookie-banner__btn { align-self: stretch; text-align: center; }
}.nf {
background: var(--brand-yellow);
padding: 60px 60px 80px;
position: relative;
overflow: hidden;
}
.nf__inner {
max-width: 1440px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
position: relative;
z-index: 2;
}
.nf__copy { min-width: 0; }
.nf__crumbs {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-blue);
margin-bottom: 24px;
}
.nf__crumbs a { color: var(--brand-blue-light); cursor: pointer; }
.nf__crumbs a:hover { color: var(--brand-blue); text-decoration: underline; }
.nf__path {
background: rgba(27,27,58,0.12);
padding: 4px 10px;
border-radius: var(--radius-chip);
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: none;
}
.nf__num {
font-family: var(--font-brush);
font-size: clamp(180px, 22vw, 360px);
line-height: 0.85;
letter-spacing: -0.03em;
color: var(--brand-blue);
transform: rotate(-3deg);
margin: 0;
padding: 0.05em 0;
}
.nf__title {
font-family: var(--font-display);
font-size: clamp(32px, 3vw, 48px);
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--brand-blue);
margin-top: 12px;
}
.nf__lead {
margin-top: 20px;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.5;
color: var(--brand-blue);
max-width: 540px;
}
.nf__cta {
margin-top: 32px;
display: flex; gap: 14px; flex-wrap: wrap;
}
.nf__art {
position: relative;
height: 460px;
display: flex; align-items: center; justify-content: center;
}
.nf__board {
position: absolute;
height: 520px;
width: auto;
max-width: 100%;
transform: rotate(-18deg);
filter: drop-shadow(0 22px 32px rgba(27,27,58,0.22));
z-index: 3;
animation: nf-bob 4.5s ease-in-out infinite;
}
.nf__paddle {
position: absolute;
right: 4%;
bottom: 50px;
width: 200px;
transform: rotate(58deg);
opacity: 0.7;
z-index: 2;
filter: drop-shadow(0 10px 16px rgba(27,27,58,0.18));
animation: nf-paddle 5s ease-in-out infinite;
}
@keyframes nf-paddle {
0%,100% { transform: rotate(58deg) translateY(0); }
50%     { transform: rotate(60deg) translateY(-6px); }
}
.nf__sticker {
position: absolute;
top: 4%;
right: 10%;
width: 130px;
transform: rotate(12deg);
z-index: 4;
filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
animation: nf-float 3s ease-in-out infinite;
}
.nf__ripples {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 90%;
z-index: 1;
}
@keyframes nf-bob {
0%,100% { transform: rotate(-18deg) translateY(0); }
50%     { transform: rotate(-15deg) translateY(-14px); }
}
@keyframes nf-float {
0%,100% { transform: rotate(12deg) translateY(0); }
50%     { transform: rotate(14deg) translateY(-8px); }
} .nf-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.nf-link {
background: var(--brand-paper);
border-radius: var(--radius-card);
padding: 24px 28px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
box-shadow: var(--shadow-card);
text-decoration: none;
}
.nf-link:hover {
border-color: var(--brand-yellow);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(27,27,58,0.14);
text-decoration: none;
}
.nf-link__title {
font-family: var(--font-display);
font-size: 26px;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--brand-blue);
line-height: 1;
}
.nf-link__sub {
margin-top: 6px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--brand-blue-light);
}
.nf-link__arrow {
color: var(--brand-blue);
transition: transform var(--t-base), color var(--t-base);
}
.nf-link:hover .nf-link__arrow { color: var(--brand-orange); transform: translateX(4px); } @media (max-width: 1100px) {
.nf { padding: 48px 32px 60px; }
.nf__inner { grid-template-columns: 1fr; gap: 32px; }
.nf__art { height: 380px; }
.nf__board { height: 380px; }
.nf__sticker { width: 100px; top: 8%; right: 8%; }
.nf__paddle { display: none; }
.nf-links { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.nf { padding: 32px 20px 48px; }
.nf__num { font-size: clamp(140px, 36vw, 200px); }
.nf__title { font-size: 24px; }
.nf__lead { font-size: 15px; }
.nf__art { height: 280px; }
.nf__board { height: 260px; }
.nf-link { padding: 18px 20px; }
.nf-link__title { font-size: 22px; }
}