/* Suppy rannainfo — design system (Inter, suppy teal/cyan/orange). Ported from the approved Claude Design project. Inter is loaded from Google Fonts in the page ; the Suppy wordmark is a path-only SVG asset. */ *{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%} h1,h2,h3{overflow-wrap:break-word} body{background:#F7FBFD;color:#2D3739;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} summary::-webkit-details-marker{display:none} /* visually-hidden but available to screen readers / keyboard */ .sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Visible keyboard focus on every interactive element (links, chips, sort, range tabs, wind toggle, accordion summaries, CTAs). Box-shadow ring follows the element's own border-radius so rounded controls keep their shape. */ :focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #0B6F83;border-radius:8px} a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #0B6F83} .cta-orange:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #FC6600} /* keep keyboard focus visible even on overflow-clipped scroll strips */ .scroll-strip:focus-visible{box-shadow:inset 0 0 0 2px #0B6F83} @keyframes nowpulse{0%{r:6;opacity:.55}70%{r:15;opacity:0}100%{r:15;opacity:0}} @keyframes livedot{0%,100%{opacity:1}50%{opacity:.25}} .now-pulse{animation:nowpulse 2.4s ease-out infinite} /* interactive states (driven by data-active / [open]) */ .chip-btn[data-active="true"]{background:#0B6F83 !important;color:#fff !important;border-color:#0B6F83 !important} .sort-btn[data-active="true"]{background:#fff !important;color:#0B6F83 !important;box-shadow:0 2px 6px rgba(6,36,58,.12) !important} .range-btn[data-active="true"]{background:#0B6F83 !important;color:#fff !important;box-shadow:0 2px 6px rgba(6,36,58,.14) !important} .year-btn[data-active="true"]{background:#0B6F83 !important;color:#fff !important;border-color:#0B6F83 !important} .wind-btn[data-active="true"]{background:#E7ECF7 !important;border-color:#4C6FA5 !important;color:#3a558a !important} .faq-item[open] .faq-chev{transform:rotate(180deg)} .faq-item[open]{border-color:#6FD9EC !important;box-shadow:0 8px 24px rgba(6,36,58,.08) !important} /* hovers */ .lnk:hover{color:#0B6F83 !important} .cta-orange:hover{background:#E25A00 !important} .cta-out:hover{border-color:#0B6F83 !important} .src-link:hover{color:#E25A00 !important} .beach-row:hover{background:#F7FBFD !important} .row-cta{opacity:0;transition:opacity .15s} .beach-row:hover .row-cta{opacity:1} .fc-day[data-today="true"]{background:#EFFAFD !important;border-color:#14BFE1 !important;box-shadow:0 10px 24px -10px rgba(20,191,225,.55) !important} .hr-cell[data-now="true"]{background:#EFFAFD !important;border-color:#14BFE1 !important;box-shadow:0 6px 16px -8px rgba(20,191,225,.5) !important} /* responsive table vs cards */ .beach-table{display:table} .beach-cards{display:none} /* chart tooltip */ .chart-tip{position:absolute;top:10px;background:#fff;border:1px solid #DBE6EC;border-radius:12px;box-shadow:0 10px 28px -8px rgba(6,36,58,.28);padding:10px 13px;pointer-events:none;min-width:132px;z-index:5;display:none} .loc-link:hover{background:rgba(255,255,255,.24) !important} .map-pin:hover{border-color:#14BFE1 !important} /* Estonia map pins (dot is anchored on the geo point via translate(-50%,-50%)) */ .ee-pin{transition:transform .15s} .ee-pin:hover{transform:translate(-50%,-50%) scale(1.1) !important;z-index:6 !important} .ee-pin .ee-pin-label{transition:box-shadow .15s} a.ee-pin:hover .ee-pin-label{box-shadow:0 6px 16px rgba(6,36,58,.22)} @keyframes eepulse{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{opacity:0}} .ee-pulse{animation:eepulse 2.6s ease-out infinite} /* hub hero search (search-first landing) */ #hero-q{-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s} #hero-q:focus{border-color:#14BFE1} #hero-q::-webkit-search-cancel-button{-webkit-appearance:none} #hero-hits .hit:first-child{border-top:none !important} #hero-hits .hit:hover,#hero-hits .hit:focus{background:#F7FBFD} /* "Lähedal" (nearby) button inside the hero search */ .hero-near:hover{background:#DFF4FA;border-color:#8FD6E8} .hero-near[disabled]{opacity:.65;cursor:progress} @media(max-width:460px){ #hero-q{padding-right:56px !important} .hero-near{padding:8px 9px !important} .hero-near-label{display:none} } /* ---- favourite beaches: star toggle + "Sinu lemmikud" hero chips ---- */ .fav-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;background:transparent;border-radius:9px;cursor:pointer;color:#B9CBD4;transition:color .15s,transform .12s;flex:none} .fav-btn svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round} .fav-btn:hover{color:#F5A300} .fav-btn:active{transform:scale(.88)} .fav-btn[aria-pressed="true"]{color:#F5A300} .fav-btn[aria-pressed="true"] svg{fill:#F5A300} /* labeled favourite pill (beach page, top-right of the breadcrumb row) */ .fav-toggle{width:auto;height:auto;gap:7px;padding:8px 13px;border:1px solid #DBE6EC;background:#fff;border-radius:999px;color:#5E727A;font-weight:600;font-size:13px;box-shadow:0 4px 12px rgba(6,36,58,.06);white-space:nowrap} .fav-toggle svg{width:16px !important;height:16px !important} .fav-toggle:hover{color:#F5A300;border-color:#F5C24D} .fav-toggle[aria-pressed="true"]{color:#0B6F83;background:#FFF9EC;border-color:#F5C24D} .fav-toggle-label{line-height:1} .fav-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #DBE6EC;border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:#0B6F83;box-shadow:0 4px 12px rgba(6,36,58,.06);transition:border-color .15s,box-shadow .15s} .fav-chip:hover{border-color:#6FD9EC;box-shadow:0 8px 18px -8px rgba(20,191,225,.5)} .fav-chip-temp{font-variant-numeric:tabular-nums;font-weight:700} /* sortable hub column headers */ .sort-th{transition:color .15s} .sort-th:hover{color:#0B6F83} .sort-caret{opacity:0;transition:opacity .15s,transform .2s;flex:none} .sort-th:hover .sort-caret{opacity:.45} .sort-th[aria-sort="ascending"] .sort-caret,.sort-th[aria-sort="descending"] .sort-caret{opacity:1;color:#0B6F83} .sort-th[aria-sort="ascending"] .sort-caret{transform:rotate(180deg)} .sort-th[aria-sort="ascending"],.sort-th[aria-sort="descending"]{color:#0B6F83} @media(max-width:900px){ .nav-links{display:none !important} .hero-grid{grid-template-columns:1fr !important} .hub-stats{grid-template-columns:repeat(3,1fr) !important} .map-grid{grid-template-columns:1fr !important} .cta-band-grid{grid-template-columns:1fr !important;text-align:center !important} .cta-band-grid .cta-band-actions{justify-content:center !important} .footer-cols{grid-template-columns:1fr 1fr !important} .hub-stats{grid-template-columns:1fr 1fr !important} .legend-grid{grid-template-columns:1fr !important} .src-row{flex-direction:column !important;align-items:flex-start !important;gap:6px !important} } @media(max-width:760px){ .olud-card{grid-template-columns:1fr !important} .olud-water{border-right:none !important;padding-right:0 !important;border-bottom:1px solid #EEF4F7;padding-bottom:18px} .beach-table-wrap{display:none !important} .beach-cards{display:grid !important} .hazard-grid{grid-template-columns:1fr !important} } @media(max-width:560px){ .cond-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important} .head-row{flex-direction:column !important;align-items:stretch !important} .head-meta{align-items:flex-start !important} .pad-x{padding-left:20px !important;padding-right:20px !important} .footer-cols{grid-template-columns:1fr !important} .hub-stats{grid-template-columns:1fr !important} /* keep the sticky-header CTA from overflowing on narrow phones */ header .pad-x{padding-left:16px !important;padding-right:16px !important;gap:10px !important} header .cta-orange{padding:9px 13px !important;font-size:13px !important} } @media(max-width:380px){ header .cta-orange .cta-label{display:none} } /* let grid/flex children shrink instead of forcing horizontal overflow */ .cond-grid>div,.cond-grid>div>div{min-width:0} /* ---- horizontal scroll strips: keyboard/touch scrollable + right-edge fade ---- .scroll-fade wraps the scroller and paints a subtle gradient on its right edge so it reads as "there is more — scroll". The fade sits above the strip but is click/touch-transparent. On the inner strip we keep momentum scrolling and a thin custom scrollbar. */ .scroll-fade{position:relative} .scroll-fade::after{content:"";position:absolute;top:0;right:0;bottom:8px;width:40px;pointer-events:none;border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);opacity:.9;transition:opacity .2s} .scroll-fade[data-fade="off"]::after{opacity:0} .scroll-strip{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#C4D6DE transparent;scroll-snap-type:x proximity} .scroll-strip>*{scroll-snap-align:start} .scroll-strip::-webkit-scrollbar{height:7px} .scroll-strip::-webkit-scrollbar-thumb{background:#C4D6DE;border-radius:99px} .scroll-strip::-webkit-scrollbar-track{background:transparent} /* range-tab strip sits on the pale chart-card pill, so fade to that colour */ .range-fade::after{bottom:0;width:34px;border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(247,251,253,0),#F7FBFD 80%)} /* "Täna tunni kaupa" hour strip: on desktop fit every hour across the card (no scroll); on phones fall back to a horizontal scroll strip. --n = hour count. */ .hr-strip{display:grid;grid-template-columns:repeat(var(--n,12),minmax(0,1fr));gap:8px} @media(max-width:720px){.hr-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58px;overflow-x:auto}} /* ---- SEO intro paragraph (under the conditions card) ---- */ .beach-intro{font-size:16px;color:#5a6b72;margin:18px 0 0;max-width:64ch;line-height:1.62} .beach-intro strong{color:#2E4753;font-weight:600} /* ---- related-beaches grid ("Lähedal & teised rannad") ---- */ .related-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #DBE6EC;border-radius:14px;box-shadow:0 4px 12px rgba(6,36,58,.05);padding:14px 16px;color:#0B6F83;transition:border-color .15s,box-shadow .15s,transform .15s} .related-item:hover{border-color:#6FD9EC !important;box-shadow:0 10px 24px -10px rgba(20,191,225,.5) !important;transform:translateY(-1px)} .related-item .related-temp{flex:none;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .now-pulse{animation:none !important} [style*="animation:livedot"]{animation:none !important} .scroll-strip{scroll-snap-type:none} }