@layer tokens, reset, base, vendor, layout, components, pages, utilities;
@layer tokens {
:root {
--ink: #0e2a31;
--sea-950: #082830;
--sea-900: #0b3540;
--sea-800: #0f4452;
--sea-700: #135466;
--sea-600: #1b6c80;
--sea-300: #9fc0c7;
--sea-200: #c5dbe0;
--sea-100: #dcebee;
--sea-50: #eef5f6;
--white: #ffffff;
--fog-50: #f6f8f8;
--fog-100: #edf1f2;
--fog-200: #e2e8ea;
--line: #d5dee0;
--line-strong: #7b8e93;
--muted: #56696f;
--amber-50: #fff5e3;
--amber-300: #ffc266;
--amber-400: #f6a623;
--amber-500: #e8940f;
--amber-700: #8f5300;
--dune-50: #e8f3ec;
--dune-600: #2e6e4e;
--flag-50: #fcebea;
--flag-600: #b3261e;
--bg: var(--white);
--bg-alt: var(--fog-50);
--surface: var(--white);
--text: var(--ink);
--text-muted: var(--muted);
--link: var(--sea-700);
--focus: var(--sea-600);
--cta: var(--amber-400);
--cta-hover: var(--amber-500);
--font-display: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
--font-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;--fs-xs: 0.8125rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.25rem;
--fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
--fs-2xl: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);
--fs-3xl: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);--lh-tight: 1.05;
--lh-snug: 1.25;
--lh-text: 1.55;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-8: 2rem;
--s-10: 2.5rem;
--s-12: 3rem;
--s-16: 4rem;
--s-20: 5rem;
--s-24: 6rem;
--section-y: clamp(3rem, 2rem + 4vw, 6rem);
--container: 80rem;
--container-narrow: 48rem;
--gutter: 1rem;
--header-h: 4rem;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-pill: 999px;
--shadow-1: 0 1px 2px rgb(14 42 49 / 0.06), 0 1px 1px rgb(14 42 49 / 0.04);
--shadow-2: 0 10px 28px -10px rgb(14 42 49 / 0.22), 0 2px 6px rgb(14 42 49 / 0.06);
--shadow-3: 0 28px 56px -16px rgb(14 42 49 / 0.34), 0 4px 12px rgb(14 42 49 / 0.08);
--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
--t-fast: 120ms;
--t-base: 200ms;
--t-slow: 320ms;
--z-sticky: 20;
--z-header: 30;
--z-dropdown: 40;
--z-dialog: 50;
--z-toast: 60;
}@media (min-width: 48rem) {
:root {
--gutter: 1.5rem;
--header-h: 4.5rem;
}
}@media (min-width: 80rem) {
:root {
--gutter: 2rem;
}
}@media (prefers-reduced-motion: reduce) {
:root {
--t-fast: 0ms;
--t-base: 0ms;
--t-slow: 0ms;
}
}
}

@font-face {
font-family: "Atkinson Hyperlegible Next";
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url("../fonts/atkinson-next-latin.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Atkinson Hyperlegible Next";
font-style: normal;
font-display: swap;
font-weight: 200 800;
src: url("../fonts/atkinson-next-latin-ext.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Sofia Sans Condensed";
font-style: normal;
font-display: swap;
font-weight: 1 1000;
src: url("../fonts/sofia-condensed-latin.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Sofia Sans Condensed";
font-style: normal;
font-display: swap;
font-weight: 1 1000;
src: url("../fonts/sofia-condensed-latin-ext.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
body { min-height: 100dvh; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
}
@layer base {
html {
color-scheme: light;
scroll-padding-top: calc(var(--header-h) + var(--s-4));
@media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; }
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-text);
font-size: var(--fs-base);
line-height: var(--lh-text);
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: -0.005em;
text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 750; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p, li { text-wrap: pretty; }
strong, b { font-weight: 700; }
small { font-size: var(--fs-sm); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--amber-300); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); }
.num { font-variant-numeric: tabular-nums; }
}
@layer utilities {
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.skip-link {
position: fixed;
top: var(--s-2); left: var(--s-2);
z-index: calc(var(--z-toast) + 1);
padding: var(--s-3) var(--s-4);
background: var(--ink); color: var(--white);
border-radius: var(--r-md);
font-weight: 700;
text-decoration: none;
transform: translateY(-150%);
transition: transform var(--t-base) var(--ease-out);
&:focus-visible { transform: none; }
}
.muted { color: var(--text-muted); }
.is-locked, .is-locked body { overflow: hidden; }
.nowrap { white-space: nowrap; }
}
@layer layout {
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }main { display: block; }.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section + .section:not(.section--alt, .section--sea) { padding-top: 0; }
.section-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--s-2) var(--s-6);
margin-bottom: var(--s-6);
}
.section-head__text { max-width: 44rem; }
.section-head__lead { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-md); }
.section-head__action {
display: inline-flex; align-items: center; gap: var(--s-1);
font-weight: 700; text-decoration: none; white-space: nowrap;
.icon { transition: transform var(--t-fast) var(--ease-out); }
&:hover .icon { transform: translateX(3px); }
}.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-2)); }
.grid-cards {
display: grid;
gap: var(--s-6) var(--s-5);
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 17rem)), 1fr));
}
.scroller {
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--scroller-item, min(80%, 20rem));
gap: var(--s-4);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
padding-inline: var(--gutter);
margin-inline: calc(var(--gutter) * -1);
padding-bottom: var(--s-2);
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
> * { scroll-snap-align: start; }
}
}
@layer components {
.icon {
width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: var(--icon-stroke, 1.75);
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
.btn {
--btn-h: 2.75rem;
--btn-px: 1.125rem;
--btn-bg: var(--cta);
--btn-fg: var(--ink);
--btn-border: transparent;
--btn-bg-hover: var(--cta-hover);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: var(--btn-h);
padding: 0 var(--btn-px);
border: 1.5px solid var(--btn-border);
border-radius: var(--r-md);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-text);
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.1;
text-decoration: none;
white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);& .icon { width: 1.25rem; height: 1.25rem; }
&:hover { background: var(--btn-bg-hover); text-decoration: none; }
&:active:not(:disabled) { transform: translateY(1px); }
&:disabled, &[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
}
.btn--sm { --btn-h: 2.25rem; --btn-px: 0.875rem; font-size: var(--fs-sm); & .icon { width: 1.125rem; height: 1.125rem; } }
.btn--lg { --btn-h: 3.25rem; --btn-px: 1.5rem; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { width: var(--btn-h); padding: 0; }.btn--secondary { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--ink); --btn-bg-hover: var(--fog-100); }
.btn--solid { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bg-hover: var(--sea-800); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--sea-700); --btn-bg-hover: var(--sea-50); }
.btn--inverse { --btn-bg: rgb(255 255 255 / 0.08); --btn-fg: var(--white); --btn-border: rgb(255 255 255 / 0.32); --btn-bg-hover: rgb(255 255 255 / 0.16); }
.btn[aria-busy="true"] {
pointer-events: none;
& .btn__icon { visibility: hidden; }
&::after {
content: "";
width: 1.1rem; height: 1.1rem;
margin-left: calc(-1 * (1.25rem + var(--s-2)));
order: -1;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
}@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn {
display: inline-grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgb(255 255 255 / 0.94);
color: var(--ink);
box-shadow: var(--shadow-1);
transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
& .icon { width: 1.25rem; height: 1.25rem; }
&:hover { background: var(--white); transform: scale(1.06); }
&:active { transform: scale(0.96); }
}
.fav-btn[aria-pressed="true"] .icon { fill: var(--flag-600); stroke: var(--flag-600); }
.fav-btn.is-popping .icon { animation: pop 320ms var(--ease-out); }
@keyframes pop { 40% { transform: scale(1.3); } }
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: 2.5rem;
padding: 0 var(--s-4);
border: 1.5px solid var(--line);
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
& .icon { width: 1.125rem; height: 1.125rem; }
&:hover { border-color: var(--ink); text-decoration: none; }
&[aria-pressed="true"], &[aria-current="page"], &.is-selected { background: var(--ink); border-color: var(--ink); color: var(--white); }
&:disabled, &.is-disabled { opacity: 0.45; pointer-events: none; }
}
.chip__count { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count, .chip[aria-current="page"] .chip__count { color: var(--sea-200); }
.chip--removable { padding-right: var(--s-2); background: var(--sea-50); border-color: var(--sea-100); }
.chip--removable .icon { width: 1rem; height: 1rem; color: var(--sea-700); }
.badge {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: 1.5rem;
padding: 0 var(--s-2);
border-radius: var(--r-sm);
background: var(--fog-100);
color: var(--ink);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1;
white-space: nowrap;
& .icon { width: 0.95rem; height: 0.95rem; }
}
.badge--success { background: var(--dune-50); color: var(--dune-600); }
.badge--warning { background: var(--amber-50); color: var(--amber-700); }
.badge--danger { background: var(--flag-50); color: var(--flag-600); }
.badge--info { background: var(--sea-50); color: var(--sea-700); }
.badge--solid { background: var(--ink); color: var(--white); }
.badge--count {
min-width: 1.25rem; min-height: 1.25rem; justify-content: center; padding: 0 0.3rem;
border-radius: var(--r-pill); background: var(--amber-400); color: var(--ink); font-size: 0.6875rem;
}
@media (hover: hover) {
[data-tooltip] { position: relative; }
[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
z-index: var(--z-dropdown);
translate: -50% 4px;
padding: 6px 10px;
border-radius: var(--r-sm);
background: var(--ink);
color: var(--white);
font: 600 var(--fs-xs) / 1.3 var(--font-text);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out);
transition-delay: 0ms;
}
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before {
opacity: 1;
translate: -50% 0;
transition-delay: 350ms;
}
[data-tooltip-pos="bottom"]::before { bottom: auto; top: calc(100% + 8px); }
}
}
@layer components {
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 700; }
.field__optional { color: var(--text-muted); font-weight: 400; }
.field__hint { color: var(--text-muted); font-size: var(--fs-xs); }
.field__error {
display: flex; align-items: flex-start; gap: 6px;
color: var(--flag-600); font-size: var(--fs-sm); font-weight: 600;
& .icon { width: 1.1rem; height: 1.1rem; margin-top: 1px; }
}
.field__error:empty { display: none; }
.input, .select, .textarea {
width: 100%;
min-height: 3rem;
padding: 0 var(--s-4);
border: 1.5px solid var(--line-strong);
border-radius: var(--r-md);
background: var(--white);
color: var(--ink);
font-size: 1rem;
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
&::placeholder { color: #6c7e83; opacity: 1; }
&:hover { border-color: var(--ink); }
&:focus { outline: none; border-color: var(--sea-700); box-shadow: 0 0 0 3px var(--sea-100); }
&[aria-invalid="true"] { border-color: var(--flag-600); box-shadow: 0 0 0 3px var(--flag-50); }
&:disabled { background: var(--fog-100); color: var(--text-muted); cursor: not-allowed; }
}
.textarea { min-height: 8rem; padding: var(--s-3) var(--s-4); line-height: var(--lh-text); resize: vertical; }
.select {
appearance: none;
padding-right: 2.75rem;
background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2a31' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.25rem;
cursor: pointer;
}
.input-wrap { position: relative; }
.input-wrap > .icon { position: absolute; left: 0.875rem; top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
.input-wrap > .input { padding-left: 2.75rem; }
.check {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: 2.75rem;
cursor: pointer;
user-select: none;
& > .icon { width: 1.25rem; height: 1.25rem; color: var(--sea-700); }
}
.check__label { flex: 1; line-height: 1.3; }
.check__count { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.check.is-empty { color: var(--text-muted); }
.check.is-empty > .icon { color: var(--line-strong); }
.check input {
appearance: none;
flex: none;
display: grid;
place-items: center;
width: 1.375rem;
height: 1.375rem;
margin: 0;
border: 1.5px solid var(--line-strong);
border-radius: 6px;
background: var(--white);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
&::after {
content: "";
width: 0.8rem;
height: 0.8rem;
background: var(--white);
clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
transform: scale(0);
transition: transform var(--t-fast) var(--ease-out);
}
&:checked { background: var(--ink); border-color: var(--ink); }
&:checked::after { transform: scale(1); }
&:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
&:hover:not(:checked) { border-color: var(--ink); }
}
.check input[type="radio"] {
border-radius: 50%;
&::after { clip-path: circle(50%); width: 0.55rem; height: 0.55rem; }
}
.switch {
display: inline-flex; align-items: center; gap: var(--s-3);
font-size: var(--fs-sm); font-weight: 600; cursor: pointer; user-select: none;
& input {
appearance: none;
position: relative;
width: 2.5rem; height: 1.5rem;
margin: 0;
border-radius: var(--r-pill);
background: var(--line-strong);
cursor: pointer;
transition: background-color var(--t-base) var(--ease-out);
&::after {
content: "";
position: absolute; top: 3px; left: 3px;
width: 1.125rem; height: 1.125rem;
border-radius: 50%;
background: var(--white);
box-shadow: var(--shadow-1);
transition: translate var(--t-base) var(--ease-out);
}
&:checked { background: var(--dune-600); }
&:checked::after { translate: 1rem 0; }
}
}
.switch--row { width: 100%; justify-content: space-between; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); }
.stepper + .stepper { border-top: 1px solid var(--line); }
.stepper__label { display: grid; line-height: 1.3; }
.stepper__hint { color: var(--text-muted); font-size: var(--fs-sm); }
.stepper__controls { display: flex; align-items: center; gap: var(--s-3); }
.stepper__value { min-width: 1.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper__btn {
display: grid; place-items: center;
width: 2.25rem; height: 2.25rem;
border: 1.5px solid var(--line-strong);
border-radius: 50%;
color: var(--ink);
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
& .icon { width: 1.1rem; height: 1.1rem; }
&:hover:not(:disabled) { border-color: var(--ink); background: var(--fog-50); }
&:disabled { opacity: 0.35; cursor: not-allowed; }
}
.price-range { --lo: 0%; --hi: 100%; display: grid; gap: var(--s-3); }
.price-range__hist {
display: flex; align-items: flex-end; gap: 2px; height: 3rem;
& span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--line); transition: background-color var(--t-fast); }
& span.is-in { background: var(--sea-600); }
}
.price-range__track { position: relative; height: 1.5rem; }
.price-range__track::before {
content: ""; position: absolute; inset: 50% 0 auto; height: 4px; translate: 0 -50%; border-radius: 2px;
background: linear-gradient(to right, var(--line) var(--lo), var(--ink) var(--lo), var(--ink) var(--hi), var(--line) var(--hi));
}
.price-range input[type="range"] {
position: absolute; inset: 0; width: 100%; margin: 0;
appearance: none; background: none; pointer-events: none;
&::-webkit-slider-thumb {
appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
background: var(--white); border: 2px solid var(--ink); box-shadow: var(--shadow-1);
pointer-events: auto; cursor: grab;
}
&::-moz-range-thumb {
width: 1.25rem; height: 1.25rem; border-radius: 50%;
background: var(--white); border: 2px solid var(--ink); box-shadow: var(--shadow-1);
pointer-events: auto; cursor: grab;
}
&:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
&:focus-visible { outline: none; }
}
.price-range__inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s-2); }
.price-range__inputs .input { min-height: 2.75rem; }
.price-range__dash { padding-bottom: 0.7rem; color: var(--text-muted); }
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 36rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__consent { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.form__consent .check { align-items: flex-start; min-height: 0; font-size: var(--fs-sm); color: var(--ink); }
.form__consent .check input { margin-top: 1px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
}
@layer components {
.demo-bar {
padding: var(--s-2) var(--gutter);
background: var(--amber-50);
color: var(--amber-700);
font-size: var(--fs-xs);
font-weight: 600;
text-align: center;
}
.site-header {
--header-fg: var(--ink);
--header-bg: var(--white);
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--header-bg);
color: var(--header-fg);
border-bottom: 1px solid var(--line);
transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.site-header[data-theme="sea"] {
--header-fg: var(--white);
--header-bg: var(--sea-950);
border-bottom-color: transparent;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgb(14 42 49 / 0.25); }
.site-header__inner {
display: flex;
align-items: center;
gap: var(--s-4);
height: var(--header-h);
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: inherit;
text-decoration: none;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1;
&:hover { text-decoration: none; }
}
.logo__mark { width: 2rem; height: 2rem; flex: none; }
.logo__tld { font-weight: 500; opacity: 0.6; }
.site-nav { display: none; margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
.site-nav__link {
display: inline-flex; align-items: center; gap: var(--s-2);
min-height: 2.5rem; padding: 0 var(--s-3);
border-radius: var(--r-md);
color: inherit; font-weight: 600; text-decoration: none;
transition: background-color var(--t-fast) var(--ease-out);
&:hover { background: color-mix(in srgb, currentColor 8%, transparent); text-decoration: none; }
&[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--amber-400); border-radius: var(--r-md) var(--r-md) 0 0; }
}
.site-header__actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.header-btn {
position: relative;
display: inline-grid; place-items: center;
width: 2.75rem; height: 2.75rem;
border-radius: 50%;
color: inherit;
transition: background-color var(--t-fast) var(--ease-out);
&:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
& .icon { width: 1.5rem; height: 1.5rem; }
& .badge--count { position: absolute; top: 2px; right: 0; }
}
.header-cta { display: none; }
.header-search {
display: flex;
align-items: center;
gap: var(--s-2);
min-width: 0;
flex: 1;
max-width: 30rem;
min-height: 2.75rem;
padding: 0 var(--s-2) 0 var(--s-4);
border: 1.5px solid var(--line);
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink);
text-align: left;
box-shadow: var(--shadow-1);
transition: border-color var(--t-fast) var(--ease-out), opacity var(--t-base) var(--ease-out), translate var(--t-base) var(--ease-out);
&:hover { border-color: var(--ink); }
& .icon { color: var(--sea-700); }
}
.header-search__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }
.header-search__go {
display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%;
background: var(--amber-400); color: var(--ink);
& .icon { color: var(--ink); width: 1.1rem; height: 1.1rem; }
}
.site-header[data-theme="sea"] .header-search { display: none; }
.site-header:not([data-theme]) .header-search { animation: pop-in var(--t-base) var(--ease-out); }
@media (min-width: 64rem) {
.site-nav { display: block; }
.site-header__actions { margin-left: 0; }
.header-cta { display: inline-flex; }
.menu-btn { display: none; }
.site-header:has(.header-search:not([hidden])):not([data-theme]) .site-nav { display: none; }
.site-header:has(.header-search:not([hidden])):not([data-theme]) .menu-btn { display: inline-grid; }
}
@media (min-width: 80rem) {
.site-header:has(.header-search:not([hidden])):not([data-theme]) .site-nav { display: block; }
.site-header:has(.header-search:not([hidden])):not([data-theme]) .menu-btn { display: none; }
}
.drawer {
width: min(24rem, 100vw);
height: 100dvh;
max-height: none;
margin: 0 0 0 auto;
padding: 0;
border: 0;
background: var(--white);
color: var(--ink);
overflow-y: auto;
&::backdrop { background: rgb(8 40 48 / 0.5); }
&[open] { animation: drawer-in var(--t-slow) var(--ease-out); }
}
@keyframes drawer-in { from { translate: 100% 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.drawer__body { display: grid; gap: var(--s-6); padding: var(--s-6) var(--gutter) var(--s-10); }
.drawer__title { margin-bottom: var(--s-2); color: var(--text-muted); font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.drawer__links { display: grid; list-style: none; padding: 0; }
.drawer__links a {
display: flex; align-items: center; gap: var(--s-3); min-height: 3rem;
color: var(--ink); font-weight: 600; text-decoration: none;
border-bottom: 1px solid var(--fog-100);
& .icon { color: var(--sea-700); }
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); list-style: none; padding: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; opacity: 0.6; }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; &:hover { color: var(--ink); text-decoration: underline; } }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }
.site-footer {
position: relative;
margin-top: var(--section-y);
padding: var(--s-16) 0 var(--s-8);
background: var(--sea-950);
color: var(--sea-200);
font-size: var(--fs-sm);
}
.site-footer a { color: var(--white); text-decoration: none; &:hover { text-decoration: underline; } }
.site-footer__top { display: grid; gap: var(--s-10); }
.site-footer__about { max-width: 22rem; display: grid; gap: var(--s-4); }
.site-footer__about p { color: var(--sea-300); }
.site-footer__cols { display: grid; gap: var(--s-8) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.site-footer h2 { margin-bottom: var(--s-3); color: var(--white); font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 700; }
.site-footer ul { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.site-footer__bottom {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
margin-top: var(--s-12); padding-top: var(--s-6);
border-top: 1px solid rgb(255 255 255 / 0.12);
color: var(--sea-300);
font-size: var(--fs-xs);
}
.site-footer__bottom a { color: var(--sea-200); text-decoration: underline; }
@media (min-width: 64rem) {
.site-footer__top { grid-template-columns: 1fr 3fr; }
}
}@layer components {
@media (max-width: 35.99rem) {
.site-header:has(.header-search):not([data-theme]) .logo > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site-header:has(.header-search):not([data-theme]) .site-header__inner { gap: var(--s-2); }
}
}
@layer components {
.dialog {
width: min(36rem, calc(100vw - 2 * var(--gutter)));
max-height: min(90dvh, 52rem);
padding: 0;
border: 0;
border-radius: var(--r-xl);
background: var(--white);
color: var(--ink);
box-shadow: var(--shadow-3);
overflow: hidden;
&::backdrop { background: rgb(8 40 48 / 0.55); }
&[open] { display: flex; flex-direction: column; animation: dialog-in var(--t-slow) var(--ease-out); }
&[open]::backdrop { animation: fade-in var(--t-slow) var(--ease-out); }
}
@keyframes dialog-in { from { opacity: 0; translate: 0 12px; scale: 0.98; } }
@keyframes fade-in { from { opacity: 0; } }.dialog__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
min-height: 4rem; padding: 0 var(--s-3) 0 var(--s-6);
border-bottom: 1px solid var(--line);
}
.dialog__title { font-size: var(--fs-lg); }
.dialog__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-6); }
.dialog__foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-4) var(--s-6);
border-top: 1px solid var(--line);
background: var(--white);
}
@media (max-width: 47.99rem) {
.dialog--sheet {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
border-radius: 0;
&[open] { animation: sheet-in var(--t-slow) var(--ease-out); }
}
}
@keyframes sheet-in { from { translate: 0 100%; } }.close-btn {
display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
color: var(--ink);
&:hover { background: var(--fog-100); }
& .icon { width: 1.4rem; height: 1.4rem; }
}
.dropdown { position: relative; }
.dropdown__panel {
position: absolute;
top: calc(100% + var(--s-2));
left: 0;
z-index: var(--z-dropdown);
min-width: 100%;
padding: var(--s-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--white);
box-shadow: var(--shadow-2);
transform-origin: top;
&[data-align="end"] { left: auto; right: 0; }
&:not([hidden]) { animation: pop-in var(--t-base) var(--ease-out); }
}
@keyframes pop-in { from { opacity: 0; translate: 0 -4px; } }
.menu { display: grid; list-style: none; padding: 0; min-width: 14rem; }
.menu__item {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
width: 100%; min-height: 2.75rem; padding: 0 var(--s-3);
border-radius: var(--r-md);
color: var(--ink); font-weight: 500; text-align: left; text-decoration: none;
&:hover, &:focus-visible { background: var(--fog-100); text-decoration: none; }
&[aria-checked="true"], &[aria-current="true"] { font-weight: 700; }
& .icon { color: var(--sea-700); visibility: hidden; }
&[aria-checked="true"] .icon, &[aria-current="true"] .icon { visibility: visible; }
}
.alert {
--alert-bg: var(--sea-50);
--alert-fg: var(--sea-700);
display: flex;
gap: var(--s-3);
padding: var(--s-4);
border-radius: var(--r-lg);
background: var(--alert-bg);
color: var(--ink);
& > .icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--alert-fg); }
}
.alert__body { display: grid; gap: var(--s-1); }
.alert__title { font-weight: 700; }
.alert--success { --alert-bg: var(--dune-50); --alert-fg: var(--dune-600); }
.alert--warning { --alert-bg: var(--amber-50); --alert-fg: var(--amber-700); }
.alert--danger { --alert-bg: var(--flag-50); --alert-fg: var(--flag-600); }
.toasts {
position: fixed;
left: 50%;
bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
z-index: var(--z-toast);
display: grid;
gap: var(--s-2);
width: min(28rem, calc(100vw - 2 * var(--gutter)));
translate: -50% 0;
pointer-events: none;
}
.toast {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-lg);
background: var(--ink);
color: var(--white);
font-weight: 600;
box-shadow: var(--shadow-3);
pointer-events: auto;
animation: toast-in var(--t-slow) var(--ease-out);
& .icon { flex: none; color: var(--amber-300); }
& a, & button { margin-left: auto; color: var(--amber-300); font-weight: 700; text-decoration: underline; }
&.is-leaving { animation: toast-out var(--t-base) var(--ease-in-out) forwards; }
}
@keyframes toast-in { from { opacity: 0; translate: 0 12px; } }
@keyframes toast-out { to { opacity: 0; translate: 0 8px; } }
.tabs__list { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs__tab {
position: relative;
min-height: 3rem; padding: 0 var(--s-4);
color: var(--text-muted); font-weight: 700; white-space: nowrap;
transition: color var(--t-fast) var(--ease-out);
&::after { content: ""; position: absolute; inset: auto var(--s-4) -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color var(--t-fast) var(--ease-out); }
&:hover { color: var(--ink); }
&[aria-selected="true"] { color: var(--ink); }
&[aria-selected="true"]::after { background: var(--amber-400); }
}
.tabs__panel { padding-top: var(--s-6); }
.tabs__panel:focus-visible { outline-offset: 4px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.table { width: 100%; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; }
.table thead th { background: var(--fog-50); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.table tbody tr + tr td, .table tbody tr + tr th { border-top: 1px solid var(--line); }
.table tbody th { font-weight: 700; }
.table .num { text-align: right; white-space: nowrap; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); }
.pagination__list { display: flex; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
.pagination__link {
display: grid; place-items: center;
min-width: 2.75rem; height: 2.75rem; padding: 0 var(--s-2);
border-radius: var(--r-md);
color: var(--ink); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
&:hover { background: var(--fog-100); text-decoration: none; }
&[aria-current="page"] { background: var(--ink); color: var(--white); }
}
.pagination__gap { min-width: 1.5rem; text-align: center; color: var(--text-muted); }
@media (max-width: 35.99rem) { .pagination__list .is-far { display: none; } }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
min-height: 3.75rem; padding: var(--s-3) 0;
font-weight: 700; font-size: var(--fs-md); cursor: pointer; list-style: none;
&::-webkit-details-marker { display: none; }
& .icon { flex: none; color: var(--sea-700); transition: rotate var(--t-base) var(--ease-out); }
&:hover { color: var(--sea-700); }
}
.accordion details[open] summary .icon { rotate: 180deg; }
.accordion__body { padding-bottom: var(--s-5); max-width: 44rem; color: #34494f; }
.accordion details::details-content { transition: height var(--t-slow) var(--ease-out), content-visibility var(--t-slow) allow-discrete; height: 0; overflow: clip; }
.accordion details[open]::details-content { height: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.empty {
display: grid; justify-items: center; gap: var(--s-3);
padding: var(--s-12) var(--s-6);
border: 1.5px dashed var(--line);
border-radius: var(--r-xl);
text-align: center;
& > .icon { width: 3rem; height: 3rem; color: var(--sea-600); --icon-stroke: 1.5; }
& h2, & h3 { font-size: var(--fs-xl); }
& p { max-width: 32rem; color: var(--text-muted); }
}
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
.skeleton {
border-radius: var(--r-sm);
background: linear-gradient(90deg, var(--fog-100) 0%, var(--fog-50) 50%, var(--fog-100) 100%) 0 0 / 200% 100%;
animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.progress-bar {
position: absolute; inset: 0 0 auto; height: 3px; overflow: hidden; border-radius: 3px;
&::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--amber-400); animation: progress 1s var(--ease-in-out) infinite; }
}
@keyframes progress { from { translate: -100% 0; } to { translate: 250% 0; } }
}
@layer components {
.lcard {
position: relative;
display: grid;
align-content: start;
gap: var(--s-3);
border-radius: var(--r-lg);
color: var(--ink);
isolation: isolate;
}
.lcard__media {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--fog-100);
}
.lcard__slides {
display: flex;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
.lcard__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.lcard__slide img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.lcard__nophoto {
position: absolute; inset: 0;
display: grid; place-content: center; justify-items: center; gap: var(--s-2);
background: linear-gradient(160deg, var(--fog-50), var(--fog-100));
color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600;
& .icon { width: 2.5rem; height: 2.5rem; color: var(--sea-700); opacity: 0.55; }
}
.lcard--compact .lcard__nophoto span { display: none; }.lcard__nav {
position: absolute; top: 50%; z-index: 2;
display: grid; place-items: center;
width: 2rem; height: 2rem; translate: 0 -50%;
border-radius: 50%;
background: rgb(255 255 255 / 0.92); color: var(--ink);
box-shadow: var(--shadow-1);
opacity: 0;
transition: opacity var(--t-fast) var(--ease-out), scale var(--t-fast) var(--ease-out);
& .icon { width: 1.1rem; height: 1.1rem; }
&:hover { scale: 1.08; }
&[disabled] { visibility: hidden; }
}
.lcard__nav--prev { left: var(--s-2); }
.lcard__nav--next { right: var(--s-2); }
@media (hover: hover) {
.lcard:hover .lcard__nav, .lcard__nav:focus-visible { opacity: 1; }
}
.lcard__dots {
position: absolute; left: 50%; bottom: var(--s-2); z-index: 2;
display: flex; gap: 5px; translate: -50% 0;
pointer-events: none;
& span { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.55); transition: background-color var(--t-fast), scale var(--t-fast); }
& span.is-active { background: var(--white); scale: 1.2; }
}
.lcard__fav { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 3; }
.lcard__badges { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s-1); max-width: calc(100% - 3.5rem); }
.lcard__badges .badge { background: rgb(255 255 255 / 0.95); box-shadow: var(--shadow-1); }
.lcard__badges .badge--success { color: var(--dune-600); }.lcard__body { display: grid; gap: var(--s-2); min-width: 0; }
.lcard__kicker { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.3; }
.lcard__title { font-size: var(--fs-lg); line-height: 1.2; }
.lcard__link {
color: inherit; text-decoration: none;
&::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
&:focus-visible { outline: none; }
&:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
}
.lcard__tagline { color: #3e5358; font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.lcard__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); list-style: none; padding: 0; font-size: var(--fs-sm); }
.lcard__facts li { display: inline-flex; align-items: center; gap: 6px; }
.lcard__facts .icon { width: 1.1rem; height: 1.1rem; color: var(--sea-700); }
.sea-distance { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 750; letter-spacing: 0.01em; }
.sea-distance small { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); letter-spacing: 0; }.lcard__amenities { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; }
.lcard__amenities li {
display: inline-flex; align-items: center; gap: 5px;
min-height: 1.75rem; padding: 0 var(--s-2);
border-radius: var(--r-sm);
background: var(--fog-50);
font-size: var(--fs-xs); font-weight: 600;
& .icon { width: 1rem; height: 1rem; color: var(--sea-700); }
}.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; line-height: 1.2; }
.price__from { color: var(--text-muted); font-size: var(--fs-sm); }
.price__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price__unit { color: var(--text-muted); font-size: var(--fs-sm); }
.price--ask .price__value { font-family: var(--font-text); font-size: var(--fs-base); font-weight: 700; }.lcard__foot { display: flex; align-items: end; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-1); }@media (hover: hover) {
.lcard:hover .lcard__slide img { scale: 1.03; }
.lcard:hover .lcard__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
}
@container results (min-width: 40rem) {
.lcard--row {
grid-template-columns: minmax(16rem, 38%) 1fr;
gap: var(--s-5);
padding: var(--s-3);
border: 1px solid var(--line);
background: var(--white);
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
&:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
& .lcard__media { aspect-ratio: auto; min-height: 15rem; height: 100%; border-radius: var(--r-md); }
& .lcard__body { padding: var(--s-2) var(--s-2) var(--s-2) 0; align-content: start; gap: var(--s-3); }
& .lcard__foot { margin-top: auto; padding-top: var(--s-2); align-self: end; }
& .lcard__link::after { border-radius: var(--r-lg); }
}
}
.lcard--compact {
grid-template-columns: 7.5rem 1fr;
gap: var(--s-3);
padding: var(--s-2);
border: 1px solid var(--line);
background: var(--white);
& .lcard__media { aspect-ratio: 1; border-radius: var(--r-md); }
& .lcard__title { font-size: var(--fs-base); }
& .lcard__kicker { font-size: var(--fs-xs); }
& .lcard__facts { font-size: var(--fs-xs); gap: var(--s-1) var(--s-3); }
& .price__value { font-size: 1.25rem; }
& .lcard__body { gap: var(--s-1); align-content: center; }
&.is-highlighted { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
}
.tcard {
position: relative;
display: grid;
gap: var(--s-3);
padding: var(--s-4) var(--s-4) var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--white);
color: var(--ink);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), translate var(--t-base) var(--ease-out);
&:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); text-decoration: none; translate: 0 -2px; }
&:focus-within { border-color: var(--line-strong); }
}
.tcard__link {
color: inherit; text-decoration: none;
&::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
&:focus-visible { outline: none; }
&:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
}
.tcard__map { position: relative; aspect-ratio: 1000 / 380; border-radius: var(--r-md); background: var(--fog-50); overflow: hidden; }
.tcard__map svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--sea-100); }
.tcard__dot {
position: absolute; width: 0.75rem; height: 0.75rem; translate: -50% -50%;
border: 2.5px solid var(--white); border-radius: 50%;
background: var(--amber-500);
box-shadow: 0 0 0 1.5px var(--ink);
}
.tcard__name { font-size: var(--fs-xl); line-height: 1.05; }
.tcard__region { color: var(--text-muted); font-size: var(--fs-sm); }
.tcard__stats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-sm); }
.tcard__stats strong { font-family: var(--font-display); font-size: var(--fs-md); }
.type-tile {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--s-1) var(--s-3);
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--white);
color: var(--ink);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
&:hover { border-color: var(--ink); text-decoration: none; }
& > .icon { grid-row: span 2; width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: var(--r-md); background: var(--sea-50); color: var(--sea-700); }
}
.type-tile__name { font-weight: 700; line-height: 1.2; }
.type-tile__count { color: var(--text-muted); font-size: var(--fs-sm); }
}
@layer components {
.search {
position: relative;
display: grid;
gap: var(--s-2);
padding: var(--s-2);
border-radius: var(--r-xl);
background: var(--white);
color: var(--ink);
box-shadow: var(--shadow-3);
}
.search__field {
position: relative;
display: grid;
align-content: center;
min-height: 3.75rem;
padding: var(--s-2) var(--s-4) var(--s-2) 3.25rem;
border-radius: var(--r-lg);
background: var(--fog-50);
text-align: left;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
&:hover { background: var(--fog-100); }
&:focus-within, &.is-open { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
& > .icon { position: absolute; left: var(--s-4); top: 50%; translate: 0 -50%; width: 1.4rem; height: 1.4rem; color: var(--sea-700); }
}
.search__label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); line-height: 1.2; }
.search__value { overflow: hidden; font-weight: 700; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.search__value.is-placeholder { color: #5a6d72; font-weight: 500; }
.search__input {
width: 100%; min-width: 0; padding: 0; border: 0; background: none;
font-weight: 700; line-height: 1.35;
&::placeholder { color: #5a6d72; font-weight: 500; opacity: 1; }
&:focus { outline: none; }
}
.search__clear {
position: absolute; right: var(--s-2); top: 50%; translate: 0 -50%;
display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
color: var(--text-muted);
&:hover { background: var(--fog-100); color: var(--ink); }
& .icon { width: 1rem; height: 1rem; }
}
.search__submit { min-height: 3.75rem; border-radius: var(--r-lg); font-size: var(--fs-md); }
.search__trigger { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.search__trigger:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.search-pop { z-index: calc(var(--z-dropdown) + 1); }
@media (min-width: 60rem) {
.search { grid-template-columns: 1.7fr 1.25fr 1fr auto; gap: 0; padding: var(--s-2); }
.search__field { background: none; border-radius: var(--r-lg); }
.search__field + .search__field::before {
content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line);
transition: opacity var(--t-fast);
}
.search__field:hover::before, .search__field:hover + .search__field::before,
.search__field.is-open::before, .search__field.is-open + .search__field::before { opacity: 0; }
.search__submit { margin-left: var(--s-2); padding-inline: var(--s-8); }
}
.search--compact { box-shadow: none; border: 1px solid var(--line); padding: var(--s-1); }
.search--compact .search__field { min-height: 3.25rem; }
.search--compact .search__submit { min-height: 3.25rem; }
.search-pop {
position: absolute;
top: calc(100% + var(--s-2));
left: 0;
z-index: var(--z-dropdown);
width: max(100%, 24rem);
max-height: min(32rem, 70dvh);
overflow: auto;
padding: var(--s-3);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--white);
color: var(--ink);
box-shadow: var(--shadow-3);
cursor: default;
&:not([hidden]) { animation: pop-in var(--t-base) var(--ease-out); }
}
.search-pop--dates { width: auto; max-height: none; padding: var(--s-5); }
.search-pop__head { display: none; }
.search-pop__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); margin-top: var(--s-3); border-top: 1px solid var(--line); }
.search-pop__summary { font-weight: 700; }
@media (max-width: 59.99rem) {
.search-pop {
position: fixed;
inset: 0;
z-index: var(--z-dialog);
width: 100%;
max-height: none;
padding: 0 var(--gutter) var(--s-6);
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
&:not([hidden]) { animation: sheet-in var(--t-slow) var(--ease-out); }
}
.search-pop__head {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: var(--s-2);
min-height: 4rem; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
background: var(--white); border-bottom: 1px solid var(--line);
& .dialog__title { flex: 1; }
}
.search-pop__foot { position: sticky; bottom: calc(-1 * var(--s-6)); margin-top: auto; padding: var(--s-4) 0 var(--s-6); background: var(--white); }
.search-pop--dates { padding: 0 var(--gutter) var(--s-6); }
}
.suggest__group + .suggest__group { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.suggest__title { padding: var(--s-2) var(--s-3); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.suggest__list { list-style: none; padding: 0; }
.suggest__option {
display: grid;
grid-template-columns: 2.5rem 1fr auto;
align-items: center;
gap: var(--s-3);
min-height: 3.5rem;
padding: var(--s-2) var(--s-3);
border-radius: var(--r-md);
cursor: pointer;
& > .icon { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: var(--r-md); background: var(--sea-50); color: var(--sea-700); }
&[aria-selected="true"] { background: var(--fog-100); }
}
.suggest__name { font-weight: 700; line-height: 1.25; }
.suggest__name mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--amber-400); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.suggest__meta { display: block; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.suggest__count { color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.suggest__empty { padding: var(--s-4) var(--s-3); color: var(--text-muted); }
.dates__presets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
calendar-range {
display: block;
--color-accent: var(--ink);
--color-text-on-accent: var(--white);
}
.dates__months { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) { .dates__months { grid-template-columns: repeat(2, 17.5rem); } }
calendar-month { width: 100%; }
calendar-month::part(heading) { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; text-transform: capitalize; }
calendar-month::part(head) { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
calendar-month::part(td) { padding: 1px 0; }
calendar-month::part(button) {
width: 100%; height: 2.5rem; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
transition: background-color var(--t-fast);
}
calendar-month::part(button):hover { background: var(--fog-100); }
calendar-month::part(today) { box-shadow: inset 0 0 0 1.5px var(--amber-500); }
calendar-month::part(range-inner) { border-radius: 0; background: var(--sea-50); color: var(--ink); }
calendar-month::part(range-start) { border-radius: var(--r-md) 0 0 var(--r-md); background: var(--ink); color: var(--white); }
calendar-month::part(range-end) { border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--ink); color: var(--white); }
calendar-month::part(range-start range-end) { border-radius: var(--r-md); }
calendar-month::part(disabled) { color: var(--line-strong); text-decoration: line-through; opacity: 0.6; }
.dates__nav { display: flex; justify-content: space-between; margin-bottom: calc(-1 * 2.25rem); position: relative; z-index: 1; pointer-events: none; }
.dates__nav button { pointer-events: auto; }
}@layer components {
.search.search--dialog {
grid-template-columns: 1fr;
gap: var(--s-3);
padding: 0;
box-shadow: none;
}
.search--dialog .search__field { background: var(--fog-50); }
.search--dialog .search__field + .search__field::before { display: none; }
.search--dialog .search__submit { margin-left: 0; }
.dialog--search { width: min(48rem, calc(100vw - 2 * var(--gutter))); overflow: visible; }
.dialog--search .dialog__body { overflow: visible; }
@media (min-width: 48rem) { .dialog--search .dialog__body { min-height: 30rem; } }
calendar-month::part(disallowed) {
color: #8a9a9e;
text-decoration: line-through;
background: repeating-linear-gradient(-45deg, var(--fog-100) 0 3px, var(--white) 3px 6px);
cursor: not-allowed;
}
}
@layer components {
.coast {
--coast-max: 1680px;
--sand: #e9d6ad;
position: relative;
background: var(--sea-950);
}
.coast::before, .coast::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: max(0px, (100% - var(--coast-max)) / 2);
}
.coast::before { left: 0; background: linear-gradient(to bottom, var(--sea-950) var(--edge-l), var(--white) var(--edge-l)); }
.coast::after { right: 0; background: linear-gradient(to bottom, var(--sea-950) var(--edge-r), var(--white) var(--edge-r)); }.coast__frame {
position: relative;
max-width: var(--coast-max);
margin-inline: auto;
aspect-ratio: var(--coast-ratio);
background: var(--white);
}
.coast__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.coast__sea { fill: var(--sea-950); }
.coast__shore { fill: none; stroke: var(--sand); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }.coast__towns { position: absolute; inset: 0; list-style: none; padding: 0; margin: 0; }
.coast__town {
position: absolute;
left: var(--x);
top: var(--y);
width: 0;
height: 0;
}
.coast__link {
position: absolute;
left: 0;
top: 0;
display: block;
color: var(--ink);
text-decoration: none;
&::before { content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; }
&:focus-visible { outline: none; }
}
.coast__dot {
position: absolute;
left: -5px;
top: -5px;
width: 10px;
height: 10px;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--white);
transition: scale var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.coast__link:hover .coast__dot, .coast__link:focus-visible .coast__dot { background: var(--amber-400); scale: 1.35; }
.coast__link:focus-visible .coast__dot { box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--focus); }.coast__label, .coast__tip {
position: absolute;
white-space: nowrap;
pointer-events: none;
}
.coast__label {
padding: 2px 8px;
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink);
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.3;
box-shadow: 0 0 0 1px rgb(14 42 49 / 0.12), var(--shadow-1);
}
.coast__label { left: 0; top: 12px; opacity: 0; translate: -50% -4px; transition: opacity var(--t-fast), translate var(--t-fast); }
.coast__link:hover .coast__label, .coast__link:focus-visible .coast__label { opacity: 1; translate: -50% 0; z-index: 2; }
.coast__lead { position: absolute; left: 0; top: -0.75px; display: none; height: 1.5px; transform-origin: 0 50%; background: var(--ink); pointer-events: none; }
@media (min-width: 75rem) {
.has-d .coast__label,
.has-d .coast__link:hover .coast__label,
.has-d .coast__link:focus-visible .coast__label { opacity: 1; transition: none; left: var(--lx-d); top: var(--ly-d); translate: var(--tx-d) var(--ty-d); }
.lead-d .coast__lead { display: block; width: var(--ll-d); rotate: var(--la-d); }
}
@media (min-width: 48rem) and (max-width: 74.99rem) {
.has-t .coast__label,
.has-t .coast__link:hover .coast__label,
.has-t .coast__link:focus-visible .coast__label { opacity: 1; transition: none; left: var(--lx-t); top: var(--ly-t); translate: var(--tx-t) var(--ty-t); }
.lead-t .coast__lead { display: block; width: var(--ll-t); rotate: var(--la-t); }
}
@media (max-width: 47.99rem) {
.has-m .coast__label,
.has-m .coast__link:hover .coast__label,
.has-m .coast__link:focus-visible .coast__label { opacity: 1; transition: none; left: var(--lx-m); top: var(--ly-m); translate: var(--tx-m) var(--ty-m); }
.lead-m .coast__lead { display: block; width: var(--ll-m); rotate: var(--la-m); }
}.coast__tip {
left: 0;
bottom: 34px;
translate: -50% 4px;
padding: 6px 10px;
border-radius: var(--r-sm);
background: var(--ink);
color: var(--white);
font-size: var(--fs-xs);
font-weight: 600;
opacity: 0;
transition: opacity var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out);
}
.coast__link:hover .coast__tip, .coast__link:focus-visible .coast__tip { opacity: 1; translate: -50% 0; }
.coast__link:hover .coast__label, .coast__link:focus-visible .coast__label { opacity: 1; translate: -50% 0; z-index: 2; }
.label-left .coast__link:hover .coast__label, .label-right .coast__link:hover .coast__label,
.label-left .coast__link:focus-visible .coast__label, .label-right .coast__link:focus-visible .coast__label { translate: 0 -50%; }
.coast__town:hover, .coast__town:focus-within { z-index: 3; }
.coast { --gap-y: 11px; }
@media (max-width: 47.99rem) {
.coast { --gap-y: 8px; }
.coast__town:not(.has-m) { display: none; }
.coast__label { font-size: 0.75rem; padding: 1px 6px; }
.coast__dot { width: 8px; height: 8px; left: -4px; top: -4px; }
.coast__tip { display: none; }
}
}
@layer components {
.map-dialog {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--white);
color: var(--ink);
&[open] { animation: fade-in var(--t-base) var(--ease-out); }
&::backdrop { background: var(--sea-950); }
}
.map-view {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
height: 100%;
}
.map-view__bar {
display: flex;
align-items: center;
gap: var(--s-2);
min-height: 3.75rem;
padding: 0 var(--s-2) 0 var(--s-3);
border-bottom: 1px solid var(--line);
background: var(--white);
z-index: 2;
}
.map-view__title { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-md); white-space: nowrap; text-overflow: ellipsis; }
.map-view__bar .badge--count { margin-left: 2px; }
.map-view__panel { display: none; }
.map-view__stage { position: relative; min-height: 0; }
.map-view__map { position: absolute; inset: 0; background: #f2f4f3; }.map-view__loading, .map-view__error {
position: absolute; inset: 0; z-index: 3;
display: grid; place-content: center; justify-items: center; gap: var(--s-3);
background: rgb(242 244 243 / 0.9);
color: var(--text-muted); font-weight: 600; text-align: center;
}
.map-view__loading .progress-bar { position: relative; width: 12rem; }
.map-view__loading[hidden], .map-view__error[hidden] { display: none; }
.map-view__error .icon { width: 2rem; height: 2rem; color: var(--flag-600); }.map-view__redo { position: absolute; top: var(--s-3); left: 50%; z-index: 3; translate: -50% 0; box-shadow: var(--shadow-2); }
.map-view__carousel {
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
z-index: 3;
--scroller-item: min(86%, 22rem);
margin: 0;
padding-inline: var(--s-4);
scroll-padding-inline: var(--s-4);
}
.map-view__carousel:empty { display: none; }
.map-view__carousel .lcard { box-shadow: var(--shadow-2); }.map-view__popup {
position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 4;
width: min(24rem, calc(100% - 2 * var(--s-4)));
animation: pop-in var(--t-base) var(--ease-out);
}
.map-view__popup .lcard { box-shadow: var(--shadow-3); border-color: var(--ink); }
.map-view__popup-close { position: absolute; top: -0.75rem; right: -0.75rem; z-index: 5; width: 2rem; height: 2rem; background: var(--white); box-shadow: var(--shadow-2); }
.map-view__popup-close .icon { width: 1rem; height: 1rem; }@media (min-width: 64rem) {
.map-view {
grid-template-columns: 26rem 1fr;
grid-template-rows: auto 1fr;
}
.map-view__bar { grid-column: 1 / -1; }
.map-view__close { display: none; }
.map-view__panel {
display: flex;
flex-direction: column;
min-height: 0;
border-right: 1px solid var(--line);
background: var(--fog-50);
}
.map-view__carousel { display: none; }
}
@media (max-width: 63.99rem) {
.map-view__popup { display: none; }
.map-view__back .btn__label { display: none; }
}
.map-view__panel-head {
display: grid; gap: var(--s-2);
padding: var(--s-4);
border-bottom: 1px solid var(--line);
background: var(--white);
}
.map-view__count { font-weight: 700; }
.map-view__list {
flex: 1;
display: grid;
align-content: start;
gap: var(--s-2);
padding: var(--s-3);
overflow-y: auto;
overscroll-behavior: contain;
transition: opacity var(--t-base) var(--ease-out);
&.is-loading { opacity: 0.5; }
}
.map-view__more { padding: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.empty--compact { padding: var(--s-6) var(--s-4); }
.map-skeleton { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.map-skeleton > .skeleton { aspect-ratio: 1; border-radius: var(--r-md); }
.map-skeleton > span:last-child { display: grid; align-content: center; gap: var(--s-2); }
.map-skeleton > span:last-child .skeleton { height: 0.85rem; }
.map-skeleton > span:last-child .skeleton:nth-child(2) { width: 70%; height: 1.1rem; }
.map-skeleton > span:last-child .skeleton:nth-child(3) { width: 40%; }
:is(.pin, .home-pin):not(.maplibregl-marker) { position: relative; }
.pin {
display: block;
padding: 0 0 7px;
font-family: var(--font-display);
cursor: pointer;
transition: translate var(--t-fast) var(--ease-out);
}
.pin__label {
position: relative;
display: block;
padding: 4px 9px 5px;
border-radius: var(--r-pill);
background: var(--ink);
color: var(--white);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
box-shadow: 0 1px 2px rgb(14 42 49 / 0.25), 0 3px 10px -2px rgb(14 42 49 / 0.35);
transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), scale var(--t-fast) var(--ease-out);
}
.pin::after {
content: "";
position: absolute;
left: 50%;
bottom: 1px;
width: 10px;
height: 10px;
translate: -50% 0;
rotate: 45deg;
background: var(--ink);
border-radius: 0 0 2px 0;
transition: background-color var(--t-fast) var(--ease-out);
}
.pin.is-visited .pin__label, .pin.is-visited::after { background: #4d6268; }
.pin:hover, .pin.is-hover, .pin:focus-visible { z-index: 5; translate: 0 -2px; }
.pin:hover .pin__label, .pin.is-hover .pin__label, .pin:focus-visible .pin__label,
.pin.is-selected .pin__label { background: var(--amber-400); color: var(--ink); scale: 1.08; }
.pin:hover::after, .pin.is-hover::after, .pin:focus-visible::after, .pin.is-selected::after { background: var(--amber-400); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin__label { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--focus); }
.pin-cluster {
display: block;
border-radius: 50%;
font-family: var(--font-display);
font-size: 0.9375rem;
font-weight: 800;
cursor: zoom-in;
& > span {
display: grid;
place-items: center;
width: var(--size, 40px);
height: var(--size, 40px);
border: 3px solid var(--white);
border-radius: 50%;
background: var(--sea-700);
color: var(--white);
box-shadow: 0 0 0 1px rgb(14 42 49 / 0.2), var(--shadow-2);
transition: scale var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
&:hover > span, &:focus-visible > span { scale: 1.08; background: var(--ink); }
&:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
}
.map-view .maplibregl-ctrl-group { border-radius: var(--r-md); box-shadow: var(--shadow-2); overflow: hidden; }
.map-view .maplibregl-ctrl-group button { width: 2.5rem; height: 2.5rem; }
.map-view .maplibregl-ctrl-top-right { top: var(--s-2); right: var(--s-2); }
.map-view .maplibregl-ctrl-attrib { font-size: 0.6875rem; }
.listing-map { position: relative; height: 22rem; border-radius: var(--r-lg); overflow: hidden; background: var(--fog-100); }
.listing-map__canvas { position: absolute; inset: 0; }
.listing-map__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3); color: var(--text-muted); }
.home-pin {
display: grid; place-items: center;
width: 3rem; height: 3rem;
color: var(--ink);
&::before {
content: "";
position: absolute;
inset: 0;
border: 3px solid var(--white);
border-radius: 50% 50% 50% 0;
rotate: -45deg;
background: var(--amber-400);
box-shadow: var(--shadow-2);
}
& .icon { position: relative; width: 1.4rem; height: 1.4rem; }
}
}
@layer components {
.gallery { position: relative; margin-top: var(--s-5); }
.gallery__grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-inline: calc(-1 * var(--gutter));
&::-webkit-scrollbar { display: none; }
}
.gallery__item { position: relative; display: block; aspect-ratio: 3 / 2; scroll-snap-align: start; overflow: hidden; background: var(--fog-100); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease-out), filter var(--t-base) var(--ease-out); }
.gallery__item:focus-visible { outline-offset: -4px; }
.gallery__all { position: absolute; right: var(--s-3); bottom: var(--s-3); box-shadow: var(--shadow-2); }
.gallery__counter {
position: absolute; left: var(--s-3); bottom: var(--s-3);
padding: 4px 10px; border-radius: var(--r-pill);
background: rgb(8 40 48 / 0.72); color: var(--white);
font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}@media (min-width: 48rem) {
.gallery__grid {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: var(--s-2);
height: clamp(22rem, 38vw, 34rem);
overflow: hidden;
margin: 0;
border-radius: var(--r-xl);
}
.gallery__item { aspect-ratio: auto; }
.gallery__item--main { grid-row: span 2; }
.gallery__item--extra { display: none; }
.gallery__counter { display: none; }
.gallery__item:hover img { scale: 1.03; filter: brightness(0.94); }
}
.pswp__caption {
position: absolute; left: 50%; bottom: var(--s-4);
max-width: min(40rem, 90vw); translate: -50% 0;
padding: 6px 12px; border-radius: var(--r-sm);
background: rgb(0 0 0 / 0.55); color: var(--white);
font: 500 var(--fs-sm) / 1.4 var(--font-text); text-align: center;
}
.pswp__caption:empty { display: none; }
}
@layer pages {
.hero { background: var(--sea-950); color: var(--white); }
.hero__content {
display: grid;
gap: var(--s-4);
padding-top: clamp(var(--s-8), 5vw, var(--s-16));
padding-bottom: clamp(var(--s-6), 3vw, var(--s-10));
}
.hero__title {
max-width: 15ch;
font-size: var(--fs-3xl);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.015em;
}
.hero__lead { max-width: 40rem; color: var(--sea-300); font-size: var(--fs-md); line-height: 1.5; }
.hero__search { margin-top: var(--s-2); max-width: 68rem; }.intents { padding-block: var(--s-6) 0; }
.intents__list {
display: flex;
gap: var(--s-2);
list-style: none;
padding: 0 0 var(--s-2);
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}.page-home .section:first-of-type { padding-top: var(--s-10); }
.card-row { --scroller-item: min(78%, 18.5rem); }
@media (min-width: 64rem) {
.card-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }
.card-row > :nth-child(n + 5) { display: none; }
}
.types-grid { --card-min: 15rem; list-style: none; padding: 0; gap: var(--s-3); }
.section--sea { background: var(--sea-950); color: var(--white); }
.section--sea .section-head__lead { color: var(--sea-300); }
.how__steps { display: grid; gap: var(--s-6); list-style: none; padding: 0; counter-reset: none; }
@media (min-width: 48rem) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
.how__step { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / 0.16); }
.how__step p { color: var(--sea-200); }
.how__num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--amber-400); }.regions { display: grid; gap: var(--s-6) var(--s-8); }
@media (min-width: 48rem) { .regions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .regions { grid-template-columns: repeat(3, 1fr); } }
.region { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.region h3 a { color: var(--ink); text-decoration: none; &:hover { text-decoration: underline; } }
.region p { color: var(--text-muted); font-size: var(--fs-sm); }
.region__towns { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); list-style: none; padding: 0; font-size: var(--fs-sm); }
.region__towns a { font-weight: 600; }.owner-cta {
display: grid;
gap: var(--s-6);
align-items: center;
padding: clamp(var(--s-6), 4vw, var(--s-12));
border-radius: var(--r-xl);
background: var(--amber-50);
& h2 { font-size: var(--fs-2xl); max-width: 22ch; }
& p { margin-top: var(--s-3); max-width: 40rem; color: #4a3a1c; font-size: var(--fs-md); }
}
@media (min-width: 60rem) { .owner-cta { grid-template-columns: 1fr auto; } }.faq__title { margin-bottom: var(--s-6); font-size: var(--fs-2xl); }
@media (prefers-reduced-motion: no-preference) {
.js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; translate: none; }
}
}
@layer pages {
.results-page { padding-top: var(--s-5); }.results-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--s-3) var(--s-6);
margin-top: var(--s-4);
}
.results-head h1 { font-size: var(--fs-2xl); }
.results-head__count { margin-top: var(--s-1); color: var(--text-muted); font-size: var(--fs-md); }
.results-head__tools { display: none; align-items: center; gap: var(--s-3); }
.sort { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; }
.sort__label { color: var(--text-muted); }
.select--sm { min-height: 2.25rem; width: auto; padding-left: var(--s-3); font-size: var(--fs-sm); font-weight: 600; }.type-tabs { margin-top: var(--s-5); }
.type-tabs__list {
display: flex; gap: var(--s-2); list-style: none; padding: 0 0 var(--s-2);
overflow-x: auto; scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
.mobile-bar {
position: sticky;
top: var(--header-h);
z-index: var(--z-sticky);
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: var(--s-3) calc(-1 * var(--gutter)) 0;
border-block: 1px solid var(--line);
background: var(--white);
}
.mobile-bar__btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: 3rem;
font-weight: 700; font-size: var(--fs-sm);
color: var(--ink);
& + & { border-left: 1px solid var(--line); }
& .icon { color: var(--sea-700); }
}
.mobile-bar__sort select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }.results-layout { display: grid; gap: var(--s-8); margin-top: var(--s-5); }
.results { container: results / inline-size; min-width: 0; }
.results__active:empty { display: none; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; padding: 0; margin-bottom: var(--s-4); }
.results__hint {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4);
border-radius: var(--r-lg);
background: var(--sea-50);
font-size: var(--fs-sm);
& > .icon { color: var(--sea-700); }
& p { flex: 1; min-width: 12rem; }
}
.results__range { margin-bottom: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }
.results__cards { display: grid; gap: var(--s-6); list-style: none; padding: 0; }
@container results (min-width: 40rem) { .results__cards { gap: var(--s-4); } }
.results__list { position: relative; transition: opacity var(--t-base) var(--ease-out); }
.results__list[aria-busy="true"] { opacity: 0.45; pointer-events: none; }
.results .pagination { margin-top: var(--s-10); }.results-about {
display: grid; gap: var(--s-3);
max-width: 48rem;
margin-top: var(--s-16);
padding-top: var(--s-8);
border-top: 1px solid var(--line);
& h2 { font-size: var(--fs-xl); }
& p { color: #3e5358; }
}
.results-about__label { margin-top: var(--s-2); font-weight: 700; color: var(--ink) !important; }
.filters {
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--white);
color: var(--ink);
&::backdrop { background: rgb(8 40 48 / 0.55); }
&[open] { animation: sheet-in var(--t-slow) var(--ease-out); }
}
.filters__form { display: flex; flex-direction: column; height: 100%; }
.filters__head {
display: flex; align-items: center; justify-content: space-between;
min-height: 4rem; padding: 0 var(--s-3) 0 var(--gutter);
border-bottom: 1px solid var(--line);
}
.filters__title { font-size: var(--fs-lg); }
.filters__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--gutter) var(--s-8); }
.filters__foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--white);
& .btn--primary { flex: 1; max-width: 20rem; }
}.filter { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.filter:last-child { border-bottom: 0; }
.filter__title { margin-bottom: var(--s-2); font-family: var(--font-text); font-size: var(--fs-base); font-weight: 700; }
.filter--more summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; margin: 0; }
.filter--more summary::-webkit-details-marker { display: none; }
.filter--more summary .icon { transition: rotate var(--t-base) var(--ease-out); color: var(--sea-700); }
.filter--more[open] summary .icon { rotate: 180deg; }
.filter__group { margin-top: var(--s-4); }
.filter__subtitle { margin-bottom: var(--s-1); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }.map-teaser {
position: relative;
display: grid;
width: 100%;
margin-bottom: var(--s-2);
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--fog-50);
text-align: left;
transition: border-color var(--t-fast) var(--ease-out);
&:hover { border-color: var(--ink); }
&:hover .map-teaser__label { background: var(--sea-800); }
}
.map-teaser__map { position: relative; aspect-ratio: 1000 / 380; }
.map-teaser__map svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--sea-100); }
.map-teaser__label {
display: flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: 2.75rem; padding: 0 var(--s-3);
background: var(--ink); color: var(--white);
font-size: var(--fs-sm); font-weight: 700;
transition: background-color var(--t-fast) var(--ease-out);
}@media (min-width: 64rem) {
.results-head__tools { display: flex; }
.mobile-bar { display: none; }
.results-layout { grid-template-columns: 18.5rem minmax(0, 1fr); align-items: start; }
.filters:not([open]) {
position: sticky;
top: calc(var(--header-h) + var(--s-4));
display: block;
width: auto;
height: auto;
max-height: calc(100dvh - var(--header-h) - var(--s-8));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
background: none;
}
.filters:not([open]) .filters__head, .filters:not([open]) .filters__foot { display: none; }
.filters:not([open]) .filters__body { padding: 0 var(--s-2) 0 0; overflow: visible; }
.js .filters:not([open]) [data-filters-submit] { display: none; }
.filters[open] { width: min(26rem, 100vw); margin: 0 0 0 auto; }
}
}
@layer pages {
.listing { padding-top: var(--s-5); }.listing-head { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.listing-head__kicker { color: var(--text-muted); font-size: var(--fs-sm); }
.listing-head__kicker a { color: inherit; font-weight: 600; }
.listing-head h1 { margin-top: var(--s-1); font-size: var(--fs-2xl); }
.listing-head__actions { display: flex; gap: var(--s-2); }
.listing-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); list-style: none; padding: 0; font-size: var(--fs-sm); }
.listing-facts li { display: inline-flex; align-items: center; gap: 6px; }
.listing-facts a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.listing-facts .icon { width: 1.15rem; height: 1.15rem; color: var(--sea-700); }
.listing-facts__sea .sea-distance { font-size: 1.25rem; }
@media (min-width: 64rem) {
.listing-head { grid-template-columns: 1fr auto; align-items: end; }
}.listing-layout { display: grid; gap: var(--s-10); margin-top: var(--s-8); }
.listing-main, .listing-aside { min-width: 0; }
@media (min-width: 64rem) {
.listing-layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--s-12); align-items: start; }
}
.section-nav {
position: sticky;
top: var(--header-h);
z-index: var(--z-sticky);
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
background: rgb(255 255 255 / 0.96);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(6px);
}
.section-nav ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; overflow-x: auto; scrollbar-width: none; }
.section-nav a {
display: inline-flex; align-items: center; min-height: 3rem; padding: 0 var(--s-3);
color: var(--text-muted); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
border-bottom: 3px solid transparent;
&:hover { color: var(--ink); }
&[aria-current="true"] { color: var(--ink); border-bottom-color: var(--amber-400); }
}
.section-nav .section-nav__ext { gap: 6px; color: var(--sea-700); & .icon { width: 1rem; height: 1rem; } }
@media (min-width: 64rem) { .section-nav { margin-inline: 0; padding-inline: 0; } }.listing-section { padding-block: var(--s-8); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 3.5rem); }
.listing-section:last-child { border-bottom: 0; }
.listing-section h2 { margin-bottom: var(--s-4); }
.listing-lead { margin-bottom: var(--s-4); font-size: var(--fs-md); font-weight: 600; }
.prose { display: grid; gap: var(--s-4); max-width: 44rem; color: #2f4449; }
.expandable.is-collapsed { max-height: 13.75rem; overflow: hidden; mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.expand-btn { margin-top: var(--s-2); padding-inline: 0; }
.listing-note { margin-top: var(--s-3); color: var(--text-muted); font-size: var(--fs-sm); }
.listing-unclaimed { max-width: 44rem; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--fog-50); color: #2f4449; }
.listing-unclaimed .listing-note a { color: var(--ink); font-weight: 600; }.amenity-groups { display: grid; gap: var(--s-6); }
@media (min-width: 40rem) { .amenity-groups { grid-template-columns: 1fr 1fr; } }
.amenity-group h3 { margin-bottom: var(--s-2); font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.amenity-list { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.amenity-list li { display: flex; align-items: center; gap: var(--s-3); }
.amenity-list .icon { width: 1.5rem; height: 1.5rem; color: var(--sea-700); }.rules { display: grid; gap: 0; }
.rules > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--fog-100); }
.rules dt { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; }
.rules dt .icon { width: 1.25rem; height: 1.25rem; color: var(--sea-700); }
.rules dd { color: #34494f; text-align: right; }.listing-address { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; & .icon { color: var(--sea-700); } }
.distances { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-block: var(--s-3) var(--s-4); list-style: none; padding: 0; }
.distances li { display: flex; align-items: center; gap: var(--s-2); & .icon { color: var(--sea-700); } }
.distances .sea-distance { font-size: 1.25rem; }
.route { display: grid; gap: var(--s-4); margin-top: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--fog-50); }
.route__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-lg); & .icon { color: var(--sea-700); } }
.route__form { display: grid; gap: var(--s-4); }
.route__form[hidden] { display: none; }
.route__from { display: grid; gap: 6px; }
.route__combo { position: relative; }
.route__suggest {
position: absolute; top: calc(100% + var(--s-1)); left: 0; right: 0; z-index: var(--z-dropdown);
max-height: 20rem; overflow-y: auto; padding: var(--s-2); list-style: none;
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-2);
}
.route__suggest[hidden] { display: none; }
.route__suggest .suggest__option { grid-template-columns: 2.5rem 1fr; }
.route__locate { justify-self: start; }
.route__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.route__modes { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.route__modes .chip { position: relative; cursor: pointer; }
.route__modes .chip[hidden] { display: none; }
.route__modes .chip input { position: absolute; opacity: 0; pointer-events: none; }
.route__modes .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.route__modes .chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.route__result { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.route__result:empty { display: none; }
.route__result.is-error { border-color: var(--flag-50); background: var(--flag-50); color: var(--flag-600); font-weight: 600; }
.route__summary strong { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; }
.route__from-label { color: var(--text-muted); font-size: var(--fs-sm); }
.route__nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.route__credit { color: var(--text-muted); font-size: var(--fs-xs); }
.route__credit a { color: inherit; }
.route-start { width: 1.125rem; height: 1.125rem; border: 3px solid var(--white); border-radius: 50%; background: var(--sea-700); box-shadow: 0 0 0 1px rgb(14 42 49 / 0.25), var(--shadow-2); }
.listing-aside { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
@media (min-width: 64rem) { .listing-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }
.inquiry {
display: grid;
gap: var(--s-5);
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--white);
box-shadow: var(--shadow-2);
}
.inquiry__price { display: grid; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.inquiry__price .price__value { font-size: 1.875rem; }
.inquiry__note { display: flex; align-items: center; gap: var(--s-2); color: var(--dune-600); font-size: var(--fs-sm); font-weight: 600; }
.inquiry__title { font-size: var(--fs-lg); }
.inquiry__phone { display: grid; gap: 2px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.inquiry__phone-label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
.inquiry__phone-link {
display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start;
color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-decoration: none; user-select: all;
& .icon { width: 1.35rem; height: 1.35rem; color: var(--sea-700); }
&:hover { text-decoration: underline; text-underline-offset: 0.15em; }
}
.inquiry__phone-hint { color: var(--text-muted); font-size: var(--fs-xs); }
.inquiry__fine { color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
.inquiry__form { gap: var(--s-4); }
.inquiry__success { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-2) 0; }
.inquiry__success > .icon { width: 2.5rem; height: 2.5rem; padding: 0.5rem; border-radius: 50%; background: var(--dune-50); color: var(--dune-600); }
.inquiry__success:focus { outline: none; }
.inquiry__success-title { font-size: var(--fs-xl); }.inquiry-dates { position: relative; }
.inquiry-dates__btn { display: flex; align-items: center; gap: var(--s-2); text-align: left; cursor: pointer; & .icon { color: var(--sea-700); } }
.inquiry-dates__pop {
position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0; z-index: var(--z-dropdown);
display: grid; gap: var(--s-3);
padding: var(--s-4);
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--white); box-shadow: var(--shadow-3);
&:not([hidden]) { animation: pop-in var(--t-base) var(--ease-out); }
}
.inquiry-dates__legend { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--fs-xs); }
.inquiry-dates__swatch { width: 1.25rem; height: 0.75rem; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--fog-200) 0 3px, var(--white) 3px 6px); border: 1px solid var(--line); }
.inquiry-dates__msg { font-size: var(--fs-sm); font-weight: 600; color: var(--dune-600); min-height: 1.25rem; }
.inquiry-dates__msg.is-error { color: var(--flag-600); }
.inquiry-dates__actions { justify-content: flex-end; }
.form-status { font-size: var(--fs-sm); }
.booking-bar {
position: sticky;
bottom: 0;
z-index: var(--z-sticky);
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
margin-top: var(--s-8);
padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--white);
box-shadow: 0 -8px 24px -16px rgb(14 42 49 / 0.3);
}
.booking-bar__price { display: grid; line-height: 1.2; }
.booking-bar__actions { display: flex; gap: var(--s-2); }
.booking-bar__call { padding-inline: var(--s-3); }
.booking-bar .price__value { font-size: 1.375rem; }
@media (min-width: 64rem) { .booking-bar { display: none; } }
}
@layer pages {
.ti-hero { padding-block: var(--s-6) var(--s-8); background: linear-gradient(180deg, var(--fog-50), var(--white)); border-bottom: 1px solid var(--line); }
.ti-hero__kicker { margin-top: var(--s-4); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
.ti-hero__kicker a { color: inherit; }
.ti-hero__title { max-width: 26ch; margin-top: var(--s-2); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.02; }
.ti-hero__lead { max-width: 46rem; margin-top: var(--s-4); color: #2f4449; font-size: var(--fs-md); line-height: 1.6; }
.ti-hero__actions { margin-top: var(--s-5); }.ti-layout { display: grid; gap: var(--s-8); padding-block: var(--s-8) var(--s-10); }
.ti-layout > * { min-width: 0; }
@media (min-width: 64rem) {
.ti-layout { grid-template-columns: 17rem minmax(0, 70rem); justify-content: space-between; gap: var(--s-12); }
.ti-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); align-self: start; }
}
.ti-aside { display: grid; gap: var(--s-5); align-content: start; }.ti-toc { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.ti-toc__title { margin-bottom: var(--s-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ti-toc ol { display: grid; gap: var(--s-1); padding: 0; list-style: none; counter-reset: toc; }
.ti-toc li { counter-increment: toc; }
.ti-toc a {
display: grid; grid-template-columns: 1.6rem 1fr; padding: 4px 0;
color: var(--ink); font-size: var(--fs-sm); line-height: 1.35; text-decoration: none;
&::before { content: counter(toc) "."; color: var(--text-muted); font-variant-numeric: tabular-nums; }
&:hover { text-decoration: underline; }
}.ti-stay { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: var(--sea-950); color: var(--white); }
.ti-stay__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; }
.ti-stay__text { color: rgb(255 255 255 / 0.82); font-size: var(--fs-sm); }
@media (max-width: 63.99rem) {
.ti-aside { display: none; }
}
.ti-body { color: #22373c; font-size: 1.0625rem; line-height: 1.75; }
.ti-body > * + * { margin-top: var(--s-4); }
.ti-body h2 { margin-top: var(--s-10); font-size: var(--fs-2xl); line-height: 1.15; color: var(--ink); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.ti-body h2:first-child { margin-top: 0; }
.ti-body h3 { margin-top: var(--s-6); font-family: var(--font-text); font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.ti-body ul { padding-left: 1.2rem; }
.ti-body li + li { margin-top: var(--s-1); }
.ti-body a { color: var(--sea-800); text-underline-offset: 0.15em; }
.ti-body strong { color: var(--ink); }
.ti-figure { margin-block: var(--s-6); }
.ti-figure img { width: 100%; height: auto; border-radius: var(--r-lg); }
.ti-figure figcaption { margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }.ti-faq { margin-top: var(--s-10); }
.ti-faq__item { border-bottom: 1px solid var(--line); }
.ti-faq__item summary { padding-block: var(--s-3); font-weight: 700; color: var(--ink); cursor: pointer; }
.ti-faq__item p { padding-bottom: var(--s-4); }
.ti-updated { margin-top: var(--s-8); color: var(--text-muted); font-size: var(--fs-sm); }
.ti-near { padding-top: 0; }
.ti-near h2 { margin-bottom: var(--s-4); font-size: var(--fs-xl); }
.tcard__why {
position: relative; z-index: 2; justify-self: start;
display: inline-flex; align-items: center; gap: 6px;
color: var(--sea-700); font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
& .icon { width: 1rem; height: 1rem; }
&:hover { text-decoration: underline; }
}
}
@layer pages {
.hero--compact .hero__content { padding-bottom: var(--s-8); }
.hero--compact .hero__title { font-size: var(--fs-2xl); max-width: 22ch; }
.hero--compact .breadcrumbs ol, .hero--compact .breadcrumbs a { color: var(--sea-300); }
.hero--compact .breadcrumbs a:hover { color: var(--white); }
.hero--compact .breadcrumbs [aria-current] { color: var(--white); }
.hero--owner { padding-bottom: var(--s-8); }.region-jump { padding-block: var(--s-6); }
.region-block { padding-block: var(--s-8); scroll-margin-top: calc(var(--header-h) + var(--s-4)); border-top: 1px solid var(--line); }
.region-block:first-of-type { border-top: 0; }
.grid-cards--towns { --card-min: 15rem; }.favorites-head { align-items: center; margin-top: var(--s-4); }
.card-skeleton { display: grid; gap: var(--s-3); }
.card-skeleton .skeleton:first-child { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.card-skeleton .skeleton:nth-child(2) { height: 1.25rem; width: 70%; }
.card-skeleton .skeleton:nth-child(3) { height: 1rem; width: 45%; }.owner-layout { display: grid; gap: var(--s-10); padding-block: var(--s-10) var(--s-4); }
@media (min-width: 64rem) { .owner-layout { grid-template-columns: 1fr 28rem; gap: var(--s-16); align-items: start; } }
.owner-info { display: grid; gap: var(--s-10); }
.owner-info h2 { margin-bottom: var(--s-5); }
.benefits { display: grid; gap: var(--s-5); list-style: none; padding: 0; }
@media (min-width: 40rem) { .benefits { grid-template-columns: 1fr 1fr; } }
.benefits li { display: flex; gap: var(--s-4); }
.benefits li > .icon { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: var(--r-md); background: var(--sea-50); color: var(--sea-700); }
.benefits h3 { font-family: var(--font-text); font-size: var(--fs-base); font-weight: 700; }
.benefits p { margin-top: var(--s-1); color: var(--text-muted); font-size: var(--fs-sm); }
.steps { display: grid; gap: var(--s-4); padding-left: 1.25rem; }
.steps li::marker { font-family: var(--font-display); font-weight: 800; color: var(--amber-700); }
.owner-info__stat { margin-top: var(--s-5); color: var(--text-muted); font-size: var(--fs-sm); }
.owner-form {
padding: var(--s-6);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--white);
box-shadow: var(--shadow-2);
scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
@media (min-width: 64rem) { .owner-layout > .stack { align-self: start; margin-top: calc(-1 * var(--s-20)); } }
.owner-form h2 { font-size: var(--fs-xl); }
.owner-form--account { display: grid; gap: var(--s-4); background: var(--sea-50); border-color: var(--sea-100); }
.owner-form__alt { font-size: var(--fs-sm); text-align: center; }.content-page h1 { margin-top: var(--s-4); }
.content-page__lead { margin-block: var(--s-4) var(--s-8); font-size: var(--fs-md); color: #34494f; }
.content-page .prose { max-width: none; }
.content-page .prose h2 { margin-top: var(--s-4); font-size: var(--fs-lg); color: var(--ink); }
.content-page__company { margin-top: var(--s-8); color: var(--text-muted); font-size: var(--fs-sm); }
.contact-list { display: grid; gap: var(--s-6); list-style: none; padding: 0; }
.contact-list li { display: flex; gap: var(--s-4); }
.contact-list li > .icon { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: var(--r-md); background: var(--sea-50); color: var(--sea-700); }
.contact-list h2 { font-family: var(--font-text); font-size: var(--fs-base); font-weight: 700; }.error-page { text-align: left; }
.error-page__code { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem); font-weight: 800; line-height: 1; color: var(--sea-100); }
.error-page h1 { margin-top: var(--s-2); }
.error-page__lead { margin-block: var(--s-4) var(--s-6); font-size: var(--fs-md); color: #34494f; }
.error-page__search .search { box-shadow: var(--shadow-2); }
.error-page__towns { margin-top: var(--s-6); list-style: none; padding: 0; }
}@layer pages {
.system { padding-block: var(--s-8) var(--s-16); }
.system__head { display: grid; gap: var(--s-3); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.system__head nav ul { list-style: none; padding: 0; }
.system__section { display: grid; gap: var(--s-6); padding-block: var(--s-10); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.system__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.system__row--sea { padding: var(--s-5); border-radius: var(--r-lg); background: var(--sea-950); }
.system__row--map { padding: var(--s-8) var(--s-5); border-radius: var(--r-lg); background: #f2f4f3; gap: var(--s-8); }
.system__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.system__h { margin: 0; }
.swatches { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); list-style: none; padding: 0; }
.swatch { display: grid; gap: 2px; font-size: var(--fs-sm); }
.swatch__chip { height: 4rem; margin-bottom: var(--s-2); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px rgb(14 42 49 / 0.12); }
.swatch code, .spacing code, .radii code, .icon-grid code, .icon-sizes code { font-size: var(--fs-xs); color: var(--text-muted); }
.type-specimen { display: grid; gap: var(--s-2); }
.type-specimen__label { margin-top: var(--s-4); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.spacing { display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.spacing li { display: flex; align-items: center; gap: var(--s-3); }
.spacing__bar { height: 0.75rem; border-radius: 2px; background: var(--sea-600); }
.radii { list-style: none; padding: 0; gap: var(--s-5); }
.radii li { display: grid; justify-items: center; gap: var(--s-2); }
.radii span { width: 4rem; height: 4rem; background: var(--sea-50); border: 1.5px solid var(--sea-600); }
.icon-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); list-style: none; padding: 0; }
.icon-grid li { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.icon-grid .icon { width: 1.75rem; height: 1.75rem; }
.icon-sizes { display: grid; gap: var(--s-3); color: var(--ink); }
.icon-sizes .icon { width: 1.25em; height: 1.25em; }
}
@layer pages {
.page-panel main, .page-account main { background: var(--bg-alt); }
.panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5) var(--s-16); align-items: start; }
.panel-nav { min-width: 0; }
.panel__main { display: grid; gap: var(--s-5); min-width: 0; }
.panel__side { display: grid; gap: var(--s-3); min-width: 0; }
.panel__who { display: none; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); }
.panel__avatar {
display: grid; place-items: center; flex: none;
width: 2.5rem; height: 2.5rem; border-radius: 50%;
background: var(--sea-950); color: var(--white);
font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800;
}
.panel__who-text { display: grid; min-width: 0; line-height: 1.25; }
.panel__who-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel__who-text small { color: var(--text-muted); font-size: var(--fs-xs); }
.panel-nav__list {
display: flex; gap: var(--s-1);
margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-1);
overflow-x: auto; scrollbar-width: none; list-style: none;
&::-webkit-scrollbar { display: none; }
}
.panel-nav__link {
position: relative;
display: flex; align-items: center; gap: var(--s-2);
width: 100%; min-height: 2.75rem; padding: 0 var(--s-3);
border-radius: var(--r-md);
color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap;
transition: background-color var(--t-fast) var(--ease-out);
& .icon { color: var(--sea-700); }
& .badge { margin-left: auto; }
&:hover { background: var(--fog-100); text-decoration: none; }
&[aria-current="page"] { background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); font-weight: 700; }
&[aria-current="page"] .icon { color: var(--amber-700); }
}
.panel-nav form { margin: 0; }@media (min-width: 64rem) {
.panel { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-8); padding-top: var(--s-8); }
.panel__side { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.panel__who { display: flex; }
.panel-nav__list { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
.panel-nav__switch { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
}
.panel-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.panel-head h1 { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.panel-head h1 a { color: inherit; text-decoration: none; }
.panel-head__lead { max-width: 44rem; margin-top: var(--s-1); color: var(--text-muted); }
.panel-head__back { margin-bottom: var(--s-1); font-size: var(--fs-sm); font-weight: 700; }
.panel-head__back a { display: inline-flex; align-items: center; gap: var(--s-1); text-decoration: none; }
.panel-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); }
.panel-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 72rem) {
.panel-grid { grid-template-columns: minmax(0, 1fr) 21rem; }
.panel-grid--even { grid-template-columns: 1fr 1fr; }
}
.panel-card {
display: grid; gap: var(--s-4); align-content: start;
padding: var(--s-5);
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--white);
}
.panel-card--soft { background: var(--sea-50); border-color: var(--sea-100); }
.panel-card__title { font-size: var(--fs-lg); }
.panel-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); font-weight: 700; }
.panel-card__status { display: flex; }
.stack > .panel-card { width: 100%; }.fieldset { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.panel .field { align-content: start; }
.form__row--3 { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .form__row--3 { grid-template-columns: repeat(3, 1fr); } }
.field--short { max-width: 18rem; }
.textarea--tall { min-height: 18rem; }
.cluster--loose { --cluster-gap: var(--s-2) var(--s-6); }
.switch--field { align-items: flex-start; font-size: var(--fs-base); font-weight: 600; & input { flex: none; margin-top: 2px; } }
.nowrap { white-space: nowrap; }.btn--danger { --btn-bg: var(--flag-600); --btn-fg: var(--white); --btn-bg-hover: #8f1e18; }.danger-zone > summary { color: var(--flag-600); font-weight: 700; cursor: pointer; }
.danger-zone[open] > summary { margin-bottom: var(--s-1); }
.danger-zone .form { gap: var(--s-3); }
.char-count { justify-self: end; color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.char-count.is-short { color: var(--amber-700); font-weight: 700; }
.offer-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.offer-row {
display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-4);
padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
}
.offer-row__thumb {
display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); color: var(--sea-600);
& img { width: 100%; height: 100%; object-fit: cover; }
& .icon { width: 2rem; height: 2rem; }
}
.offer-row__body { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.offer-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--fs-sm); }
.offer-row__title { font-size: var(--fs-lg); & a { color: var(--ink); text-decoration: none; } & a:hover { text-decoration: underline; } }
.offer-row__hint { color: var(--text-muted); font-size: var(--fs-sm); }
.offer-row__note { display: flex; gap: var(--s-2); color: var(--flag-600); font-size: var(--fs-sm); & .icon { flex: none; margin-top: 2px; } }
.offer-row__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.offer-row__price { font-size: var(--fs-sm); color: var(--text-muted); & strong { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-md); } }
.offer-row__inq { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
@media (min-width: 48rem) {
.offer-row { grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; }
.offer-row__side { grid-column: auto; flex-direction: column; align-items: end; text-align: right; }
}.progress { height: 6px; max-width: 18rem; overflow: hidden; border-radius: 3px; background: var(--fog-200); }
.progress__bar { display: block; height: 100%; border-radius: 3px; background: var(--dune-600); }
.type-pick { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.type-pick__item {
position: relative; display: flex; align-items: center; gap: var(--s-2);
min-height: 3.25rem; padding: var(--s-2) var(--s-3);
border: 1.5px solid var(--line); border-radius: var(--r-md);
font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
& input { position: absolute; opacity: 0; pointer-events: none; }
& .icon { flex: none; color: var(--sea-700); }
&:hover { border-color: var(--ink); }
&:has(input:checked) { border-color: var(--ink); background: var(--sea-50); box-shadow: inset 0 0 0 1px var(--ink); }
&:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
}
.steps-list { display: grid; gap: var(--s-2); padding-left: 1.25rem; & small { margin-left: var(--s-2); color: var(--text-muted); } }
.checklist { display: grid; list-style: none; padding: 0; }
.checklist__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding-block: var(--s-3); }
.checklist__item + .checklist__item { border-top: 1px solid var(--line); }
.checklist__mark {
display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
background: var(--amber-50); color: var(--amber-700);
& .icon { width: 1.1rem; height: 1.1rem; }
}
.checklist__item.is-done .checklist__mark { background: var(--dune-50); color: var(--dune-600); }
.checklist__text { display: grid; line-height: 1.35; & a { color: var(--ink); font-weight: 700; text-decoration: none; } & small { color: var(--text-muted); } }
.editor { display: grid; gap: var(--s-5); align-items: start; }
.editor-nav { display: grid; gap: var(--s-2); min-width: 0; }
.editor-nav__overview { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.editor-nav__list { display: flex; gap: var(--s-2); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-1); overflow-x: auto; scrollbar-width: none; list-style: none; counter-reset: step; }
.editor-nav__list::-webkit-scrollbar { display: none; }
.editor-nav__link {
position: relative;
display: flex; align-items: center; gap: var(--s-2);
min-height: 2.75rem; padding: 0 var(--s-3);
border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white);
color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
& small { color: var(--text-muted); font-weight: 400; }
&:hover { border-color: var(--ink); text-decoration: none; }
&[aria-current="step"] { border-color: var(--ink); background: var(--ink); color: var(--white); & small { color: var(--sea-200); } }
}
.editor-nav__mark {
counter-increment: step;
display: grid; place-items: center; flex: none;
width: 1.5rem; height: 1.5rem; border-radius: 50%;
background: var(--fog-100); color: var(--ink); font-size: var(--fs-xs); font-weight: 800;
&:empty::before { content: counter(step); }
& .icon { width: 0.9rem; height: 0.9rem; stroke-width: 2.5; }
}
.editor-nav__link.is-done .editor-nav__mark { background: var(--dune-600); color: var(--white); }
.editor-nav__link[aria-current="step"] .editor-nav__mark { background: var(--amber-400); color: var(--ink); }.editor__main { display: grid; gap: var(--s-4); min-width: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.editor__title { font-size: var(--fs-xl); }
.editor-form { gap: var(--s-6); }
.editor-form__foot {
position: sticky; bottom: 0; z-index: 2;
display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3);
margin: 0 calc(var(--s-5) * -1) calc(var(--s-5) * -1); padding: var(--s-4) var(--s-5);
border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
background: rgb(255 255 255 / 0.96);
backdrop-filter: blur(6px);
}@media (min-width: 64rem) {
.editor { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-6); }
.editor-nav { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.editor-nav__list { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
.editor-nav__link { border-color: transparent; background: none; border-radius: var(--r-md); white-space: normal; }
.editor-nav__link:hover { background: var(--white); border-color: var(--line); }
.editor__main { padding: var(--s-8); }
.editor-form__foot { margin: 0 calc(var(--s-8) * -1) calc(var(--s-8) * -1); padding-inline: var(--s-8); }
}
.picker { position: relative; height: 24rem; overflow: hidden; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: #f2f4f3; }
.picker.is-invalid { border-color: var(--flag-600); box-shadow: 0 0 0 3px var(--flag-50); }
.picker__map { position: absolute; inset: 0; }
.picker__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-2); color: var(--text-muted); font-weight: 600; }
.picker__placeholder[hidden] { display: none; }
.picker__manual { font-size: var(--fs-sm); & summary { color: var(--link); font-weight: 600; cursor: pointer; } & .form__row { margin-top: var(--s-3); } }
.picker-hint { position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2; max-width: calc(100% - 6rem); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--ink); color: var(--white); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-2); }
.picker-hint:empty { display: none; }
.amenity-pick { gap: var(--s-4); }
.amenity-pick__group { display: grid; gap: var(--s-2); }
.amenity-pick__title { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.amenity-pick__grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.check--tile {
min-height: 3rem; padding: var(--s-2) var(--s-3);
border: 1px solid var(--line); border-radius: var(--r-md);
font-size: var(--fs-sm);
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
&:hover { border-color: var(--ink); }
&:has(input:checked) { border-color: var(--sea-700); background: var(--sea-50); }
}
.repeater { display: grid; gap: var(--s-3); justify-items: start; }
.repeater__rows { display: grid; gap: var(--s-3); width: 100%; }
.repeater__row { display: grid; gap: var(--s-3); align-items: end; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fog-50); }
.repeater__row .field__label { font-size: var(--fs-xs); }
.repeater__row .input { min-height: 2.75rem; }
.repeater__remove { justify-self: end; }
@media (min-width: 40rem) {
.repeater__row { padding: 0; border: 0; background: none; }
.repeater__row--season { grid-template-columns: 1.2fr 1.6fr 0.8fr 2.75rem; }
.repeater__row--dates { grid-template-columns: 1fr 1fr 2.75rem; max-width: 34rem; }
.repeater__row + .repeater__row .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.repeater__remove { width: 2.75rem; height: 2.75rem; box-shadow: none; background: transparent; color: var(--flag-600); }
.repeater__remove:hover { background: var(--flag-50); transform: none; }
.photos { display: grid; gap: var(--s-5); }
.upload { display: grid; gap: var(--s-3); justify-items: start; }
.upload__zone {
position: relative; display: grid; justify-items: center; gap: var(--s-2);
width: 100%; padding: var(--s-8) var(--s-5);
border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
background: var(--fog-50); text-align: center; cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
& > .icon { width: 2.25rem; height: 2.25rem; color: var(--sea-700); }
&:hover, &.is-dragover { border-color: var(--sea-700); background: var(--sea-50); }
&:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
}
.upload__title { font-weight: 700; }
.upload__hint { color: var(--text-muted); font-size: var(--fs-sm); }
.upload__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload__queue { display: grid; gap: var(--s-2); width: 100%; list-style: none; padding: 0; }
.upload__queue:empty { display: none; }
.upload-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); font-size: var(--fs-sm); }
.upload-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item__state { color: var(--text-muted); font-weight: 600; }
.upload-item__bar { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--fog-200); }
.upload-item__bar span { display: block; width: var(--p, 0%); height: 100%; background: var(--sea-600); transition: width var(--t-base) linear; }
.upload-item.is-done .upload-item__bar span { background: var(--dune-600); }
.upload-item.is-error { color: var(--flag-600); }
.upload-item.is-error .upload-item__state { color: var(--flag-600); }.photo-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); list-style: none; padding: 0; }
.photo-tile { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.photo-tile__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-tile__main { position: absolute; top: var(--s-2); left: var(--s-2); }
.photo-tile__handle {
position: absolute; top: var(--s-2); right: var(--s-2);
display: none; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-sm);
background: rgb(255 255 255 / 0.92); color: var(--ink); cursor: grab;
}
.photos.is-enhanced .photo-tile__handle { display: grid; }
.photo-tile__bar { display: flex; justify-content: space-between; gap: 2px; padding: var(--s-1); border-top: 1px solid var(--line); }
.photo-tile__btn {
display: grid; place-items: center; flex: 1; height: 2.25rem; border-radius: var(--r-sm); color: var(--ink);
& .icon { width: 1.1rem; height: 1.1rem; }
&:hover:not(:disabled) { background: var(--fog-100); }
&:disabled { opacity: 0.3; cursor: not-allowed; }
}
.photo-tile__btn--danger { color: var(--flag-600); &:hover:not(:disabled) { background: var(--flag-50); } }
.photo-tile.is-dragging { opacity: 0.4; }
.photo-tile.is-drop-target { outline: 3px solid var(--amber-400); outline-offset: 2px; }
.photo-grid-wrap { display: grid; gap: var(--s-2); }
.photo-grid-wrap.is-busy { opacity: 0.6; pointer-events: none; }
.photo-grid__empty { padding: var(--s-6); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--text-muted); text-align: center; }
.photo-grid__count { justify-self: end; color: var(--text-muted); font-size: var(--fs-xs); }
.panel-filter { display: flex; align-items: end; gap: var(--s-2); }
.panel-filter .field { min-width: min(100%, 16rem); }
.panel-filter .input, .panel-filter .select { min-height: 2.75rem; }
.inquiry-list { display: grid; gap: var(--s-3); list-style: none; padding: 0; }
.inquiry-card { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.inquiry-card.is-new { border-color: var(--amber-400); box-shadow: inset 4px 0 0 var(--amber-400); }
.inquiry-card__head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--s-3); }
.inquiry-card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.inquiry-card__meta { color: var(--text-muted); font-size: var(--fs-sm); }
.inquiry-card__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: var(--fs-sm); }
.inquiry-card__facts dt { display: flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; & .icon { width: 1rem; height: 1rem; } }
.inquiry-card__facts dd { margin: 0; font-weight: 600; }
.inquiry-card__msg { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--fog-50); white-space: normal; }.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); }
.pager__info { color: var(--text-muted); font-size: var(--fs-sm); }
.stat-tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); list-style: none; padding: 0; }
.stat-tile {
display: grid; gap: var(--s-1); height: 100%; padding: var(--s-4) var(--s-5);
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
color: var(--ink); text-decoration: none;
& strong { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; }
& span { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
&:hover { border-color: var(--ink); text-decoration: none; }
&.is-attention { border-color: var(--amber-400); background: var(--amber-50); }
&.is-attention strong { color: var(--amber-700); }
}
.mini-list { display: grid; list-style: none; padding: 0; }
.mini-list > li { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); }
.mini-list > li + li { border-top: 1px solid var(--line); }
.mini-list__thumb { flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: var(--r-sm); & img { width: 100%; height: 100%; object-fit: cover; } }
.mini-list__main { display: grid; flex: 1; min-width: 0; line-height: 1.3; color: var(--ink); text-decoration: none; & small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; } }
.mini-list__main:hover strong { text-decoration: underline; }.filter-bar { display: grid; gap: var(--s-2); }
.filter-bar ul { list-style: none; padding: 0; }
.chip--small { min-height: 2rem; padding: 0 var(--s-3); font-size: var(--fs-xs); }.admin-table { background: var(--white); }
.admin-table th[scope="row"] { font-weight: 400; }
.admin-table small { font-size: var(--fs-xs); }
.admin-table__offer { display: flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; & > span:last-child { display: grid; line-height: 1.3; } & small { color: var(--text-muted); } }
.admin-table__offer:hover strong { text-decoration: underline; }
.admin-table__msg { max-width: 24rem; }
.admin-table .badge .icon { margin: 0; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }.review-photos { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); list-style: none; padding: 0; }
.review-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.review-tagline { font-weight: 700; }
.facts { display: grid; gap: 0; font-size: var(--fs-sm); }
.facts > div { display: grid; gap: 2px var(--s-4); padding-block: var(--s-2); border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { color: var(--text-muted); font-weight: 700; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 40rem) { .facts > div { grid-template-columns: 10rem minmax(0, 1fr); } }.decision { gap: var(--s-3); }
.decision form { margin: 0; }
.decision__missing { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--amber-50); font-size: var(--fs-sm); & ul { margin-top: var(--s-1); padding-left: 1.1rem; } }
.decision__reject { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.decision__more { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.decision__more > summary { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.decision__more[open] > summary { margin-bottom: var(--s-3); }
.claims { margin-bottom: var(--s-6); }
.town-editor { display: grid; gap: var(--s-5); }
.town-editor .panel-card { display: grid; gap: var(--s-4); }
.te-blocks { display: grid; gap: var(--s-3); }
.te-block { position: relative; display: grid; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border: 1px solid var(--line); border-left: 4px solid var(--fog-200); border-radius: var(--r-md); background: var(--white); }
.te-block--h2, .te-block--h3 { border-left-color: var(--sea-700); }
.te-block--img { border-left-color: var(--amber-400); }
.te-block--faq { border-left-color: var(--dune-600); }
.te-block__type { padding: 0; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.te-block__heading--h2 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; }
.te-block__heading--h3 { font-weight: 700; }
.te-block__tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); }
.te-block__tools [hidden] { display: none; }
.te-image { display: grid; gap: var(--s-3); }
@media (min-width: 48rem) { .te-image { grid-template-columns: 12.5rem 1fr; align-items: start; } }
.te-image__preview { width: 100%; height: auto; border-radius: var(--r-sm); background: var(--fog-100); }
.te-image__fields { display: grid; gap: var(--s-2); grid-column: -2 / -1; }
.te-add { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fog-50); }
.te-add[hidden] { display: none; }
.te-add__label { font-size: var(--fs-sm); font-weight: 700; }
.te-total { margin: 0; }
[data-counter].is-off { color: var(--flag-600); font-weight: 700; }
.te-save { display: flex; justify-content: flex-end; }
.claims .mini-list__thumb { display: grid; place-items: center; color: var(--sea-700); background: var(--fog-100); }
.decision__block > summary, .decision .danger-zone > summary { color: var(--flag-600); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.decision__block[open] > form { margin-top: var(--s-3); }
.reasons { --cluster-gap: var(--s-1); }
.auth { display: grid; gap: var(--s-8); align-items: start; padding-block: var(--s-8) var(--s-16); }
.auth--single { max-width: calc(30rem + var(--gutter) * 2); }
.auth__intro { display: grid; gap: var(--s-4); align-content: start; }
.auth__kicker { color: var(--amber-700); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.auth__points { display: grid; gap: var(--s-4); list-style: none; padding: 0; }
.auth__points li { display: flex; gap: var(--s-3); & .icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 2px; color: var(--sea-700); } }
.auth-card { display: grid; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-1); }
.auth-card h1 { font-size: var(--fs-xl); }
.auth-card h2 { font-size: var(--fs-xl); }
.auth-card__lead { color: var(--text-muted); }
.auth-card__alt { padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); text-align: center; }
.auth-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.auth-card__small { font-size: var(--fs-sm); }
.auth-card__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--sea-50); color: var(--sea-700); & .icon { width: 1.75rem; height: 1.75rem; } }
@media (min-width: 64rem) {
.auth:not(.auth--single) { grid-template-columns: minmax(0, 1fr) 30rem; gap: var(--s-16); padding-top: var(--s-12); }
.auth__intro { padding-top: var(--s-8); }
.auth-card { padding: var(--s-8); }
}.password { position: relative; }
.password .input { padding-right: 3.25rem; }
.password__toggle {
position: absolute; top: 50%; right: 0.375rem; translate: 0 -50%;
display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); color: var(--text-muted);
&:hover { background: var(--fog-100); color: var(--ink); }
&[aria-pressed="true"] { color: var(--sea-700); }
}
.preview-bar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--sea-950); color: var(--white); }
.preview-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-3); }
.preview-bar p { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); & > .icon { flex: none; color: var(--amber-300); } }
.preview-bar .badge { margin-left: var(--s-1); }
.inquiry--preview { display: grid; gap: var(--s-3); }
}