/* WilderLink brand skin for Listeo's own templates. * * Applies to the pages that must keep Listeo's working widgets — browse (map * search), single listings (booking calendar), category archives and the * dashboard. The goal is that they read as the same site as the landing pages * built from guide/index.html, without replacing any Listeo markup. * * Loaded after listeo-style, so plain selectors win; !important is used only * where the parent theme sets the same property inline or with #id specificity. */ /* ---------------------------------------------------------------- * * Tokens (mirror guide/styles.css) * ---------------------------------------------------------------- */ :root{ --wl-night-0:#0C1917; --wl-night-1:#14251F; --wl-pine:#1C332A; --wl-conifer:#2F5A41; --wl-moss:#3F7052; --wl-sage:#9AB49B; --wl-birch:#F6F4EC; --wl-mist:#ECEFE4; --wl-ink:#1E2A24; --wl-ink-soft:#4C5B52; --wl-amber:#E9A13B; --wl-amber-deep:#B97817; --wl-amber-glow:rgba(233,161,59,.55); --wl-line:#DCDFCF; --wl-radius:14px; } /* WooCommerce pages (cart/checkout/order-received) were measured at a 10px root font-size in a live browser — no stylesheet on the page sets it (every enqueued file was checked) and there's no inline style on , so something in WooCommerce's block scripts sets it at runtime. Rather than keep chasing the exact source, force it back to the real 16px root every other page already uses — every rem value in this file assumes that base. */ html{font-size:16px !important} /* ---------------------------------------------------------------- * * Typography * * Listeo's base is 15px/27px in #707070; the mockup is 16.5px/1.6 in dark ink, * which is why Listeo pages read smaller and greyer than the landing pages. * These rules bring the shared scale in line. * * Minimum size: nothing in this file drops below .78rem (~13px). Mono labels * carry wide letter-spacing and uppercase, both of which cost legibility, so * they sit at that floor rather than the .62–.7rem they started at. The same * floor is applied in wilderlink-home.css — keep them in step. * ---------------------------------------------------------------- */ body{ font-family:'Karla',system-ui,-apple-system,sans-serif; font-size:16.5px; line-height:1.6; color:var(--wl-ink); background:var(--wl-birch); } body p{ font-size:16.5px; line-height:1.65; color:var(--wl-ink); } h1,h2,h3,h4,h5,h6{ font-family:'Bricolage Grotesque','Karla',system-ui,sans-serif; letter-spacing:-.01em; line-height:1.15; color:var(--wl-ink); } h1{font-size:2.3rem;font-weight:800} h2{font-size:1.85rem;font-weight:800} h3{font-size:1.35rem;font-weight:700} h4{font-size:1.12rem;font-weight:700} h5{font-size:1rem;font-weight:700} a{color:var(--wl-conifer)} a:hover{color:var(--wl-amber-deep)} /* Secondary text that Listeo renders at 13–14px */ .listing-location-nl, .listing-details-nl, .listing-desc, .dashboard-list-box p, .comment-content p, .sidebar-textbox p{ font-size:.95rem; line-height:1.6; color:var(--wl-ink-soft); } /* Form controls — Listeo sets 15px/#808080 with a fixed 51px line-height */ input[type="text"],input[type="email"],input[type="password"], input[type="number"],input[type="tel"],input[type="date"], input[type="search"],select,textarea{ font-size:16px; color:var(--wl-ink); } input::placeholder,textarea::placeholder{color:#8A968D} label,legend{color:var(--wl-ink-soft)} /* Buttons take the page size. `button` and `input[type=submit]` are form controls, which do NOT inherit typography — dropping the declaration would fall back to the browser default (~13px, system font) — so they are opted in explicitly rather than left unset. */ .button,button.button,input[type="submit"],a.button{ font-size:inherit; font-family:inherit; } /* Navigation + footer links */ #navigation ul li a{font-size:.97rem} #footer,#footer a{font-size:.95rem} /* ---------------------------------------------------------------- * * Header * ---------------------------------------------------------------- */ #header-container, #header, .headers-wrapper{ background:var(--wl-night-0); border-bottom:1px solid rgba(246,244,236,.08); } #header .container, #header-container .container{background:transparent} #logo img{max-height:34px;width:auto} #navigation.style-1 ul li a, #navigation ul li a, .header-widget a, #header a{ color:rgba(246,244,236,.85); font-family:'Karla',system-ui,sans-serif; font-weight:500; } #navigation.style-1 ul li a:hover, #navigation ul li a:hover, #header a:hover{color:#fff} #navigation.style-1 ul li a.current, #navigation ul li.current-menu-item > a{color:var(--wl-amber)} /* The sticky header Listeo clones on scroll is white by default (style.css ~342, `#header.cloned` — specificity (1,1,0), which beats the `#header` rule above). Left alone, the light nav links disappear the moment the page scrolls. */ #header.cloned, #header-container.fixed #header.cloned{ background-color:var(--wl-night-0); box-shadow:0 10px 30px -20px rgba(12,25,23,.8); } /* Sub-menus keep a light surface for legibility. Listeo forces `#navigation.style-1 ul li li a { background:#fff !important }` at (1,1,4), so the link colour has to be restated at matching specificity or the header's light text stays and renders white-on-white. */ #navigation ul ul{ background:#fff; border-radius:12px; border:1px solid var(--wl-line); box-shadow:0 20px 40px -26px rgba(12,25,23,.5); overflow:hidden; } #navigation ul ul li a, #navigation.style-1 ul ul li a, #navigation.style-1 ul li li a{color:var(--wl-ink)} #navigation ul ul li a:hover, #navigation.style-1 ul ul li a:hover, #navigation.style-1 ul li li a:hover{color:var(--wl-conifer);background:var(--wl-mist)} /* "List your gear" style CTA in the header widget area */ .header-widget .button, #header .button{ background:var(--wl-amber); color:#231603; border-radius:999px; font-weight:700; box-shadow:0 6px 18px -6px var(--wl-amber-glow); } .header-widget .button:hover, #header .button:hover{background:#F0AC49;color:#231603} /* "Sign In" pill (logged-out header-widget), styled to match the "List your gear" amber CTA next to it. Needs `#header` (ID, specificity 1,1,0) to beat Listeo's own `.user_not_logged_in .header-widget .sign-in` rule (0,3,0), same fix pattern as the submenu/account dropdown above. */ #header .sign-in, .header-widget .sign-in{ background:var(--wl-amber); color:#231603; border-radius:999px; font-weight:700; box-shadow:0 6px 18px -6px var(--wl-amber-glow); } #header .sign-in:hover, .header-widget .sign-in:hover{background:#fff;color:#231603} .user-menu .user-name:after{color:rgba(246,244,236,.7)} .user-menu .usrname{color:rgba(246,244,236,.9)} .user-menu .user-name img.avatar{border-radius:50%} /* My Account dropdown. Listeo renders it as a white panel with #696969 links, but the header rule above is written as `#header a` — an ID, so specificity (1,0,1) — which beats Listeo's `.user-menu ul li a` (0,1,3) and painted the links near-white on white. Restate them here at (1,1,3) so the panel is legible, matching the light treatment already used for `#navigation ul ul`. */ #header .user-menu ul, .user-menu ul{ background:#fff; border:1px solid var(--wl-line); border-radius:12px; box-shadow:0 22px 44px -26px rgba(12,25,23,.5); overflow:hidden; padding:6px 0; } #header .user-menu ul li a, .user-menu ul li a{ color:var(--wl-ink); font-family:'Karla',system-ui,sans-serif; font-weight:500; display:block; padding:9px 16px; } #header .user-menu ul li a:hover, .user-menu ul li a:hover{ color:var(--wl-conifer); background:var(--wl-mist); } #header .user-menu ul li a i, .user-menu ul li a i{color:var(--wl-sage)} #header .user-menu ul li a:hover i, .user-menu ul li a:hover i{color:var(--wl-amber-deep)} .user-menu ul li .nav-tag{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; border-radius:999px; background:var(--wl-conifer); color:#fff; } .mobile-navigation-wrapper, .mobile-nav-header{background:var(--wl-night-0)} .mobile-navigation-list a{color:rgba(246,244,236,.85)} /* ---------------------------------------------------------------- * * Buttons (site-wide) * ---------------------------------------------------------------- */ .button, button.button, input[type="submit"], a.button, .pagination a.button, .wp-element-button{ border-radius:999px; font-family:'Karla',system-ui,sans-serif; font-weight:700; background-color:var(--wl-amber); color:#231603; box-shadow:0 6px 18px -6px var(--wl-amber-glow); transition:transform .15s ease,background .15s ease,box-shadow .15s ease; } .button:hover, button.button:hover, input[type="submit"]:hover, a.button:hover{ background-color:#F0AC49; color:#231603; transform:translateY(-1px); } .button.border, a.button.border{ background:transparent; border:1.5px solid var(--wl-conifer); color:var(--wl-conifer); box-shadow:none; } .button.border:hover, a.button.border:hover{background:var(--wl-conifer);color:#fff} /* ---------------------------------------------------------------- * * Split-map browse layout * ---------------------------------------------------------------- */ .fs-inner-container.content{background:var(--wl-birch)} .fs-content{background:transparent} /* Search panel above the results */ .fs-content section.search{ background:linear-gradient(180deg,#0A1520 0%,#0E1E1E 60%,var(--wl-night-1) 100%); padding:30px 34px 26px; border-radius:0 0 var(--wl-radius) var(--wl-radius); margin:0 0 6px; } .fs-content section.search .main-search-input, .fs-content section.search .main-search-inner{background:transparent} .main-search-input{ background:rgba(255,255,255,.06); border:1px solid rgba(246,244,236,.16); border-radius:var(--wl-radius); box-shadow:none; padding:8px; } .main-search-input-item, .main-search-input-item input, .main-search-input-item select{ background:transparent; border-radius:10px; color:var(--wl-birch); font-family:'Karla',system-ui,sans-serif; } .main-search-input-item input::placeholder{color:rgba(246,244,236,.55)} .main-search-input-item{border-color:rgba(246,244,236,.14)} .main-search-input-item.location a i{color:var(--wl-amber)} .main-search-input button.button, .main-search-input input[type="submit"]{ background:var(--wl-amber); color:#231603; border-radius:999px; font-weight:700; } /* Show/hide map toggle */ .show-map-button{ background:var(--wl-conifer); color:#fff; border-radius:999px; font-family:'IBM Plex Mono',monospace; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; padding:9px 18px; border:none; } .show-map-button:hover{background:var(--wl-moss);color:#fff} /* Filter / sort toolbar */ .panel-dropdown a, .sort-by .sort-by-select .chosen-single, .sort-by-select select, .fs-switcher .layout-switcher a{ background:#fff; border:1px solid var(--wl-line); border-radius:999px; color:var(--wl-ink-soft); font-family:'IBM Plex Mono',monospace; font-size:.85rem; letter-spacing:.04em; } .panel-dropdown a:hover, .fs-switcher .layout-switcher a:hover{border-color:var(--wl-moss);color:var(--wl-ink)} .panel-dropdown.active a{ background:var(--wl-conifer); border-color:var(--wl-conifer); color:#fff; } .panel-dropdown-content{ border-radius:var(--wl-radius); border:1px solid var(--wl-line); box-shadow:0 24px 50px -30px rgba(30,42,36,.45); } .panel-buttons .panel-apply, .panel-buttons button.panel-apply{ background:var(--wl-amber); color:#231603; border-radius:999px; } .panel-buttons .panel-cancel{color:var(--wl-ink-soft)} /* Checkbox + range filter accents */ input[type="checkbox"], input[type="radio"]{accent-color:var(--wl-conifer)} .irs-bar,.irs-from,.irs-to,.irs-single{background:var(--wl-conifer)!important} .irs-handle>i:first-child{background:var(--wl-amber)!important} /* ---------------------------------------------------------------- * * Listing cards (the -nl card set) * ---------------------------------------------------------------- */ .listing-card-nl, .listing-card-container-nl{ border-radius:var(--wl-radius); border:1px solid var(--wl-line); background:#fff; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .listing-card-container-nl:hover, .listing-card-nl:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(30,42,36,.35); border-color:var(--wl-moss); } .listing-image-container-nl, .slider-image-nl{background:linear-gradient(170deg,#16292A,#122220)} .listing-title-nl, .listing-title-nl a{ font-family:'Bricolage Grotesque','Karla',sans-serif; font-weight:700; color:var(--wl-ink); letter-spacing:-.01em; } .listing-title-nl a:hover{color:var(--wl-conifer)} /* Card title sits between h4 and body size */ .listing-title-nl, .listing-title-nl a{font-size:1.08rem;line-height:1.35} /* .listing-location-nl / .listing-details-nl sizing lives in the Typography block */ .listing-category-tag-nl, .title-badge-nl{ background:var(--wl-amber); color:#231603; border-radius:999px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; } .feature-tag-nl{ background:var(--wl-mist); border:1px solid var(--wl-line); color:var(--wl-ink-soft); border-radius:999px; font-family:'IBM Plex Mono',monospace; font-size:.8rem; /* Listeo's own rule caps this pill at max-height:28px with flex-wrap:wrap and no overflow:hidden — a long custom-field value (e.g. a free-text capacity spec, or a checkbox label like "Recommended with a satellite kit rental: Yes") wraps to a second line that spills out below the clipped pill, unstyled, overlapping whatever comes after it. Cap the pill's width instead and ellipsize the text so it always stays on one visible line. */ max-height:none; max-width:200px; flex-wrap:nowrap; } .feature-tag-nl > div[class^="single-property-detail-label-"], .feature-tag-nl > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } /* Cards can carry far more custom fields than fit cleanly on a card — cap the visible row at 3 chips so it never crowds the price/rating sidebar. */ .listing-features-nl{row-gap:8px;margin-top:10px} .listing-features-nl .feature-tag-nl:nth-child(n+4){display:none} /* Listeo's sidebar column has no gap between the rating pill and the price, so dropping the "no reviews" pill (above) can leave the price sitting flush under the badges — give the stack breathing room either way. */ .details-sidebar-upper-nl{gap:8px} .verified-icon-nl{color:var(--wl-moss)} .favorite-icon-nl{color:var(--wl-amber-deep)} .listing-rating-nl, .rating-text-nl{ font-family:'IBM Plex Mono',monospace; color:var(--wl-amber-deep); font-size:.8rem; } .no-rating{color:var(--wl-ink-soft)} /* No rating yet reads as noise on a card grid — drop the pill entirely rather than print a "No reviews yet" placeholder. */ .listing-rating-nl:has(.no-rating){display:none} /* Price + the weekly rate the child theme injects */ .listing-price-nl, .price-nl, .listing-item-content .listing-price{ font-family:'IBM Plex Mono',monospace; color:var(--wl-amber-deep); font-weight:600; } .wl-card-weekly{ display:block; font-family:'IBM Plex Mono',monospace; color:var(--wl-ink-soft); letter-spacing:.04em; } /* WilderLink meta rows Listeo prints in card details */ [class^="main-detail-_wl_"], [class*=" main-detail-_wl_"]{ font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--wl-ink-soft); letter-spacing:.03em; } /* ---------------------------------------------------------------- * * Map * ---------------------------------------------------------------- */ #map,.split-map{background:var(--wl-night-1)} .marker-container{filter:drop-shadow(0 6px 14px rgba(12,25,23,.45))} .marker-card .marker-arrow, .marker-container .marker-card{border-radius:10px} /* Listeo's default (non "no-icon") marker face is a plain white circle — brand it green at rest and amber on the hover/clicked flip, instead of leaving pins white against the map. */ .face.front{background-color:var(--wl-conifer);border-color:var(--wl-conifer);color:#fff} .face.back{background-color:var(--wl-amber-deep);border-color:var(--wl-amber-deep);color:#fff} .marker-arrow{border-top-color:var(--wl-conifer)} .infoBox .listing-img-container{border-radius:10px 10px 0 0;overflow:hidden} .infoBox{border-radius:12px;overflow:hidden;box-shadow:0 20px 44px -26px rgba(12,25,23,.6)} .map-box h4 a{font-family:'Bricolage Grotesque',sans-serif;color:var(--wl-ink)} .cluster div{ background:var(--wl-conifer)!important; border-radius:999px!important; font-family:'IBM Plex Mono',monospace!important; color:#fff!important; box-shadow:0 0 0 6px rgba(47,90,65,.25); } /* ---------------------------------------------------------------- * * Single listing page * ---------------------------------------------------------------- */ /* Page titlebars. On most pages `#titlebar` wraps `.container`, so a dark background fills the viewport width. The SINGLE LISTING is different: its `#titlebar` sits *inside* `.container` (`.container.rental > .row > .listeo-grid-gallery-title`), so a background there renders as a floating dark band with white gutters. Listeo provides `.single-listing-page-titlebar` as the full-width layer instead, and the listing title area is kept light so the tabs and content below it stay legible. */ #titlebar{ background:linear-gradient(180deg,#0A1520 0%,#0E1E1E 55%,var(--wl-night-1) 100%); color:var(--wl-birch); } /* `body #titlebar.gradient` is needed too: Listeo sets padding on that exact selector at (1,1,1) — the same specificity trap as elsewhere on this theme — so a plain `#titlebar{padding-top:10px}` here would lose on pages where the element carries the `.gradient` class (checkout, /profile/, etc). Tying the specificity and relying on this file loading after style.css is what wins. */ body #titlebar, body #titlebar.gradient{padding-top:10px} #titlebar h1,#titlebar h2,#titlebar span,#titlebar a{color:var(--wl-birch)} #titlebar .listing-titlebar-title h1{font-weight:800;letter-spacing:-.015em} /* Single listing — light title area */ .single-listing-page-titlebar{ background:linear-gradient(180deg,var(--wl-mist) 0%,rgba(246,244,236,0) 100%); height:260px; } #titlebar.listing-titlebar{ background:none; color:var(--wl-ink); padding:20px; } #titlebar.listing-titlebar h1, #titlebar.listing-titlebar h2, #titlebar.listing-titlebar .listing-titlebar-title h1{color:var(--wl-ink)} #titlebar.listing-titlebar span, #titlebar.listing-titlebar .listing-address a, #titlebar.listing-titlebar .listing-titlebar-title span{color:var(--wl-ink-soft)} /* Tag row — category / region / price as clean pills */ #titlebar.listing-titlebar .listing-titlebar-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; } #titlebar.listing-titlebar .listing-titlebar-tags .listing-tag{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--wl-line); border-radius:999px; padding:8px 16px; margin:0; font-size:.92rem; font-weight:600; line-height:1.2; color:var(--wl-ink-soft); } #titlebar.listing-titlebar .listing-tag a{ color:var(--wl-amber-deep); font-weight:700; } #titlebar.listing-titlebar .listing-tag a:hover{color:var(--wl-conifer)} /* The price pill keeps Listeo's layout: the icon is absolutely positioned at left:6px, and the span reserves room for it with padding-left. Switching this one to flex (as the tags above) pulled that padding away and the icon landed on top of the price. Keep the reserved space; restyle the chip and dot. */ #titlebar.listing-titlebar span.listing-pricing-tag{ display:inline-block; position:relative; padding:0 18px 0 40px; margin:0; height:38px; line-height:38px; border-radius:999px; background:rgba(47,90,65,.09); border:1px solid rgba(47,90,65,.25); color:var(--wl-conifer); font-family:'IBM Plex Mono',monospace; font-weight:600; } #titlebar.listing-titlebar span.listing-pricing-tag i{ position:absolute; top:50%; left:8px; transform:translateY(-50%); width:24px; height:24px; line-height:24px; font-size:11px; text-align:center; border-radius:50%; background:var(--wl-conifer); color:#fff; } /* Bookmark row — sits in the titlebar, not in a sidebar, so it must not pick up the boxed-widget card styling below. */ #titlebar.listing-titlebar .listing-share, .listeo-grid-gallery-title .listing-share{ background:none; border:none; box-shadow:none; padding:0; margin:18px 0 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .listing-share .like-button, .listing-share .like-button-notlogged{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--wl-line); border-radius:999px; padding:11px 20px; color:var(--wl-ink); font-weight:700; /* No font-size: