:root{
--night: 0;
--tarmac:  #575757;
--marking: #fff;
--edge: #ffda00;
--scene: 1;
--scene-sat: 1;
--cloud-filter: none;
--card-bg: #fff;
--card-line: #1a1a1a;
--card-ink: #1a1a1a;
--card-sub: #333;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]){
--night: 1;
--tarmac: #111623;
--marking: #8ea3c4;
--edge: #8a6a26;
--truss-night: url(#truss-night);
--boat-night: brightness(.68) saturate(.85);
--cta-plate: #530000;
--cta-glow: drop-shadow(0 0 0.35cqw rgba(255,60,60,.95)) drop-shadow(0 0 1.4cqw rgba(230,20,30,.65));
--sign-green: #0a3d1f;
--sign-gold: #e7aa28;
--scene: 0.50;
--scene-sat: 0.95;
--cloud-filter: url(#cloud-night);
--scene-tree: brightness(.30) saturate(.95) hue-rotate(70deg);
--sec2-ink: #dfe7f2;
--sec6-ink: #eef2f7;
--card-bg: transparent;
--card-hover-bg: #05070c;
--card-line: #7d8ea3;
--card-ink: #f2f6fa;
--card-sub: #f2f6fa;
--sea-surf-hi: #0c2843;
--sea-surf-lo: #07223f;
--sea-mid: #011f51;
--sea-swell: #022152;
--sea-far-a: #000619;
--sea-far-b: #001136;
--sea-foam: #8ea0bd;
--sea-foam-a: #6c7b99;
--sea-foam-b: #8ea0bd;
--sea-far-shade: #233e77;
--sea-far-foam: 0;
--sign-red: #b5000d;
--sign-gold-2: #dda517;
--sign-gold-line: #fcee21;
--cta-line: red;
--cta-tri: #b5000d;
--sec1-bg:
linear-gradient(180deg, rgba(0,5,18,1) 0%, rgba(0,5,18,1) 6.460%, rgba(0,6,18,.98) 28.736%, rgba(0,6,18,.9) 45.443%, rgba(0,7,19,.78) 59.366%, rgba(0,8,20,.6) 72.360%, rgba(0,9,22,.37) 84.426%, rgba(0,10,24,.1) 95.564%, rgba(0,11,25,0) 99.277%), linear-gradient(90deg, #000915 0%, #000b19 100%);
--sec1-fade:
linear-gradient(90deg,#000c1b 0%,#010e1f 100%);
--sec2-bg:
linear-gradient(180deg, #0f172c 0.03%, #0f172c 12.41%, #252633 12.54%, #322f36 12.67%, #322f36 12.80%, #232431 12.93%, #0e162a 13.07%, #0e162a 13.59%, #0f1931 13.85%, #0f1931 17.37%, #0e1e34 17.63%, #0e1e34 26.76%, #152135 26.89%, #322f36 27.02%, #322f36 27.54%, #161f2e 27.67%, #0e1a2c 27.80%, #0e1a2c 28.19%, #0e2033 28.32%, #0f2135 28.45%, #0f2135 33.80%, #1a2332 34.06%, #1a2332 42.66%, #262935 42.79%, #302d36 42.92%, #302d36 45.40%), linear-gradient(90deg,#0e162a 0%,#0f182e 100%);
--sec3-bg:
linear-gradient(180deg, transparent 0%,  transparent 18%, #1e213c 21%,     #1e1f37 45.78%,  #1e1f36 47.72%, #1c1c34 47.86%,  #1b1b33 48.00%,  #1a1b36 48.13%,  #191a36 48.83%, #1c1c38 50.76%,  #181a35 50.90%,  #171934 51.87%,  #1c1c36 52.01%, #1e1f36 61.70%,  #1b1b33 61.97%,  #1b1b33 69.72%,  #161833 69.86%, #161833 72.21%,  #191a36 72.35%,  #1b1c37 78.58%,  #171834 78.72%, #161834 80.66%,  #1c1c37 80.80%,  #1c1d38 96.43%,  #1d1d39 96.57%, #1a1b36 96.71%,  #1a1b36 97.96%,  #1b1b33 98.09%,  #1b1b33 100%);
--sec4-ground:
linear-gradient(180deg, #021b22 0%, #021b22 1.59%, #052023 93.90%, #052023 100%);
--sec6-bg:
linear-gradient(180deg, transparent 0, transparent 3.67%, #0a0e1f 3.85%, #0a0e1f 100%);
}}
:root[data-theme="dark"]:not([data-mode="day"]),
:root[data-mode="night"]{
--night: 1;
--tarmac: #111623;
--marking: #8ea3c4;
--edge: #8a6a26;
--truss-night: url(#truss-night);
--boat-night: brightness(.68) saturate(.85);
--cta-plate: #530000;
--cta-glow: drop-shadow(0 0 0.35cqw rgba(255,60,60,.95)) drop-shadow(0 0 1.4cqw rgba(230,20,30,.65));
--sign-green: #0a3d1f;
--sign-gold: #e7aa28;
--scene: 0.50;
--scene-sat: 0.95;
--cloud-filter: url(#cloud-night);
--scene-tree: brightness(.30) saturate(.95) hue-rotate(70deg);
--sec2-ink: #dfe7f2;
--sec6-ink: #eef2f7;
--card-bg: transparent;
--card-hover-bg: #05070c;
--card-line: #7d8ea3;
--card-ink: #f2f6fa;
--card-sub: #f2f6fa;
--sea-surf-hi: #0c2843;
--sea-surf-lo: #07223f;
--sea-mid: #011f51;
--sea-swell: #022152;
--sea-far-a: #000619;
--sea-far-b: #001136;
--sea-foam: #8ea0bd;
--sea-foam-a: #6c7b99;
--sea-foam-b: #8ea0bd;
--sea-far-shade: #233e77;
--sea-far-foam: 0;
--sign-red: #b5000d;
--sign-gold-2: #dda517;
--sign-gold-line: #fcee21;
--cta-line: red;
--cta-tri: #b5000d;
--sec1-bg:
linear-gradient(180deg, rgba(0,5,18,1) 0%, rgba(0,5,18,1) 6.460%, rgba(0,6,18,.98) 28.736%, rgba(0,6,18,.9) 45.443%, rgba(0,7,19,.78) 59.366%, rgba(0,8,20,.6) 72.360%, rgba(0,9,22,.37) 84.426%, rgba(0,10,24,.1) 95.564%, rgba(0,11,25,0) 99.277%), linear-gradient(90deg, #000915 0%, #000b19 100%);
--sec1-fade:
linear-gradient(90deg,#000c1b 0%,#010e1f 100%);
--sec2-bg:
linear-gradient(180deg, #0f172c 0.03%, #0f172c 12.41%, #252633 12.54%, #322f36 12.67%, #322f36 12.80%, #232431 12.93%, #0e162a 13.07%, #0e162a 13.59%, #0f1931 13.85%, #0f1931 17.37%, #0e1e34 17.63%, #0e1e34 26.76%, #152135 26.89%, #322f36 27.02%, #322f36 27.54%, #161f2e 27.67%, #0e1a2c 27.80%, #0e1a2c 28.19%, #0e2033 28.32%, #0f2135 28.45%, #0f2135 33.80%, #1a2332 34.06%, #1a2332 42.66%, #262935 42.79%, #302d36 42.92%, #302d36 45.40%), linear-gradient(90deg,#0e162a 0%,#0f182e 100%);
--sec3-bg:
linear-gradient(180deg, transparent 0%,  transparent 18%, #1e213c 21%,     #1e1f37 45.78%,  #1e1f36 47.72%, #1c1c34 47.86%,  #1b1b33 48.00%,  #1a1b36 48.13%,  #191a36 48.83%, #1c1c38 50.76%,  #181a35 50.90%,  #171934 51.87%,  #1c1c36 52.01%, #1e1f36 61.70%,  #1b1b33 61.97%,  #1b1b33 69.72%,  #161833 69.86%, #161833 72.21%,  #191a36 72.35%,  #1b1c37 78.58%,  #171834 78.72%, #161834 80.66%,  #1c1c37 80.80%,  #1c1d38 96.43%,  #1d1d39 96.57%, #1a1b36 96.71%,  #1a1b36 97.96%,  #1b1b33 98.09%,  #1b1b33 100%);
--sec4-ground:
linear-gradient(180deg, #021b22 0%, #021b22 1.59%, #052023 93.90%, #052023 100%);
--sec6-bg:
linear-gradient(180deg, transparent 0, transparent 3.67%, #0a0e1f 3.85%, #0a0e1f 100%);
}
:root[data-theme="dark"]:not([data-mode="day"]),
:root[data-mode="night"]{
--sec6-bg:
linear-gradient(180deg, transparent 0, transparent 3.67%,
#101b33 3.67%, #0b1226 44%, #0b1226 calc(59.28% + 100px), #02060f 100%);
--sec6-sky-glow: none; --sec6-sky: none;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]){
--sec6-bg:
linear-gradient(180deg, transparent 0, transparent 3.67%,
#101b33 3.67%, #0b1226 44%, #0b1226 calc(59.28% + 100px), #02060f 100%);
--sec6-sky-glow: none; --sec6-sky: none;
}}
:root[data-theme="dark"]:not([data-mode="day"]),
:root[data-mode="night"]{
--sec8-band:linear-gradient(180deg, rgba(7,20,38,0) 0, rgba(7,20,38,0) calc(var(--sec8-fade,180px) - 150px), #071426 var(--sec8-fade,180px), #071426 100%);
--sec8-paper:#c7dcf8; --sec8-ink:#0b2247;
--sec8-say-bg:linear-gradient(158deg,#0c1e38 0%,#07142a 50%,#050f22 100%);
--sec8-ask-ink:#455d85; --sec8-ico:#4f6c9c; --sec8-rule-on:#0b3b96;
--sec8-rule:#93aed4;
--sec8-link:#0a54b0; --sec8-edge:rgba(140,193,255,.9);
--sec9-bg:#050c1a; --sec9-sign:#0c5f26;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]){
--sec8-band:linear-gradient(180deg, rgba(7,20,38,0) 0, rgba(7,20,38,0) calc(var(--sec8-fade,180px) - 150px), #071426 var(--sec8-fade,180px), #071426 100%);
--sec8-paper:#c7dcf8; --sec8-ink:#0b2247;
--sec8-say-bg:linear-gradient(158deg,#0c1e38 0%,#07142a 50%,#050f22 100%);
--sec8-ask-ink:#455d85; --sec8-ico:#4f6c9c; --sec8-rule-on:#0b3b96;
--sec8-rule:#93aed4;
--sec8-link:#0a54b0; --sec8-edge:rgba(140,193,255,.9);
--sec9-bg:#050c1a; --sec9-sign:#0c5f26;
}}
.dawn{
position:fixed; inset:0; z-index:9998;
background:#000; pointer-events:none;
animation:h19-dawn 1.9s ease-out forwards;
}
@keyframes h19-dawn{ 0%,26%{ opacity:1 } 100%{ opacity:0 } }
@media (prefers-reduced-motion:reduce){
.dawn{ animation:none; opacity:0 }
}
:root[data-theme="light"]{
--night: 0;
--tarmac: #575757;
--marking: #fff;
--edge: #ffda00;
--scene: 1; --scene-sat: 1; --cloud-filter: none;
--sec2-ink: #333; --sec6-ink: #1a1a1a;
--card-bg: #fff; --card-line: #1a1a1a; --card-ink: #1a1a1a; --card-sub: #333;
--sec1-bg: initial; --sec1-fade: initial; --sec2-bg: initial;
--sec2-sand: initial; --sec3-bg: initial; --sec4-ground: initial;
--sec6-bg: initial;
--sec8-band: initial;
--sec8-paper: initial; --sec8-ink: initial; --sec8-rule: initial;
--sec8-link: initial; --sec8-say-bg: initial;
--sec8-ask-ink: initial; --sec8-ico: initial; --sec8-rule-on: initial;
--sec9-bg: initial; --sec9-sign: initial;
}
section .z-back,
section .z-ground,
section .rock-layer{
filter: brightness(var(--scene)) saturate(var(--scene-sat));
transition: filter 1s linear;
}
.sec2 .waves,
.sec2 .waves .wave{ filter:none }
.sec2 .sand{ filter:none }
.sec3 .z-ground{ filter:none }
.sec4 .z-back{
filter: var(--scene-tree, brightness(var(--scene)) saturate(var(--scene-sat)));
}
section .z-cloud{
filter: var(--cloud-filter, none);
transition: filter 1s linear;
}
@media (prefers-reduced-motion: reduce){
section .z-back, section .z-ground, section .wave, section .sand,
section .rock-layer, section .z-cloud{ transition: none }
}
@media (prefers-reduced-motion: reduce){
section img.z-copy{ transition: none }
}
.mode-switch{
position:fixed; top:14px; right:14px; z-index:10000;
width:52px; height:52px; padding:0; border:0; border-radius:50%;
background:rgba(0,0,0,.30); backdrop-filter:blur(2px);
cursor:pointer; display:grid; place-items:center;
box-shadow:0 2px 10px rgba(0,0,0,.35);
transition:background .25s ease, transform .25s ease;
}
.mode-switch:hover{ transform:scale(1.06) }
.mode-switch:focus-visible{ outline:3px solid #fcee21; outline-offset:3px }
.mode-switch img,.mode-switch svg{ width:38px; height:38px; display:block }
.mode-switch .is-day{ display:block }
.mode-switch .is-night{ display:none }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]) .mode-switch .is-day{ display:none }
:root:not([data-theme="light"]):not([data-mode="day"]) .mode-switch .is-night{ display:block }
}
:root[data-theme="dark"]:not([data-mode="day"]) .mode-switch .is-day,
:root[data-mode="night"] .mode-switch .is-day{ display:none }
:root[data-theme="dark"]:not([data-mode="day"]) .mode-switch .is-night,
:root[data-mode="night"] .mode-switch .is-night{ display:block }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]) .sec6 .card{
border-color:var(--c);
}
}
:root[data-theme="dark"]:not([data-mode="day"]) .sec6 .card,
:root[data-mode="night"] .sec6 .card{ border-color:var(--c) }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]) .sec6 .page .card{
box-shadow: 0 0 1.1cqw color-mix(in srgb, var(--c) 42%, transparent);
}
:root:not([data-theme="light"]):not([data-mode="day"]) .sec6 .page .card:hover,
:root:not([data-theme="light"]):not([data-mode="day"]) .sec6 .page .card:focus-within{
box-shadow: 0 0 2.6cqw color-mix(in srgb, var(--c) 78%, transparent),
0 0 0.7cqw color-mix(in srgb, var(--c) 60%, transparent);
}
}
:root[data-theme="dark"]:not([data-mode="day"]) .sec6 .page .card,
:root[data-mode="night"] .sec6 .page .card{
box-shadow: 0 0 1.1cqw color-mix(in srgb, var(--c) 42%, transparent);
}
:root[data-theme="dark"]:not([data-mode="day"]) .sec6 .page .card:hover,
:root[data-theme="dark"]:not([data-mode="day"]) .sec6 .page .card:focus-within,
:root[data-mode="night"] .sec6 .page .card:hover,
:root[data-mode="night"] .sec6 .page .card:focus-within{
box-shadow: 0 0 2.6cqw color-mix(in srgb, var(--c) 78%, transparent),
0 0 0.7cqw color-mix(in srgb, var(--c) 60%, transparent);
}
.sec1 .truss,
.sec4 .truss{
filter: var(--truss-night, none);
transition: filter 1s linear;
}
.sec1 .boat .art,
.sec1 .fast-boat .art{
filter: var(--boat-night, none);
transition: filter 1s linear;
}
.sec1 .z-sign [fill="#1c9022"]{ fill: var(--sign-green, #1c9022) }
.sec1 .z-sign [fill="#ffda00"]{ fill: var(--sign-gold,  #ffda00) }
section svg.z-copy [fill="#059236"]{ fill: var(--sign-green, #059236) }
section svg.z-copy [fill="#1c9022"]{ fill: var(--sign-green, #1c9022) }
section svg.z-copy [fill="#ea2127"]{ fill: var(--sign-red,   #ea2127) }
section svg.z-copy [fill="#ffda00"]{
fill: var(--sign-gold-2, #ffda00);
stroke: var(--sign-gold-line, none);
stroke-miterlimit:10;
}
.sec4 svg.our-sign [fill="#ffda00"]{ fill: var(--sign-gold, #ffda00) }
.sec1 .cta svg.plate [fill="#ea2127"]{ fill: var(--cta-tri, #ea2127) }
.sec1 .z-sign [fill="#1c9022"],
.sec1 .z-sign [fill="#ffda00"],
section svg.z-copy [fill^="#"],
.sec1 .cta svg.plate [fill^="#"]{ transition: fill 1s linear, stroke 1s linear }
.signlamps{
position:absolute; display:block; pointer-events:none; z-index:3;
aspect-ratio:938.5 / 349.56;
background: url("../../assets/v2/ui-sign-fixtures.svg")
left 1.429% top 0.411% / 97.091% 102.986% no-repeat;
}
.signlamps::after{
content:''; position:absolute; inset:0;
background: url("../../assets/v2/ui-sign-lights.svg")
left 1.429% top 0.411% / 97.091% 102.986% no-repeat;
opacity:var(--night, 0);
transition:opacity 1s linear;
}
.sec4 .signlamps{
aspect-ratio:858.12 / 371.25;
background-image: url("../../assets/v2/section-04/our-sign-fixtures.svg");
background-position: 0 0;
background-size: 100% 101.549%;
}
.sec4 .signlamps::after{
background-image: url("../../assets/v2/section-04/our-sign-beams.svg");
background-position: 0 0;
background-size: 100% 101.549%;
}
@media (prefers-reduced-motion: reduce){ .signlamps::after{ transition:none } }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]){
--dffdb96: #16233a;
--dffd486: #152032;
--dfac67e: #172236;
--d754c24: #110f13;
--dc89a70: #4e3633;
--dbb9067: #46312e;
--d83643d: #21191b;
--daf845b: #3d2b29;
--dc3976b: #4b3431;
--dbb9066: #46312e;
--dd8a77c: #593d38;
--d735632: #161216;
--da67f56: #382827;
--db48a5f: #412e2c;
--db4895f: #402d2b;
--dc7996e: #4d3632;
--daf865c: #3e2c2a;
--d9a754e: #302323;
--da17b53: #352625;
--db68c61: #422f2c;
--d80623c: #20181b;
--d93704a: #2c2021;
--d9b6b22: #281e1f;
--d376e00: #0b1410;
--d4f9705: #162616;
--d458500: #111e13;
--d51ab00: #1a2c18;
--d67ba14: #20361c;
--d83c438: #26401f;
--d3f7a00: #0e1912;
}}
:root[data-theme="dark"]:not([data-mode="day"]),
:root[data-mode="night"]{
--dffdb96: #16233a;
--dffd486: #152032;
--dfac67e: #172236;
--d754c24: #110f13;
--dc89a70: #4e3633;
--dbb9067: #46312e;
--d83643d: #21191b;
--daf845b: #3d2b29;
--dc3976b: #4b3431;
--dbb9066: #46312e;
--dd8a77c: #593d38;
--d735632: #161216;
--da67f56: #382827;
--db48a5f: #412e2c;
--db4895f: #402d2b;
--dc7996e: #4d3632;
--daf865c: #3e2c2a;
--d9a754e: #302323;
--da17b53: #352625;
--db68c61: #422f2c;
--d80623c: #20181b;
--d93704a: #2c2021;
--d9b6b22: #281e1f;
--d376e00: #0b1410;
--d4f9705: #162616;
--d458500: #111e13;
--d51ab00: #1a2c18;
--d67ba14: #20361c;
--d83c438: #26401f;
--d3f7a00: #0e1912;
}
:root[data-theme="dark"]:not([data-mode="day"]),
:root[data-mode="night"]{
--hdr-bg:linear-gradient(90deg,#010817 0%,#06214e 42%,#062253 48%,
#04173a 62%,#031029 75%,#020b1d 88%,#01060f 100%);
--hdr-edge:rgba(0,0,0,.72);
--hdr-cast:0 3px 5px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.45);
--hdr-bar-bg:linear-gradient(90deg,#020c1d 0%,#0a2b4d 46%,#0a2b4d 54%,#020c1d 100%);
--hdr-menu-bg:#000;
--hdr-menu-ink:#fff;
--hdr-menu-rule:rgba(255,255,255,.15);
--hdr-cta-bg:#c8161d;
--hdr-cta-ink:#fff;
--hdr-cta-cast:0 3px 10px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]):not([data-mode="day"]){
--hdr-bg:linear-gradient(90deg,#010817 0%,#06214e 42%,#062253 48%,
#04173a 62%,#031029 75%,#020b1d 88%,#01060f 100%);
--hdr-edge:rgba(0,0,0,.72);
--hdr-cast:0 3px 5px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.45);
--hdr-bar-bg:linear-gradient(90deg,#020c1d 0%,#0a2b4d 46%,#0a2b4d 54%,#020c1d 100%);
--hdr-menu-bg:#000;
--hdr-menu-ink:#fff;
--hdr-menu-rule:rgba(255,255,255,.15);
--hdr-cta-bg:#c8161d;
--hdr-cta-ink:#fff;
--hdr-cta-cast:0 3px 10px rgba(0,0,0,.55);
}}