/* ============================================================ findwood — visual system (ported from the Find Wood design handoff) Sawmill theme, editorial type, regular density. Token-driven so a future theme switch is a one-line attribute change on . ============================================================ */ :root { --font-display: "Newsreader", Georgia, serif; --font-ui: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, monospace; --gap: 24px; --pad-section: 88px; --radius: 4px; --maxw: 1240px; /* Sawmill theme (warm paper) */ --bg: #f3ecdf; --surface: #fbf7ef; --surface-2: #f0e8d8; --ink: #221a11; --ink-soft: #4a4034; --muted: #857a68; --line: #ddd1bc; --line-soft: #e8ddc9; --accent: oklch(0.58 0.13 48); --accent-ink:#fbf7ef; --accent-soft: oklch(0.58 0.13 48 / 0.12); --shadow: 0 1px 2px rgba(60,45,25,.06), 0 12px 32px -16px rgba(60,45,25,.22); /* material type tones (for chips + swatches) */ --tone-hardwood: #6d5238; --tone-softwood: #c9a36a; --tone-sheet_material: #cdb892; --tone-laminate: #b3ad9e; --tone-veneer: #8a5536; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.08; letter-spacing: -0.01em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .muted { color: var(--muted); } .lead { font-size: 18px; color: var(--ink-soft); line-height: 1.55; } .prewrap { white-space: pre-wrap; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .divider { height: 1px; background: var(--line); border: 0; margin: 0; } ::selection { background: var(--accent); color: var(--accent-ink); } * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } main { flex: 1; } /* ---------- buttons ---------- */ .btn { font-family: var(--font-ui); font-size: 14px; font-weight: 600; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); padding: 12px 22px; border-radius: var(--radius); cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); } .btn--sm { padding: 9px 16px; font-size: 13px; } .btn--block { width: 100%; justify-content: center; } .btn svg { width: 1em; height: 1em; } /* ---------- pills / chips ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-soft); background: var(--surface); white-space: nowrap; } .pill--accent { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); background: var(--accent-soft); } .pill--on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); background: var(--accent-soft); font-weight: 600; } .type-chip { font-size: 10.5px; padding: 4px 9px; } .type-chip .dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; background: var(--tone, #9a8466); } /* ---------- swatch (placeholder imagery, tinted per material) ---------- */ .swatch { position: relative; width: 100%; background: repeating-linear-gradient( var(--swatch-angle, 26deg), color-mix(in oklab, var(--tone) 88%, #000 0%) 0px, color-mix(in oklab, var(--tone) 88%, #000 0%) 7px, color-mix(in oklab, var(--tone) 96%, #fff 14%) 7px, color-mix(in oklab, var(--tone) 96%, #fff 14%) 15px); overflow: hidden; border-radius: var(--radius); --tone: #9a8466; } .swatch-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; } .swatch[data-label]::after { content: attr(data-label); z-index: 2; position: absolute; left: 10px; bottom: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.92); background: rgba(20,14,6,.42); backdrop-filter: blur(2px); padding: 3px 7px; border-radius: 3px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--ink) 18%, var(--line)); } .card--active { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), var(--shadow); } /* ---------- inputs ---------- */ input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], select, textarea { font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); outline: none; width: 100%; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } textarea { resize: vertical; } .field { display: flex; flex-direction: column; gap: 7px; } .field > .mono { color: var(--muted); } .req { color: #b3261e; } .field-error { display: block; color: #b3261e; font-weight: 400; font-size: 0.85rem; margin-top: 0.2rem; } .form-error { background: color-mix(in oklab, #b3261e 12%, var(--surface)); color: #b3261e; border: 1px solid color-mix(in oklab, #b3261e 30%, var(--line)); padding: 0.7rem 0.9rem; border-radius: var(--radius); font-size: 0.92rem; } .form-ok { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); padding: 0.8rem 1rem; border-radius: var(--radius); } /* ============================================================ Header / Footer ============================================================ */ .fw-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--surface) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .fw-header .wrap { display: flex; align-items: center; gap: 22px; height: 66px; } .fw-logo { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; flex-shrink: 0; } .fw-logo .name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .fw-logo .tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--accent); transform: translateY(-2px); } .fw-nav { display: flex; gap: 22px; margin-left: 8px; } .fw-nav a { font-size: 14px; color: var(--ink-soft); font-weight: 500; padding: 4px 0; } .fw-nav a:hover { color: var(--ink); } .fw-header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .fw-header-right a:not(.btn) { font-size: 14px; color: var(--ink-soft); font-weight: 500; } .fw-header-right a:not(.btn):hover { color: var(--ink); } .fw-header-right .who { font-size: 13px; color: var(--muted); font-weight: 500; } .fw-header-right .linkbtn { font-size: 14px; color: var(--ink-soft); font-weight: 500; } .fw-header-right .linkbtn:hover { color: var(--ink); } .linkbtn { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; color: inherit; } .fw-menu-btn { display: none; } .fw-mobile-nav { display: none; border-top: 1px solid var(--line); padding: 12px 28px 18px; flex-direction: column; gap: 4px; } .fw-mobile-nav a { font-size: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .fw-mobile-nav.open { display: flex; } .fw-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: auto; } .fw-footer-top { padding: 56px 28px 40px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; } .fw-footer-brand p { color: var(--muted); font-size: 14px; max-width: 270px; line-height: 1.55; margin: 14px 0; } .fw-footer-col .eyebrow { margin-bottom: 14px; display: block; } .fw-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .fw-footer-col a { font-size: 14px; color: var(--ink-soft); } .fw-footer-col a:hover { color: var(--ink); } .fw-footer-bottom { padding: 18px 28px 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .fw-footer-bottom .mono { color: var(--muted); } .fw-footer-bottom a { color: var(--accent); } /* ============================================================ Layout helpers — sections / grids / hero ============================================================ */ .section { padding: var(--pad-section) 28px 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .section-head .eyebrow { margin-bottom: 10px; display: block; } .section-head h2 { font-size: clamp(26px, 3.4vw, 40px); } .section-head .action { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ink); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .fw-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding: clamp(40px,6vw,72px) 28px; } .fw-hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.03; } .fw-hero .lead { max-width: 460px; } .fw-hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 2px; } .fw-hero-stats .num { font-family: var(--font-display); font-size: 24px; font-weight: 600; } .fw-map-hero { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .fw-map-hero .map-cta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 400; box-shadow: var(--shadow); } .cat-card .swatch { height: 120px; border-radius: 0; } .cat-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .cat-card .body h3 { font-size: 20px; } .cat-card .count { margin-top: auto; padding-top: 10px; color: var(--accent); } .region-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); transition: border-color .15s ease; } .region-row:hover { border-color: var(--ink); } .region-row .label { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; } .band { margin-top: var(--pad-section); background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band .wrap { padding: var(--pad-section) 28px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 36px; } .step .n { font-family: var(--font-mono); font-size: 14px; color: var(--accent); } .step h3 { font-size: 23px; margin: 12px 0; } .step p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .cta-panel { background: var(--ink); border-radius: 8px; padding: clamp(36px,5vw,64px); display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; } .cta-panel h2 { color: var(--bg); max-width: 520px; font-size: clamp(26px,3.4vw,38px); } .cta-panel p { color: color-mix(in oklab, var(--bg) 72%, transparent); font-size: 16px; margin-top: 12px; max-width: 460px; } /* breadcrumbs */ .crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); } .crumbs a, .crumbs span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ink); } .crumbs .sep { opacity: .5; } /* ============================================================ Listing card (supplier teaser) ============================================================ */ .listing-card { cursor: pointer; } .listing-card .banner { position: relative; } .listing-card .banner .swatch { height: 140px; border-radius: 0; } .listing-card .body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .listing-card h3 { font-size: 20px; line-height: 1.12; } .listing-card .where { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; } .listing-card .where svg { color: var(--accent); } .listing-card .blurb { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .listing-card .chips { display: flex; flex-wrap: wrap; gap: 6px; } .listing-card .foot { margin-top: auto; padding-top: 11px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); } .listing-card .foot .view { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--ink); } /* ============================================================ Listing profile ============================================================ */ .fw-listing-banner { height: 230px; border-bottom: 1px solid var(--line); } .fw-listing-banner .swatch { height: 100%; border-radius: 0; } .fw-listing { display: grid; grid-template-columns: 1fr 340px; gap: 44px; padding: 36px 28px var(--pad-section); } .fw-listing h1 { font-size: clamp(28px,3.6vw,42px); margin: 8px 0; } .fw-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0; } .fw-fact { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: var(--surface); } .fw-fact .mono { color: var(--muted); } .fw-fact .val { font-weight: 600; margin-top: 4px; } .fw-listing-aside { position: sticky; top: 82px; align-self: start; display: flex; flex-direction: column; gap: 16px; } .aside-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 12px; } .aside-card .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .aside-card .row .k { color: var(--muted); } .loc-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 16px 18px; margin-bottom: 14px; } .loc-card h3 { font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .loc-card .addr { margin: 6px 0; color: var(--ink-soft); } .loc-tags { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .taggroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .taggroup .tg-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } /* ============================================================ Map + directory ============================================================ */ .fw-map { position: relative; z-index: 0; overflow: hidden; background: var(--surface-2); } .leaflet-container { font-family: var(--font-ui); background: var(--surface-2); } .leaflet-control-attribution { font-size: 9px !important; background: color-mix(in oklab, var(--surface) 82%, transparent) !important; color: var(--muted) !important; } .leaflet-control-attribution a { color: var(--muted) !important; } .leaflet-bar a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; } .leaflet-popup-content-wrapper { border-radius: 6px; } .leaflet-popup-content a { color: var(--accent); font-weight: 600; } .leaflet-popup-content small { color: var(--muted); } .fw-pin-wrap { display: grid; place-items: center; } .fw-pin { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--surface); box-shadow: 0 1px 5px rgba(0,0,0,.45); transition: transform .12s ease; } .fw-pin-wrap:hover .fw-pin { transform: scale(1.25); } .fw-pin-wrap.is-active .fw-pin { transform: scale(1.6); background: var(--ink); border-color: var(--accent); } .findwood-cluster { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 100px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600; border: 2.5px solid var(--surface); box-shadow: 0 1px 6px rgba(0,0,0,.4); } .findwood-cluster-large { background: var(--ink); width: 44px; height: 44px; } .leaflet-tooltip { font-family: var(--font-ui); font-size: 12px; font-weight: 600; background: var(--ink); color: var(--bg); border: 0; box-shadow: var(--shadow); padding: 5px 9px; border-radius: 5px; } .leaflet-tooltip-top::before { border-top-color: var(--ink); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1040px) { .fw-hero { grid-template-columns: 1fr; } .fw-hero > .fw-map-hero { display: none; } .grid-4, .region-grid { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: 1fr 1fr; } .fw-listing { grid-template-columns: 1fr; } .fw-listing-aside { position: static; } } @media (max-width: 720px) { body { font-size: 15px; } .wrap { padding: 0 18px; } .fw-nav, .fw-header-right { display: none; } .fw-menu-btn { display: inline-flex; } .grid-4, .grid-3, .grid-2, .steps { grid-template-columns: 1fr; } .region-grid { grid-template-columns: 1fr 1fr; } .fw-facts { grid-template-columns: 1fr; } .fw-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 460px) { .fw-footer-top { grid-template-columns: 1fr; } } /* ============================================================ Concept-D directory — mode-aware Near-me map / Online list ============================================================ */ .fw-dir-head { padding: 22px 28px 0; } .fw-dir-head h1 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 14px; } .fw-dir-toolbar { border-bottom: 1px solid var(--line); margin-top: 18px; background: var(--surface); } .fw-dir-toolbar .wrap { padding: 14px 28px; display: flex; flex-direction: column; gap: 13px; } .fw-toolbar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .fw-mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: var(--bg); } .fw-mode-toggle button { display: flex; align-items: center; gap: 8px; padding: 9px 17px; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); background: transparent; } .fw-mode-toggle button.on { background: var(--ink); color: var(--bg); } .fw-mode-toggle .c { font-family: var(--font-mono); font-size: 10.5px; opacity: .75; } .fw-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .fw-toolbar-selects { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .fw-fsel { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 12px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); } .fw-fsel.on { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); background: var(--accent-soft); } .fw-fsel .lab { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .fw-fsel.on .lab { color: var(--accent); } .fw-fsel select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; } .fw-dir-sort { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .fw-verified-pill { cursor: pointer; gap: 6px; padding: 8px 13px; } .fw-clear { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; } .fw-dir-near, .fw-dir-online { display: grid; grid-template-columns: 248px 1fr; align-items: start; } .fw-dir-rail { position: sticky; top: 66px; align-self: start; max-height: calc(100vh - 66px); overflow: auto; border-right: 1px solid var(--line); background: var(--surface); padding: 18px 16px; } .fw-dir-mapcol { position: sticky; top: 66px; height: calc(100vh - 66px); } .fw-dir-mapcol #map { height: 100%; width: 100%; } .fw-online-results { padding: 22px 28px 60px; } .fw-online-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--gap); } .fw-online-note { display: flex; align-items: center; gap: 9px; padding: 12px 15px; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); border-radius: 6px; color: var(--ink-soft); font-size: 13.5px; margin-bottom: 20px; } .fw-online-note svg { color: var(--accent); flex-shrink: 0; } .fw-rail-head { margin-bottom: 8px; } .fw-rail-sec { border-bottom: 1px solid var(--line-soft); } .fw-rail-toggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 4px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; } .fw-rail-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .fw-rail-name { flex: 1; font-weight: 600; font-size: 14.5px; color: var(--ink); } .fw-rail-sec.sel .fw-rail-name { color: var(--accent); } .fw-rail-count { color: var(--muted); font-size: 10.5px; font-family: var(--font-mono); } .fw-rail-chev { color: var(--muted); transition: transform .15s ease; flex-shrink: 0; } .fw-rail-sec.open .fw-rail-chev { transform: rotate(90deg); } .fw-rail-body[hidden] { display: none; } .fw-rail-body { padding-bottom: 9px; } .fw-rail-subs { display: flex; flex-direction: column; gap: 1px; padding-left: 8px; margin-left: 5px; border-left: 1px solid var(--line); } .fw-rail-row { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 5px; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 400; color: var(--ink-soft); text-align: left; width: 100%; } .fw-rail-row.sub { font-size: 13.5px; padding: 6px 6px; } .fw-rail-row.all { font-weight: 600; } .fw-rail-row.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .fw-rail-box { width: 15px; height: 15px; flex-shrink: 0; border-radius: 4px; border: 1.6px solid var(--line); background: transparent; display: grid; place-items: center; color: var(--accent-ink); } .fw-rail-row.on .fw-rail-box { border-color: var(--accent); background: var(--accent); } .fw-rail-row .lbl { flex: 1; } .fw-rail-row .c { color: var(--muted); font-size: 10.5px; font-family: var(--font-mono); } .fw-map-preview { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(330px, calc(100% - 32px)); z-index: 1000; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 12px; } .fw-map-preview .card { border: 0; } .fw-map-preview .card:hover { transform: none; box-shadow: none; } .fw-map-preview-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; } .fw-dir-empty { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); } .fw-online-empty { padding: 70px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; } .fw-filter-btn { display: none; } .fw-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.4); display: none; } .fw-drawer-backdrop.open { display: flex; } .fw-drawer { margin-left: auto; width: min(340px, 88vw); background: var(--surface); height: 100%; padding: 24px; overflow-y: auto; } .fw-drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } @media (max-width: 1040px) { .fw-dir-rail { display: none; } .fw-dir-near, .fw-dir-online { grid-template-columns: 1fr; } .fw-toolbar-selects { display: none; } .fw-filter-btn { display: inline-flex; } } @media (max-width: 720px) { .fw-dir-mapcol { position: static; height: 72vh; } .fw-online-results { padding: 16px 16px 40px; } .fw-dir-head { padding: 16px 18px 0; } } /* Two-path home cards */ .fw-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .fw-paths .card { cursor: pointer; } @media (max-width: 720px) { .fw-paths { grid-template-columns: 1fr; } } /* Mode cross-link (replaces the in-directory toggle) */ .fw-mode-switch-wrap { display: inline-flex; } .fw-mode-switch { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-soft); } .fw-mode-switch:hover { border-color: var(--ink); color: var(--ink); } .fw-mode-switch[hidden] { display: none; } .fw-mode-switch .c { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); } .fw-rail-row[hidden], .fw-rail-sec[hidden] { display: none; } .fw-rail-row.muted { opacity: .4; }