@font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-italic-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-italic-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-italic-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-italic-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: 'Noto Serif Display'; font-style: normal; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-normal-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Noto Serif Display'; font-style: normal; font-weight: 300 500; font-stretch: 100%; font-display: swap; src: url(/v2/fonts/nsd-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: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/v2/fonts/onest-normal-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/v2/fonts/onest-normal-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/v2/fonts/onest-normal-latin-ext.woff2) format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/v2/fonts/onest-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; } :root { --abyss: #04161e; --sea: #06202b; --deep: #0b3446; --reef: #1c6f78; --lagoon: #3cc8c0; --shallow: #a9ebe3; --foam: #e9faf7; --sand: #f5efe4; --sand-2: #ece3d2; --dune: #d8c7a6; --ink: #0c1b22; --mute: #55666c; --line: rgba(12, 27, 34, .14); --kite: #ff5436; --kite-d: #e63e20; --kite-btn: #d6391b; --kite-btn-d: #b92e13; --salt: #fff; --serif: 'Noto Serif Display', 'Times New Roman', serif; --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --pad: clamp(20px, 4.2vw, 64px); --max: 1440px; --ease: cubic-bezier(.2, .7, .1, 1); --hdr: 76px; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; background: var(--sand); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; } em { font-style: italic; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; } .skip:focus { top: 12px; } :focus-visible { outline: 2px solid var(--kite); outline-offset: 3px; } .eyebrow { margin: 0 0 18px; font: 600 12.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--reef); } .h2 { margin: 0; font: 300 clamp(44px, 6.2vw, 100px)/.98 var(--serif); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; } .h2 em, .statement em, .hero-display em { font-weight: 400; font-style: italic; letter-spacing: -.02em; } .statement { margin: 0; font: 300 clamp(30px, 3.6vw, 56px)/1.12 var(--serif); letter-spacing: -.02em; text-wrap: balance; } .statement em { color: var(--reef); } .statement-s { font-size: clamp(28px, 3vw, 46px); } .btn { --b: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border-radius: 999px; font: 600 16px/1.1 var(--sans); text-decoration: none; letter-spacing: .005em; border: 1.5px solid transparent; cursor: pointer; transition: transform .5s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .5s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn-kite { background: var(--kite-btn); color: #fff; box-shadow: 0 10px 30px -12px rgba(255, 84, 54, .7); } .btn-kite:hover { background: var(--kite-btn-d); box-shadow: 0 16px 40px -14px rgba(255, 84, 54, .8); } .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); } .btn-dark { background: var(--sea); color: #fff; } .btn-dark:hover { background: var(--deep); } .btn-sm { min-height: 44px; padding: 10px 20px; font-size: 15px; } .kiteline { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; } .kiteline span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--lagoon), var(--kite)); } .hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad); color: #fff; transition: transform .6s var(--ease), background-color .4s, color .4s, box-shadow .4s; } .hdr.is-solid { background: rgba(245, 239, 228, .86); color: var(--ink); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); } .hdr.is-hidden { transform: translateY(-100%); } .logo { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; white-space: nowrap; } .logo-a { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; } .logo-b { font: italic 400 30px/1 var(--serif); letter-spacing: -.01em; } .nav { display: flex; gap: clamp(16px, 2.2vw, 34px); } .nav a { position: relative; font: 500 15px/1 var(--sans); text-decoration: none; padding: 10px 0; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); } .nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .hdr-r { display: flex; align-items: center; gap: 14px; } .lang { font: 600 13px/1 var(--sans); letter-spacing: .12em; text-decoration: none; padding: 12px 6px; opacity: .85; } .burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; position: relative; cursor: pointer; } .burger span:not(.sr) { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); } .burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 26px; } .burger[aria-expanded=true] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .burger[aria-expanded=true] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); } .mnav { position: fixed; inset: 0; z-index: 45; background: var(--sea); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 90px var(--pad) 40px; } .mnav[hidden] { display: none; } .mnav a:not(.btn) { font: 300 40px/1.25 var(--serif); text-decoration: none; } .mnav .btn { margin-top: 26px; align-self: flex-start; } .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; color: #fff; overflow: hidden; background: var(--sea); isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -3; } .hero-poster, .hero-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-video.is-playing { opacity: 1; } .hero-video, .hero-poster img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.04 + var(--hp, 0) * .08)) translateY(calc(var(--hp, 0) * 6%)); transform-origin: 50% 60%; } .wind-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 22, 30, .45) 0%, rgba(4, 22, 30, 0) 22%), linear-gradient(0deg, rgba(4, 22, 30, .78) 0%, rgba(4, 22, 30, .25) 40%, rgba(4, 22, 30, 0) 62%), linear-gradient(90deg, rgba(4, 22, 30, .45) 0%, rgba(4, 22, 30, 0) 55%); } .hero-in { align-self: end; padding: calc(var(--hdr) + 40px) var(--pad) 36px; max-width: var(--max); width: 100%; margin: 0 auto; } .hero .eyebrow { color: var(--shallow); } .hero-h { margin: 0; font-weight: 300; } .hero-kicker { display: block; width: fit-content; margin: 0 0 18px; padding: 7px 14px 8px; border-radius: 999px; background: rgba(4, 22, 30, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 500 clamp(17px, 1.5vw, 21px)/1.3 var(--sans); letter-spacing: .01em; color: rgba(255, 255, 255, .92); } .hero-display { display: block; font: 300 clamp(68px, 11.6vw, 200px)/.88 var(--serif); letter-spacing: -.045em; margin-left: -.04em; text-wrap: balance; } .gust { display: inline-block; transform-origin: 0 85%; animation: gust 7s ease-in-out infinite; padding-right: .06em; } @keyframes gust { 0%, 100% { transform: skewX(0deg); } 30% { transform: skewX(-5deg) translateX(.015em); } 55% { transform: skewX(-1.5deg); } 70% { transform: skewX(-4deg) translateX(.01em); } } .hero-lead { max-width: 560px; margin: 26px 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .9); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 var(--pad); max-width: var(--max); width: 100%; margin-inline: auto; } .hero-facts > div { padding: 18px 0 26px; border-top: 1px solid rgba(255, 255, 255, .28); } .hero-facts > div + div { padding-left: 24px; } .hero-facts dt { font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 9px; } .hero-facts dd { margin: 0; font: 300 clamp(22px, 2vw, 30px)/1.1 var(--serif); } .hero-facts dd span { font: 400 14px/1 var(--sans); color: rgba(255, 255, 255, .75); margin-left: 4px; } .scroll-cue { position: absolute; right: var(--pad); bottom: 28px; width: 44px; height: 92px; display: flex; justify-content: center; } .scroll-cue span { width: 1.5px; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0), #fff); transform-origin: 50% 0; animation: cue 2.8s var(--ease) infinite; } @keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } .ch { display: inline-block; opacity: 0; transform: translate3d(-.35em, -.12em, 0) rotate(-6deg); filter: blur(8px); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i) * 34ms + 150ms); } .w { display: inline-block; white-space: nowrap; } .in .ch, .in.ch { opacity: 1; transform: none; filter: none; } @keyframes rise { from { opacity: 0; transform: translate3d(-18px, 14px, 0); } to { opacity: 1; transform: none; } } .hero [data-rise] { opacity: 1 !important; transform: none !important; animation: rise 1.1s var(--ease) both; animation-delay: var(--d, 120ms); } .js [data-rise] { opacity: 0; transform: translate3d(-18px, 14px, 0); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); } .js [data-rise].in { opacity: 1; transform: none; } .wd { display: inline-block; filter: blur(5px); transform: translate3d(-.25em, .12em, 0); transition: filter 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i) * 40ms); } .in .wd { filter: none; transform: none; } .js [data-wipe] img { clip-path: inset(0 100% 0 0); transform: scale(1.12); transition: clip-path 1.6s var(--ease), transform 2.2s var(--ease); } .js [data-wipe].in img { clip-path: inset(0 0 0 0); transform: scale(1); } .why { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(90px, 13vw, 190px) var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; } .why-text { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; } .why-p { max-width: 520px; margin: 34px 0 0; color: var(--mute); font-size: 18px; } .why-img { margin: 0; overflow: hidden; border-radius: 4px; } .why-img img { width: 100%; height: 100%; object-fit: cover; } .why-img-a { grid-column: 8 / span 5; grid-row: 1 / span 2; margin-top: 40px; aspect-ratio: 4 / 5; align-self: start; } .why-img-b { grid-column: 3 / span 6; grid-row: 2; aspect-ratio: 3 / 2; margin-top: 64px; box-shadow: 0 30px 60px -30px rgba(4, 22, 30, .45); transform: translateY(var(--py, 0)); z-index: 3; } .voyage { position: relative; background: var(--sea); color: #fff; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .voyage-sticky { position: sticky; top: 0; height: 100svh; grid-column: 1; grid-row: 1; align-self: start; overflow: hidden; } .chart { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #0d4255 0%, #082b39 45%, #051c26 100%); } .chart-cam { position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: var(--car); transform-origin: 0 0; will-change: transform; } .chart-svg-wrap, .chart-svg-wrap svg, .route { position: absolute; inset: 0; width: 100%; height: 100%; } .chart-svg .c-land path { fill: #efe3cb; stroke: rgba(130, 100, 60, .35); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .chart-svg .c-reef path { fill: #43c7bd; fill-opacity: .5; stroke: #8ce8dd; stroke-opacity: .5; stroke-width: .8; vector-effect: non-scaling-stroke; } .route path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .route-bg { stroke: rgba(255, 255, 255, .45); } .route-line { stroke: var(--kite); filter: drop-shadow(0 0 6px rgba(255, 84, 54, .55)); } .pins { position: absolute; inset: 0; } .pin { position: absolute; transform: translate(-50%, -50%) scale(var(--iz, 1)); display: flex; align-items: center; gap: 10px; pointer-events: none; } .pin i { width: 9px; height: 9px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 3px rgba(239, 227, 203, .9); transition: transform .6s var(--ease), background-color .4s; } .pin b { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); padding: 6px 9px 5px; border-radius: 3px; background: rgba(6, 32, 43, .9); font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #fff; box-shadow: inset 0 0 0 1px rgba(239, 227, 203, .38), 0 6px 16px -8px rgba(0, 0, 0, .5); } .pin.is-on i { background: var(--kite); transform: scale(1.5); box-shadow: 0 0 0 6px rgba(255, 84, 54, .25); } .pin.is-on b { background: var(--kite-btn); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); } .pin.lf b { left: auto; right: 16px; } .boat { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; } .boat span { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 0 24px 6px rgba(255, 255, 255, .35); } .wind-chart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .chart-legend { position: absolute; left: var(--pad); bottom: 22px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(4, 22, 30, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 500 13.5px/1.3 var(--sans); color: rgba(255, 255, 255, .88); } .lg-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); position: relative; transform: rotate(139deg); } .lg-arrow::before { content: ""; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 1.5px; margin-left: -.75px; background: #fff; } .lg-arrow::after { content: ""; position: absolute; left: 50%; top: 4px; width: 7px; height: 7px; margin-left: -3.5px; border-left: 1.5px solid #fff; border-top: 1.5px solid #fff; transform: rotate(45deg); } .lg-src { color: rgba(255, 255, 255, .5); font-size: 12px; } .chart-scale { position: absolute; right: 24px; bottom: 30px; font: 500 12px/1 var(--sans); color: rgba(255, 255, 255, .6); display: flex; align-items: center; gap: 8px; } .chart-scale span { display: block; height: 6px; width: var(--km10, 60px); border: 1.5px solid rgba(255, 255, 255, .6); border-top: 0; } .voyage-intro { display: none; } .voyage-head { position: absolute; left: var(--pad); top: calc(var(--hdr) + 20px); right: var(--pad); pointer-events: none; } .voyage-head { isolation: isolate; } .voyage-head::before { content: ''; position: absolute; z-index: -1; inset: -140px -15% -150px calc(-1 * var(--pad)); background: radial-gradient(ellipse 62% 50% at 26% 48%, rgba(5, 28, 38, .9) 0%, rgba(5, 28, 38, .72) 45%, rgba(5, 28, 38, 0) 100%); } .voyage-head .h2, .voyage-p { text-shadow: 0 1px 14px rgba(5, 28, 38, .8); } .voyage-head .eyebrow { color: var(--shallow); } .voyage-head .h2 { color: #fff; font-size: clamp(40px, 4.6vw, 76px); } .voyage-p { max-width: 380px; margin: 14px 0 0; font-size: 15px; color: rgba(255, 255, 255, .72); } .steps { grid-column: 2; grid-row: 1; list-style: none; margin: 0; padding: 0 var(--pad) 30vh; } .step { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding: 60px 0; } .step h3, .step p { transition: color .8s var(--ease); } .step figure { transition: opacity .8s var(--ease); } .step:not(.is-on) h3, .step:not(.is-on) p:not(.step-day) { color: rgba(255, 255, 255, .55) !important; } .step:not(.is-on) figure { opacity: .45; } .step-day { margin: 0 0 12px; font: 600 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--kite); } .step h3 { margin: 0 0 16px; font: 300 clamp(38px, 3.8vw, 62px)/1 var(--serif); letter-spacing: -.025em; } .step p { margin: 0; max-width: 460px; color: rgba(255, 255, 255, .82); font-size: 17.5px; } .step figure { margin: 30px 0 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; } .step figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.8s var(--ease); } .step.is-on figure img { transform: scale(1); } .step-note { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px !important; color: rgba(255, 255, 255, .62) !important; } .price { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 12vw, 170px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 6vw, 110px); } .price-big { margin: 0; display: flex; flex-direction: column; gap: 10px; } .price-big .num { font: 300 clamp(76px, 10vw, 160px)/.9 var(--serif); letter-spacing: -.045em; } .price-big .per { font-size: 16px; color: var(--mute); } .price-up { margin: 22px 0 0; max-width: 380px; color: var(--mute); font-size: 15.5px; } .price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-self: end; } .price-cols h3 { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; } .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; } .ticks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 14px; height: 8px; border-left: 1.8px solid var(--reef); border-bottom: 1.8px solid var(--reef); transform: rotate(-45deg); } .ticks-off li::before { width: 14px; height: 0; top: 22px; border-left: 0; border-bottom: 1.8px solid var(--mute); transform: none; } .disclose { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--mute); font-size: 15px; max-width: 760px; } .months { position: relative; background: var(--foam); overflow: hidden; isolation: isolate; } .wind-months { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .months-in { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 12vw, 160px) var(--pad); } .months-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; } .months-head .eyebrow { grid-column: 1 / -1; } .months-p { margin: 0; color: var(--mute); font-size: 15.5px; max-width: 460px; } .mbars { margin-top: 70px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(6px, 1vw, 14px); align-items: end; height: clamp(240px, 30vw, 380px); } .mbar input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .mbar:has(input:focus-visible) .mbar-col { outline: 2px solid var(--kite); outline-offset: 3px; } .mbar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: inherit; } .mbar-col { position: relative; height: calc(var(--h) * 1%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(28, 111, 120, .55), rgba(28, 111, 120, .18)); transform-origin: 50% 100%; transform: scaleY(.0001); transition: transform 1.4s var(--ease), background .4s; transition-delay: calc(var(--i) * 60ms); } .in .mbar-col { transform: scaleY(1); } .mbar.is-safari .mbar-col { background: linear-gradient(180deg, var(--reef), rgba(28, 111, 120, .55)); } .mbar:hover .mbar-col, .mbar.is-on .mbar-col { background: linear-gradient(180deg, var(--kite), rgba(255, 84, 54, .55)); } .mbar-v { position: absolute; left: 0; right: 0; top: -30px; text-align: center; font: 300 clamp(16px, 1.7vw, 26px)/1 var(--serif); letter-spacing: -.02em; } .mbar-m { margin-top: 12px; text-align: center; font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .mbar.is-safari .mbar-m::after { content: ""; display: block; width: 5px; height: 5px; margin: 7px auto 0; border-radius: 50%; background: var(--kite); } .months-now { margin: 34px 0 0; min-height: 1.6em; font: 300 clamp(20px, 1.8vw, 26px)/1.3 var(--serif); } .kite { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(170deg, #0f5f6c 0%, #0b3a4b 55%, #06202b 100%); } .wind-kite { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .kite-in { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 12vw, 160px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; } .kite .eyebrow { color: var(--shallow); } .kite .h2 { color: #fff; } .kcalc { margin-top: 44px; display: grid; gap: 28px; max-width: 520px; } .rng { display: grid; gap: 14px; } .rng-l { display: flex; justify-content: space-between; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .rng-l output { font: 300 24px/1 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #fff var(--f, 50%), rgba(255, 255, 255, .25) var(--f, 50%)); } input[type=range]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .25); } input[type=range]::-moz-range-progress { height: 2px; background: #fff; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; background: var(--kite); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); } input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--kite); border: 3px solid #fff; } .seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .seg legend { width: 100%; margin-bottom: 12px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); font-weight: 600; font-size: 15px; transition: background .3s, color .3s, border-color .3s; } .seg input:checked + span { background: #fff; color: var(--sea); border-color: #fff; } .seg input:focus-visible + span { outline: 2px solid var(--kite); outline-offset: 3px; } .kcalc-note { margin: 30px 0 0; max-width: 480px; font-size: 14.5px; color: rgba(255, 255, 255, .7); } .kcalc-note a { color: #fff; text-underline-offset: 3px; } .kite-viz { position: relative; display: flex; flex-direction: column; align-items: center; } .kite-svg { width: min(100%, 520px); height: auto; overflow: visible; } .k-canopy { fill: url(#kg); stroke: rgba(255, 255, 255, .5); stroke-width: 1; vector-effect: non-scaling-stroke; } .k-seams path { fill: none; stroke: rgba(120, 20, 5, .35); stroke-width: 1; vector-effect: non-scaling-stroke; } .k-te { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .k-bridle path { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: .8; vector-effect: non-scaling-stroke; } .k-le { fill: none; stroke: url(#kle); stroke-width: 9; stroke-linecap: round; } .k-struts path { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 4.5; stroke-linecap: round; } .k-lines path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; vector-effect: non-scaling-stroke; } .k-bar path { stroke: #fff; stroke-width: 5; stroke-linecap: round; } .k-barimg { filter: drop-shadow(0 8px 10px rgba(0, 18, 28, .45)); } .k-lines path[data-kl1] { stroke: rgba(255, 92, 128, .85); } .k-lines path[data-kl2] { stroke: rgba(80, 176, 255, .85); } .k-wing { transition: transform .9s var(--ease); } .kite-size { margin: 4px 0 0; display: flex; align-items: baseline; gap: 10px; } .kite-size .num { font: 300 clamp(96px, 11vw, 170px)/.85 var(--serif); letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .kite-size .unit { font: 300 clamp(28px, 3vw, 44px)/1 var(--serif); } .kite-cap { margin: 14px 0 0; color: rgba(255, 255, 255, .75); font-size: 15.5px; text-align: center; } .spots { background: var(--abyss); color: #fff; padding: clamp(90px, 12vw, 160px) 0 clamp(70px, 9vw, 120px); overflow: hidden; } .spots-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; } .spots-head .eyebrow { grid-column: 1 / -1; color: var(--shallow); } .spots .h2 { color: #fff; } .spots-p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 15.5px; max-width: 460px; } .mchips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .mchips button { min-height: 40px; min-width: 52px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: none; color: rgba(255, 255, 255, .8); font: 600 13px/1 var(--sans); letter-spacing: .06em; cursor: pointer; transition: background .3s, color .3s, border-color .3s; } .mchips button:hover { border-color: rgba(255, 255, 255, .6); } .mchips button[aria-selected=true] { background: #fff; color: var(--abyss); border-color: #fff; } .world { position: relative; max-width: 1600px; margin: 40px auto 0; aspect-ratio: 1000 / 384; } .world-svg, .world-dots { position: absolute; inset: 0; width: 100%; height: 100%; } .world-svg path { fill: rgba(233, 250, 247, .085); stroke: rgba(233, 250, 247, .16); stroke-width: .5; vector-effect: non-scaling-stroke; } .world-key { position: absolute; left: var(--pad); bottom: 6%; display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--sans); color: rgba(255, 255, 255, .6); } .world-key i { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2a5566, #3cc8c0, #ffd166, #ff5436); } .spots-cta { text-align: center; margin: 30px 0 0; } .spots .btn-dark { background: #fff; color: var(--abyss); } .read { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 12vw, 170px) var(--pad); } .read-head { margin-bottom: 56px; } .cards { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; gap: 44px 28px; } .card { display: flex; flex-direction: column; text-decoration: none; } .card-xl { grid-row: span 2; } .card-img { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; background: var(--sand-2); } .card-xl .card-img { aspect-ratio: 4 / 5; } .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .card:hover .card-img img { transform: scale(1.05); } .card-meta { margin-top: 18px; font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--reef); } .card-t { margin-top: 10px; font: 300 clamp(24px, 2vw, 32px)/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .7s var(--ease); } .card-xl .card-t { font-size: clamp(30px, 2.8vw, 44px); } .card:hover .card-t { background-size: 100% 1px; } .cards .card:nth-child(4) { grid-column: 2 / span 2; flex-direction: row; gap: 28px; align-items: center; } .cards .card:nth-child(4) .card-img { flex: 0 0 48%; } .me { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(90px, 12vw, 170px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; } .me-img { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; } .me-img img { width: 100%; height: 100%; object-fit: cover; } .me-text p:not(.eyebrow):not(.statement) { max-width: 520px; color: var(--mute); font-size: 18px; margin: 26px 0 0; } .sign { font: italic 400 34px/1 var(--serif) !important; color: var(--ink) !important; } .final { position: relative; color: #fff; overflow: hidden; isolation: isolate; background: var(--sea); } .final-media { position: absolute; inset: 0; z-index: -3; } .final-media img, .final-video { width: 100%; height: 100%; object-fit: cover; } .final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 22, 30, .82) 0%, rgba(4, 22, 30, .55) 55%, rgba(4, 22, 30, .35) 100%); } .wind-final { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .final-in { max-width: var(--max); margin: 0 auto; padding: clamp(100px, 13vw, 180px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; } .final .eyebrow { color: var(--shallow); } .h2-light { color: #fff; } .final-text p:not(.eyebrow) { margin: 26px 0 0; max-width: 460px; color: rgba(255, 255, 255, .85); font-size: 18px; } .fform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: 6px; background: rgba(245, 239, 228, .96); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); } .fl { display: grid; gap: 8px; } .fl > span { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .fl > span i { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 400; } .fl input, .fl select, .fl textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(12, 27, 34, .22); border-radius: 4px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); transition: border-color .3s, box-shadow .3s; } .fl input:focus, .fl select:focus, .fl textarea:focus { outline: none; border-color: var(--reef); box-shadow: 0 0 0 3px rgba(28, 111, 120, .18); } .fl-wide { grid-column: 1 / -1; margin: 0; } .fsmall { font-size: 13px; color: var(--mute); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; } .form-msg { min-height: 1.4em; font-weight: 600; } .form-msg.ok { color: var(--reef); } .form-msg.err { color: var(--kite-d); } .fform .btn { width: 100%; } .ftr { background: var(--abyss); color: rgba(255, 255, 255, .75); } .ftr-in { max-width: var(--max); margin: 0 auto; padding: 70px var(--pad) 50px; display: grid; gap: 22px; } .logo-light { color: #fff; } .ftr p { margin: 0; max-width: 560px; } .ftr nav { display: flex; flex-wrap: wrap; gap: 4px 26px; } .ftr nav a { padding: 10px 0; text-decoration: none; color: #fff; } .ftr-small { font-size: 13px; color: rgba(255, 255, 255, .5); } @media (max-width: 1080px) { .nav { display: none; } .burger { display: block; } .hdr-r .btn-sm { display: none; } } @media (max-width: 900px) { :root { --hdr: 64px; } .logo-b { font-size: 26px; } .hero-facts { grid-template-columns: 1fr 1fr; } .hero-facts > div:nth-child(3) { display: none; } .scroll-cue { display: none; } .why { grid-template-columns: 1fr; gap: 0; } .why-text { grid-column: 1; } .why-img-a { grid-column: 1; grid-row: auto; margin-top: 48px; width: 82%; justify-self: end; aspect-ratio: 4 / 5; } .why-img-b { grid-column: 1; grid-row: auto; width: 62%; margin-top: -90px; } .voyage { display: block; } .voyage-sticky { height: 48svh; top: 0; z-index: 2; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6); } .steps { position: relative; z-index: 1; padding: 0 var(--pad) 8vh; } .step { min-height: 62svh; padding: 36px 0 40px; justify-content: flex-start; } .step figure { margin-top: 22px; } .step:last-child { min-height: 0; } .voyage-intro { display: block; padding: 90px var(--pad) 36px; } .voyage-intro .eyebrow { color: var(--shallow); } .voyage-intro .h2 { color: #fff; } .voyage-head { display: none; } .chart-legend { bottom: 14px; font-size: 12px; } .chart-scale { display: none; } .price { grid-template-columns: 1fr; } .price-cols { grid-template-columns: 1fr; gap: 34px; } .months-head, .spots-head { grid-template-columns: 1fr; } .mbars { margin-top: 56px; gap: 4px; } .mbar-m { font-size: 10px; letter-spacing: .02em; } .kite-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .kite-text { display: contents; } .kite .eyebrow { order: 1; } .kite .h2 { order: 2; } .kite-viz { order: 3; margin: 30px 0 10px; } .kcalc { order: 4; } .kcalc-note { order: 5; } .kite-svg { width: min(78%, 360px); } .world { aspect-ratio: 1000 / 384; margin-inline: -18%; } .world-key { position: static; justify-content: center; margin-top: 18px; } .world { margin-bottom: 0; } .cards { grid-template-columns: 1fr 1fr; } .card-xl { grid-column: 1 / -1; grid-row: auto; } .card-xl .card-img { aspect-ratio: 4 / 3; } .cards .card:nth-child(4) { grid-column: 1 / -1; } .me { grid-template-columns: 1fr; } .me-img { width: 80%; } .final-in { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 560px) { .hero-display { font-size: clamp(60px, 18.5vw, 96px); } .hero-cta .btn { width: 100%; } .hero { min-height: 0; } .hero-in { padding-top: calc(var(--hdr) + 96px); } .hero-facts > div + div { padding-left: 16px; } .cards { grid-template-columns: 1fr; } .cards .card:nth-child(4) { flex-direction: column; align-items: stretch; gap: 0; } .fform { grid-template-columns: 1fr; } .mbar-v { font-size: 13px; top: -22px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .ch, [data-rise], .wd { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } [data-wipe] img { clip-path: none !important; } .mbar-col { transform: none !important; } .hero-video, .hero-poster img { transform: none !important; } } .why-img-a img { object-position: 22% 50%; } .me-img img { object-position: 50% 30%; } .k-img { filter: drop-shadow(0 18px 24px rgba(0, 18, 28, .45)); } .sec-cta { margin: 36px 0 0; } .price .sec-cta { grid-column: 1 / -1; margin: 0; } .read .sec-cta { margin-top: clamp(40px, 5vw, 64px); text-align: center; } .steps .sec-cta { margin-top: 26px !important; } .months .sec-cta { margin-top: 28px; } .me-text .sec-cta { margin-top: 32px !important; } .mbar-ms { display: block; margin-top: 4px; text-align: center; font: 500 11px/1 var(--sans); color: var(--mute); opacity: .8; } .lv-ms { font-size: .45em; font-weight: 400; color: inherit; opacity: .7; white-space: nowrap; } .nav a[aria-current=page]::after { transform: scaleX(1); } .mnav a[aria-current=page] { color: var(--shallow); } .mnav .mnav-lang { margin-top: 18px; font: 600 14px/1 var(--sans) !important; letter-spacing: .14em; opacity: .8; } .phead { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #0f4a5c 0%, #0a3445 40%, #06202b 75%, #04161e 100%); } .phead-wind { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; } .phead-in { position: relative; max-width: var(--max); margin: 0 auto; padding: calc(var(--hdr) + clamp(36px, 6vw, 96px)) var(--pad) clamp(44px, 5.5vw, 84px); } .phead .eyebrow { color: var(--shallow); } .phead-photo .eyebrow { text-shadow: 0 0 6px rgba(4, 22, 30, .95), 0 0 14px rgba(4, 22, 30, .9), 0 0 24px rgba(4, 22, 30, .7); } .phead-h { margin: 0; max-width: 17ch; font: 300 clamp(46px, 7vw, 116px)/.95 var(--serif); letter-spacing: -.035em; text-wrap: balance; } .phead-h em { font-style: italic; font-weight: 400; } .phead-h-s { font-size: clamp(42px, 5.6vw, 92px); max-width: 20ch; } .phead-lead { max-width: 640px; margin: 26px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: rgba(255, 255, 255, .86); } .phead-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .phead-photo { min-height: min(88svh, 940px); display: grid; align-items: end; background: var(--sea); } .phead-photo .phead-in { width: 100%; padding-top: calc(var(--hdr) + 120px); } .phead-media { position: absolute; inset: 0; z-index: -3; } .phead-media picture, .phead-media img, .phead-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .phead-media img, .phead-media video { transform: scale(calc(1.03 + var(--hp, 0) * .07)) translateY(calc(var(--hp, 0) * 5%)); transform-origin: 50% 60%; } .phead-media video { opacity: 0; transition: opacity 1.2s var(--ease); } .phead-media video.is-playing { opacity: 1; } .phead-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(4, 22, 30, .5) 0%, rgba(4, 22, 30, 0) 24%), linear-gradient(0deg, rgba(4, 22, 30, .86) 0%, rgba(4, 22, 30, .42) 38%, rgba(4, 22, 30, 0) 66%), linear-gradient(90deg, rgba(4, 22, 30, .5) 0%, rgba(4, 22, 30, 0) 60%); } .phead-photo .phead-wind { z-index: -1; } .pfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: clamp(36px, 4vw, 56px) 0 0; max-width: 1100px; } .pfacts > div { padding: 16px 20px 4px 0; border-top: 1px solid rgba(255, 255, 255, .3); } .pfacts dt { font: 600 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 9px; } .pfacts dd { margin: 0; font: 300 clamp(22px, 2vw, 30px)/1.1 var(--serif); } .pfacts dd small { display: block; margin-top: 6px; font: 400 14px/1.35 var(--sans); color: rgba(255, 255, 255, .75); } .crumbs { margin: 0 0 40px; } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; } .crumbs li { color: rgba(255, 255, 255, .62); } .crumbs li + li::before { content: "/"; margin: 0 10px; color: rgba(255, 255, 255, .35); } .crumbs a { color: rgba(255, 255, 255, .86); text-decoration: none; padding: 6px 0; } .crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .crumbs li[aria-current] { color: rgba(255, 255, 255, .62); } .phead-photo .crumbs ol { display: inline-flex; padding: 8px 14px; margin-left: -14px; border-radius: 6px; background: rgba(4, 22, 30, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .phead-photo .crumbs li, .phead-photo .crumbs li[aria-current] { color: rgba(255, 255, 255, .8); } .blk { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 140px) var(--pad); } .blk + .blk { padding-top: 0; } .blk-narrow { max-width: calc(820px + 2 * var(--pad)); } .blk-narrow .blk-head { grid-template-columns: 1fr; } .blk-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 60px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); } .blk-head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; } .blk-head p:not(.eyebrow) { margin: 0; color: var(--mute); font-size: 16.5px; max-width: 520px; } .h2m { margin: 0; font: 300 clamp(38px, 4.8vw, 76px)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; } .h2m em { font-style: italic; font-weight: 400; } .h3s { margin: 0 0 14px; font: 300 clamp(26px, 2.3vw, 36px)/1.1 var(--serif); letter-spacing: -.015em; } .band-dark { background: var(--sea); color: #fff; } .band-dark .eyebrow { color: var(--shallow); } .band-dark .blk-head p:not(.eyebrow) { color: rgba(255, 255, 255, .72); } .band-abyss { background: var(--abyss); color: #fff; } .band-foam { background: var(--foam); } .band-sand2 { background: var(--sand-2); } .note { margin: 26px 0 0; font-size: 14.5px; color: var(--mute); max-width: 760px; } .band-dark .note, .band-abyss .note { color: rgba(255, 255, 255, .6); } .lnk { color: var(--reef); font-weight: 600; text-underline-offset: 4px; } .band-dark .lnk, .band-abyss .lnk { color: var(--shallow); } .more2 { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding: 6px 0 3px; } .more2::after { content: "→"; transition: transform .4s var(--ease); } .more2:hover::after { transform: translateX(4px); } .dates2 { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 22px; align-items: stretch; } .dcard { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -40px rgba(4, 22, 30, .35); } .dcard-next { background: var(--sea); color: #fff; overflow: hidden; isolation: isolate; } .dcard-next::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 84, 54, .35), rgba(255, 84, 54, 0) 70%); z-index: -1; } .dc-k { margin: 0 0 18px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--reef); } .dcard-next .dc-k { color: var(--shallow); } .dc-v { margin: 0; font: 300 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.025em; } .dcard p:not(.dc-k):not(.dc-v):not(.dc-b) { margin: 16px 0 0; color: var(--mute); font-size: 15.5px; } .dcard-next p:not(.dc-k):not(.dc-v):not(.dc-b) { color: rgba(255, 255, 255, .78); } .dc-b { margin: auto 0 0; padding-top: 26px; } .dpast { padding: clamp(26px, 3vw, 40px) 0 0; } .dpast ul { list-style: none; margin: 0; padding: 0; } .dpast li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; display: flex; justify-content: space-between; gap: 12px; } .dpast s { color: var(--mute); } .dpast .tag { font: 600 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .isl2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; } .isl2-map { position: sticky; top: calc(var(--hdr) + 20px); } .isl-map { width: 100%; height: auto; border-radius: 6px; background: radial-gradient(120% 90% at 70% 40%, #0d4255 0%, #082b39 55%, #051c26 100%); } .isl-map .sea { fill: transparent; } .isl-map .land { fill: #efe3cb; stroke: rgba(130, 100, 60, .35); stroke-width: .8; } .isl-map .isl path { fill: #efe3cb; stroke: rgba(130, 100, 60, .4); stroke-width: .8; transition: fill .4s; } .isl-map .isl { cursor: pointer; outline: none; } .isl-map .isl-dot { fill: var(--sea); stroke: #efe3cb; stroke-width: 3; transition: fill .3s, r .3s; } .isl-map .isl text { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: #fff; paint-order: stroke; stroke: rgba(5, 28, 38, .9); stroke-width: 4px; stroke-linejoin: round; } .isl-map .isl.on .isl-dot, .isl-map .isl:hover .isl-dot, .isl-map .isl:focus-visible .isl-dot { fill: var(--kite); r: 9; } .isl-map .isl.on path { fill: #fff6e4; } .isl-map .town circle { fill: #fff; stroke: var(--sea); stroke-width: 2; } .isl-map .town text { font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; fill: var(--sea); } .isl-map .scale path { stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; fill: none; } .isl-map .scale text, .isl-map .credit { font: 500 11px var(--sans); fill: rgba(255, 255, 255, .65); } .isl-list { list-style: none; margin: 0; padding: 0; } .isl-item { position: relative; padding: 26px 0 26px 26px; border-top: 1px solid rgba(255, 255, 255, .16); transition: background .4s; } .isl-item::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 2px; background: rgba(255, 255, 255, .16); transition: background .4s; } .isl-item.on::before { background: var(--kite); } .isl-item h3 { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 300 clamp(28px, 2.4vw, 38px)/1.05 var(--serif); letter-spacing: -.02em; } .isl-item h3 a { text-decoration: none; color: #fff; } .isl-item h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; } .km { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--shallow); } .facts-list { margin: 0; padding: 0 0 0 18px; color: rgba(255, 255, 255, .8); font-size: 15.5px; } .facts-list li { margin: 4px 0; } .isl-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: rgba(255, 255, 255, .6); } .lvl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; } .lvl-tab { min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid rgba(12, 27, 34, .25); background: none; color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; transition: background .3s, color .3s, border-color .3s; } .lvl-tab:hover { border-color: var(--ink); } .lvl-tab[aria-selected=true] { background: var(--ink); color: #fff; border-color: var(--ink); } .js .lvl-panel { display: none; } .js .lvl-panel.on { display: grid; } .lvl-panel { grid-template-columns: minmax(0, 1fr) auto; gap: 20px 60px; align-items: end; padding: clamp(26px, 3vw, 44px); border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -40px rgba(4, 22, 30, .3); margin-bottom: 16px; } .js .lvl-ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .lvl-ph { margin: 0; font: 300 30px/1.1 var(--serif); grid-column: 1 / -1; } .lvl-list { list-style: none; margin: 0; padding: 0; } .lvl-list li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); font-size: 16.5px; } .lvl-list li:last-child { border-bottom: 0; } .lvl-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 8px; border-left: 1.8px solid var(--reef); border-bottom: 1.8px solid var(--reef); transform: rotate(-45deg); } .lvl-panel p { margin: 0; } .week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: d; border-top: 1px solid rgba(255, 255, 255, .2); } .week li { position: relative; padding: 30px 26px 10px 0; } .week li + li { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .14); } .week h3 { margin: 0 0 14px; font: 600 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--kite); } .week p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .8); } .week-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 70px); } .week-photos figure { margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; } .week-photos figure:first-child { aspect-ratio: auto; grid-row: span 2; } .week-photos img { width: 100%; height: 100%; object-fit: cover; } .price2 { padding-bottom: clamp(60px, 7vw, 100px); } .tbls { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(40px, 6vw, 100px); } .tbls h3 { margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; } .tbl2 { width: 100%; border-collapse: collapse; font-size: 16px; } .tbl2 th, .tbl2 td { padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .tbl2 th { font-weight: 400; padding-right: 20px; } .tbl2 td { text-align: right; white-space: nowrap; font-weight: 600; } .boat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .boat-grid figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: var(--deep); } .boat-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .boat-grid figure:hover img { transform: scale(1.04); } .boat-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: 13.5px; line-height: 1.35; color: #fff; background: linear-gradient(0deg, rgba(4, 22, 30, .82), rgba(4, 22, 30, 0)); } .bg-a { grid-column: span 7; aspect-ratio: 16 / 10; } .bg-b { grid-column: span 5; aspect-ratio: auto; } .bg-s { grid-column: span 3; aspect-ratio: 4 / 3; } .bg-t { grid-column: span 3; aspect-ratio: 3 / 4; } .quotes2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); } .quotes2 blockquote { margin: 0; position: relative; padding-top: 54px; } .quotes2 blockquote::before { content: "\201C"; position: absolute; left: -6px; top: -6px; font: 400 110px/.8 var(--serif); color: var(--kite); } .quotes2 p { margin: 0; font: 300 clamp(24px, 2.2vw, 34px)/1.25 var(--serif); letter-spacing: -.012em; text-wrap: pretty; } .quotes2 footer { margin-top: 20px; font: 600 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--reef); } .mbars-s { margin-top: 56px; } html:not(.js) .mbar-col { transform: none; } .mbars-s .mbar { cursor: default; } .mbars-s .mbar:hover .mbar-col { background: linear-gradient(180deg, rgba(28, 111, 120, .55), rgba(28, 111, 120, .18)); } .mbars-s .mbar.is-safari:hover .mbar-col, .mbars-s .mbar.is-safari .mbar-col { background: linear-gradient(180deg, var(--reef), rgba(28, 111, 120, .55)); } .mbars-s .mbar.is-top .mbar-col { background: linear-gradient(180deg, var(--kite), rgba(255, 84, 54, .45)); } .mlegend { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--mute); } .mlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; } .mlegend .k-top { background: var(--kite); } .mlegend .k-saf { background: var(--reef); } .mlegend .k-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kite); vertical-align: 1px; } .wtable { margin-top: 18px; font-size: 14.5px; color: var(--mute); } .wtable summary { cursor: pointer; padding: 8px 0; } .wtable table { border-collapse: collapse; margin-top: 8px; } .wtable th, .wtable td { padding: 5px 18px 5px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; } .faq2 { border-top: 1px solid var(--ink); } .faq2 details { border-bottom: 1px solid var(--line); } .faq2 summary { list-style: none; position: relative; cursor: pointer; padding: 24px 56px 24px 0; font: 300 clamp(21px, 1.8vw, 27px)/1.25 var(--serif); letter-spacing: -.01em; } .faq2 summary::-webkit-details-marker { display: none; } .faq2 summary::before, .faq2 summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 18px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); } .faq2 summary::after { transform: rotate(90deg); } .faq2 details[open] summary::after { transform: rotate(0deg); } .faq2 details p { margin: 0 0 26px; max-width: 720px; color: var(--mute); font-size: 16.5px; } .final .how2 { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: h; display: grid; gap: 16px; max-width: 460px; } .final .how2 li { counter-increment: h; position: relative; padding-left: 48px; color: rgba(255, 255, 255, .86); font-size: 16px; } .final .how2 li::before { content: counter(h); position: absolute; left: 0; top: -4px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); display: grid; place-items: center; font: 400 16px/1 var(--serif); } .final .disc2 { margin-top: 26px !important; font-size: 14px !important; color: rgba(255, 255, 255, .62) !important; } .fl-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; } .fl-check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--reef); flex: none; } .nl2 { background: var(--sand-2); } .nl2-in { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 7vw, 100px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 60px; align-items: end; } .nl2 p { margin: 14px 0 0; color: var(--mute); max-width: 460px; } .nl2-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .nl2-form input[type=email] { min-height: 54px; padding: 12px 18px; border: 1px solid rgba(12, 27, 34, .25); border-radius: 999px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); } .nl2-form input[type=email]:focus { outline: none; border-color: var(--reef); box-shadow: 0 0 0 3px rgba(28, 111, 120, .18); } .nl2-form .form-msg { grid-column: 1 / -1; margin: 0; } .art-meta { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 15px; color: rgba(255, 255, 255, .8); } .art-meta a { color: #fff; font-weight: 600; text-underline-offset: 4px; } .art-meta .for { margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13.5px; } .art-wrap { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 100px) var(--pad) clamp(70px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 64px); } .art-wrap > * { grid-column: 2; min-width: 0; } .art-toc { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: calc(var(--hdr) + 24px); max-width: 260px; justify-self: end; } .art-toc p { margin: 0 0 14px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--reef); } .art-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .art-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--mute); text-decoration: none; transition: color .3s, border-color .3s; } .art-toc a:hover, .art-toc a.is-on { color: var(--ink); border-left-color: var(--kite); } .prose { font-size: 18.5px; line-height: 1.7; } .prose > p:first-child { margin-top: 0; } .prose h2 { margin: 2.2em 0 .6em; font: 300 clamp(32px, 3vw, 44px)/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; scroll-margin-top: 100px; } .prose h3 { margin: 1.8em 0 .4em; font: 600 20px/1.3 var(--sans); scroll-margin-top: 100px; } .prose p, .prose ul, .prose ol { margin: 0 0 1.1em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .35em 0; } .prose li::marker { color: var(--reef); } .prose a { color: var(--reef); font-weight: 500; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--kite-d); } .prose strong { font-weight: 600; } .prose blockquote { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 2px solid var(--kite); font: 300 24px/1.35 var(--serif); } .prose .table-wrap { margin: 1.6em 0; overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; } .prose th, .prose td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .prose thead th { font: 600 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); border-bottom-color: var(--ink); } .prose .fig { margin: 2.2em 0; } .prose .fig picture, .prose .fig img { width: 100%; height: auto; border-radius: 4px; } .prose .fig figcaption { margin-top: 10px; font-size: 14px; color: var(--mute); } .cta2 { margin: 2.6em 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; border-radius: 6px; overflow: hidden; background: var(--sea); color: #fff; box-shadow: 0 30px 60px -36px rgba(4, 22, 30, .55); } .cta2-img { position: relative; min-height: 100%; } .cta2-img picture, .cta2-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cta2-txt { padding: 28px 30px 30px; } .cta2-h { margin: 0 0 8px !important; font: 300 30px/1.1 var(--serif); letter-spacing: -.015em; } .cta2-txt p { margin: 0 0 18px; font-size: 16px; color: rgba(255, 255, 255, .82); } .cta2-txt .disc { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .58); } .prose .cta2 a.btn { color: #fff; text-decoration: none; } .art-faq { margin-top: 3em; } .art-faq h2 { margin-top: 0; } .sources2 { margin-top: 3em; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--mute); } .sources2 h2 { margin: 0 0 14px; font: 600 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); } .sources2 ol { margin: 0; padding-left: 1.2em; } .sources2 li { margin: 6px 0; } .sources2 a { color: var(--reef); } .related2 { background: var(--sand-2); } .related2 .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; } .gcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 28px; } .gcards .card { grid-column: span 2; } .gcards .card:nth-child(1) { grid-column: span 4; grid-row: span 2; } .gcards .card:nth-child(1) .card-img { aspect-ratio: 4 / 3.4; } .gcards .card:nth-child(1) .card-t { font-size: clamp(32px, 3vw, 48px); } .gcards .card:nth-child(n+4) { grid-column: span 2; } .gcards .card:nth-child(n+7) { grid-column: span 3; } .gcards .card:nth-child(n+7) .card-img { aspect-ratio: 16 / 9; } .card-l { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--mute); } .spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); } .olist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .olist li { padding: 18px 0; border-bottom: 1px solid var(--line); } .olist h3 { margin: 0; font: 300 24px/1.2 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; } .o-desc { margin: 6px 0 0; color: var(--mute); font-size: 15px; } .o-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--mute); } .o-meta a { color: var(--reef); font-weight: 600; text-underline-offset: 3px; } .o-kind { font: 600 11.5px/1.7 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .aplist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .aplist li { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; } .aplist b { font-weight: 600; } .aplist span { color: var(--mute); min-width: 0; overflow-wrap: anywhere; } .aplist span:last-child { white-space: nowrap; flex-shrink: 0; } .aplist .iata { display: inline-block; min-width: 46px; margin-right: 10px; font: 600 13px/1.6 var(--sans); letter-spacing: .1em; color: var(--reef); } .near2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .near2 a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; height: 100%; padding: 18px 20px; border-radius: 6px; background: #fff; text-decoration: none; box-shadow: 0 20px 40px -34px rgba(4, 22, 30, .4); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .near2 a:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(4, 22, 30, .45); } .near2 b { font: 300 22px/1.15 var(--serif); } .near2 span { font-size: 13.5px; color: var(--mute); white-space: nowrap; } .coords { font: 500 13px/1 var(--sans); letter-spacing: .08em; color: rgba(255, 255, 255, .6); } .src2 { margin: 40px 0 0; font-size: 13.5px; color: var(--mute); max-width: 860px; } .src2 a { color: var(--reef); } .compass { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); position: relative; transform: rotate(var(--deg)); } .compass::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1.5px; margin-left: -.75px; background: #fff; } .compass::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); } .scta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--sea); } .scta-media { position: absolute; inset: 0; z-index: -2; } .scta-media picture, .scta-media img { width: 100%; height: 100%; object-fit: cover; } .scta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 22, 30, .86) 0%, rgba(4, 22, 30, .6) 50%, rgba(4, 22, 30, .2) 100%); } .scta-in { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--pad); } .scta .eyebrow { color: var(--shallow); } .scta p:not(.eyebrow):not(.disc) { max-width: 520px; margin: 22px 0 30px; font-size: 18px; color: rgba(255, 255, 255, .86); } .scta .disc { margin: 22px 0 0; max-width: 520px; font-size: 13.5px; color: rgba(255, 255, 255, .62); } .sindex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 80px); border-top: 1px solid var(--ink); } .sindex li { border-bottom: 1px solid var(--line); } .sindex a { display: grid; grid-template-columns: minmax(45%, 1fr) minmax(0, auto); gap: 4px 20px; align-items: baseline; padding: 20px 0; text-decoration: none; } .sindex b { font: 300 26px/1.15 var(--serif); letter-spacing: -.01em; transition: color .3s; } .sindex a:hover b { color: var(--reef); } .sindex span { font-size: 14px; color: var(--mute); text-align: right; } .sindex .mini { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 26px; align-items: end; max-width: 260px; } .sindex .mini i { display: block; height: calc(var(--h) * 1%); border-radius: 1px; background: rgba(28, 111, 120, .35); } .sindex .mini i.t { background: var(--kite); } .mapapp { background: var(--abyss); color: #fff; } .mapapp-in { max-width: 1680px; margin: 0 auto; padding: 0 var(--pad) clamp(40px, 5vw, 70px); } .filters2 { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 18px; padding: 22px 0 24px; } .filters2 .f { display: grid; gap: 8px; min-width: 150px; } .filters2 label, .filters2 legend { font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .filters2 select { width: 100%; min-height: 46px; padding: 10px 38px 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; color: #fff; font: 500 15px/1.2 var(--sans); -webkit-appearance: none; appearance: none; cursor: pointer; } .filters2 select option { color: var(--ink); } .filters2 select:focus-visible { outline: 2px solid var(--kite); outline-offset: 2px; } .f-types { border: 0; margin: 0; padding: 0; min-width: 0; } .f-types legend { margin-bottom: 8px; padding: 0; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); font: 500 14.5px/1 var(--sans); cursor: pointer; transition: background .3s, border-color .3s, color .3s; text-transform: none !important; letter-spacing: 0 !important; color: #fff !important; } .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); } .chip:has(input:checked) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); } .chip:has(input:not(:checked)) { opacity: .55; } .chip:has(input:focus-visible) { outline: 2px solid var(--kite); outline-offset: 2px; } .c-spot { --c: #1c6f78; } .c-school { --c: #06202b; } .c-safari { --c: #ff5436; } .c-snowkite { --c: #6c8cff; } .f-count { margin: 0 0 0 auto; align-self: center; font-size: 15px; color: rgba(255, 255, 255, .78); } .f-count output { font: 300 30px/1 var(--serif); color: #fff; margin-right: 4px; } .linkbtn { background: none; border: 1px solid currentColor; border-radius: 999px; padding: 8px 14px; color: var(--shallow); font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; } .linkbtn:hover { text-decoration: underline; text-underline-offset: 4px; } .map { height: min(76vh, 820px); min-height: 440px; border-radius: 6px; overflow: hidden; background: #0b2a36; position: relative; z-index: 1; } .map .leaflet-tile-pane { filter: saturate(.55) brightness(1.02) contrast(.95); } .map noscript p { padding: 20px; } .leaflet-container canvas, .leaflet-container svg, .leaflet-container img { max-width: none !important; max-height: none !important; } .mapapp .small2 { margin: 16px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .55); max-width: 900px; } .leaflet-container { font: 400 14px/1.45 var(--sans) !important; } .leaflet-popup-content-wrapper { border-radius: 6px !important; box-shadow: 0 20px 50px -20px rgba(4, 22, 30, .6) !important; } .leaflet-popup-content { margin: 16px 18px !important; color: var(--ink); } .leaflet-popup-content h3 { margin: 0 0 4px; font: 300 22px/1.15 var(--serif); } .leaflet-popup-content ul { padding-left: 1em; margin: .4em 0; } .leaflet-popup-content a { color: var(--reef); font-weight: 600; } .pp-k { margin: 0 0 8px !important; font-size: 12.5px; color: var(--mute); } .pp-w { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 6px 0 8px; } .pp-w i { height: 8px; border-radius: 1px; background: rgba(28, 111, 120, .2); } .pp-w i.on { background: var(--kite); } .clists { columns: 4 220px; column-gap: 40px; } .cl { break-inside: avoid; margin: 0 0 30px; } .cl h3 { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; font: 300 24px/1.15 var(--serif); } .cl h3 a { text-decoration: none; } .cl h3 a:hover { color: var(--reef); } .cl h3 span { font: 600 12px/1 var(--sans); color: var(--mute); } .cl ul { list-style: none; margin: 0; padding: 0; } .cl li a { display: block; padding: 5px 0; font-size: 15px; color: var(--mute); text-decoration: none; } .cl li a:hover { color: var(--ink); } .kite-full .kite-in { padding-top: calc(var(--hdr) + clamp(30px, 5vw, 80px)); align-items: start; } .kite-full .crumbs { margin-bottom: 26px; } .kite-full .phead-h { color: #fff; } .kite-full .kcalc { margin-top: 36px; max-width: 560px; } .rng-conv { margin: -4px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .62); } .kite-full .kite-viz { position: sticky; top: calc(var(--hdr) + 20px); } .co-r { margin: 10px 0 0; text-align: center; font-size: 15.5px; color: rgba(255, 255, 255, .82); } .co-x { margin: 14px auto 0; max-width: 440px; text-align: center; font-size: 14.5px; color: rgba(255, 255, 255, .68); } .co-warn { margin: 18px auto 0; max-width: 460px; padding: 12px 16px; border-radius: 6px; background: rgba(255, 84, 54, .16); box-shadow: inset 0 0 0 1px rgba(255, 84, 54, .5); color: #fff; font-size: 14.5px; font-weight: 500; } .co-warn[hidden] { display: none; } .quiv { margin-top: clamp(40px, 5vw, 60px); } .quiv h2 { margin: 0 0 16px; font: 600 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .quiver2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; } .quiver2 > li { padding: 14px 10px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); text-align: center; } .quiver2 b { display: block; font: 300 30px/1 var(--serif); } .quiver2 small { font: 400 14px/1 var(--sans); } .quiver2 span { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .65); } .quiver2 .cur { border-color: var(--kite); background: rgba(255, 84, 54, .14); } .howlist { margin: 0; padding: 0; list-style: none; counter-reset: h; display: grid; gap: 0; border-top: 1px solid var(--ink); } .howlist li { counter-increment: h; position: relative; padding: 18px 0 18px 54px; border-bottom: 1px solid var(--line); font-size: 16.5px; } .howlist li::before { content: counter(h, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 300 26px/1 var(--serif); color: var(--reef); } .about2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .about2-img { margin: 0; position: sticky; top: calc(var(--hdr) + 24px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; } .about2-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .about2-txt > p { margin: 0 0 1.1em; font-size: 18.5px; line-height: 1.7; } .about2-txt > p:first-child { font: 300 clamp(26px, 2.4vw, 36px)/1.3 var(--serif); letter-spacing: -.012em; } .about2-txt h2 { margin: 2em 0 .6em; } .plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); } .plist li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line); font-size: 16.5px; } .plist li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 14px; height: 8px; border-left: 1.8px solid var(--reef); border-bottom: 1.8px solid var(--reef); transform: rotate(-45deg); } .plist a { text-decoration: none; font-weight: 500; } .plist a:hover { color: var(--reef); } .sign2 { margin-top: 40px !important; font: italic 400 38px/1 var(--serif) !important; } .plain2 h2 { margin: 1.8em 0 .5em; font: 300 30px/1.15 var(--serif); } .plain2 p { font-size: 17px; } @media (max-width: 1100px) { .art-wrap { grid-template-columns: minmax(0, 1fr); max-width: calc(760px + 2 * var(--pad)); } .art-wrap > * { grid-column: 1; } .art-toc { position: static; grid-row: auto; max-width: none; justify-self: stretch; margin-bottom: 40px; padding: 22px 24px; border-radius: 6px; background: var(--sand-2); } .art-toc ol { border-left: 0; } .art-toc a { padding-left: 0; border-left: 0; } .week { grid-template-columns: 1fr 1fr; } .week li:nth-child(3) { padding-left: 0; border-left: 0; } .week li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); } } @media (max-width: 900px) { .blk-head { grid-template-columns: 1fr; } .dates2 { grid-template-columns: 1fr; } .isl2 { grid-template-columns: 1fr; } .isl2-map { position: relative; top: 0; } .lvl-panel { grid-template-columns: 1fr; } .tbls, .quotes2, .spot-grid, .about2, .nl2-in { grid-template-columns: 1fr; } .about2-img { position: relative; top: 0; width: 82%; } .boat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .bg-a, .bg-b { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .bg-s, .bg-t { grid-column: span 3; } .week-photos { grid-template-columns: 1fr 1fr; } .week-photos figure:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; } .gcards { grid-template-columns: 1fr 1fr; gap: 44px 20px; } .gcards .card, .gcards .card:nth-child(n+4), .gcards .card:nth-child(n+7) { grid-column: span 1; } .gcards .card:nth-child(n+7) .card-img { aspect-ratio: 4 / 3; } .gcards .card:nth-child(1) { grid-column: 1 / -1; grid-row: auto; } .related2 .cards { grid-template-columns: 1fr 1fr; } .related2 .cards .card:nth-child(3) { display: none; } .near2 { grid-template-columns: 1fr 1fr; } .kite-full .kite-viz { position: relative; top: 0; } .kite-full .kite-in { display: flex; flex-direction: column; } .kite-full .kite-text { display: contents; } .kite-full .crumbs { order: 0; } .kite-full .eyebrow { order: 1; } .kite-full .phead-h { order: 2; } .kite-full .phead-lead { order: 3; } .kite-full .kcalc { order: 4; } .kite-full .kite-viz { order: 5; margin: 34px 0 0; } .kite-full .quiv { order: 6; } .kite-full .kite-svg { width: min(62%, 280px); } .f-count { margin-left: 0; width: 100%; } } @media (max-width: 600px) { .phead-photo { min-height: 78svh; } .phead-cta .btn { width: 100%; } .pfacts { grid-template-columns: 1fr 1fr; } .pfacts > div:nth-child(n+3) { display: none; } .week { grid-template-columns: 1fr; } .week li, .week li + li { padding-left: 0; border-left: 0; } .week li + li { border-top: 1px solid rgba(255, 255, 255, .14); } .gcards, .related2 .cards { grid-template-columns: 1fr; } .related2 .cards .card:nth-child(3) { display: flex; } .near2, .sindex { grid-template-columns: 1fr; } .sindex a { grid-template-columns: 1fr; } .sindex span { text-align: left; } .cta2 { grid-template-columns: 1fr; } .cta2-img { height: 180px; } .nl2-form { grid-template-columns: 1fr; } .filters2 .f { min-width: 0; flex: 1 1 140px; } .map { height: 64svh; min-height: 380px; } .aplist li { flex-direction: column; gap: 2px; } .tbl2 td { white-space: normal; } .prose { font-size: 17.5px; } .prose table:has(tr > :nth-child(4)) { min-width: 540px; } .mbars-s .mbar-v { font-size: 11px; top: -18px; letter-spacing: -.03em; } } @media (prefers-reduced-motion: reduce) { .phead-media img, .phead-media video { transform: none !important; } } .c-landkite { --c: #5f9e3a; } .si-place-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: clamp(30px, 5vw, 80px); align-items: start; } .rose { margin: 0; } .rose svg { width: 100%; max-width: 380px; height: auto; display: block; } .rose .r-ring { fill: none; stroke: rgba(6, 32, 43, .14); stroke-width: 1; } .rose path { stroke: var(--foam, #f4efe6); stroke-width: 1.5; } .rose .w-best { fill: #ff5436; } .rose .w-ok { fill: #1c6f78; } .rose .w-bad { fill: #8b8f93; fill-opacity: .55; } .rose .w-none { fill: rgba(6, 32, 43, .07); } .rose text { font: 600 13px/1 var(--sans); fill: var(--ink); letter-spacing: .08em; } .rose-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: 14px; } .rose-leg i, .si-mapleg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; } .rose-leg .w-best { background: #ff5436; } .rose-leg .w-ok { background: #1c6f78; } .rose-leg .w-bad { background: #8b8f93; } .rose-leg .w-none { background: rgba(6, 32, 43, .1); } .rose-note { margin: 10px 0 0; font-size: 13.5px; color: var(--mute); max-width: 380px; } .spotmap { height: clamp(320px, 46vh, 520px); border-radius: 6px; overflow: hidden; position: relative; z-index: 1; background: #dfe6e4; } .spotmap .leaflet-tile-pane { filter: saturate(.55) brightness(1.02) contrast(.95); } .si-mapleg { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: 14px; color: var(--mute); } .lg-area.k-water { background: rgba(28, 111, 120, .5); border: 1.5px solid #1c6f78; } .lg-area.k-snowkite { background: rgba(108, 140, 255, .45); border: 1.5px solid #6c8cff; } .lg-area.k-landkite { background: rgba(95, 158, 58, .45); border: 1.5px solid #5f9e3a; } .si-mapleg .lg-p { width: 18px !important; height: 18px !important; border-radius: 4px !important; background: #06202b; color: #fff; font: 700 11px/18px var(--sans); text-align: center; font-style: normal; } .si-mapleg .lg-s { border-radius: 50% !important; background: #ff5436; } .pk-ico { background: #06202b; color: #fff; border: 2px solid #fff; border-radius: 5px; font: 700 12px/20px var(--sans); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } .si-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 40px; margin: 0 0 40px; } .si-meta dt { font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .si-meta dd { margin: 6px 0 0; font-size: 17px; } .si-cards { columns: 2 340px; column-gap: 28px; } .si-card { break-inside: avoid; min-width: 0; overflow-wrap: anywhere; margin: 0 0 28px; padding: 26px 28px 22px; border-radius: 6px; background: var(--sand-2, #f4efe6); } .si-card h3 { margin: 0 0 12px; font: 300 26px/1.1 var(--serif); } .si-card ul { margin: 0; padding: 0 0 0 18px; font-size: 16.5px; line-height: 1.55; } .si-card li + li { margin-top: 8px; } .si-x { display: block; font-size: 14px; color: var(--mute); margin-top: 2px; } .si-warn { background: #fff1ec; box-shadow: inset 4px 0 0 #ff5436; } .si-quotes { margin: 10px 0 0; font-size: 15px; color: var(--mute); max-width: 900px; } .si-quotes summary { cursor: pointer; font-weight: 600; color: var(--reef); min-height: 44px; display: flex; align-items: center; } .si-quotes ul { padding-left: 18px; } .si-quotes li { margin: 6px 0; font-style: italic; } .si-yt { margin: 18px 0 0; font-size: 15px; } .si-photos { display: grid; gap: 16px; margin-top: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .si-photos.n1 { grid-template-columns: minmax(0, 1fr); max-width: 980px; } .si-photos.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .si-ph { margin: 0; } .si-ph img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #dfe6e4; } .si-ph figcaption { margin-top: 8px; font-size: 13.5px; color: var(--mute); line-height: 1.45; } .si-ph figcaption a { color: inherit; } .si-lg { margin: 0 0 40px; } .si-lg h3 { font: 300 28px/1.1 var(--serif); margin: 0 0 14px; } .si-lg h3 span { font: 500 14px/1 var(--sans); color: var(--mute); } .si-form { display: grid; gap: 10px; margin-top: 22px; } .si-form label { font-size: 14.5px; font-weight: 600; } .si-form textarea, .si-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--line, #cfd6d4); border-radius: 6px; font: 400 16px/1.4 var(--sans); background: #fff; } .si-form button { justify-self: start; margin-top: 6px; } .si-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .si-form-msg { margin: 4px 0 0; font-size: 15px; } .pp-i { margin: 6px 0 8px; font-size: 13px; } .pp-i dt { font-weight: 700; } .pp-i dd { margin: 0 0 4px; } @media (max-width: 860px) { .si-place-grid { grid-template-columns: 1fr; } .si-photos { grid-template-columns: 1fr; } } .si-norose { grid-template-columns: 1fr; } .kc2 .kcalc { gap: 24px; } .dcs { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dcs legend { width: 100%; margin-bottom: 12px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .dc { position: relative; } .dc input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dc span { display: flex; flex-direction: column; gap: 6px; min-height: 84px; padding: 16px 16px 14px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .28); transition: background .3s, border-color .3s, color .3s; } .dc b { font: 300 clamp(19px, 1.7vw, 24px)/1.05 var(--serif); } .dc small { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .dc input:checked + span { background: #fff; color: var(--sea); border-color: #fff; } .dc input:checked + span small { color: var(--reef); } .dc input:focus-visible + span { outline: 2px solid var(--kite); outline-offset: 3px; } .rng-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: -8px; } .rng-sub .rng-conv { margin: 0; } .seg-s span { min-height: 34px; padding: 6px 14px; font-size: 13.5px; } .seg[hidden] { display: none; } .kv2 { width: 100%; } .kv-stage { position: relative; width: 100%; height: clamp(460px, 48vw, 660px); } .kv-wrap { position: absolute; left: 0; top: 0; width: min(88%, 460px); transform-origin: 0 0; will-change: transform; } .kv-wrap img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 18, 28, .45)); } .kv-wrap img[hidden], .kv-foil[hidden] { display: none; } .kv-foil svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0, 18, 28, .45)); } .kv-foil .fo-br { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .8; } .kv-foil .fo-rib { fill: none; stroke: rgba(10, 20, 40, .22); stroke-width: 1.4; } .kv-foil .fo-le { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 3; } .kv-foil .fo-n { font: italic 800 70px/1 var(--sans); fill: #fff; text-anchor: middle; letter-spacing: -.02em; } .kv-foil .fo-u { font-size: 24px; font-weight: 700; } .kv-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .kv-lines path { fill: none; stroke-width: 1; stroke-linecap: round; } .kv-lines .kl-f { stroke: rgba(255, 255, 255, .62); } .kv-lines .kl-l { stroke: rgba(255, 92, 128, .85); } .kv-lines .kl-r { stroke: rgba(80, 176, 255, .85); } .kv-bar { position: absolute; left: 50%; bottom: 0; width: clamp(70px, 15%, 96px); height: auto; margin-left: calc(clamp(70px, 15%, 96px) / -2); transform-origin: 50% 50%; filter: drop-shadow(0 10px 14px rgba(0, 18, 28, .45)); } .kc2 .kite-size { justify-content: center; } .co-wind { margin: 8px auto 0; max-width: 420px; text-align: center; font-size: 15px; color: rgba(255, 255, 255, .85); } .kmodel { margin: 20px auto 0; max-width: 420px; padding: 14px 18px; border-radius: 6px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); display: grid; gap: 4px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .75); } .kmodel b { font: 400 20px/1.2 var(--serif); color: #fff; } .km-l { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--shallow); } .kc2-more { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(70px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .kc2-card { padding: clamp(22px, 3vw, 34px); border-radius: 8px; background: rgba(4, 24, 33, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .kc2-h { margin: 0 0 16px; font: 600 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); } .bv svg { display: block; width: 100%; height: auto; overflow: visible; } .bv-line path, .bv-line circle, .bv-line rect { fill: rgba(255, 255, 255, .07); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; } .bv-line .bv-fine { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; } .bv-dim path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; } .bv-dim text { fill: #fff; font: 500 13px var(--sans); text-anchor: middle; } .kc2-big { margin: 14px 0 0; font: 300 clamp(24px, 2.4vw, 32px)/1.15 var(--serif); } .kc2-harlem { margin: 6px 0 0; color: var(--shallow); font-weight: 600; font-size: 14.5px; } .kc2-harlem:empty { display: none; } .kc2-why { margin: 10px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .72); } .kc2-ex { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .72); } .kc2-ex li { padding-left: 16px; position: relative; } .kc2-ex li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--kite); } .kc2 .co-warn { margin: 18px 0 0; max-width: none; } .kc2 .co-warn p { margin: 0; } .kc2 .co-warn p + p { margin-top: 6px; } .kc2-srch { margin: 34px 0 10px; font: 600 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); } .kc2-src { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; } @media (max-width: 900px) { .kc2-more { grid-template-columns: minmax(0, 1fr); } .kv-stage { height: clamp(380px, 112vw, 500px); } .kv-wrap { width: min(80%, 320px); } .dc span { min-height: 66px; padding: 11px 10px 9px; } .dc b { font-size: clamp(15px, 4.2vw, 19px); } .dc small { font-size: 10.5px; letter-spacing: .08em; } } .leaflet-popup-content h3 a { color: var(--ink); font-weight: 300; text-decoration: none; } .leaflet-popup-content h3 a:hover { color: var(--reef); } .pp-cta { margin: 12px 0 0 !important; } .leaflet-popup-content a.pp-btn { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--kite); color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; box-shadow: 0 8px 20px -8px rgba(255, 84, 54, .7); } .leaflet-popup-content a.pp-btn:hover { background: #e8432a; } .pp-near { margin: 10px 0 0 !important; font-size: 13px; color: var(--mute); } .pp-tip { font: 600 12.5px/1.2 var(--sans); padding: 5px 9px; border-radius: 4px; } .chip.c-desc { margin-top: 4px; } .si-vid { background: var(--abyss); color: #fff; } .si-vid .eyebrow { color: var(--shallow); } .si-vid .h2m { color: #fff; } .si-vid .blk-head p { color: rgba(255, 255, 255, .7); } .yt-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: start; } .yt-grid.n1 { grid-template-columns: minmax(0, 1fr); max-width: 980px; } .yt-side { display: grid; gap: 18px; } .yt { margin: 0; } .yt-btn, .yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #06202b center / cover no-repeat; position: relative; cursor: pointer; overflow: hidden; } .yt-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 22, 30, 0) 50%, rgba(4, 22, 30, .55)); transition: opacity .3s; } .yt-btn:hover::after { opacity: .4; } .yt-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--kite); box-shadow: 0 10px 30px -8px rgba(255, 84, 54, .8); transition: transform .3s var(--ease); } .yt-play::before { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; } .yt-btn:hover .yt-play { transform: scale(1.08); } .yt-side .yt-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .yt-side .yt-play::before { left: 18px; top: 14px; border-width: 9px 0 9px 14px; } .yt-play:has(svg)::before { content: none; } .yt-play svg { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; transform: translate(-46%, -50%); fill: #fff; } .yt-btn:focus-visible { outline: 2px solid var(--kite); outline-offset: 3px; } .yt figcaption { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .85); } .yt figcaption small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .55); } .yt-big figcaption { font: 300 20px/1.3 var(--serif); } .pp-vid { display: block; margin: -16px -18px 12px; aspect-ratio: 16 / 9; background: #06202b center / cover no-repeat; border-radius: 6px 6px 0 0; position: relative; } .pp-vid span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--kite); } .pp-vid span::before { content: ""; position: absolute; left: 17px; top: 13px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; } @media (max-width: 900px) { .yt-grid { grid-template-columns: minmax(0, 1fr); } .yt-side { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } .art-break { margin: clamp(48px, 7vw, 96px) calc(50% - 50vw + var(--sbw, 0px) / 2); position: relative; overflow: hidden; height: clamp(320px, 62vh, 720px); } .art-break picture, .art-break img { display: block; width: 100%; height: 100%; } .art-break img { object-fit: cover; transform: scale(var(--kb, 1.06)); will-change: transform; } .art-break figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px var(--pad) 22px; max-width: none; background: linear-gradient(180deg, rgba(4, 22, 30, 0), rgba(4, 22, 30, .6)); color: #fff; font: 300 italic clamp(17px, 1.6vw, 22px)/1.3 var(--serif); text-align: center; } .ckbar { position: sticky; top: calc(var(--hdr) + 10px); z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 1.4em; padding: 12px 18px; border-radius: 999px; background: var(--abyss); color: #fff; font-size: 15px; box-shadow: 0 12px 30px -14px rgba(4, 22, 30, .6); } .ckbar b { font: 400 22px/1 var(--serif); } .ckbar-l { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--shallow); } .ckbar-t { flex: 1; min-width: 80px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; } .ckbar-t i { display: block; height: 100%; width: 0; background: var(--kite); transition: width .4s var(--ease); } .ckbar .linkbtn { color: rgba(255, 255, 255, .7); font-size: 13.5px; } .prose ul.cklist { list-style: none; padding-left: 0; } .prose .ck label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 4px 0; } .prose .ck input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 4px 0 0; border: 1.5px solid var(--reef); border-radius: 5px; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; } .prose .ck input::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; } .prose .ck input:checked { background: var(--kite); border-color: var(--kite); } .prose .ck input:checked::after { opacity: 1; } .prose .ck input:checked + span { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(255, 84, 54, .5); } .prose .ck input:focus-visible { outline: 2px solid var(--kite); outline-offset: 2px; } .live { background: linear-gradient(120deg, #0b3a4b, #0f5f6c); color: #fff; } .live[hidden] { display: none; } .lv-in { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 44px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px clamp(30px, 5vw, 70px); align-items: center; } .live .eyebrow { margin: 0 0 8px; color: var(--shallow); } .lv-kn { margin: 0; display: flex; align-items: baseline; gap: 12px; font-size: 18px; } .lv-kn b { font: 300 clamp(64px, 7vw, 96px)/.9 var(--serif); letter-spacing: -.03em; } .lv-arrow { display: inline-block; font: 400 34px/1 var(--sans); color: var(--kite); align-self: center; } .lv-sub { margin: 10px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .75); } .lv-note { margin: 8px 0 0; font-size: 14px; color: #ffd7cf; } .lv-h { margin: 0 0 8px; font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .lv-chart svg { display: block; width: 100%; height: 90px; } .lv-line { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; } .lv-area { fill: rgba(255, 255, 255, .1); } .lv-ok { fill: rgba(255, 84, 54, .16); } .lv-day { stroke: rgba(255, 255, 255, .25); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .lv-kite { margin: 12px 0 0; font-size: 15px; } .lv-kite a { color: #fff; text-underline-offset: 3px; } .lv-src { margin: 6px 0 0; font-size: 12px; color: rgba(255, 255, 255, .5); } .prose .live { margin: 0 0 2em; border-radius: 8px; } .prose .lv-in { grid-template-columns: minmax(0, 1fr); padding: 26px 28px; } @media (max-width: 900px) { .lv-in { grid-template-columns: minmax(0, 1fr); } } .lv-leg { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .6); } .lv-leg i { width: 14px; height: 10px; background: rgba(255, 84, 54, .35); border-radius: 2px; } .near { background: linear-gradient(180deg, var(--sea), var(--abyss)); color: #fff; } .near-in { max-width: 1680px; margin: 0 auto; padding: clamp(40px, 5vw, 70px) var(--pad) clamp(26px, 3vw, 40px); } .near-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 60px; align-items: end; margin-bottom: 26px; } .near-head .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--shallow); } .near-head .h2m { font-size: clamp(32px, 3.6vw, 56px); } .near-head p:last-child { margin: 0; color: rgba(255, 255, 255, .78); font-size: 16.5px; } .near-f { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 18px; } .near-f label, .near-f legend { display: block; margin-bottom: 8px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .nf-q { position: relative; flex: 1 1 340px; max-width: 560px; } .nf-qi { display: flex; gap: 8px; } .nf-qi input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font: 500 16px/1.2 var(--sans); } .nf-qi input::placeholder { color: rgba(255, 255, 255, .5); } .nf-qi input:focus-visible, .nf-r select:focus-visible { outline: 2px solid var(--kite); outline-offset: 2px; } .nf-me { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font: 600 14.5px/1 var(--sans); cursor: pointer; white-space: nowrap; } .nf-me:hover { border-color: #fff; } .nf-me span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--kite); box-shadow: 0 0 0 3px rgba(255, 84, 54, .25); } .nf-r select { min-height: 48px; padding: 10px 38px 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; color: #fff; font: 500 15px/1.2 var(--sans); -webkit-appearance: none; appearance: none; } .nf-r select option { color: var(--ink); } .nf-k legend { margin-bottom: 8px; } .nf-k span { min-height: 48px; padding: 10px 18px; font-size: 14.5px; } .near-sug { position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); } .near-sug[hidden] { display: none; } .near-sug li { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 15px; } .near-sug li:hover { background: var(--foam); } .near-sug span { color: var(--mute); font-size: 13.5px; } .near-out:empty { display: none; } .near-out { margin-top: 24px; } .near-msg { margin: 0; color: rgba(255, 255, 255, .78); } .near-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; } .near-res { margin: 0; font-size: 16px; } .near-res small { color: rgba(255, 255, 255, .55); } .near-sort button { min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font: 600 14px/1 var(--sans); cursor: pointer; } .near-sort button[aria-pressed="true"] { background: #fff; color: var(--sea); border-color: #fff; } .nlist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; } .nc { position: relative; display: flex; flex-direction: column; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .25s, box-shadow .25s; } .nc:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } .nc-a { display: grid; gap: 4px; padding: 16px 18px 12px; color: #fff; text-decoration: none; } .nc-n { padding-right: 44px; font: 400 22px/1.15 var(--serif); } .nc-m { font-size: 13.5px; color: rgba(255, 255, 255, .62); } .nc-days { display: grid; gap: 5px; margin-top: 10px; } .nd { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); } .nd b { font-weight: 600; color: rgba(255, 255, 255, .8); } .nd-ok { color: #fff; background: linear-gradient(90deg, rgba(60, 200, 192, calc(.18 + var(--q) * .45)), rgba(60, 200, 192, .06)); } .nd-ok b { color: var(--shallow); } .nd-calm { display: block; } .nc-act { display: flex; gap: 8px; padding: 0 18px 14px; } .nc-map { min-height: 34px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: rgba(255, 255, 255, .85); font: 500 13px/1 var(--sans); cursor: pointer; } .nc-map:hover { border-color: #fff; color: #fff; } .nc-fav { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; cursor: pointer; } .fav-i { width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .nc-fav { color: rgba(255, 255, 255, .7); } .nc-fav:hover { color: #fff; } [data-fav].on .fav-i { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4L2.8 9.5l6.4-.8z' fill='%23000'/%3E%3C/svg%3E"); } [data-fav].on { color: #ffd166; } .near-more { margin-top: 14px; } .near-more summary { cursor: pointer; color: rgba(255, 255, 255, .78); font-size: 15px; padding: 8px 0; } .nlist-s .nc-a { padding-bottom: 8px; } .near-src { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); max-width: 900px; } .favs { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); } .favs[hidden] { display: none; } .favs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; } .favs-h { margin: 0; font: 300 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); } .favs-p { margin: 8px 0 16px; color: rgba(255, 255, 255, .7); font-size: 15px; } .favs .linkbtn, .near .linkbtn { color: var(--shallow); } .pp-cta { display: flex; align-items: center; gap: 8px; } .pp-fav { position: static; color: var(--reef); width: 40px; height: 40px; } .pp-fav.on { color: #e0a100; } @media (max-width: 900px) { .near-head { grid-template-columns: minmax(0, 1fr); } .nf-q { flex-basis: 100%; max-width: none; } } @media (max-width: 480px) { .nf-qi { flex-wrap: wrap; } .nf-me { flex: 1; justify-content: center; } } .fav-btn { display: inline-flex; align-items: center; gap: 8px; } .fav-btn .fav-i { width: 18px; height: 18px; } .fav-btn.on { color: #ffd166; border-color: rgba(255, 209, 102, .7); } .fav-toast { position: fixed; z-index: 3000; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(92vw, 460px); margin: 0; padding: 12px 18px; border-radius: 10px; background: var(--sea); color: #fff; font-size: 15px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); transition: opacity .5s, transform .5s; } .fav-toast.out { opacity: 0; transform: translate(-50%, 10px); } .tools { background: var(--sand); } .tools .blk { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); } .fc-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; } .fc-links a { position: relative; display: grid; gap: 4px; padding: 18px 44px 18px 20px; border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--line), 0 10px 26px rgba(12, 27, 34, .06); transition: transform .25s var(--ease), box-shadow .25s; } .fc-links a:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--line), 0 16px 34px rgba(12, 27, 34, .12); } .fc-links b { font: 400 24px/1.1 var(--serif); } .fc-links span { font-size: 14px; color: var(--mute); } .fc-links i { position: absolute; right: 18px; top: 18px; font-style: normal; color: var(--kite); } .cams { margin-top: clamp(36px, 4vw, 54px); } .cams[hidden] { display: none; } .cams-h, .tipsb-h, .sf-h { margin: 0 0 8px; font: 300 clamp(24px, 2.2vw, 32px)/1.1 var(--serif); } .cams-p { margin: 0 0 18px; color: var(--mute); font-size: 15.5px; } .cams-g { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; } .cams-g a { display: grid; gap: 2px; color: var(--ink); text-decoration: none; } .cams-g img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--sand-2); margin-bottom: 8px; } .cams-g a:hover img { filter: brightness(1.05); } .cam-t { font-weight: 600; font-size: 15px; } .cam-km { font-size: 13.5px; color: var(--mute); } .cams-src { margin: 12px 0 0; font-size: 13px; color: var(--mute); } .surf { margin-top: clamp(36px, 4vw, 54px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; } .sf-main { padding: clamp(22px, 3vw, 32px); border-radius: 10px; background: #fff; box-shadow: 0 1px 0 var(--line); } .sf-main .eyebrow { margin-bottom: 10px; } .sf-v { margin: 0 0 12px; font-size: 18px; font-weight: 600; } .sf-said { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); font-weight: 600; } .sf-q { margin: 0 0 14px; padding-left: 18px; font-size: 15.5px; } .sf-q li + li { margin-top: 4px; } .sf-d { margin: 0; font-size: 14.5px; color: var(--mute); } .sf-gear { padding: clamp(22px, 3vw, 32px); border-radius: 10px; background: var(--sea); color: #fff; } .sf-gear.sf-warn { background: linear-gradient(140deg, #6b1d10, var(--kite-btn-d)); } .sf-gear svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; margin-bottom: 10px; } .sf-gh { margin: 0 0 8px; font: 400 24px/1.1 var(--serif); } .sf-gear p:last-child { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .9); } .tipsb { margin-top: clamp(36px, 4vw, 54px); } .tipsb ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; counter-reset: tip; } .tipsb li { position: relative; padding: 18px 20px 18px 56px; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 var(--line); font-size: 15.5px; counter-increment: tip; } .tipsb li::before { content: counter(tip); position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--kite); color: #fff; font: 700 13px/1 var(--sans); } @media (max-width: 900px) { .surf { grid-template-columns: minmax(0, 1fr); } } .lv-sun { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .78); } .lv-dir { margin: 8px 0 0; font-size: 14px; padding-left: 18px; position: relative; } .lv-dir::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; } .lv-dir-ok::before { background: #5ee0a0; } .lv-dir-bad::before { background: #ff7a5c; } .lv-dir-na::before { background: rgba(255, 255, 255, .5); } .sdir { max-width: 1680px; } .sdir-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 60px; align-items: end; margin-bottom: clamp(26px, 3vw, 40px); } .sdir-head .eyebrow { grid-column: 1 / -1; margin: 0; } .sdir-lead { margin: 0; color: var(--mute); font-size: 16.5px; max-width: 540px; } .sdir-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px; border-radius: 22px; background: var(--salt); box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(12, 27, 34, .45); } .sdir-bar[hidden], .sdir-ct[hidden] { display: none; } .sdir-q { position: relative; flex: 1 1 300px; min-width: 0; } .sdir-q::before { content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--mute); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } .sdir-q input { width: 100%; min-height: 54px; padding: 12px 18px 12px 50px; border: 1.5px solid transparent; border-radius: 14px; background: var(--sand); color: var(--ink); font: 400 17px/1.2 var(--sans); } .sdir-q input:focus { outline: none; border-color: var(--reef); background: #fff; } .sdir-q input::placeholder { color: #7d8a8e; } .sdir-k { display: flex; flex-wrap: wrap; gap: 6px; } .sdir-k button, .sdir-ct button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px/1 var(--sans); cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .sdir-k button span, .sdir-ct button span { font-weight: 400; color: var(--mute); font-size: 13.5px; } .sdir-k button:hover, .sdir-ct button:hover { border-color: var(--ink); } .sdir-k button[aria-pressed="true"], .sdir-ct button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .sdir-k button[aria-pressed="true"] span, .sdir-ct button[aria-pressed="true"] span { color: rgba(255, 255, 255, .7); } .sdir-k button[aria-pressed="true"] .ki { background: #fff; } .sdir-ct { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .sdir-ct button { min-height: 40px; padding: 8px 14px; font-size: 14px; border-color: transparent; } .sdir-ct button:hover { border-color: var(--line); } .sdir-leg { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: var(--mute); font-size: 14px; } .sdir-res { margin: 18px 0 0; font: 600 15px/1.3 var(--sans); color: var(--reef); } .sdir-res:empty { display: none; } .sdir-res.is-none { color: var(--ink); font-weight: 400; font-size: 16.5px; } .sg { margin-top: clamp(34px, 4vw, 56px); } .sg[hidden], .sc[hidden], .sk[hidden], .sc li[hidden] { display: none; } .sg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 16px; font: 300 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; } .sg-h span { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; } .sc { border-radius: 18px; background: var(--salt); border: 1px solid var(--line); transition: border-color .2s, box-shadow .25s; } .sc:hover { border-color: rgba(12, 27, 34, .32); box-shadow: 0 14px 30px -22px rgba(12, 27, 34, .5); } .sc[open] { grid-column: 1 / -1; border-color: rgba(12, 27, 34, .22); } .sc summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n x" "c x" "k x"; gap: 2px 14px; align-items: center; padding: 18px 18px 16px 22px; list-style: none; cursor: pointer; } .sc summary::-webkit-details-marker { display: none; } .sc-n { grid-area: n; font: 400 23px/1.15 var(--serif); letter-spacing: -.01em; } .sc-c { grid-area: c; color: var(--mute); font-size: 14px; } .sc-k { grid-area: k; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .sc-k b { display: inline-flex; align-items: center; gap: 5px; font: 600 13.5px/1 var(--sans); color: var(--ink); } .sc-k b::before { content: ""; width: 16px; height: 16px; background: currentColor; } .sc-x { grid-area: x; width: 38px; height: 38px; border-radius: 50%; background: var(--sand); position: relative; transition: transform .3s var(--ease), background .2s; } .sc-x::after { content: ""; position: absolute; inset: 9px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } .sc summary:hover .sc-x { background: var(--sand-2); } .sc[open] .sc-x { transform: rotate(180deg); } .sc[open] summary { border-bottom: 1px solid var(--line); } .sc[open] .sc-n { font-size: clamp(26px, 2.6vw, 34px); } .sc-p { padding: 6px 22px 24px; } .sc-top { margin: 12px 0 4px; font-size: 15px; } .sc-top a { color: var(--reef); font-weight: 600; text-underline-offset: 3px; } .sk { margin-top: 18px; } .sk-h { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; } .sk-h span { color: var(--mute); font-weight: 400; } .sk ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; } .sk li { border-bottom: 1px solid var(--line); } .sk li a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 2px; text-decoration: none; font-size: 15.5px; line-height: 1.3; transition: color .15s; } .sk li a:hover { color: var(--reef); } .sk li a:hover .sd-n { text-decoration: underline; text-underline-offset: 3px; } .sk li.is-hit { background: var(--foam); } .sdir:not(.is-f) .sk.is-cut:not(.is-all) li:nth-child(n+13) { display: none; } .sk-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 8px 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 14.5px/1 var(--sans); cursor: pointer; } .sk-more:hover { background: var(--ink); color: #fff; } .sdir.is-f .sk-more, .sk.is-all .sk-more { display: none; } .sd-n { flex: 1; min-width: 0; overflow-wrap: anywhere; } .sd-t { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--sand); color: var(--mute); font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; } .ws { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; } .ws i { width: 3px; border-radius: 1px; background: var(--dune); } .ws i.b { background: var(--kite); } .ws .q1 { height: 20%; } .ws .q2 { height: 40%; } .ws .q3 { height: 60%; } .ws .q4 { height: 80%; } .ws .q5 { height: 100%; } .ki { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; } .ki.k-w, .sc-k .k-w::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10c2.5 0 2.5-2.2 5-2.2s2.5 2.2 5 2.2 2.5-2.2 5-2.2 2.5 2.2 5 2.2M2 16.5c2.5 0 2.5-2.2 5-2.2s2.5 2.2 5 2.2 2.5-2.2 5-2.2 2.5 2.2 5 2.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10c2.5 0 2.5-2.2 5-2.2s2.5 2.2 5 2.2 2.5-2.2 5-2.2 2.5 2.2 5 2.2M2 16.5c2.5 0 2.5-2.2 5-2.2s2.5 2.2 5 2.2 2.5-2.2 5-2.2 2.5 2.2 5 2.2'/%3E%3C/svg%3E") center / contain no-repeat; } .ki.k-s, .sc-k .k-s::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5M9.2 3.9 12 6.3l2.8-2.4M9.2 20.1 12 17.7l2.8 2.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M3.8 16.75l16.4-9.5M9.2 3.9 12 6.3l2.8-2.4M9.2 20.1 12 17.7l2.8 2.4'/%3E%3C/svg%3E") center / contain no-repeat; } .ki.k-l, .sc-k .k-l::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 10.5c1 1.2 2 1.5 3.5 1.5h12c1.5 0 2.5-.3 3.5-1.5'/%3E%3Ccircle cx='7' cy='17' r='2.6'/%3E%3Ccircle cx='17' cy='17' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 10.5c1 1.2 2 1.5 3.5 1.5h12c1.5 0 2.5-.3 3.5-1.5'/%3E%3Ccircle cx='7' cy='17' r='2.6'/%3E%3Ccircle cx='17' cy='17' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; } .sc-k .k-w, .sk-h .k-w { color: var(--reef); } .sk-h .k-w { background: var(--reef); } .sc-k .k-s { color: #3d6fb8; } .sk-h .k-s { background: #3d6fb8; } .sc-k .k-l { color: #9a6a2c; } .sk-h .k-l { background: #9a6a2c; } @media (max-width: 760px) { .sdir-head { grid-template-columns: 1fr; } .sdir-bar { padding: 10px; border-radius: 18px; } .sdir-k { width: 100%; } .sdir-k button { flex: 1 1 auto; justify-content: center; padding: 8px 14px; } .sc summary { padding: 16px 14px 14px 18px; } .sc-p { padding: 4px 16px 20px; } .sdir-leg { align-items: flex-start; } .sdir-ct { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 4px; scrollbar-width: none; } .sdir-ct::-webkit-scrollbar { display: none; } .sdir-ct button { flex: none; } } @media (max-width: 560px) { .sgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .sc summary { display: block; position: relative; padding: 14px 40px 14px 14px; } .sc-n { display: block; font-size: 19px; overflow-wrap: anywhere; } .sc-c { display: block; margin-top: 2px; font-size: 13px; } .sc-k { gap: 8px; margin-top: 6px; } .sc-x { position: absolute; right: 8px; top: 10px; width: 28px; height: 28px; } .sc-x::after { inset: 6px; } .sc[open] summary { padding: 18px 48px 16px 16px; } .sc[open] .sc-x { right: 12px; top: 16px; width: 34px; height: 34px; } .sc[open] .sc-x::after { inset: 8px; } } .isl3 .isl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; } .isl3 .isl-item { padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--salt); } .isl3 .isl-item::before { display: none; } .isl3 .isl-item h3 { font-size: clamp(26px, 2.2vw, 34px); } .isl3 .isl-item h3 a { color: var(--ink); } .isl3 .isl-item h3 a::after { content: " →"; font-family: var(--sans); font-size: .6em; color: var(--reef); } .isl3 .km { color: var(--reef); } .isl3 .facts-list { color: var(--ink); } .isl3 .isl-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--mute); } .isl3 > .note { margin-top: 22px; color: var(--mute); font-size: 14px; }