:root{ --paper:#ece9df;--ink:#12130f;--muted:#706f67;--night:#080906;--line:rgba(18,19,15,.18); --serif:"Source Serif 4",Georgia,serif;--sans:"Manrope",Arial,sans-serif;--pad:clamp(18px,3.1vw,50px); --ease:cubic-bezier(.22,.72,.16,1);--gallery-h:clamp(330px,52svh,590px) } *{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--night)}body{margin:0;background:var(--paper);color:var(--ink);font:13px/1.45 var(--sans);text-rendering:optimizeLegibility}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}.eyebrow{margin:0;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.site-header{position:fixed;z-index:3000;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);color:#fff;mix-blend-mode:difference;pointer-events:none}.site-header>*{pointer-events:auto}.site-header nav{display:flex;gap:8px}.wordmark,.nav-button{min-height:54px;display:inline-flex;align-items:center;padding:0 18px;border:0;background:transparent;color:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.wordmark{padding-left:0}.big-button,.large-text-button,.round-button,.quiet-button,.ghost-button,.footer-button{appearance:none;border:0;background:transparent}.big-button{min-height:58px;padding:0 24px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.ghost-button{color:#fff;border:1px solid rgba(255,255,255,.34);background:rgba(8,9,7,.14);backdrop-filter:blur(10px)}.quiet-button{border:1px solid var(--line)}.round-button{width:60px;height:60px;border:1px solid currentColor;border-radius:999px;font-size:20px}.large-text-button{min-height:52px;padding:0;border-bottom:1px solid currentColor;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}.section-header{display:flex;justify-content:space-between;align-items:end;gap:40px}.section-header h2{margin:0;font:400 clamp(50px,6vw,90px)/.92 var(--serif);letter-spacing:-.04em} /* photo surface */ .smudge-surface{position:relative;overflow:hidden;isolation:isolate;--rx:0deg;--ry:0deg;--tx:0px;--ty:0px;transform:perspective(1200px) translate3d(var(--tx),var(--ty),0) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease}.photo-base,.smudge-bw{width:100%;height:100%;object-fit:cover}.smudge-bw{position:absolute;inset:0;filter:grayscale(1) contrast(1.05);opacity:0;transition:opacity .5s ease;pointer-events:none}.smudge-surface.is-smudging .smudge-bw{opacity:1} /* Skye cover */ .cover{position:relative;height:100dvh;min-height:640px;background:#0b0c09;overflow:hidden}.cover-enter{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#0b0c09;text-align:left;color:#fff}.cover-photo{position:absolute;inset:0}.cover-photo img{width:100%;height:100%;object-fit:cover}.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,3,.12) 0%,rgba(4,5,3,.05) 43%,rgba(4,5,3,.54) 100%),linear-gradient(90deg,rgba(4,5,3,.24),transparent 42%)}.cover-copy{position:absolute;left:var(--pad);bottom:clamp(76px,10vh,120px);display:grid;gap:9px}.cover-copy strong{font:400 clamp(72px,10.5vw,170px)/.8 var(--serif);letter-spacing:-.055em}.cover-subtitle{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.cover-action{position:absolute;right:var(--pad);bottom:clamp(80px,10vh,116px);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}.cover-place{position:absolute;z-index:4;right:var(--pad);top:90px;display:flex;gap:9px;align-items:center;padding:12px 0;border:0;background:transparent;color:#fff;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.location-mark{width:7px;height:7px;border:1px solid currentColor;border-radius:50%} /* Skye moving gallery + left film portal */ .archive{padding:clamp(96px,11vw,150px) 0 clamp(76px,8vw,110px);background:var(--paper);overflow:hidden}.archive-header{padding:0 var(--pad);margin-bottom:clamp(34px,4vw,58px)}.archive-header .eyebrow{margin-bottom:8px;color:var(--muted)}.archive-actions{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.archive-stage{position:relative;height:clamp(500px,68svh,760px);overflow:hidden;display:flex;align-items:center}.archive-rail{position:absolute;z-index:1;inset:0;display:flex;align-items:center;gap:clamp(20px,2.4vw,38px);overflow-x:scroll;overflow-y:hidden;padding:0 8vw 0 max(36vw,470px);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}.archive-rail::-webkit-scrollbar{display:none}.archive-rail:active{cursor:grabbing}.archive-item{flex:0 0 auto;margin:0;transform-origin:center center;will-change:transform,opacity,filter}.archive-photo-button{appearance:none;padding:0;border:0;background:none}.archive-photo{display:block;height:var(--gallery-h);width:auto;overflow:hidden;background:#d6d2c7}.archive-photo img{height:100%;width:auto;max-width:none;object-fit:contain}.archive-meta{display:flex;justify-content:space-between;gap:18px;margin-top:9px;color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase}.film-centrepiece{position:absolute;z-index:5;left:var(--pad);top:50%;transform:translateY(-50%);pointer-events:none}.film-window{position:relative;height:var(--gallery-h);aspect-ratio:9/16;width:auto;overflow:hidden;background:#171813;box-shadow:0 30px 90px rgba(15,16,12,.24)}.film-window::after{content:none}.film-window video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#171813;filter:saturate(.86) contrast(.98) brightness(.97)}.film-caption{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:9px;letter-spacing:.09em;text-transform:uppercase}.archive-stage::before{content:"";position:absolute;z-index:4;left:0;top:0;bottom:0;width:min(36vw,460px);background:linear-gradient(90deg,var(--paper) 0%,rgba(236,233,223,.88) 33%,rgba(236,233,223,0) 100%);pointer-events:none}.archive-footer{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:28px var(--pad) 0}.archive-footer p{max-width:390px;margin:0;color:var(--muted)}.archive-footer-actions{display:flex;gap:28px} /* Switzerland cover */ .swiss-cover{position:relative;height:100dvh;min-height:640px;background:#070807;overflow:hidden} .swiss-cover-enter{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#070807;color:#fff;text-align:left;overflow:hidden} .swiss-hero-pair{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:0;background:#070807;overflow:hidden} .swiss-hero-cell{position:relative;display:grid;place-items:center;overflow:hidden;background:#070807} .swiss-hero-cell img{display:block;width:100%;height:100%;object-fit:contain;object-position:center} /* A narrow diagonal overlap creates the slash between the two full images without any frame. */ .swiss-hero-cell:first-child{clip-path:polygon(0 0,100% 0,94% 100%,0 100%);margin-right:-3.5vw;z-index:2} .swiss-hero-cell:last-child{clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);margin-left:-3.5vw;z-index:1} .swiss-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,3,.06),rgba(4,5,3,.01) 52%,rgba(4,5,3,.52)),linear-gradient(90deg,rgba(4,5,3,.20),transparent 34%,transparent 66%,rgba(4,5,3,.16));pointer-events:none} .swiss-cover-copy{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(72px,9vh,110px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px;color:#fff} .swiss-cover-copy .eyebrow{grid-column:1/-1} .swiss-cover-copy strong{font:400 clamp(65px,9vw,145px)/.82 var(--serif);letter-spacing:-.05em} .swiss-cover-copy>span:last-child{padding-bottom:12px;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase} /* Swiss cover image update — use supplied gorge photos full-screen */ .swiss-hero-cell{isolation:isolate} .swiss-hero-fill{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(28px) saturate(.82) brightness(.58);transform:scale(1.08);opacity:.95} .swiss-hero-cell img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:clamp(8px,1.1vw,18px)} .swiss-cover-shade{background:linear-gradient(180deg,rgba(4,5,3,.04),rgba(4,5,3,.03) 52%,rgba(4,5,3,.48)),linear-gradient(90deg,rgba(4,5,3,.12),transparent 34%,transparent 66%,rgba(4,5,3,.10))} /* Traverse */ .traverse-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#070806;color:#fff;overflow:hidden}.traverse-dialog::backdrop{background:#050604}.traverse-dialog[open]{animation:traverse-in .58s var(--ease) both}@keyframes traverse-in{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}.traverse-backdrop{position:absolute;inset:0;overflow:hidden}.traverse-backdrop-image{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;filter:blur(32px) saturate(.58) brightness(.38);opacity:0;transform:scale(1.08);transition:opacity .85s ease}.traverse-backdrop-image.is-active{opacity:.82}.traverse-backdrop-wash{position:absolute;inset:0;background:rgba(8,9,7,.34);transition:background .9s ease}.traverse-backdrop-wash.is-cool{background:rgba(10,20,29,.35)}.traverse-backdrop-wash.is-warm{background:rgba(28,22,11,.38)}.traverse-scroll{position:absolute;inset:0;height:100dvh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}.traverse-scroll::-webkit-scrollbar{display:none}.traverse-flow{position:relative;z-index:2;padding:14svh 0 22svh}.traverse-panel{--slide-x:0px;--slide-y:0px;--slide-scale:1;--slide-tilt:0deg;--slide-opacity:1;position:relative;min-height:76svh;margin:0;display:grid;place-items:center}.traverse-panel+.traverse-panel{margin-top:-13svh}.traverse-panel-media{position:relative;width:min(78vw,calc(72svh * var(--ratio)),1050px);aspect-ratio:var(--ratio);display:grid;place-items:center;opacity:var(--slide-opacity);transform:translate3d(var(--slide-x),var(--slide-y),0) rotate(var(--slide-tilt)) scale(var(--slide-scale));will-change:transform,opacity}.traverse-panel-media>.photo-base,.traverse-panel-media>.smudge-bw{width:100%;height:100%;max-height:72svh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.14)}.traverse-panel-caption{position:absolute;left:var(--pad);bottom:8svh;display:flex;align-items:baseline;gap:14px;color:rgba(255,255,255,.58);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.traverse-panel-caption strong{font:400 clamp(28px,3.1vw,46px)/1 var(--serif);letter-spacing:-.025em;text-transform:none;color:#fff}.traverse-panel.is-swiss-sheet{min-height:94svh}.traverse-panel.is-swiss-sheet+.traverse-panel.is-swiss-sheet{margin-top:-8svh}.traverse-panel.is-swiss-sheet .traverse-panel-media{width:min(88vw,88svh);aspect-ratio:1/1}.traverse-panel.is-swiss-sheet .traverse-panel-media img{width:100%;height:100%;object-fit:contain;box-shadow:0 26px 90px rgba(0,0,0,.16)}.traverse-topline{position:absolute;z-index:8;inset:18px var(--pad) auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.traverse-topline>*{pointer-events:auto}.traverse-status{display:grid;gap:4px;text-align:center;color:rgba(255,255,255,.58);font-size:9px;letter-spacing:.09em;text-transform:uppercase}.traverse-status span:first-child{color:#fff;font-size:10px}.traverse-progress{position:absolute;z-index:9;left:var(--pad);right:var(--pad);bottom:13px;height:2px;background:rgba(255,255,255,.16)}#traverse-progress-fill{height:100%;width:0;background:#fff} /* Atlas */ .atlas-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink)}.atlas-dialog::backdrop{background:rgba(5,6,4,.65)}.atlas-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(350px,.55fr);height:100%}.atlas-map-wrap{position:relative;min-width:0;background:#c8c8bf}.map{position:absolute;inset:0}.leaflet-tile-pane{filter:grayscale(.75) sepia(.16) saturate(.55) contrast(.92) brightness(.96)}.leaflet-control-attribution{font-size:8px!important;background:rgba(236,233,223,.78)!important}.trip-marker{width:13px;height:13px;border-radius:50%;background:#171914;border:3px solid #eeeae0;box-shadow:0 0 0 1px rgba(20,21,17,.6),0 0 0 8px rgba(20,21,17,.08);transition:transform .35s var(--ease),box-shadow .35s ease}.marker-active .trip-marker{transform:scale(1.35);box-shadow:0 0 0 1px rgba(20,21,17,.7),0 0 0 14px rgba(20,21,17,.1)}.leaflet-tooltip.field-tooltip{border:0!important;box-shadow:none!important;background:rgba(238,234,224,.88)!important;color:#171914!important;font:600 9px/1 var(--sans)!important;letter-spacing:.07em!important;text-transform:uppercase!important;padding:6px 8px!important}.leaflet-tooltip.field-tooltip::before{display:none}.atlas-panel{display:flex;flex-direction:column;padding:20px clamp(24px,3vw,46px) 28px;border-left:1px solid var(--line);overflow-y:auto}.atlas-topline{display:flex;justify-content:space-between;align-items:center}.atlas-copy{margin:clamp(44px,7vh,76px) 0 26px}.atlas-copy h2{margin:0 0 12px;font:400 clamp(58px,6vw,94px)/.84 var(--serif);letter-spacing:-.045em}.atlas-copy p{margin:0;color:var(--muted);font-size:11px;letter-spacing:.04em}.atlas-current{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;padding:0;border:0;background:transparent;text-align:left}.atlas-current-media{width:118px;height:148px;background:#d4d0c5;overflow:hidden}.atlas-current-media img{width:100%;height:100%;object-fit:cover}.atlas-current small{display:block;margin-bottom:5px;color:var(--muted);font-size:8px;letter-spacing:.09em;text-transform:uppercase}.atlas-current strong{font:400 26px/1 var(--serif)}.atlas-locations{display:grid;margin:34px 0 28px;border-top:1px solid var(--line)}.atlas-location{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;min-height:62px;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left}.atlas-location span:first-child{color:var(--muted);font-size:9px}.atlas-location strong{font-size:10px;letter-spacing:.07em;text-transform:uppercase}.atlas-location small{color:var(--muted);font-size:9px}.atlas-location.is-active{background:rgba(255,255,255,.3)}.atlas-panel>.large-text-button{margin-top:auto;align-self:flex-start} /* viewer */ .viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#080906;color:#fff;overflow:hidden}.viewer::backdrop{background:#080906}.viewer-topline{position:absolute;z-index:5;left:var(--pad);right:var(--pad);top:18px;display:flex;justify-content:space-between}.viewer-photo-surface{position:absolute;inset:82px var(--pad) 100px;display:grid;place-items:center;overflow:visible}.viewer-photo-surface img{width:100%;height:100%;object-fit:contain}.viewer-caption{position:absolute;left:var(--pad);right:var(--pad);bottom:18px;display:flex;justify-content:space-between;align-items:end}.viewer-caption p{margin:0}.viewer-caption p:first-child{font:400 28px/1 var(--serif)}.viewer-caption p+ p{margin-top:5px;color:rgba(255,255,255,.55);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.viewer-nav{display:flex;align-items:center;gap:14px}.viewer-nav span{font-size:9px;letter-spacing:.08em} @media(max-width:760px){ .site-header{padding:8px 12px}.site-header nav{gap:0}.wordmark,.nav-button{min-height:44px;padding:0 8px;font-size:9px}.wordmark{display:none}.cover{min-height:560px}.cover-copy{left:18px;bottom:76px}.cover-copy strong{font-size:clamp(62px,20vw,96px)}.cover-action{right:18px;bottom:30px}.cover-place{top:55px;right:18px}.archive{padding-top:82px}.archive-header{margin-bottom:28px}.section-header{display:block}.archive-actions{margin-top:18px}.archive-stage{height:62svh;--gallery-h:42svh}.archive-rail{padding-left:52vw;gap:16px}.film-centrepiece{left:18px}.film-window{height:var(--gallery-h);width:auto;aspect-ratio:9/16}.archive-stage::before{width:48vw}.archive-meta{font-size:7px}.archive-footer{align-items:flex-start}.archive-footer p{display:none}.archive-footer-actions{width:100%;justify-content:space-between;gap:16px}.swiss-cover{min-height:660px}.swiss-hero-pair{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.swiss-hero-cell img{width:100%;height:100%;object-fit:contain}.swiss-cover-copy{left:18px;right:18px;bottom:50px;grid-template-columns:1fr}.swiss-cover-copy strong{font-size:clamp(56px,18vw,90px)}.swiss-cover-copy>span:last-child{padding-bottom:0}.traverse-topline{inset:10px 10px auto}.traverse-status{display:none}.traverse-flow{padding-top:12svh}.traverse-panel{min-height:69svh}.traverse-panel+.traverse-panel{margin-top:-7svh}.traverse-panel-media{width:min(94vw,calc(64svh * var(--ratio)));max-width:none}.traverse-panel-media>.photo-base,.traverse-panel-media>.smudge-bw{max-height:64svh}.traverse-panel-caption{left:18px;bottom:7svh}.traverse-panel-caption strong{font-size:28px}.traverse-panel.is-swiss-sheet{min-height:72svh}.traverse-panel.is-swiss-sheet+.traverse-panel.is-swiss-sheet{margin-top:-2svh}.traverse-panel.is-swiss-sheet .traverse-panel-media{width:94vw}.atlas-layout{grid-template-columns:1fr;grid-template-rows:50svh 1fr}.atlas-panel{border-left:0;border-top:1px solid var(--line);padding:14px 18px 20px}.atlas-copy{margin:20px 0 14px}.atlas-copy h2{font-size:54px}.atlas-current{display:none}.atlas-locations{margin:12px 0 18px}.atlas-location{min-height:48px}.viewer-photo-surface{inset:72px 10px 110px}.viewer-caption{left:18px;right:18px}.site-footer{padding:0 18px;gap:16px}.site-footer span:first-child{display:none} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.archive-rail{scroll-behavior:auto}} /* v12 — journey switcher */ .journey-cover{isolation:isolate}.journey-cover-layer{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .72s var(--ease),visibility 0s linear .72s}.journey-cover-layer.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .72s var(--ease),visibility 0s linear 0s}.journey-cover-layer.is-active{z-index:1}.journey-toggle{position:absolute;z-index:12;left:var(--pad);top:86px;display:flex;gap:6px;padding:5px;background:rgba(8,9,7,.18);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(12px);color:#fff}.journey-toggle-button{min-height:50px;padding:0 17px;border:0;background:transparent;color:rgba(255,255,255,.58);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .35s ease,color .35s ease}.journey-toggle-button span{margin-right:9px;font-size:8px;opacity:.65}.journey-toggle-button.is-active{background:rgba(255,255,255,.92);color:#12130f}.journey-cover .cover-place{z-index:12}.journey-cover .swiss-cover-enter{z-index:0}.journey-cover .swiss-cover-enter.is-active{z-index:1} /* The selected journey also changes the at-a-glance strip. */ .archive-stage.is-switzerland .archive-rail{padding-left:8vw;padding-right:8vw}.archive-stage.is-switzerland::before{display:none}.archive-stage.is-switzerland .archive-item{filter:none!important}.archive-stage.is-switzerland .archive-photo{height:clamp(300px,48svh,540px)} /* End-of-traverse contact index */ .traverse-index{position:relative;z-index:3;margin-top:10svh;padding:clamp(90px,13svh,150px) var(--pad) clamp(100px,14svh,170px);background:rgba(7,8,6,.78);border-top:1px solid rgba(255,255,255,.14);backdrop-filter:blur(22px)}.traverse-index-header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;margin-bottom:clamp(34px,5vw,64px)}.traverse-index-header .eyebrow{grid-column:1/-1;color:rgba(255,255,255,.5)}.traverse-index-header h3{margin:0;font:400 clamp(48px,6vw,92px)/.9 var(--serif);letter-spacing:-.045em}.traverse-index-header>span{padding-bottom:8px;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.1em}.traverse-index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,34px) clamp(12px,1.5vw,24px);align-items:start}.traverse-index-item{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;color:#fff;text-align:left;overflow:hidden}.traverse-index-item img{width:100%;height:auto;transition:transform .7s var(--ease),filter .7s ease,opacity .7s ease}.traverse-index-item span{display:block;margin-top:8px;color:rgba(255,255,255,.48);font-size:8px;letter-spacing:.1em}.traverse-index-item:hover img{transform:scale(1.015);filter:saturate(.75);opacity:.88}.traverse-index-footer{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(46px,7vw,88px);padding-top:20px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.56);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.traverse-index-footer .large-text-button{color:#fff} @media(max-width:760px){ .journey-toggle{left:12px;top:54px}.journey-toggle-button{min-height:44px;padding:0 11px;font-size:8px}.journey-toggle-button span{margin-right:6px}.journey-cover .cover-place{top:108px}.archive-stage.is-switzerland .archive-rail{padding-left:18px}.traverse-index{padding:76px 18px 94px}.traverse-index-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}.traverse-index-footer{align-items:flex-start;flex-direction:column} } /* 2026-08-22 — Switzerland cover must read as a true edge-to-edge cover. */ .journey-cover .swiss-cover-enter, .journey-cover .swiss-cover-enter.is-active { position: absolute; inset: 0; width: 100vw; height: 100dvh; min-height: 100dvh; margin: 0; padding: 0; overflow: hidden; background: #050604; } .swiss-hero-pair { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 0; overflow: hidden; background: #050604; } /* No blurred filler, print matte, padding or white space on this cover. */ .swiss-hero-fill { display: none !important; } .swiss-hero-cell { position: relative; width: auto; height: 100%; min-width: 0; overflow: hidden; background: #050604; } .swiss-hero-cell img, .swiss-hero-cell--left img, .swiss-hero-cell--right img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 !important; border: 0; object-fit: cover !important; object-position: 50% 50%; } /* Let the two photographs meet as one slanted spread. */ .swiss-hero-cell:first-child, .swiss-hero-cell--left { clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%); margin-right: -3.6vw; z-index: 2; } .swiss-hero-cell:last-child, .swiss-hero-cell--right { clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%); margin-left: -3.6vw; z-index: 1; } .swiss-cover-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(3,4,3,.05), rgba(3,4,3,0) 48%, rgba(3,4,3,.48)), linear-gradient(90deg, rgba(3,4,3,.12), transparent 24%, transparent 76%, rgba(3,4,3,.12)); pointer-events: none; } @media (max-width: 720px) { .journey-cover .swiss-cover-enter, .journey-cover .swiss-cover-enter.is-active, .swiss-hero-pair { height: 100dvh; min-height: 100dvh; } .swiss-hero-cell img { object-fit: cover !important; padding: 0 !important; } .swiss-hero-cell:first-child, .swiss-hero-cell--left { margin-right: -5vw; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); } .swiss-hero-cell:last-child, .swiss-hero-cell--right { margin-left: -5vw; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); } } /* 2026-08-22 — Switzerland cover: single dark gorge image, full-screen and horizontal. */ .journey-cover .swiss-cover-enter, .journey-cover .swiss-cover-enter.is-active{position:absolute;inset:0;width:100vw;height:100dvh;min-height:100dvh;margin:0;padding:0;overflow:hidden;background:#050604} .swiss-hero-single{position:absolute;inset:0;display:block;overflow:hidden;background:#050604} .swiss-hero-single img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;max-height:none;object-fit:cover;object-position:center center;filter:saturate(.92) brightness(.94)} .swiss-hero-pair,.swiss-hero-cell,.swiss-hero-fill{display:none !important} .swiss-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,3,.12) 0%,rgba(4,5,3,.05) 43%,rgba(4,5,3,.56) 100%),linear-gradient(90deg,rgba(4,5,3,.26),transparent 42%)} .swiss-cover-copy{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(76px,10vh,120px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px;color:#fff} .swiss-cover-copy .eyebrow{grid-column:1/-1} .swiss-cover-copy strong{font:400 clamp(72px,10.5vw,170px)/.8 var(--serif);letter-spacing:-.055em} .swiss-cover-copy>span:last-child{padding-bottom:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase} @media(max-width:760px){ .swiss-cover-copy{left:18px;right:18px;bottom:76px;grid-template-columns:1fr} .swiss-cover-copy strong{font-size:clamp(62px,20vw,96px)} } /* TYPE-SCALE-3 START */ /* Overall typography approximately 30% smaller */ body { font-size: 9px; } .wordmark, .nav-button { font-size: 8px; } .big-button { font-size: 8px; } .large-text-button { font-size: 8px; } .eyebrow { font-size: 7px; } .cover-subtitle, .cover-action, .cover-place, .archive-actions, .archive-meta, .film-caption, .journey-toggle-button, .swiss-cover-copy > span:last-child { font-size: 7px; } .section-header h2 { font-size: clamp(35px, 4.2vw, 63px); } .atlas-copy h2 { font-size: clamp(40px, 4.2vw, 66px); } .atlas-current strong { font-size: 18px; } .viewer-caption p:first-child { font-size: 20px; } .traverse-index-header h3 { font-size: clamp(34px, 4.2vw, 64px); } /* Cover titles approximately 50% smaller */ .cover-copy strong, .swiss-cover-copy strong { font-size: clamp(36px, 5.25vw, 85px) !important; } /* Switzerland — single rotated gorge photograph */ .swiss-hero-single { position: absolute; inset: 0; overflow: hidden; background: #050604; } .swiss-hero-single img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; } /* Old split-cover pieces stay hidden */ .swiss-hero-pair, .swiss-hero-cell, .swiss-hero-fill { display: none !important; } @media (max-width: 760px) { .cover-copy strong, .swiss-cover-copy strong { font-size: clamp(31px, 10vw, 48px) !important; } .wordmark, .nav-button, .journey-toggle-button { font-size: 7px; } } /* TYPE-SCALE-3 END */ /* COVER-UNIFY-20260822 START */ /* -------------------------------------------------- Switzerland cover: preserve the complete original photograph, while an enlarged blurred copy fills the viewport. -------------------------------------------------- */ .swiss-hero-single { position: absolute; inset: 0; overflow: hidden; background: #080906; isolation: isolate; } .swiss-hero-single::before { content: ""; position: absolute; inset: -6%; z-index: 0; background-image: url("assets/switzerland/swiss-cover-dark-gorge.png"); background-size: cover; background-position: center; filter: blur(34px) saturate(.82) brightness(.58); transform: scale(1.08); } .swiss-hero-single::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(5,6,4,.08) 0%, transparent 45%, rgba(5,6,4,.24) 100% ); } .swiss-hero-single img { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; margin: 0; padding: 0; filter: none; } /* -------------------------------------------------- Make Scotland + Switzerland title treatment match. -------------------------------------------------- */ .cover-copy, .swiss-cover-copy { left: var(--pad); right: var(--pad); bottom: clamp(76px, 10vh, 120px); display: block; } .cover-copy strong, .swiss-cover-copy strong { display: block; margin-top: 6px; } .cover-subtitle { display: none !important; } .cover-action, .swiss-cover-action { position: absolute; right: var(--pad); bottom: clamp(80px, 10vh, 116px); z-index: 10; font-size: 7px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #fff; } /* -------------------------------------------------- Smaller journey toggle. -------------------------------------------------- */ .journey-toggle { gap: 3px; padding: 3px; } .journey-toggle-button { min-height: 36px; padding: 0 10px; font-size: 6.5px; letter-spacing: .08em; } .journey-toggle-button span { margin-right: 5px; font-size: 6px; } @media (max-width: 760px) { .journey-toggle { gap: 2px; padding: 3px; } .journey-toggle-button { min-height: 34px; padding: 0 8px; font-size: 6.5px; } .cover-action, .swiss-cover-action { right: 18px; bottom: 30px; font-size: 7px; } } /* COVER-UNIFY-20260822 END */ /* COVER-TOGGLE-20260822 START */ /* ----------------------------------------------- SWITZERLAND Entire photograph remains visible. It is aligned completely to the left. A blurred copy fills the remaining background. ----------------------------------------------- */ .swiss-hero-single { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #080906; } .swiss-hero-single::before { content: ""; position: absolute; inset: -7%; z-index: 0; background: url("assets/switzerland/swiss-cover-dark-gorge.png") center / cover no-repeat; filter: blur(34px) saturate(.82) brightness(.56); transform: scale(1.09); } .swiss-hero-single::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(5,6,4,.06), transparent 48%, rgba(5,6,4,.28) ); pointer-events: none; } .swiss-hero-single .photo-base, .swiss-hero-single .smudge-bw { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; object-fit: contain; /* This is what pins the full photograph left. */ object-position: left center; } .swiss-hero-single .smudge-bw { z-index: 3; filter: grayscale(1) contrast(1.05); } /* ----------------------------------------------- STATIC COVER TITLE Break of Light never leaves or animates. Only the eyebrow changes. ----------------------------------------------- */ .cover-copy, .swiss-cover-copy, .cover-action, .swiss-cover-action, #home-place { display: none !important; } .shared-cover-copy { position: absolute; z-index: 15; left: var(--pad); right: var(--pad); bottom: clamp( 76px, 10vh, 120px ); color: #fff; pointer-events: none; } .shared-cover-copy .eyebrow { display: block; margin: 0 0 6px; } .shared-cover-copy strong { display: block; font: 400 clamp(36px,5.25vw,85px)/.8 var(--serif); letter-spacing: -.055em; } .shared-cover-action { position: absolute; z-index: 16; right: var(--pad); bottom: clamp( 80px, 10vh, 116px ); min-height: 44px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 7px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } /* ----------------------------------------------- SMALLER TOGGLE + ZOOM FEEL ----------------------------------------------- */ .journey-toggle { gap: 2px; padding: 3px; overflow: hidden; } .journey-toggle-button { min-height: 34px; padding: 0 9px; font-size: 6.5px; transition: background .28s ease, color .28s ease, transform .38s cubic-bezier(.18,.82,.22,1); } .journey-toggle-button span { margin-right: 5px; font-size: 6px; } .journey-toggle-button.is-active { transform: scale(1.05); } /* The photograph transitions. The title overlay does not. */ .journey-cover-layer { transition: opacity .5s var(--ease), visibility 0s linear .5s; } .journey-cover-layer.is-active { transition: opacity .5s var(--ease), visibility 0s linear 0s; } @media (max-width:760px) { .shared-cover-copy { left: 18px; right: 18px; bottom: 76px; } .shared-cover-copy strong { font-size: clamp( 31px, 10vw, 48px ); } .shared-cover-action { right: 18px; bottom: 30px; font-size: 7px; } .journey-toggle { left: 12px; top: 54px; } .journey-toggle-button { min-height: 32px; padding: 0 7px; font-size: 6px; } } /* COVER-TOGGLE-20260822 END */ /* STATIC-COVER-FIX START */ /* Hide each journey's duplicate title. One persistent title now lives above both covers. */ .cover-copy, .swiss-cover-copy, .cover-action, .swiss-cover-action, #home-place { display: none !important; } /* Permanent title */ .shared-cover-copy { display: block !important; position: absolute; z-index: 50; left: var(--pad); right: var(--pad); bottom: clamp( 76px, 10vh, 120px ); color: #fff; pointer-events: none; } .shared-cover-copy .eyebrow { display: block; margin-bottom: 6px; color: #fff; } .shared-cover-copy strong { display: block; font: 400 clamp(36px,5.25vw,85px)/.8 var(--serif); letter-spacing: -.055em; color: #fff; } /* Permanent Enter control */ .shared-cover-action { display: inline-flex !important; position: absolute; z-index: 51; right: var(--pad); bottom: clamp( 80px, 10vh, 116px ); align-items: center; min-height: 40px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 7px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } /* ------------------------------------------ Toggle transition No zoom. No image movement. Just a quiet dissolve. ------------------------------------------ */ .journey-cover-layer { opacity: 0; visibility: hidden; pointer-events: none; transform: none !important; filter: none !important; transition: opacity .38s ease, visibility 0s linear .38s !important; } .journey-cover-layer.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; filter: none !important; transition: opacity .38s ease, visibility 0s linear 0s !important; } /* The title itself does not animate */ .shared-cover-copy, .shared-cover-copy *, .shared-cover-action { animation: none !important; transition: none !important; transform: none !important; } /* Keep toggle compact */ .journey-toggle { gap: 2px; padding: 3px; } .journey-toggle-button { min-height: 32px; padding: 0 8px; font-size: 6px; transform: none !important; transition: background .22s ease, color .22s ease !important; } .journey-toggle-button span { margin-right: 5px; font-size: 5.5px; } .journey-toggle-button.is-active { transform: none !important; } /* Switzerland: original photograph fully visible, anchored to the left. */ .swiss-hero-single .photo-base, .swiss-hero-single .smudge-bw { object-fit: contain !important; object-position: left center !important; } @media(max-width:760px){ .shared-cover-copy { left: 18px; right: 18px; bottom: 76px; } .shared-cover-copy strong { font-size: clamp( 31px, 10vw, 48px ); } .shared-cover-action { right: 18px; bottom: 30px; } } /* STATIC-COVER-FIX END */ /* HEADLINE-HARD-FIX-1 */ #cover-persistent-ui { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; inset: 0 !important; z-index: 99999 !important; pointer-events: none !important; color: #fff !important; } #persistent-cover-copy { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; left: var(--pad) !important; bottom: clamp(76px,10vh,120px) !important; color: #fff !important; pointer-events: none !important; } #persistent-cover-eyebrow { display: block !important; margin-bottom: 6px !important; color: #fff !important; font-family: var(--sans) !important; font-size: 7px !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } #persistent-cover-title { display: block !important; color: #fff !important; font-family: var(--serif) !important; font-size: clamp(36px,5.25vw,85px) !important; font-weight: 400 !important; line-height: .82 !important; letter-spacing: -.055em !important; } #persistent-cover-enter { display: flex !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; right: var(--pad) !important; bottom: clamp(80px,10vh,116px) !important; z-index: 100000 !important; align-items: center !important; min-height: 42px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #fff !important; font-family: var(--sans) !important; font-size: 7px !important; font-weight: 600 !important; letter-spacing: .09em !important; text-transform: uppercase !important; pointer-events: auto !important; cursor: pointer !important; } @media(max-width:760px) { #persistent-cover-copy { left: 18px !important; bottom: 76px !important; } #persistent-cover-title { font-size: clamp(31px,10vw,48px) !important; } #persistent-cover-enter { right: 18px !important; bottom: 30px !important; } } /* SWISS-BLACK-BACKGROUND START */ .swiss-cover-enter, .swiss-hero-single { background: #000 !important; } /* Remove the blurred duplicate photograph */ .swiss-hero-single::before { content: none !important; display: none !important; background: none !important; } /* Don't tint the empty black area */ .swiss-hero-single::after { background: transparent !important; } /* Keep the complete original photograph aligned left */ .swiss-hero-single .photo-base, .swiss-hero-single .smudge-bw { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: left center !important; background: transparent !important; } /* SWISS-BLACK-BACKGROUND END */ /* SWISS-MIRROR-KEEP START */ /* Keep Switzerland mirrored */ .swiss-hero-single .photo-base, .swiss-hero-single .smudge-bw { transform: scaleX(-1) !important; object-fit: contain !important; object-position: left center !important; } /* SWISS-MIRROR-KEEP END */ /* GRID-TRAVERSE-20260822 START */ /* ================================================== TRAVERSE = PHOTO INDEX ONLY ================================================== */ .traverse-backdrop, .traverse-progress { display: none !important; } .traverse-dialog { background: #080906 !important; } .traverse-scroll { background: #080906 !important; } .traverse-flow { padding: clamp(92px,12vh,130px) 0 0 !important; } .traverse-index-only { margin: 0 !important; padding: clamp(32px,4vw,60px) var(--pad) clamp(70px,8vw,110px) !important; border: 0 !important; background: #080906 !important; backdrop-filter: none !important; } /* No "All photographs", no captions, no numbering */ .traverse-index-header, .traverse-panel-caption, .traverse-index-item > span { display: none !important; } .traverse-index-grid { display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: clamp(10px,1.3vw,20px) !important; align-items: start; } .traverse-index-item { display: block; width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; background: transparent !important; } .traverse-index-item img { display: block; width: 100%; height: auto; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } /* Switzerland: explicitly remove any visual frame */ .traverse-dialog.is-switzerland .traverse-index-item, .traverse-dialog.is-switzerland .traverse-index-item img { border: 0 !important; outline: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* ================================================== INDIVIDUAL PHOTO VIEWER ================================================== */ /* No pointer tilt / perspective movement */ .viewer-photo-surface { transform: none !important; perspective: none !important; --rx: 0deg !important; --ry: 0deg !important; --tx: 0px !important; --ty: 0px !important; } /* Always retain the complete photograph */ .viewer-photo-surface .photo-base, .viewer-photo-surface .smudge-bw { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* Smudge is reveal-only, never a transform */ .viewer-photo-surface.smudge-surface { transform: none !important; } /* ================================================== WORDMARK ================================================== */ .wordmark { letter-spacing: .075em; } @media(max-width:760px){ .traverse-index-grid { grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 10px !important; } .traverse-index-only { padding-left: 10px !important; padding-right: 10px !important; } } /* GRID-TRAVERSE-20260822 END */ /* VIEWER-SMUDGE-FIX-2 START */ /* --------------------------------------------------- COVER The photograph is no longer an invisible giant button. Only "Enter the traverse" should feel interactive. --------------------------------------------------- */ .journey-cover-layer { cursor: default !important; } .shared-cover-action, #persistent-cover-enter { cursor: pointer !important; } /* --------------------------------------------------- B&W SMUDGE One stable soft reveal. No history/trail. No multiple masks. No delayed blobs. --------------------------------------------------- */ .smudge-surface { --smudge-x: 50%; --smudge-y: 50%; } .smudge-bw { opacity: 0 !important; pointer-events: none !important; -webkit-mask-image: radial-gradient( circle at var(--smudge-x) var(--smudge-y), #000 0px, #000 28px, rgba(0,0,0,.92) 40px, rgba(0,0,0,.48) 58px, rgba(0,0,0,.12) 73px, transparent 88px ) !important; mask-image: radial-gradient( circle at var(--smudge-x) var(--smudge-y), #000 0px, #000 28px, rgba(0,0,0,.92) 40px, rgba(0,0,0,.48) 58px, rgba(0,0,0,.12) 73px, transparent 88px ) !important; transition: opacity .14s ease !important; } .smudge-surface.is-smudging .smudge-bw { opacity: 1 !important; } /* --------------------------------------------------- INDIVIDUAL PHOTOGRAPH VIEWER The available screen becomes a frame around the entire photograph. Nothing gets cover-cropped. Nothing tilts or follows the pointer. --------------------------------------------------- */ .viewer-photo-surface { position: absolute !important; top: 74px !important; right: clamp(22px,5vw,80px) !important; bottom: 112px !important; left: clamp(22px,5vw,80px) !important; overflow: visible !important; transform: none !important; perspective: none !important; --rx: 0deg !important; --ry: 0deg !important; --tx: 0px !important; --ty: 0px !important; } /* Both colour and B&W copies use their natural aspect ratio and are constrained only by the available viewport. */ .viewer-photo-surface .photo-base, .viewer-photo-surface .smudge-bw { position: absolute !important; inset: 0 !important; display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: auto !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; border: 0 !important; box-shadow: none !important; } /* Make sure older depth rules cannot re-enable movement. */ .viewer-photo-surface:hover, .viewer-photo-surface.is-smudging { transform: none !important; } /* --------------------------------------------------- MOBILE Slightly more usable image area. --------------------------------------------------- */ @media(max-width:760px){ .viewer-photo-surface { top: 66px !important; right: 10px !important; bottom: 112px !important; left: 10px !important; } } /* VIEWER-SMUDGE-FIX-2 END */ /* VIEWER-SMUDGE-V4 START */ /* ========================================================= Disable every older B&W duplicate implementation. ========================================================= */ .smudge-bw { display: none !important; } /* ========================================================= New smudge lens ========================================================= */ .bw-smudge-v4 { position: absolute; z-index: 999; overflow: hidden; opacity: 0; pointer-events: none; /* * Uneven, soft edge instead of a perfect cursor circle. */ -webkit-mask-image: radial-gradient( ellipse 54% 47% at 48% 51%, #000 0%, #000 42%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.38) 73%, transparent 94% ); mask-image: radial-gradient( ellipse 54% 47% at 48% 51%, #000 0%, #000 42%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.38) 73%, transparent 94% ); transition: opacity .1s ease; } .bw-smudge-v4.is-visible { opacity: 1; } .bw-smudge-v4-image { position: absolute; display: block; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: fill !important; filter: grayscale(1) contrast(1.07) brightness(.96); pointer-events: none; } /* ========================================================= Remove every photograph caption ========================================================= */ .archive-meta, .film-caption, .traverse-panel-caption, .traverse-index-header, .traverse-index-item > span, .viewer-caption, .atlas-current small, .atlas-current strong { display: none !important; } /* ========================================================= Individual photograph viewer Use almost the whole viewport now that captions are gone. The complete image must remain visible. ========================================================= */ #viewer .viewer-photo-surface { position: absolute !important; inset: 66px 20px 20px 20px !important; display: grid !important; place-items: center !important; overflow: visible !important; perspective: none !important; transform: none !important; } #viewer-image { position: relative !important; grid-area: 1 / 1 !important; display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: auto !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; border: 0 !important; box-shadow: none !important; } /* Old depth-hover rules cannot move viewer images. */ #viewer .viewer-photo-surface:hover, #viewer .viewer-photo-surface.is-smudging { transform: none !important; } /* Make sure the explicit button stays above the cover. */ #persistent-cover-enter, #shared-cover-enter { z-index: 100001 !important; pointer-events: auto !important; } @media(max-width:760px) { #viewer .viewer-photo-surface { inset: 58px 8px 8px 8px !important; } } /* VIEWER-SMUDGE-V4 END */ /* PRECISE-BNW-RANGE START */ /* --------------------------------------------------------- Kill all previous smudge implementations. --------------------------------------------------------- */ .smudge-bw, .bw-smudge-v4 { display: none !important; } /* --------------------------------------------------------- New cursor B&W range. The duplicate sits exactly over the real photograph. Only a soft area immediately around the cursor is visible. --------------------------------------------------------- */ .bnw-range-overlay { --bnw-x: 50%; --bnw-y: 50%; position: absolute !important; z-index: 900 !important; display: block !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none !important; filter: grayscale(1) contrast(1.04); /* * About a 65px core area with a soft edge. * This is a range around the cursor, not a trail. */ -webkit-mask-image: radial-gradient( circle 82px at var(--bnw-x) var(--bnw-y), #000 0px, #000 52px, rgba(0,0,0,.82) 61px, rgba(0,0,0,.40) 70px, transparent 82px ); mask-image: radial-gradient( circle 82px at var(--bnw-x) var(--bnw-y), #000 0px, #000 52px, rgba(0,0,0,.82) 61px, rgba(0,0,0,.40) 70px, transparent 82px ); transition: opacity .06s linear; } .bnw-range-overlay.is-visible { opacity: 1; } /* * Make sure these surfaces can contain the overlay. */ .cover-photo, .swiss-hero-single, .viewer-photo-surface { position: absolute; overflow: hidden; isolation: isolate; } /* * Viewer still keeps the entire photograph visible. */ .viewer-photo-surface #viewer-image { object-fit: contain !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; } /* PRECISE-BNW-RANGE END */ /* CURSOR-BW-V6 START */ /* ------------------------------------------------------- Disable every previous cursor B&W implementation. ------------------------------------------------------- */ .smudge-bw, .bw-smudge-v4, .bnw-range-overlay { display: none !important; } /* ------------------------------------------------------- Accurate cursor B&W range ------------------------------------------------------- */ .cursor-bw-v6 { --cursor-x: 50%; --cursor-y: 50%; position: absolute !important; z-index: 9999 !important; display: block !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; opacity: 0; filter: grayscale(1) saturate(0) contrast(1.06) brightness(.98) !important; -webkit-mask-image: radial-gradient( circle 58px at var(--cursor-x) var(--cursor-y), #000 0px, #000 39px, rgba(0,0,0,.80) 46px, rgba(0,0,0,.36) 52px, transparent 58px ); mask-image: radial-gradient( circle 58px at var(--cursor-x) var(--cursor-y), #000 0px, #000 39px, rgba(0,0,0,.80) 46px, rgba(0,0,0,.36) 52px, transparent 58px ); transition: opacity .04s linear !important; } .cursor-bw-v6.is-visible { opacity: 1; } /* * Cursor accuracy matters more than the old perspective * movement on these surfaces. */ .cover-photo, .swiss-hero-single, .viewer-photo-surface { transform: none !important; perspective: none !important; } /* ------------------------------------------------------- Individual photo viewer Retain the COMPLETE photograph. ------------------------------------------------------- */ #viewer .viewer-photo-surface { position: absolute !important; inset: 64px 18px 18px 18px !important; display: grid !important; place-items: center !important; overflow: visible !important; background: #080906 !important; } #viewer-image { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: auto !important; padding: 0 !important; border: 0 !important; outline: 0 !important; object-fit: contain !important; object-position: center !important; box-shadow: none !important; } /* ------------------------------------------------------- Switzerland individual photos Kill any UI-created white frame. ------------------------------------------------------- */ #viewer.is-swiss-photo, #viewer.is-swiss-photo .viewer-photo-surface { background: #000 !important; } #viewer.is-swiss-photo #viewer-image { padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* * Same treatment on Swiss trip thumbnails. */ .traverse-dialog.is-switzerland .traverse-index-item, .traverse-dialog.is-switzerland .traverse-index-item img { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* CURSOR-BW-V6 END */ /* NO-BW-CURSOR-V7 START */ /* Disable every previous B&W cursor implementation */ .smudge-bw, .bw-smudge-v4, .bnw-range-overlay, .cursor-bw-v6 { display: none !important; opacity: 0 !important; } /* Cover images themselves are not buttons anymore */ .journey-cover-layer { cursor: default !important; } /* The explicit Enter button remains interactive */ #shared-cover-enter, #persistent-cover-enter { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important; z-index: 100001 !important; } /* Keep individual photo completely visible */ #viewer .viewer-photo-surface { transform: none !important; perspective: none !important; } #viewer-image { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; transform: none; } /* NO-BW-CURSOR-V7 END */ /* CLEAN-CAROUSELS-2 START */ /* Remove Scotland film */ #film-centrepiece, .film-centrepiece, #skye-film { display: none !important; } /* Remove old film fade */ .archive-stage::before { display: none !important; } /* Both galleries use the full carousel */ .archive-rail, .archive-stage.is-skye .archive-rail, .archive-stage.is-switzerland .archive-rail { padding-left: 8vw !important; padding-right: 8vw !important; gap: clamp(20px,2.4vw,38px) !important; } /* No suction / blur / absorption */ .archive-item { opacity: 1 !important; filter: none !important; transform: none !important; } /* Scotland */ .archive-stage.is-skye .archive-photo { height: var(--gallery-h); background: transparent !important; } .archive-stage.is-skye .archive-photo img { display: block; height: 100%; width: auto; max-width: none; object-fit: contain; border: 0 !important; box-shadow: none !important; } /* Switzerland */ .archive-swiss-sheet { flex: 0 0 auto; height: var(--gallery-h); aspect-ratio: 1 / 1; margin: 0; border: 0; background: transparent; } .archive-swiss-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); width: 100%; height: 100%; gap: 0; overflow: hidden; background: transparent; } .archive-swiss-photo { display: block; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; } .archive-swiss-photo img { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; outline: 0 !important; object-fit: cover; box-shadow: none !important; } /* No gallery captions */ .archive-meta, .film-caption { display: none !important; } @media(max-width:760px){ .archive-rail, .archive-stage.is-skye .archive-rail, .archive-stage.is-switzerland .archive-rail { padding-left: 18px !important; padding-right: 18px !important; } .archive-swiss-sheet { height: min(74vw,42svh); } } /* CLEAN-CAROUSELS-2 END */ /* REMOVE-FILM-INTERLUDE START */ #skye-film-interlude, #felder-skye-tv, .skye-film-interlude, .felder-tv-interlude, .felder-tv-page { display: none !important; } /* Original gallery film remains removed too */ #film-centrepiece, .film-centrepiece, #skye-film { display: none !important; } /* REMOVE-FILM-INTERLUDE END */ /* SWISS-BORDER-KILL-3 START */ /* ========================================================= SWITZERLAND GALLERY Remove ALL surrounding frame styling, including pseudo-elements left over from earlier designs. ========================================================= */ body .archive-stage.is-switzerland .archive-item, body .archive-stage.is-switzerland figure, body .archive-stage.is-switzerland button, body .archive-stage.is-switzerland .archive-photo, body .archive-stage.is-switzerland .archive-photo-button { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } body .archive-stage.is-switzerland .archive-item::before, body .archive-stage.is-switzerland .archive-item::after, body .archive-stage.is-switzerland .archive-photo::before, body .archive-stage.is-switzerland .archive-photo::after, body .archive-stage.is-switzerland button::before, body .archive-stage.is-switzerland button::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } body .archive-stage.is-switzerland img { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } /* ========================================================= SWITZERLAND TRAVERSE GRID ========================================================= */ body .traverse-dialog.is-switzerland, body .traverse-dialog.is-switzerland .traverse-scroll, body .traverse-dialog.is-switzerland .traverse-flow, body .traverse-dialog.is-switzerland .traverse-index, body .traverse-dialog.is-switzerland .traverse-index-grid { background: #080906 !important; } body .traverse-dialog.is-switzerland .traverse-index-item { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } body .traverse-dialog.is-switzerland .traverse-index-item::before, body .traverse-dialog.is-switzerland .traverse-index-item::after { content: none !important; display: none !important; } body .traverse-dialog.is-switzerland .traverse-index-item img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } /* ========================================================= INDIVIDUAL VIEWER No white frame behind contain-fitted images. This is safe for Scotland too. ========================================================= */ body #viewer, body #viewer .viewer-photo-surface { background: #080906 !important; } body #viewer .viewer-photo-surface { padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } body #viewer .viewer-photo-surface::before, body #viewer .viewer-photo-surface::after { content: none !important; display: none !important; } body #viewer #viewer-image { display: block !important; margin: auto !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; object-fit: contain !important; } /* ========================================================= Kill any generic old "photo frame" styles that only become visible when Switzerland is selected. ========================================================= */ body .archive-stage.is-switzerland [class*="frame"], body .traverse-dialog.is-switzerland [class*="frame"] { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } /* SWISS-BORDER-KILL-3 END */ /* FRONT-COVER-BW-1 START */ /* * Only the two homepage cover photographs. */ .cover-photo, .swiss-hero-single { isolation: isolate; } /* * Exact grayscale duplicate of the cover. */ .front-bw-smudge { --front-bw-x: 50%; --front-bw-y: 50%; position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; filter: grayscale(1) saturate(0) contrast(1.03) !important; opacity: 0; /* * Soft B&W range around pointer. * Not a second cursor and not a trailing blob. */ -webkit-mask-image: radial-gradient( circle 72px at var(--front-bw-x) var(--front-bw-y), #000 0, #000 44px, rgba(0,0,0,.86) 52px, rgba(0,0,0,.45) 61px, transparent 72px ); mask-image: radial-gradient( circle 72px at var(--front-bw-x) var(--front-bw-y), #000 0, #000 44px, rgba(0,0,0,.86) 52px, rgba(0,0,0,.45) 61px, transparent 72px ); transition: opacity .05s linear !important; } .front-bw-smudge.is-visible { opacity: 1; } /* * Explicitly keep this away from galleries / viewer. */ .archive-stage .front-bw-smudge, .traverse-dialog .front-bw-smudge, #viewer .front-bw-smudge { display: none !important; } /* FRONT-COVER-BW-1 END */ /* FELDER-GATEWAY-ATLAS-2 START */ /* ========================================================= REMOVE TEXT-SELECTION / TAP HIGHLIGHT VISUALLY ========================================================= */ ::selection { background: transparent; color: inherit; } ::-moz-selection { background: transparent; color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } /* ========================================================= VIEW MODES ========================================================= */ body.felder-mode-main { height: 100dvh; overflow: hidden !important; } body.felder-mode-main .felder-trip-surface { display: none !important; } body.felder-mode-trip .felder-main { display: none !important; } body.felder-mode-trip { overflow-x: hidden; } /* ========================================================= MAIN VIDEO ========================================================= */ .felder-main { position: relative; width: 100%; height: 100dvh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; background: #161a16; } .felder-main-video { position: absolute; inset: -3%; z-index: -6; width: 106%; height: 106%; object-fit: cover; /* * Still visibly a moving road / wipers, * but softer and more atmospheric. */ filter: blur(3px) saturate(.72) contrast(.94) brightness(.72); transform: scale(1.025); transition: transform .82s cubic-bezier(.16,.82,.2,1), filter .82s cubic-bezier(.16,.82,.2,1), opacity .7s ease; } .felder-main-film-soften { position: absolute; inset: 0; z-index: -4; background: radial-gradient( ellipse at 50% 47%, rgba(225,230,221,.09), transparent 38% ), linear-gradient( 180deg, rgba(7,10,8,.12), transparent 45%, rgba(5,7,5,.34) ); pointer-events: none; } .felder-main-film-grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .10; background-image: radial-gradient( circle, rgba(255,255,255,.40) 0 1px, transparent 1.2px ), radial-gradient( circle, rgba(0,0,0,.34) 0 1px, transparent 1.2px ); background-size: 89px 79px, 127px 113px; background-position: 0 0, 31px 43px; mix-blend-mode: soft-light; } /* * No extra FELDER // OBSERVED here. * Existing top-left site wordmark remains. */ .felder-main-brand { display: none !important; } /* ========================================================= MAIN PATH ========================================================= */ .felder-main-path { position: relative; z-index: 10; width: min(860px,94vw); height: 220px; display: grid; place-items: center; } .felder-main-title { position: relative; z-index: 10; appearance: none; margin: 0; padding: 24px 32px; border: 0; background: transparent; color: rgba(247,246,240,.96); cursor: pointer; } .felder-main-title-text { position: relative; display: inline-block; font-family: "Source Serif 4", Georgia, serif; font-size: clamp( 30px, 4vw, 58px ); font-weight: 400; line-height: 1; letter-spacing: -.025em; transition: letter-spacing .5s cubic-bezier(.16,.8,.2,1), transform .5s cubic-bezier(.16,.8,.2,1), filter .5s ease, text-shadow .5s ease; } /* * Light-leak ghost of the words. */ .felder-main-title-text::after { content: attr(data-title); position: absolute; inset: 0; opacity: 0; filter: blur(8px); pointer-events: none; transform: scale(1.02); transition: opacity .45s ease, filter .45s ease, transform .5s ease; } .felder-main-path:hover .felder-main-title-text, .felder-main-path.is-open .felder-main-title-text { letter-spacing: .012em; transform: scale(1.025); text-shadow: 0 0 28px rgba(246,245,239,.20); } .felder-main-path:hover .felder-main-title-text::after, .felder-main-path.is-open .felder-main-title-text::after { opacity: .19; filter: blur(10px); transform: scale(1.045); } /* ========================================================= COUNTRY OPTIONS Arrows visibly emerge OUT OF the title. ========================================================= */ .felder-main-trip { position: absolute; top: 50%; appearance: none; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 4px; border: 0; background: transparent; color: rgba(246,245,239,.78); font-family: Manrope, sans-serif; font-size: 10px; letter-spacing: .14em; cursor: pointer; opacity: 0; pointer-events: none; filter: blur(4px); transition: opacity .35s ease, filter .4s ease, color .25s ease, transform .55s cubic-bezier(.16,.8,.2,1); } .felder-main-trip-scotland { right: calc(50% + 145px); transform: translate( 32px, -50% ); } .felder-main-trip-switzerland { left: calc(50% + 145px); transform: translate( -32px, -50% ); } .felder-main-arrow { display: inline-block; overflow: hidden; width: 0; opacity: 0; white-space: nowrap; color: rgba(246,245,239,.72); font-size: 20px; line-height: 1; transition: width .58s cubic-bezier(.16,.8,.2,1), opacity .36s ease, transform .3s ease; } .felder-main-path:hover .felder-main-trip, .felder-main-path.is-open .felder-main-trip { opacity: 1; pointer-events: auto; filter: blur(0); transform: translate( 0, -50% ); } .felder-main-path:hover .felder-main-arrow, .felder-main-path.is-open .felder-main-arrow { width: 54px; opacity: .82; } .felder-main-trip:hover { color: #fff; } .felder-main-trip-scotland:hover .felder-main-arrow { transform: translateX(-7px); } .felder-main-trip-switzerland:hover .felder-main-arrow { transform: translateX(7px); } /* ========================================================= ENTER TRIP ZOOM NO SCROLL-DOWN ILLUSION. ========================================================= */ body.felder-mode-main.felder-transitioning-in #home { display: block !important; position: fixed !important; inset: 0 !important; z-index: 5000 !important; opacity: 0; transform: scale(1.16); filter: blur(14px); pointer-events: none; transition: opacity .74s ease, transform .82s cubic-bezier(.16,.82,.2,1), filter .82s ease; } body.felder-transitioning-in .felder-main { position: fixed; inset: 0; z-index: 4900; transition: opacity .68s ease, transform .82s cubic-bezier(.16,.82,.2,1), filter .82s ease; } body.felder-transition-go #home { opacity: 1; transform: scale(1); filter: blur(0); } body.felder-transition-go .felder-main { opacity: 0; transform: scale(1.13); filter: blur(10px); } /* ========================================================= RETURN TO MAIN ========================================================= */ .trip-main-back { position: fixed; top: 26px; left: clamp( 20px, 3vw, 48px ); z-index: 100050; appearance: none; display: none; align-items: center; gap: 8px; padding: 8px 0; border: 0; background: transparent; color: rgba(244,243,236,.62); font-family: "Source Serif 4", Georgia, serif; font-size: 12px; cursor: pointer; transition: color .25s ease; } body.felder-mode-trip .trip-main-back { display: flex; } .trip-main-back:hover { color: rgba(255,255,255,.96); } .trip-main-back-arrow { display: inline-block; opacity: .48; transition: transform .28s ease, opacity .28s ease; } .trip-main-back:hover .trip-main-back-arrow { transform: translateX(-5px); opacity: .9; } /* * Clicking the large cover title can also go home. */ body.felder-mode-trip #persistent-cover-title, body.felder-mode-trip #shared-cover-title { cursor: pointer; } /* * Main zooms back over whichever trip slide * the visitor is currently viewing. */ body.felder-mode-trip.felder-transitioning-back .felder-main { display: flex !important; position: fixed; inset: 0; z-index: 120000; opacity: 0; transform: scale(.88); filter: blur(12px); transition: opacity .62s ease, transform .68s cubic-bezier(.16,.82,.2,1), filter .68s ease; } body.felder-return-go .felder-main { opacity: 1 !important; transform: scale(1) !important; filter: blur(0) !important; } /* ========================================================= OLD HOME TOGGLE REMOVED Trip choice belongs only on MAIN now. ========================================================= */ #home .journey-toggle, #home .journey-toggle-wrap, #home .journey-toggle-control { display: none !important; } /* ========================================================= ATLAS — SECOND SLIDE Brighter, closer to the concept board. ========================================================= */ .trip-atlas-slide { position: relative; width: 100%; height: 100dvh; min-height: 640px; overflow: hidden; isolation: isolate; color: #dddcd5; background: #111310; } .trip-atlas-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; height: 70px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 clamp( 22px, 3.5vw, 58px ); } .trip-atlas-heading { font-family: Manrope, sans-serif; font-size: 9px; letter-spacing: .24em; color: rgba(239,238,231,.70); } .trip-atlas-site { justify-self: end; font-family: Manrope, sans-serif; font-size: 9px; letter-spacing: .23em; color: rgba(239,238,231,.42); } .trip-atlas-layout { display: grid; grid-template-columns: minmax( 210px, 24vw ) 1fr; width: 100%; height: 100%; } .trip-atlas-sidebar { position: relative; z-index: 30; display: flex; flex-direction: column; justify-content: center; padding: 90px clamp( 28px, 4vw, 70px ) 60px; background: linear-gradient( 90deg, rgba(11,13,11,.99), rgba(11,13,11,.90) 72%, rgba(11,13,11,.20) ); } .trip-atlas-kicker { margin-bottom: 20px; font-family: Manrope, sans-serif; font-size: 9px; letter-spacing: .28em; color: rgba(238,237,230,.42); } .trip-atlas-places { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .trip-atlas-place { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; font-family: "Source Serif 4", Georgia, serif; font-size: clamp( 14px, 1.15vw, 18px ); color: rgba(238,237,230,.45); cursor: pointer; transition: color .25s ease, transform .3s ease; } .trip-atlas-place:hover, .trip-atlas-place.is-active { color: rgba(255,254,247,.94); transform: translateX(5px); } .trip-atlas-coordinate { position: absolute; left: clamp( 28px, 4vw, 70px ); bottom: 44px; display: flex; flex-direction: column; gap: 4px; font-family: Manrope, sans-serif; font-size: 9px; letter-spacing: .10em; color: rgba(238,237,230,.42); } /* ========================================================= MAP ========================================================= */ .trip-atlas-map-wrap { position: relative; min-width: 0; height: 100%; overflow: hidden; background: #161915; } .trip-atlas-map { position: absolute; inset: -2%; width: 104%; height: 104%; } /* * Key change: * significantly more visible than previous atlas. */ .trip-atlas-map .leaflet-tile { filter: grayscale(1) invert(.88) sepia(.12) saturate(.30) brightness(.64) contrast(1.18); opacity: .82; } /* * Relief texture inspired by the preview. */ .trip-atlas-relief { position: absolute; inset: 0; z-index: 540; pointer-events: none; opacity: .22; background: repeating-radial-gradient( ellipse at 63% 54%, transparent 0 23px, rgba(223,220,207,.08) 24px 25px ), repeating-radial-gradient( ellipse at 39% 37%, transparent 0 38px, rgba(223,220,207,.04) 39px 40px ); mix-blend-mode: screen; } .trip-atlas-vignette { position: absolute; inset: 0; z-index: 600; pointer-events: none; background: radial-gradient( ellipse at 60% 49%, transparent 30%, rgba(8,10,8,.05) 63%, rgba(7,9,7,.37) 100% ), linear-gradient( 90deg, rgba(8,10,8,.32), transparent 32% ); } .felder-map-label { border: 0 !important; background: transparent !important; box-shadow: none !important; color: rgba(247,245,235,.74) !important; font-family: Manrope, sans-serif !important; font-size: 8px !important; letter-spacing: .16em !important; text-transform: uppercase !important; } .felder-map-label::before { display: none !important; } /* ========================================================= SCOTLAND COVER Keep the darker / higher-contrast treatment. ========================================================= */ #home[data-selected-trip="skye"] .cover-photo .photo-base, #home[data-selected-trip="skye"] .cover-photo img:first-child { filter: contrast(1.17) brightness(.79) saturate(.74) sepia(.025) !important; } /* ========================================================= SCOTLAND B&W CURSOR Swiss existing version is left untouched. ========================================================= */ .cover-photo .front-bw-smudge { display: none !important; } .cover-photo { isolation: isolate; } .felder-scot-bw { --scot-bw-x: 50%; --scot-bw-y: 50%; position: absolute !important; inset: 0 !important; z-index: 4 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; pointer-events: none !important; opacity: 0; filter: grayscale(1) saturate(0) contrast(1.04) !important; -webkit-mask-image: radial-gradient( circle 72px at var(--scot-bw-x) var(--scot-bw-y), #000 0, #000 43px, rgba(0,0,0,.82) 53px, rgba(0,0,0,.35) 63px, transparent 72px ); mask-image: radial-gradient( circle 72px at var(--scot-bw-x) var(--scot-bw-y), #000 0, #000 43px, rgba(0,0,0,.82) 53px, rgba(0,0,0,.35) 63px, transparent 72px ); transition: opacity .05s linear; } .felder-scot-bw.is-visible { opacity: 1; } /* ========================================================= SWISS COVER Black on left → gradual blend → photo on right. ========================================================= */ #home[data-selected-trip="switzerland"] .swiss-hero-single { overflow: hidden !important; background: #000 !important; } #home[data-selected-trip="switzerland"] .swiss-hero-single .photo-base { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 78% !important; height: 100% !important; object-fit: contain !important; object-position: right center !important; -webkit-mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.08) 7%, rgba(0,0,0,.34) 14%, rgba(0,0,0,.70) 23%, #000 34%, #000 100% ); mask-image: linear-gradient( to right, transparent 0%, rgba(0,0,0,.08) 7%, rgba(0,0,0,.34) 14%, rgba(0,0,0,.70) 23%, #000 34%, #000 100% ); } /* Existing Swiss B&W overlay should follow the same blend */ #home[data-selected-trip="switzerland"] .swiss-hero-single .front-bw-smudge { width: 78% !important; left: auto !important; right: 0 !important; object-position: right center !important; } /* ========================================================= SCOTLAND TRAVERSE SQUARE GRID ========================================================= */ .traverse-dialog.is-skye .traverse-index-grid { display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: clamp( 4px, .55vw, 8px ) !important; } .traverse-dialog.is-skye .traverse-index-item { width: 100% !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .traverse-dialog.is-skye .traverse-index-item img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px) { .felder-main-path { width: 96vw; height: 260px; } .felder-main-title-text { font-size: clamp( 31px, 10vw, 47px ); } .felder-main-trip { top: calc(50% + 72px); } .felder-main-trip-scotland { right: calc(50% + 12px); } .felder-main-trip-switzerland { left: calc(50% + 12px); } .felder-main-path:hover .felder-main-arrow, .felder-main-path.is-open .felder-main-arrow { width: 30px; } .trip-main-back { top: 18px; left: 16px; } .trip-atlas-layout { grid-template-columns: 1fr; } .trip-atlas-sidebar { position: absolute; left: 0; right: 0; bottom: 0; height: auto; min-height: 185px; justify-content: flex-end; padding: 36px 20px 24px; background: linear-gradient( 0deg, rgba(10,12,10,.98), rgba(10,12,10,.82) 68%, transparent ); } .trip-atlas-places { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; } .trip-atlas-coordinate { display: none; } .trip-atlas-topbar { height: 58px; padding: 0 18px; } .trip-atlas-site { display: none; } .traverse-dialog.is-skye .traverse-index-grid { grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } #home[data-selected-trip="switzerland"] .swiss-hero-single .photo-base, #home[data-selected-trip="switzerland"] .swiss-hero-single .front-bw-smudge { width: 88% !important; } } /* FELDER-GATEWAY-ATLAS-2 END */ /* FELDER-POLISH-3 START */ /* ========================================================= MAIN / v1 Main remains a standalone viewport. ========================================================= */ body.felder-mode-main { height: 100dvh !important; overflow: hidden !important; } body.felder-mode-main .felder-main { height: 100dvh !important; min-height: 100dvh !important; } /* No duplicate centre-top branding */ .felder-main-brand { display: none !important; } /* No old film interlude */ #felder-atmosphere-page, #skye-film-interlude, #felder-skye-tv, .felder-atmosphere-page, .skye-film-interlude { display: none !important; } /* ========================================================= MAIN NAVIGATION LEFT OPTION | a break of light. | RIGHT OPTION This avoids overlap on full-screen displays. ========================================================= */ .felder-main-path { position: relative !important; display: grid !important; grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) !important; grid-template-rows: 1fr !important; align-items: center !important; column-gap: clamp(34px, 5vw, 92px) !important; width: min(1180px, 94vw) !important; height: 220px !important; } .felder-main-title { position: relative !important; grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; justify-self: center !important; z-index: 10 !important; } /* Country buttons now occupy their own columns */ .felder-main-trip { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; opacity: 1 !important; filter: none !important; pointer-events: none !important; white-space: nowrap !important; } .felder-main-trip-scotland { grid-column: 1 !important; grid-row: 1 !important; justify-self: end !important; } .felder-main-trip-switzerland { grid-column: 3 !important; grid-row: 1 !important; justify-self: start !important; } /* ========================================================= ARROWS EMERGE FROM "a break of light." Stage 1: arrow grows outward Stage 2: country name appears ========================================================= */ .felder-main-arrow { display: inline-block !important; width: 0 !important; overflow: hidden !important; opacity: 0 !important; color: rgba(247,246,240,.78) !important; font-size: 20px !important; white-space: nowrap !important; transition: width .52s cubic-bezier(.16,.8,.2,1), opacity .25s ease, transform .28s ease !important; transition-delay: 0s !important; } .felder-main-trip-label { display: inline-block; opacity: 0; filter: blur(3px); transform: translateY(2px); transition: opacity .28s ease, filter .32s ease, transform .32s ease; transition-delay: 0s; } /* * When title is engaged: * arrows appear first... */ .felder-main-path:hover .felder-main-trip, .felder-main-path.is-open .felder-main-trip { pointer-events: auto !important; } .felder-main-path:hover .felder-main-arrow, .felder-main-path.is-open .felder-main-arrow { width: 58px !important; opacity: .84 !important; } /* * ...then labels emerge. */ .felder-main-path:hover .felder-main-trip-label, .felder-main-path.is-open .felder-main-trip-label { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: .16s; } /* Scotland: label ← title so the arrow visually originates beside the title and points outward. */ .felder-main-trip-scotland { gap: 12px !important; } /* Switzerland: title → label */ .felder-main-trip-switzerland { gap: 12px !important; } .felder-main-trip-scotland:hover .felder-main-arrow { transform: translateX(-7px); } .felder-main-trip-switzerland:hover .felder-main-arrow { transform: translateX(7px); } /* Slight title response */ .felder-main-path:hover .felder-main-title-text, .felder-main-path.is-open .felder-main-title-text { transform: scale(1.018) !important; letter-spacing: .006em !important; } /* ========================================================= TRIP ARRIVAL Keep the zoom transition, then give the resulting trip page a quick clean fade into its final state. ========================================================= */ body.felder-mode-trip #home { animation: felderTripArrival .30s ease-out both; } @keyframes felderTripArrival { from { opacity: .22; } to { opacity: 1; } } /* ========================================================= RETURN TO MAIN Remove floating nav — it was colliding with the wordmark. The BIG trip title itself is the back button. ========================================================= */ .trip-main-back { display: none !important; } body.felder-mode-trip #persistent-cover-title, body.felder-mode-trip #shared-cover-title { cursor: pointer !important; pointer-events: auto !important; transition: opacity .25s ease, transform .3s cubic-bezier(.16,.8,.2,1) !important; } body.felder-mode-trip #persistent-cover-title:hover, body.felder-mode-trip #shared-cover-title:hover { opacity: .72 !important; transform: translateX(5px) !important; } /* ========================================================= stp1 Use the SAME working B&W cursor implementation as swp1. Disable the separate experimental Scotland copy. ========================================================= */ .felder-scot-bw { display: none !important; } .cover-photo .front-bw-smudge { display: block !important; } /* ========================================================= swp1 Restore the photograph to the RIGHT exactly as a normal contain-fitted image. The photograph itself is NOT faded or moved. A black overlay blends only the boundary in the middle. ========================================================= */ #home[data-selected-trip="switzerland"] .swiss-hero-single { position: absolute !important; overflow: hidden !important; background: #000 !important; } #home[data-selected-trip="switzerland"] .swiss-hero-single .photo-base { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: right center !important; -webkit-mask-image: none !important; mask-image: none !important; background: transparent !important; } /* * swp1 remains untouched on the right. * * Only the central boundary is softened: * * BLACK LEFT * ↓ * gradual blend * ↓ * FULL PHOTO */ #home[data-selected-trip="switzerland"] .swiss-hero-single::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient( to right, #000 0%, #000 37%, rgba(0,0,0,.98) 41%, rgba(0,0,0,.86) 45%, rgba(0,0,0,.60) 49%, rgba(0,0,0,.30) 53%, rgba(0,0,0,.08) 57%, transparent 61%, transparent 100% ) !important; } /* swp1 B&W cursor copy follows the same right alignment */ #home[data-selected-trip="switzerland"] .swiss-hero-single .front-bw-smudge { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: right center !important; } /* ========================================================= ATLAS Restore interaction + make the actual geography easier to read, closer to the concept preview. ========================================================= */ .trip-atlas-map-wrap, .trip-atlas-map, .trip-atlas-map .leaflet-container, .trip-atlas-map .leaflet-map-pane, .trip-atlas-map .leaflet-tile-pane { pointer-events: auto !important; } .trip-atlas-map { cursor: grab !important; touch-action: none !important; } .trip-atlas-map:active { cursor: grabbing !important; } /* Absolutely nothing decorative may block the map */ .trip-atlas-relief, .trip-atlas-vignette, .trip-atlas-map-vignette, .trip-atlas-map-grain { pointer-events: none !important; } /* * Remove an older override which disrupted Leaflet's * own pane stacking. */ .trip-atlas-map .leaflet-pane { pointer-events: auto; } /* * More readable terrain — still dark/editorial, * but not crushed into black. */ .trip-atlas-map .leaflet-tile { filter: grayscale(1) invert(.87) sepia(.10) saturate(.32) brightness(.82) contrast(1.08) !important; opacity: .94 !important; } .trip-atlas-map-wrap { background: #191c18 !important; } .trip-atlas-sidebar { background: linear-gradient( 90deg, rgba(12,14,12,.98), rgba(12,14,12,.88) 74%, rgba(12,14,12,.12) ) !important; } .trip-atlas-relief { opacity: .16 !important; } .trip-atlas-vignette, .trip-atlas-map-vignette { background: radial-gradient( ellipse at 61% 48%, transparent 38%, rgba(8,10,8,.03) 69%, rgba(7,9,7,.28) 100% ), linear-gradient( 90deg, rgba(8,10,8,.24), transparent 30% ) !important; } /* Leaflet's actual draggable layer */ .trip-atlas-map .leaflet-map-pane { cursor: grab !important; } .trip-atlas-map .leaflet-map-pane:active { cursor: grabbing !important; } /* ========================================================= CAROUSELS Visual safeguards only — JS now drives them at 21px/sec. ========================================================= */ .archive-rail { scroll-behavior: auto !important; overflow-x: auto !important; } /* ========================================================= TEXT HIGHLIGHTING ========================================================= */ .felder-main-path, .trip-atlas-slide, #cover-persistent-ui { -webkit-user-select: none; user-select: none; } ::selection { background: transparent !important; color: inherit !important; } ::-moz-selection { background: transparent !important; color: inherit !important; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px) { .felder-main-path { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; column-gap: 22px !important; row-gap: 26px !important; width: 94vw !important; height: auto !important; } .felder-main-title { grid-column: 1 / -1 !important; grid-row: 1 !important; } .felder-main-trip-scotland { grid-column: 1 !important; grid-row: 2 !important; justify-self: end !important; } .felder-main-trip-switzerland { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; } .felder-main-path:hover .felder-main-arrow, .felder-main-path.is-open .felder-main-arrow { width: 28px !important; } #home[data-selected-trip="switzerland"] .swiss-hero-single::before { background: linear-gradient( to right, #000 0%, #000 22%, rgba(0,0,0,.88) 29%, rgba(0,0,0,.55) 36%, rgba(0,0,0,.20) 43%, transparent 51% ) !important; } } /* FELDER-POLISH-3 END */ /* FELDER-FIX-6 START */ /* ========================================================= KEEP BEIGE FLASH ========================================================= */ body.felder-transitioning-in::before { content: ""; position: fixed; inset: 0; z-index: 4950; pointer-events: none; background: #ece9df; animation: felderBeigeFlash6 .82s ease both; } @keyframes felderBeigeFlash6 { 0% { opacity: 0; } 25% { opacity: 0; } 43% { opacity: 1; } 61% { opacity: 1; } 100% { opacity: 0; } } /* ========================================================= REMOVE ALL OLD B&W CURSOR EFFECTS ========================================================= */ .smudge-bw, .bw-smudge-v4, .bnw-range-overlay, .cursor-bw-v6, .front-bw-smudge, .felder-scot-bw { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= swp1 ACTUAL IMAGE ELEMENT IS PINNED TO THE RIGHT. Not "object-position right in a fullscreen box". The image itself physically ends at right:0. ========================================================= */ #home[data-selected-trip="switzerland"] .swiss-hero-single { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; background: #000 !important; } /* No gradients. No overlays. */ #home[data-selected-trip="switzerland"] .swiss-hero-single::before, #home[data-selected-trip="switzerland"] .swiss-hero-single::after { content: none !important; display: none !important; background: none !important; } /* * THIS is swp1. */ #home[data-selected-trip="switzerland"] .swiss-hero-single .photo-base { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; /* * Crucial difference: * element itself is not fullscreen. */ width: auto !important; height: 100% !important; max-width: 100vw !important; max-height: 100% !important; object-fit: contain !important; object-position: right center !important; /* * Cancel the very old Swiss mirror/left-position rule. */ transform: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* * Switzerland gets NO cursor duplicate whatsoever. */ #home[data-selected-trip="switzerland"] .swiss-hero-single img:not(.photo-base) { display: none !important; } /* ========================================================= scp1 HIGH SATURATION / HIGH COLOUR CURSOR ========================================================= */ #home[data-selected-trip="skye"] .cover-photo { isolation: isolate; } .scp1-colour-lens { --scp-x: 50%; --scp-y: 50%; position: absolute !important; inset: 0 !important; z-index: 5 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; opacity: 0; /* * Deliberately rich colour rather than B&W. */ filter: saturate(2.6) contrast(1.14) brightness(1.08) !important; -webkit-mask-image: radial-gradient( circle 78px at var(--scp-x) var(--scp-y), #000 0, #000 46px, rgba(0,0,0,.88) 56px, rgba(0,0,0,.42) 67px, transparent 78px ); mask-image: radial-gradient( circle 78px at var(--scp-x) var(--scp-y), #000 0, #000 46px, rgba(0,0,0,.88) 56px, rgba(0,0,0,.42) 67px, transparent 78px ); transition: opacity .04s linear; } .scp1-colour-lens.is-visible { opacity: 1; } /* * Never display Scotland colour lens on Swiss. */ #home[data-selected-trip="switzerland"] .scp1-colour-lens { display: none !important; } /* ========================================================= CONTINUOUS VERTICAL TRIP SCROLL ========================================================= */ html, html.felder-trip-snap { scroll-snap-type: none !important; scroll-behavior: auto !important; } body.felder-mode-trip { overscroll-behavior-y: auto !important; } body.felder-mode-trip .felder-trip-surface, body.felder-mode-trip #home, body.felder-mode-trip #trip-atlas-slide { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } /* ========================================================= CAROUSEL Force the rail to actually have horizontal overflow. ========================================================= */ #archive-stage { overflow: hidden !important; } #archive-rail { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: none !important; scroll-behavior: auto !important; scrollbar-width: none; } #archive-rail::-webkit-scrollbar { display: none; } #archive-rail .archive-item { flex: 0 0 auto !important; min-width: max-content; } /* FELDER-FIX-6 END */ /* SWP1-FLIP-7 START */ #home[data-selected-trip="switzerland"] .swiss-hero-single .photo-base { transform: scaleX(-1) !important; transform-origin: center center !important; } /* SWP1-FLIP-7 END */ /* FELDER-STABILITY-8 START */ /* ========================================================= ATLAS Keep dark editorial character but strengthen linework / political boundaries already present in the map tiles. ========================================================= */ .trip-atlas-map .leaflet-tile { filter: grayscale(1) invert(.88) sepia(.07) saturate(.42) brightness(.92) contrast(1.38) !important; opacity: .97 !important; } .trip-atlas-map-wrap { background: #171a16 !important; } .trip-atlas-vignette, .trip-atlas-map-vignette { opacity: .72 !important; } /* Location markers slightly stronger */ .trip-atlas-map .leaflet-interactive { stroke: rgba( 244, 241, 225, .92 ) !important; stroke-width: 1.4 !important; } /* ========================================================= CAROUSEL JS timer owns horizontal motion. ========================================================= */ #archive-rail { overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: auto !important; scroll-snap-type: none !important; scrollbar-width: none !important; } #archive-rail::-webkit-scrollbar { display: none !important; } /* ========================================================= CONTINUOUS VERTICAL TRIP SCROLL ========================================================= */ html, html.felder-trip-snap { scroll-snap-type: none !important; scroll-behavior: auto !important; } body.felder-mode-trip .felder-trip-surface { scroll-snap-align: none !important; scroll-snap-stop: normal !important; } /* FELDER-STABILITY-8 END */ /* BREAK-LIGHT-BACK-1 START */ #break-light-back { position: absolute; top: clamp(22px, 3vh, 32px); left: 50%; transform: translateX(-50%); z-index: 20000; appearance: none; margin: 0; padding: 8px 12px; border: 0; background: transparent; font-family: "Source Serif 4", Georgia, serif; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: rgba(246,245,238,.72); cursor: pointer; transition: color .22s ease, opacity .22s ease; } #break-light-back:hover { color: rgba(255,255,250,.98); } /* BREAK-LIGHT-BACK-1 END */ /* T1NAME-POLISH-2 START */ /* * t1name = "a break of light." * * Keep its current font, size and position. * Only alter colour + hover scale. */ #break-light-back { color: rgba(246,245,238,.96) !important; transform: translateX(-50%) scale(1); transform-origin: center center; transition: color .22s ease, transform .30s cubic-bezier(.16,.8,.2,1) !important; } #break-light-back:hover { color: rgba(246,245,238,.96) !important; transform: translateX(-50%) scale(1.075); } /* T1NAME-POLISH-2 END */ /* MAIN-COUNTRY-TYPE-1 START */ /* * Countries revealed from t1name on v1. * Same typographic family as FIELDS // OBSERVED. * Existing position + reveal animation remain untouched. */ .felder-main-trip, .felder-main-trip-label { font-family: Manrope, sans-serif !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: .18em !important; } /* MAIN-COUNTRY-TYPE-1 END */ /* MAIN-COUNTRY-ARROW-ALIGN-1 START */ .felder-main-trip { align-items: center !important; } .felder-main-trip-label { display: inline-flex !important; align-items: center !important; height: 20px !important; line-height: 20px !important; margin: 0 !important; padding: 0 !important; } .felder-main-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 20px !important; line-height: 20px !important; margin: 0 !important; padding: 0 !important; } /* MAIN-COUNTRY-ARROW-ALIGN-1 END */ /* MAIN-COUNTRY-OPTICAL-ALIGN-2 START */ .felder-main-trip-label { position: relative !important; top: 4px !important; } /* MAIN-COUNTRY-OPTICAL-ALIGN-2 END */ /* SWP1-EDGE-BLEND-1 START */ /* * swp1 remains physically pinned to the far right. * * Because swp1 is horizontally flipped, the mask gradient * is intentionally defined in the opposite direction. * * Result on screen: * * BLACK → soft blend → untouched swp1 */ #home[data-selected-trip="switzerland"] .swiss-hero-single .photo-base { -webkit-mask-image: linear-gradient( to left, transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.24) 11%, rgba(0,0,0,.48) 17%, rgba(0,0,0,.72) 23%, rgba(0,0,0,.90) 28%, #000 34%, #000 100% ) !important; mask-image: linear-gradient( to left, transparent 0%, rgba(0,0,0,.08) 6%, rgba(0,0,0,.24) 11%, rgba(0,0,0,.48) 17%, rgba(0,0,0,.72) 23%, rgba(0,0,0,.90) 28%, #000 34%, #000 100% ) !important; } /* SWP1-EDGE-BLEND-1 END */ /* COUNTRY-FACTS-2 START */ #persistent-cover-title { cursor: pointer !important; } #country-facts { position: absolute; left: clamp(28px, 4vw, 64px); bottom: clamp(160px, 21vh, 230px); z-index: 18000; width: min( 470px, calc(100vw - 56px) ); display: grid; gap: 13px; padding: 32px 90px 32px 0; pointer-events: none; opacity: 0; transform: translateY(10px); background: linear-gradient( 90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 58%, transparent 100% ); transition: opacity .22s ease, transform .30s cubic-bezier(.16,.8,.2,1); } #country-facts.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .country-fact { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: baseline; } .country-fact-label { font-family: Manrope, sans-serif; font-size: 8px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: rgba(247,246,239,.43); } .country-fact-value { font-family: "Source Serif 4", Georgia, serif; font-size: 15px; font-weight: 400; letter-spacing: -.006em; white-space: nowrap; color: rgba(247,246,239,.88); } @media(max-width:760px) { #country-facts { left: 20px; bottom: 145px; width: calc(100vw - 40px); padding: 25px 45px 25px 0; } .country-fact { grid-template-columns: 94px 1fr; gap: 14px; } .country-fact-value { font-size: 14px; white-space: normal; } } /* COUNTRY-FACTS-2 END */ /* T1-BACK-FACTS-ALIGN-1 START */ /* ========================================================= COUNTRY FACTS PANEL Centre the information inside the visual field. ========================================================= */ #country-facts { width: min( 500px, calc(100vw - 56px) ) !important; box-sizing: border-box !important; padding: 30px 34px !important; /* * Keep the dark photographic fade, * but make its visual boundaries match the content. */ background: linear-gradient( 90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.52) 68%, rgba(0,0,0,.12) 100% ) !important; align-content: center !important; } /* * Balanced around one central vertical axis: * * LABEL | VALUE */ #country-facts .country-fact { display: grid !important; grid-template-columns: 128px minmax(0, 1fr) !important; gap: 24px !important; width: 100% !important; align-items: baseline !important; } #country-facts .country-fact-label { text-align: right !important; } #country-facts .country-fact-value { text-align: left !important; } /* Mobile */ @media(max-width:760px) { #country-facts { width: calc(100vw - 40px) !important; padding: 25px 22px !important; } #country-facts .country-fact { grid-template-columns: 100px minmax(0,1fr) !important; gap: 16px !important; } } /* T1-BACK-FACTS-ALIGN-1 END */ /* FACTS-COMPACT-2 START */ #country-facts { width: min( 410px, calc(100vw - 56px) ) !important; padding: 22px 24px !important; gap: 10px !important; } #country-facts .country-fact { grid-template-columns: 108px minmax(0,1fr) !important; gap: 16px !important; } #country-facts .country-fact-label { text-align: right !important; } #country-facts .country-fact-value { text-align: left !important; } @media(max-width:760px) { #country-facts { width: calc(100vw - 40px) !important; padding: 20px 18px !important; } #country-facts .country-fact { grid-template-columns: 88px minmax(0,1fr) !important; gap: 12px !important; } } /* FACTS-COMPACT-2 END */ /* FACTS-TRANSPARENT-3 START */ #country-facts { background: transparent !important; } /* FACTS-TRANSPARENT-3 END */ /* SCP1-CURSOR-TRACK-4 START */ /* * Scotland / scp1 only. * * Duplicate image remains perfectly aligned with the * original photograph. Only a small feathered portion * becomes visible around the cursor. */ .scp1-colour-lens { --scp1-cursor-x: 50%; --scp1-cursor-y: 50%; filter: saturate(1.30) brightness(1.015) contrast(1.01) !important; opacity: 0 !important; pointer-events: none !important; -webkit-mask-image: radial-gradient( circle 48px at var(--scp1-cursor-x) var(--scp1-cursor-y), rgba(0,0,0,1) 0px, rgba(0,0,0,.97) 7px, rgba(0,0,0,.82) 15px, rgba(0,0,0,.58) 24px, rgba(0,0,0,.34) 33px, rgba(0,0,0,.14) 41px, transparent 48px ) !important; mask-image: radial-gradient( circle 48px at var(--scp1-cursor-x) var(--scp1-cursor-y), rgba(0,0,0,1) 0px, rgba(0,0,0,.97) 7px, rgba(0,0,0,.82) 15px, rgba(0,0,0,.58) 24px, rgba(0,0,0,.34) 33px, rgba(0,0,0,.14) 41px, transparent 48px ) !important; } .scp1-colour-lens.scp1-cursor-active { opacity: 1 !important; } /* SCP1-CURSOR-TRACK-4 END */ /* SWP1-MIRROR-REVEAL-1 START */ /* * Left-side monochrome mirror. * * Existing swp1 remains untouched on the right. */ #home[data-selected-trip="switzerland"] .swiss-hero-single .swp1-mirror-reveal { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: 0 !important; width: auto !important; height: 100% !important; object-fit: contain !important; /* * Current right-side swp1 is already flipped. * This produces the opposite / mirrored orientation * on the left. */ transform: scaleX(1) !important; transform-origin: center !important; filter: grayscale(1) contrast(1.08) brightness(.78) !important; opacity: 0 !important; pointer-events: none !important; z-index: 3 !important; --swp1-reveal-x: 50%; --swp1-reveal-y: 50%; /* * Similar scale to Scotland, * but with a shorter feather. */ -webkit-mask-image: radial-gradient( circle 52px at var(--swp1-reveal-x) var(--swp1-reveal-y), #000 0px, #000 30px, rgba(0,0,0,.82) 36px, rgba(0,0,0,.48) 43px, rgba(0,0,0,.16) 48px, transparent 52px ) !important; mask-image: radial-gradient( circle 52px at var(--swp1-reveal-x) var(--swp1-reveal-y), #000 0px, #000 30px, rgba(0,0,0,.82) 36px, rgba(0,0,0,.48) 43px, rgba(0,0,0,.16) 48px, transparent 52px ) !important; } /* * Only becomes visible while hovering * over the mirrored-image region. */ #home[data-selected-trip="switzerland"] .swiss-hero-single .swp1-mirror-reveal.is-revealed { opacity: .76 !important; } /* * Keep all cover typography above the reveal. */ #home[data-selected-trip="switzerland"] #persistent-cover-title, #home[data-selected-trip="switzerland"] #break-light-back { position: relative; z-index: 20; } /* SWP1-MIRROR-REVEAL-1 END */ /* SWP1-REVEAL-SOFT-2 START */ #home[data-selected-trip="switzerland"] .swiss-hero-single .swp1-mirror-reveal { -webkit-mask-image: radial-gradient( circle 92px at var(--swp1-reveal-x) var(--swp1-reveal-y), #000 0px, rgba(0,0,0,.98) 20px, rgba(0,0,0,.90) 32px, rgba(0,0,0,.74) 46px, rgba(0,0,0,.54) 60px, rgba(0,0,0,.34) 73px, rgba(0,0,0,.16) 84px, transparent 92px ) !important; mask-image: radial-gradient( circle 92px at var(--swp1-reveal-x) var(--swp1-reveal-y), #000 0px, rgba(0,0,0,.98) 20px, rgba(0,0,0,.90) 32px, rgba(0,0,0,.74) 46px, rgba(0,0,0,.54) 60px, rgba(0,0,0,.34) 73px, rgba(0,0,0,.16) 84px, transparent 92px ) !important; } /* SWP1-REVEAL-SOFT-2 END */ /* SWP1-MIRROR-WIDTH-FIX-4 START */ /* * Keep the mirrored photograph at the SAME natural * dimensions as swp1, but anchor it to the LEFT. * * On the current viewport this means roughly: * * mirror: x 0 → 753 * original: x 204 → 957 * * The overlap is intentional: it puts hidden image * underneath the visually black/faded middle region. */ #home[data-selected-trip="switzerland"] .swiss-hero-single .swp1-mirror-reveal { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: auto !important; height: 100% !important; object-fit: contain !important; object-position: left center !important; } /* SWP1-MIRROR-WIDTH-FIX-4 END */ /* SWISS-T1NAME-TONE-1 START */ #home[data-selected-trip="switzerland"] #break-light-back { color: rgba(247, 246, 239, .62) !important; } /* Preserve the existing subtle hover response */ #home[data-selected-trip="switzerland"] #break-light-back:hover { color: rgba(247, 246, 239, .78) !important; } /* SWISS-T1NAME-TONE-1 END */ /* THEME-SELECTOR-1 START */ /* ========================================================= THEME MENU ========================================================= */ #felder-theme-menu { position: absolute; left: 50%; top: calc(50% + 57px); z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 210px; transform: translate( -50%, 8px ); opacity: 0; pointer-events: none; transition: opacity .26s ease, transform .34s cubic-bezier(.16,.8,.2,1); } .felder-main-path.theme-menu-open #felder-theme-menu { opacity: 1; transform: translate( -50%, 0 ); pointer-events: auto; } /* ========================================================= WHEN CHOOSING THEMES, HIDE COUNTRY OPTIONS ========================================================= */ .felder-main-path.theme-menu-open .felder-main-trip { opacity: 0 !important; filter: blur(4px) !important; pointer-events: none !important; } /* ========================================================= THEME OPTIONS ========================================================= */ .felder-theme-option { appearance: none; display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 5px 0; border: 0; background: transparent; font-family: "Source Serif 4", Georgia, serif; font-size: 15px; font-weight: 400; line-height: 1.2; color: rgba( 246, 245, 238, .63 ); cursor: pointer; white-space: nowrap; transition: color .22s ease, transform .25s ease, opacity .22s ease; } .felder-theme-option:hover { color: rgba( 255, 254, 248, .98 ); transform: translateX(3px); } .felder-theme-option.is-current { color: rgba( 246, 245, 238, .92 ); } .felder-theme-option.is-placeholder { color: rgba( 246, 245, 238, .30 ); cursor: default; } .felder-theme-option.is-placeholder:hover { color: rgba( 246, 245, 238, .30 ); transform: none; } /* tiny theme index */ .theme-number { font-family: Manrope, sans-serif; font-size: 7px; font-weight: 500; letter-spacing: .16em; color: rgba( 246, 245, 238, .30 ); } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px) { #felder-theme-menu { top: calc(50% + 52px); min-width: 190px; } .felder-theme-option { font-size: 14px; } } /* THEME-SELECTOR-1 END */ /* MAIN-THEME-GATE-BEHAVIOUR-3 START */ /* * Before t1 is selected: * step closer does NOT expose countries. */ #felder-main .felder-main-path:not(.theme-selected-t1) .felder-main-trip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* * Once "a break of light." is selected, * return control to the original country-hover styling. */ #felder-main .felder-main-path.theme-selected-t1 .felder-main-trip { visibility: visible !important; } /* MAIN-THEME-GATE-BEHAVIOUR-3 END */ /* WORDMARK-MOBILE-1 START */ /* * The site wordmark is also the return-to-Main control, * so it must remain reachable at mobile widths. * Only the earlier display:none is reversed — typography, * size, colour, padding and placement are inherited * unchanged from the existing rules. */ @media (max-width: 760px) { .wordmark { display: inline-flex; } } /* WORDMARK-MOBILE-1 END */