/* OverlandTube and 4X4Tube. * * ONE STYLESHEET, TWO BRANDS. Every colour below is a custom property written onto * at runtime by applyBranding() in shared/site-config.js. There is no second * stylesheet and no per-brand override block -- switching brand is six property * writes, which is the only way two brands stay in step without discipline nobody * has time for. * * The defaults here are OverlandTube's, so the page is never unstyled in the moment * before the module runs. */ :root { --accent: #c87a3d; --accent-soft: #e0a468; --ink: #efe8df; --surface: #161310; --surface-raised: #211c17; --muted: color-mix(in srgb, var(--ink) 58%, transparent); --line: color-mix(in srgb, var(--ink) 14%, transparent); --line-strong: color-mix(in srgb, var(--ink) 26%, transparent); --open: #57a86e; --seasonal: #d9a13c; --closed: #d2564a; --unknown: color-mix(in srgb, var(--ink) 45%, transparent); --wrap: 1200px; --radius: 14px; --radius-sm: 9px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Segoe UI Semibold", system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* A faint terrain wash, drawn in CSS. No image to load and it costs nothing on a * phone on a dirt road, which is exactly where this site gets used. */ background-image: radial-gradient(1100px 520px at 78% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), radial-gradient(760px 420px at 4% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%); background-attachment: fixed; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.18; margin: 0 0 .4em; letter-spacing: -.01em; } h1 { font-size: clamp(2rem, 5vw, 3.2rem); } h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); } h3 { font-size: 1.05rem; } p { margin: 0 0 1em; } .wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; } .muted { color: var(--muted); } .small { font-size: .84rem; } .stack > * + * { margin-top: 1rem; } :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; } /* --- header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 62px; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.08rem; letter-spacing: -.02em; } .brand__mark { color: var(--accent); display: flex; } .site-nav { display: flex; gap: 1.35rem; margin-right: auto; font-size: .93rem; } .site-nav a { color: var(--muted); padding: .3rem 0; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .site-header__auth { display: flex; align-items: center; gap: .5rem; } .nav-toggle { display: none; } /* --- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .btn--primary { background: var(--accent); color: #12100e; } .btn--primary:hover { background: var(--accent-soft); } .btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--accent); } .btn--quiet { background: transparent; color: var(--muted); border-color: transparent; } .btn--quiet:hover { color: var(--ink); } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* --- hero ---------------------------------------------------------------- */ .hero { padding: clamp(2.5rem, 7vw, 5rem) 0 2.5rem; } .hero__inner { max-width: 46rem; } .hero h1 { margin-bottom: .35rem; } .hero__sub { font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--muted); max-width: 40rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; } /* The two-promise strip: WATCH + FIND. This is the whole product in one line. */ .promise { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2.2rem; } .promise > div { background: var(--surface-raised); padding: 1.15rem 1.3rem; } .promise strong { display: block; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: .3rem; } /* --- sections ------------------------------------------------------------ */ .section { padding: 2.2rem 0; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .section__head h2 { margin: 0; } .section__head a { color: var(--accent-soft); font-size: .9rem; font-weight: 600; } .grid { display: grid; gap: 1.05rem; } .grid--trails { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); } .grid--videos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* A horizontally scrolling rail, for the home page rows. */ .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(255px, 285px); gap: 1rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x proximity; } .rail > * { scroll-snap-align: start; } .rail::-webkit-scrollbar { height: 8px; } .rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } /* --- trail card ---------------------------------------------------------- */ .trail-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s; } .trail-card:hover { border-color: var(--accent); transform: translateY(-2px); } .trail-card__map { aspect-ratio: 16 / 8; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--surface); color: var(--accent-soft); display: grid; place-items: center; border-bottom: 1px solid var(--line); padding: .5rem; } .trail-card__map .route-svg { width: 100%; height: 100%; } .trail-card__map-empty { display: block; width: 100%; height: 100%; } .trail-card__body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } .trail-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .trail-card__name { margin: 0; font-size: 1rem; } .trail-card__place { margin: 0; } .trail-card__facts { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .84rem; color: var(--muted); margin-top: auto; padding-top: .5rem; } .trail-card__flag { margin: .35rem 0 0; font-size: .76rem; color: var(--seasonal); } /* --- video card ---------------------------------------------------------- */ .video-card { display: flex; flex-direction: column; gap: .4rem; } .video-card__thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); } .video-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .video-card__thumb-empty { display: block; width: 100%; height: 100%; } .video-card__title { margin: 0; font-size: .95rem; line-height: 1.35; } .video-card p { margin: 0; } .video-card:hover .video-card__title { color: var(--accent-soft); } /* --- badges and chips ---------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; border: 1px solid currentColor; } .badge--open { color: var(--open); } .badge--seasonal { color: var(--seasonal); } .badge--closed { color: var(--closed); } .badge--unknown { color: var(--unknown); } .chip { font: inherit; font-size: .85rem; padding: .38rem .85rem; border-radius: 999px; background: transparent; color: var(--muted); border: 1px solid var(--line-strong); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; } .chip:hover { color: var(--ink); } .chip--on { background: var(--accent); border-color: var(--accent); color: #12100e; font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: .45rem; } /* --- filters ------------------------------------------------------------- */ .filters { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem 0 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; } .filters__row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } .filters__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); min-width: 4.5rem; } .search { display: flex; align-items: center; gap: .6rem; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 999px; padding: .1rem .3rem .1rem 1rem; flex: 1; min-width: 240px; } .search input { flex: 1; background: transparent; border: 0; color: inherit; font: inherit; padding: .65rem 0; } .search input:focus { outline: none; } .search input::placeholder { color: var(--muted); } /* --- trail profile ------------------------------------------------------- */ .trail-hero { padding: 1.8rem 0 1rem; } .trail-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .5rem; } .trail-hero h1 { font-size: clamp(1.7rem, 4vw, 2.7rem); margin-bottom: .3rem; } .trail-hero__place { color: var(--muted); margin: 0; } .trail-map { height: clamp(260px, 42vh, 460px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-raised); overflow: hidden; display: grid; place-items: center; color: var(--accent-soft); margin: 1.3rem 0; } .trail-map .route-svg { width: 100%; height: 100%; padding: 1rem; } .map-setup { text-align: center; padding: 2rem 1.5rem; max-width: 34rem; color: var(--muted); } .map-setup svg { margin: 0 auto .6rem; color: var(--accent-soft); } .map-setup__title { color: var(--ink); font-weight: 600; margin-bottom: .3rem; } .map-setup__body { margin: 0; font-size: .9rem; } .trail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.2rem; align-items: start; padding-bottom: 3rem; } .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .facts > div { background: var(--surface-raised); padding: .85rem 1rem; } .facts dt { font-size: .73rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .2rem; } .facts dd { margin: 0; font-weight: 600; font-size: .98rem; } /* The vehicle matrix. Three states, three treatments -- see of-rules.mjs on why * "not designated" and "not stated" must never look the same. */ .vehicles { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .vehicles li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); } .vehicles .v-state { font-size: .8rem; font-weight: 600; } .vehicles [data-state="yes"] .v-state { color: var(--open); } .vehicles [data-state="no"] .v-state { color: var(--closed); } .vehicles [data-state="unknown"] .v-state { color: var(--muted); font-weight: 500; font-style: italic; } .vehicles [data-state="unknown"] { opacity: .72; } .panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .panel + .panel { margin-top: 1rem; } .panel h3 { margin-top: 0; } .access-point__name { font-weight: 600; margin-bottom: .2rem; } .access-point--unverified { border-left: 3px solid var(--seasonal); } .access-point__note { font-size: .84rem; color: var(--muted); } .access-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; } .access-list li { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); } .access-list .confidence { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .access-list .confidence--verified { color: var(--open); } /* Provenance. These routes affect real navigation, so where the record came from is * part of the record. */ .provenance { font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 1.6rem; padding-top: 1rem; } .provenance dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; } .provenance dt { color: var(--muted); } .provenance dd { margin: 0; color: var(--ink); } .warning { border: 1px solid color-mix(in srgb, var(--seasonal) 45%, transparent); background: color-mix(in srgb, var(--seasonal) 9%, transparent); border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .88rem; } /* --- map page ------------------------------------------------------------ */ .map-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 62px); } .map-page__side { border-right: 1px solid var(--line); overflow-y: auto; padding: 1.2rem; background: var(--surface); } .map-page__canvas { position: relative; background: var(--surface-raised); display: grid; place-items: center; } .map-page__canvas > .map-setup { max-width: 30rem; } .map-search-area { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 5; } .result-row { display: block; padding: .7rem .5rem; border-bottom: 1px solid var(--line); } .result-row:hover, .result-row.is-active { background: var(--surface-raised); } .result-row h4 { margin: 0 0 .15rem; font-size: .95rem; } .result-row p { margin: 0; font-size: .82rem; color: var(--muted); } /* --- empty / loading ----------------------------------------------------- */ .empty { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); } .empty h3 { margin-bottom: .35rem; } .empty p { max-width: 34rem; margin-inline: auto; } .empty--error { border-color: color-mix(in srgb, var(--closed) 45%, transparent); } .skeleton-card { aspect-ratio: 16 / 13; border-radius: var(--radius); background: linear-gradient(100deg, var(--surface-raised) 30%, color-mix(in srgb, var(--ink) 7%, var(--surface-raised)) 50%, var(--surface-raised) 70%); background-size: 220% 100%; animation: shimmer 1.3s linear infinite; } @keyframes shimmer { to { background-position: -220% 0; } } /* --- footer -------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2rem 0 3rem; } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: start; } .site-footer__brand { font-weight: 700; margin: 0; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .9rem; } .site-footer nav a { color: var(--muted); } .site-footer nav a:hover { color: var(--ink); } .site-footer__legal { margin-top: 1.5rem; max-width: 60rem; } .site-footer__legal strong { color: var(--ink); } /* --- forms --------------------------------------------------------------- */ .field { display: block; margin-bottom: 1rem; } .field span { display: block; font-size: .84rem; color: var(--muted); margin-bottom: .3rem; } .field input, .field textarea, .field select { width: 100%; font: inherit; color: inherit; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .65rem .8rem; } .field textarea { min-height: 6rem; resize: vertical; } .form-note { font-size: .85rem; color: var(--muted); } .form-error { color: var(--closed); font-size: .88rem; } .auth-card { max-width: 26rem; margin: 3rem auto; } /* --- responsive ---------------------------------------------------------- */ @media (max-width: 900px) { .trail-layout { grid-template-columns: 1fr; } .map-page { grid-template-columns: 1fr; height: auto; } .map-page__side { border-right: 0; border-top: 1px solid var(--line); order: 2; } .map-page__canvas { height: 60vh; order: 1; } } @media (max-width: 720px) { .promise { grid-template-columns: 1fr; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; width: 18px; margin-inline: auto; background: var(--ink); } .site-nav { display: none; position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem; } .site-nav.is-open { display: flex; } .site-nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); } .site-header__inner { position: relative; gap: .8rem; } .site-header__auth .btn--quiet { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }