@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/rubik-400-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/rubik-400-normal-latin.woff2) format('woff2');
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: 'Rubik';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/rubik-500-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/rubik-500-normal-latin.woff2) format('woff2');
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: 'Unbounded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/unbounded-600-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/unbounded-600-normal-latin.woff2) format('woff2');
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;
}
/* Температура воды. Идея: цветовая шкала моря. Холоднее 22 °C — синие ступени, теплее — коралловые; цвет всегда стоит рядом с числом.
Главный экран — все курорты точками на одной шкале сегодняшней температуры; календарь «курорт × месяц» отвечает, куда и когда ехать.
Unbounded для крупных чисел, Rubik для текста. */
:root{
--paper:#fff; --sea:#0b2b3a; --ink:#0b2b3a; --muted:#4c6371; --line:#dce6eb; --tint:#f2f7f9;
--t0:#1d4e89; --t1:#3a78b5; --t2:#6aa6d2; --t3:#a9d0e6; --t4:#dde9ec; --t5:#f6d2a9; --t6:#f2a46c; --t7:#e5713f; --t8:#c4472a;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--text:"Rubik",-apple-system,"Segoe UI",Arial,sans-serif; --disp:"Unbounded","Rubik",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--text);font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--t2);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--t7)}
:focus-visible{outline:3px solid var(--t1);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:8px 12px;z-index:9}.skip:focus{left:8px}
.t0{--c:var(--t0);--fg:#fff}.t1{--c:var(--t1);--fg:#fff}.t2{--c:var(--t2);--fg:var(--ink)}.t3{--c:var(--t3);--fg:var(--ink)}.t4{--c:var(--t4);--fg:var(--ink)}
.t5{--c:var(--t5);--fg:var(--ink)}.t6{--c:var(--t6);--fg:var(--ink)}.t7{--c:var(--t7);--fg:#2a1006}.t8{--c:var(--t8);--fg:#fff}
.head{background:var(--sea);color:#fff}
.head-in,main,.foot{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:600 17px var(--disp);letter-spacing:-.01em}
.brand-scale{display:inline-flex;gap:2px}.brand-scale i{width:6px;height:18px;background:var(--c);border-radius:2px}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.nav a{color:#d6e6ee;text-decoration:none;font-size:15.5px;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.nav a[aria-current]{color:#fff;border-color:var(--t6)}
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:14.5px;color:var(--muted);padding-top:16px}
.crumbs a{color:var(--muted);text-decoration-color:var(--line)}
h1{font:600 clamp(26px,3.6vw,42px)/1.12 var(--disp);letter-spacing:-.025em;margin:.6em 0 .45em;text-wrap:balance}
h2{font:600 clamp(19px,2.1vw,24px)/1.25 var(--disp);letter-spacing:-.015em;margin:1.9em 0 .6em}
h2 a{text-decoration-thickness:2px}
p{margin:0 0 1em;max-width:42em;text-wrap:pretty}
.lead{font-size:clamp(17.5px,1.6vw,19px);line-height:1.55}
.src{font-size:15px;color:var(--muted)}
.note{font-size:15px;color:var(--muted);border-left:3px solid var(--t3);padding:2px 0 2px 14px;margin:1.6em 0 0}
/* Шкала */
.scale{list-style:none;display:flex;margin:14px 0 18px;padding:0;max-width:720px}
.scale li{flex:1;background:var(--c);color:var(--fg);text-align:center;font-size:12.5px;padding:5px 2px;white-space:nowrap}
.scale li span::before{content:attr(data-l)}
.scale li:first-child{border-radius:4px 0 0 4px}.scale li:last-child{border-radius:0 4px 4px 0}
.chip{display:inline-block;min-width:3.2em;text-align:center;padding:2px 8px;border-radius:999px;background:var(--c);color:var(--fg);font-weight:500}
/* Все курорты на шкале */
.hero{padding-bottom:12px}
.swarm-wrap{margin:26px 0 6px}
.swarm{position:relative;height:calc(var(--rows) * 16px + 24px);border-bottom:2px solid var(--ink)}
.dot{position:absolute;bottom:calc(var(--r) * 16px + 4px);width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px #fff;text-decoration:none}
.dot:hover,.dot:focus-visible{transform:scale(1.35);z-index:3;outline:0;box-shadow:0 0 0 2px var(--ink)}
.dot .tip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:13px;padding:3px 8px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
.dot:hover .tip,.dot:focus-visible .tip{opacity:1}
.comfort{position:absolute;top:0;bottom:0;border-left:2px dashed var(--t7)}
.axis{display:block;width:100%;height:10px}
.axis line{stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.axis-labels{position:relative;height:20px;font-size:13px;color:var(--muted)}
.axis-labels span{position:absolute;transform:translateX(-50%)}
.axis-labels span::before{content:attr(data-l)}
.swarm-wrap figcaption{font-size:14.5px;color:var(--muted);margin-top:6px;max-width:48em}
@media(prefers-reduced-motion:no-preference){.dot{animation:drop .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--r) * 40ms)}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}}
/* Курорт */
.hero-resort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(28px,5vw,64px);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--line)}
.temp{display:inline-flex;align-items:flex-start;gap:4px;margin:.1em 0 .2em;padding:10px 22px 12px;border-radius:18px;background:var(--c);color:var(--fg)}
.tv{font:600 clamp(60px,9vw,112px)/1 var(--disp);letter-spacing:-.05em}
.tu{font:600 clamp(20px,2.4vw,30px)/1.4 var(--disp)}
.temp-sub{font-size:15.5px;color:var(--muted);margin:0 0 1em}
.year-h{font-size:14px;font-weight:500;color:var(--muted);margin:0 0 8px}
.year-strip{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin:0;padding:0}
.year-strip li{background:var(--c);color:var(--fg);border-radius:6px;position:relative}
.year-strip a{display:flex;flex-direction:column;align-items:center;padding:8px 0 10px;color:inherit;text-decoration:none}
.year-strip .ym{font-size:12px;opacity:.85}
.year-strip b{font:600 clamp(13px,1.4vw,17px)/1.2 var(--disp)}
.year-strip li.cur{outline:3px solid var(--ink);outline-offset:1px}
.year-strip li.warm::after{content:"";position:absolute;left:50%;bottom:-10px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--t7)}
.year-note{font-size:15px;color:var(--muted);margin-top:18px}
.facts{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.facts div{background:var(--tint);border-radius:10px;padding:12px 16px}
.facts dt{font-size:14.5px;color:var(--muted)}
.facts dd{margin:2px 0 0;font:600 22px var(--disp)}
/* Календарь */
.cal{border-collapse:separate;border-spacing:2px;width:100%;font-size:14.5px}
.cal thead th{border:0;padding:4px 0;text-align:center;font-weight:500}
.cal thead th a{text-decoration:none;color:var(--muted)}
.cal thead th a:hover{color:var(--ink);text-decoration:underline}
.cal thead th.cur a{color:var(--ink);font-weight:600}
.cal thead th:first-child{text-align:left}
.cal tbody th{border:0;padding:4px 12px 4px 0;white-space:nowrap;font-weight:400}
.cal .cell{border:0;background:var(--c);color:var(--fg);text-align:center;padding:6px 0;min-width:34px;border-radius:3px}
.cal .cell.warm{box-shadow:inset 0 0 0 2px var(--ink)}
.cal tbody tr:hover th{background:none;text-decoration:underline}
/* Таблицы */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em}
table{border-collapse:collapse;width:100%;font-size:16px}
table.narrow,table.now{max-width:820px}
thead th{font-size:13.5px;font-weight:500;color:var(--muted);text-align:left;padding:8px 16px 8px 0;border-bottom:2px solid var(--ink);vertical-align:bottom}
td,tbody th{padding:7px 16px 7px 0;border-bottom:1px solid var(--line);text-align:left}
tbody th{font-weight:400}
.num,th.num{text-align:right;white-space:nowrap}
td:last-child,th:last-child{padding-right:0}
tbody tr:hover th,tbody tr:hover td{background:var(--tint)}
tr.cut th,tr.cut td{border-top:2px dashed var(--t7)}
.chart-wrap{margin:0 0 1em}
.chart{width:100%;height:auto;display:block;max-width:820px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--muted);font:400 12px var(--text)}
.chart .line{fill:none;stroke:var(--t1);stroke-width:2.6;stroke-linejoin:round}
.chart .dot{fill:var(--t7);stroke:#fff;stroke-width:2}
.months-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1em}
.months-nav a,.months-nav span{display:inline-block;min-width:52px;text-align:center;padding:6px 10px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-size:15px}
.months-nav a:hover{border-color:var(--ink)}
.months-nav span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none}
.chips a:hover{border-color:var(--ink)}
ul:not(.chips){padding-left:1.2em;max-width:42em}
.foot{margin-top:64px;padding:24px 0 40px;border-top:2px solid var(--ink);font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot nav a{color:var(--muted);text-decoration-color:var(--line)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--sea);color:#fff;padding:12px 14px 12px 18px;font-size:14.5px;border-radius:12px;z-index:5}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:500 15px/1 var(--text);min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--t5);color:var(--ink);cursor:pointer}
@media(max-width:860px){.hero-resort{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
body{font-size:16.5px}
.head-in{display:block}
.nav{margin-top:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.nav a{white-space:nowrap}
.scale li{font-size:10.5px;padding:4px 0}
.dot{width:8px;height:8px;margin-left:-4px;box-shadow:0 0 0 1px #fff}
.year-strip{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:14px}
.m-hide{display:none}
table{font-size:15px}
td,tbody th,thead th{padding-right:10px}
.cal{font-size:12.5px}.cal .cell{min-width:26px}
}