to show short title tags with arrows instead. */ .road:not([data-compact-tags]) .road_label { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; translate: none; } } /* -------------------------------------------------------------------------- Wording that depends on the device: road_if-pointer / road_if-touch (mouse vs. finger) and road_if-desktop / road_if-compact (texts on the map vs. popovers) -------------------------------------------------------------------------- */ .road_if-touch, .road_if-compact.road_if-compact { display: none; } @media (hover: none) and (pointer: coarse) { .road_if-pointer { display: none; } .road_if-touch { display: inline; } } @media (width < 60em) { .road_if-desktop.road_if-desktop { display: none; } .road_if-compact.road_if-compact { display: block; } } /* -------------------------------------------------------------------------- Start screen (slides up during the first screen of scrolling, see main.js) -------------------------------------------------------------------------- */ .road_intro { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; overflow: hidden; padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom)); background: var(--road-intro-bg); color: var(--road-ink); will-change: transform; } /* The road peeks out at the bottom edge, like the start of the map */ .road_intro::after { content: ""; position: absolute; right: 0; bottom: 2.25rem; left: 0; height: 3.25rem; border-block: 3px solid var(--road-ink); background: linear-gradient(90deg, var(--road-ink) 50%, transparent 0) 0 50% / 2.5rem 3px repeat-x, var(--road-bg); pointer-events: none; } /* Language switch (rendered only when more than one language is enabled in content/site.json) */ .road_lang { position: absolute; z-index: 2; top: max(1.25rem, env(safe-area-inset-top)); right: 1.25rem; display: flex; gap: 0.25rem; padding: 0.25rem; border: 2px solid var(--road-ink); border-radius: 99rem; background: var(--road-bg); } .road_lang-link { padding: 0.3rem 0.7rem; border-radius: 99rem; color: var(--road-ink); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; } .road_lang-link:hover { background: rgb(29 29 27 / 0.08); } .road_lang-link[aria-current="page"] { background: var(--road-ink); color: var(--road-bg); } .road_lang-link:focus-visible { outline: 3px solid var(--road-focus); outline-offset: 2px; } .road_intro-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; width: min(46rem, 100%); margin-bottom: 4rem; } .road_intro-title { margin: 0; font-size: clamp(2.5rem, 1.2rem + 5.5vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; } .road_intro-kicker { display: block; margin-bottom: 0.75rem; font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.0625rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; } .road_intro-lead { max-width: 36rem; margin: 0; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.45; text-wrap: pretty; } .road_intro-how { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.25rem; border: 2px solid var(--road-ink); border-radius: 1rem; background: var(--road-bg); } /* Mouse (pointer) / phone (touch) outline with a moving dot */ .road_intro-icon { position: relative; flex: none; width: 1.5rem; height: 2.35rem; border: 2px solid var(--road-ink); border-radius: 0.8rem; } .road_intro-icon::after { content: ""; position: absolute; left: 50%; top: 0.4rem; width: 0.3rem; height: 0.5rem; margin-left: -0.15rem; border-radius: 0.2rem; background: var(--road-ink); animation: road-intro-scroll 1.6s ease-in-out infinite; } @keyframes road-intro-scroll { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 0.8rem; opacity: 0; } 100% { translate: 0 0; opacity: 0; } } .road_intro-how-text { margin: 0; font-size: 0.9375rem; line-height: 1.35; } .road_intro-how-text > span { display: block; } .road_intro-how-main { font-weight: 700; } @media (hover: none) and (pointer: coarse) { .road_intro-icon { border-radius: 0.35rem; } .road_intro-icon::after { top: auto; bottom: 0.4rem; animation-name: road-intro-swipe; } @keyframes road-intro-swipe { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 -0.8rem; opacity: 0; } 100% { translate: 0 0; opacity: 0; } } } .road_intro-start { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.4rem; border: 0; border-radius: 99rem; background: var(--road-ink); color: var(--road-bg); font: inherit; font-weight: 700; cursor: pointer; } .road_intro-start::after { content: "↓"; font-size: 1.1em; line-height: 1; } .road_intro-start:hover { background: #000; } .road_intro-start:focus-visible { outline: 3px solid var(--road-ink); outline-offset: 3px; } @media (height < 40em) { .road_intro-inner { gap: 1rem; margin-bottom: 3rem; } .road_intro::after { bottom: 1rem; height: 2.5rem; } } /* -------------------------------------------------------------------------- Tip on compact screens ("tap the dots"), toggled by main.js -------------------------------------------------------------------------- */ .road_tip { position: absolute; z-index: 3; top: max(1rem, env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: calc(100% - 2rem); margin: 0; padding: 0.7rem 1.1rem 0.7rem 0.9rem; border: 2px solid var(--road-ink); border-radius: 99rem; background: var(--road-bg); box-shadow: 0 0.5rem 1.5rem rgb(29 29 27 / 0.2); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; pointer-events: none; translate: -50% -1rem; opacity: 0; visibility: hidden; transition: translate 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s; } .road_tip.is-active { translate: -50% 0; opacity: 1; visibility: visible; transition-delay: 0s; } /* A mini stop button with the same pulse */ .road_tip-dot { position: relative; flex: none; width: 1.5rem; height: 1.5rem; border: 2px solid var(--road-ink); border-radius: 50%; background: var(--road-hurdle); } .road_tip-dot::before { content: ""; position: absolute; inset: -5px; border: 2px solid var(--road-hurdle); border-radius: 50%; animation: road-pulse 2.4s ease-out infinite; } /* -------------------------------------------------------------------------- Panels (popovers on compact screens) -------------------------------------------------------------------------- */ .road_panels { position: absolute; inset: 0; z-index: 4; container-type: inline-size; pointer-events: none; } .road_panel { --panel-accent: var(--road-hurdle); position: absolute; right: var(--panel-gap); bottom: var(--panel-gap); display: flex; flex-direction: column; align-items: flex-start; width: min(var(--panel-width), 100% - 2 * var(--panel-gap)); max-height: calc(100% - 2 * var(--panel-gap)); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1.75rem 1.75rem; border-top: 0.5rem solid var(--panel-accent); border-radius: var(--panel-radius); background: var(--panel-bg); box-shadow: var(--panel-shadow); pointer-events: auto; translate: calc(100% + var(--panel-gap) + 2rem) 0; visibility: hidden; transition: translate var(--panel-duration) var(--panel-ease), visibility 0s linear var(--panel-duration); } .road_panel[data-type="path"], .road_panel[data-type="end"] { --panel-accent: var(--road-path); } .road_panel.is-active { translate: 0 0; visibility: visible; transition-delay: 0s; } .road_panel-eyebrow { margin: 0 0 0.5rem; padding: 0.2rem 0.7rem; border-radius: 99rem; background: var(--panel-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .road_panel-title { margin: 0 0 0.5rem; font-size: 1.375rem; line-height: 1.2; text-wrap: balance; } .road_panel-text { margin: 0 0 1.25rem; font-size: 1rem; text-wrap: pretty; hyphens: auto; } .road_panel-close { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding: 0.55rem 1.1rem; border: 2px solid var(--road-ink); border-radius: 99rem; background: transparent; color: var(--road-ink); font: inherit; font-weight: 600; cursor: pointer; } .road_panel-close::before { content: "×"; font-size: 1.25em; line-height: 1; } .road_panel-close:hover { background: var(--road-ink); color: var(--panel-bg); } /* Small screens: full-width bottom sheet */ @container (width < 42em) { .road_panel { right: 0; bottom: 0; left: 0; width: auto; max-height: 70%; padding-bottom: max(1.75rem, env(safe-area-inset-bottom)); border-radius: var(--panel-radius) var(--panel-radius) 0 0; translate: 0 calc(100% + 2rem); } .road_panel-title { font-size: 1.25rem; } } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .road_panel, .road_stop, .road_label, .road_tip { transition: none; } .road_stop::before, .road_tip-dot::before, .road_intro-icon::after { animation: none; } .road_stop::before { opacity: 0; } } /* -------------------------------------------------------------------------- Fallback: no JavaScript or GSAP unavailable – show a readable list -------------------------------------------------------------------------- */ .no-js .road_viewport { height: auto; overflow: visible; } .no-js .road_canvas { position: relative; width: 100%; padding: 1rem; } .no-js .road_route, .no-js .road_arrows, .no-js .road_stop, .no-js .road_label, .no-js .road_intro-how, .no-js .road_tip, .no-js .road_intro-start, .no-js .road_intro::after, .no-js .road_panel-close { display: none; } .no-js .road_sign { background: var(--road-bg); } .no-js .road_intro { position: static; min-height: 60svh; } .no-js .road_intro-inner { margin-bottom: 0; } .no-js .road_panels { position: static; display: grid; gap: 1.5rem; max-width: 42rem; margin: 0 auto; padding: 2rem 1rem 4rem; container-type: normal; pointer-events: auto; } .no-js .road_panel { position: static; width: auto; max-height: none; overflow: visible; translate: none; visibility: visible; transition: none; box-shadow: none; border: 1px solid rgb(29 29 27 / 0.15); border-top: 0.5rem solid var(--panel-accent); }