/* ════════════════════════════════════════════════════════════════════ BLB THEME VARIABLES — FALLBACK DEFAULTS ONLY ════════════════════════════════════════════════════════════════════ The live theme is controlled by /res/js/theme.js (loaded in the of layout_1.astro). That file can override any variable below on a PER-PAGE basis. This :root block is a safety net: if theme.js ever fails to load, the site still renders in these default colors. To change a color site-wide or per-page, edit theme.js — NOT here. Only edit here if you are changing the emergency fallback palette. ════════════════════════════════════════════════════════════════════ */ :root { /* Brand greens */ --blb-green-deep: #0C2721; /* page background, headers, dropdown bars */ --blb-green: #193C35; /* mid green surfaces */ --blb-green-border: #195548; /* green outline (search bar) */ --blb-spruce: #2F5D46; /* dashed media placeholder border */ /* Dark surfaces */ --blb-card: #12211C; /* per-business page cards */ --blb-card-border: #2A4038; /* per-business page card borders */ --blb-surface: #191919; /* cards, modal content */ --blb-surface-2: #1b1b1b; /* business modal background */ --blb-surface-dark: #171717; --blb-surface-3: #262626; --blb-surface-4: #2a2a2a; --blb-surface-5: #555; /* Borders */ --blb-border: #303030; --blb-border-2: #333; --blb-border-3: #444; --blb-scrollbar: #666; /* scrollbar thumb */ /* Text */ --blb-text: #E3D8BF; /* cream body text */ --blb-text-soft: #F2E7D0; /* lighter cream */ --blb-text-muted: #ddd; --blb-text-faint: #aaa; --blb-unavailable: #848484; /* " Unavailable" placeholders, business cards + business pages. Its own variable, not text-faint: that one also paints breadcrumb separators, "No Current Photos" and the related-business type lines. */ --blb-white: #FFFFFF; /* Accents */ --blb-accent: #36c8a7; /* teal — links, glows, active borders */ --blb-highlight: #63ffa5; /* mint highlight text */ --blb-search-on: #63ffa5; /* ACTIVE search-mode toggle */ --blb-search-off: #193c35; /* inactive search-mode toggle */ --blb-gold: #b1924e; /* dropdown headers */ --blb-heart: #FF69B4; /* heart button */ --blb-error: #ff6b6b; /* search tooltip */ /* Overlays & glows */ --blb-overlay: rgba(0, 0, 0, 0.6); --blb-overlay-modal: rgba(12, 12, 12, 0.85); --blb-overlay-modal-2: rgba(12, 12, 12, 0.9); --blb-glow: rgba(255, 255, 255, 0.2); --blb-glow-soft: rgba(255, 255, 255, 0.15); /* Fonts */ --blb-font-body: Georgia, 'Times New Roman', Times, serif; --blb-font-serif: serif; --blb-font-sans: sans-serif; } .blb_logo { display: block; width: 6.2rem; /* 100px */ } .menu_icon { display: block; width: 4rem; /* 64px */ } /* ──────────────────────────────────────────────────────────────── Navigation ───────────────────────────────────────────────────────────── */ .nav_main { position: sticky; top: 0; z-index: 9; transition: transform 0.75s ease-in-out; width: 100%; min-height: 20%; /* ✅ set a realistic height for nav bar */ display: flex; justify-content: space-between; align-items: center; padding: 0 3rem; } .nav_side_menu { position: relative; } /* The top bar is 10% of the page section on EVERY page, and must stay there. Each page section is a flex column, and these bands default to flex-shrink: 1 - so whenever the content below them wanted more room than the section had, flex shrank every band proportionally and the bar came out shorter. Under Construction lost 3px that way (87 instead of 90, the same 0.971 factor applied to all its bands), and How It Works lost 5px to its wrapper's padding. flex-shrink: 0 makes the bar hold its height and pushes the overflow onto the content area, which is where it belongs. Combined with the uniform 10% this keeps the logo at an identical position site-wide. */ .page_content_home:nth-child(1), .page_content_calendar:nth-child(1), .page_content_category:nth-child(1), .page_content_about:nth-child(1), .page_content_main_services:nth-child(1), .page_content_underconstruction:nth-child(1), .hiw-nav-band { flex-shrink: 0; } /* Search icon sits left of the hamburger in the top bar (all pages); plain icon, site-standard .menu_icon size, just spaced apart. */ .nav_search_btn { margin-right: 1.75rem; } .nav_search_btn .menu_icon { width: 3.5rem; /* slightly under the 4rem hamburger so the pair reads equal */ } .nav_side_menu:hover { top: 0.1rem; } .nav_main_links { font-size: 1.5rem; } .nav_left, .nav_right { display: flex; align-items: center; /* ✅ vertical centering of inner content */ height: auto; position: relative; } .nav_left { float: left; } .nav_right { float: right; } /* ──────────────────────────────────────────────────────────────── Side Menu ───────────────────────────────────────────────────────────── */ #mySidenav { /* base state */ width: 0; transition: width .3s ease; } .sidebar-open #mySidenav { /* drawer open on desktop */ width: 15%; /* ≈ 250 px at 100 % DPI */ } .nav_side { height: 100%; width: 0; position: fixed; top: 0; right: 0; background-color: var(--blb-surface-2); border: 0.0625rem solid var(--blb-border-3); overflow: hidden; transition: 0.3s; display: flex; flex-direction: column; z-index: 1000; border-top-left-radius: 2.125rem; border-bottom-left-radius: 2.125rem; } .nav_content:nth-child(1) { display: flex; justify-content: space-between; /* space between left and right */ align-items: center; height: 5%; padding: 1rem; font-size: 3rem; } .a_left, .a_right { display: flex; align-items: center; width: auto; } .a_left { justify-content: flex-start; } .a_right { display: flex; justify-content: flex-end; align-items: center; /* ✅ vertical centering */ height: 100%; /* make sure it has height context */ } .closebtn_side { color: var(--blb-white); padding-left: 0.5rem; text-decoration: none; } .heartbtn_side { color: var(--blb-heart); padding-right: 0.5rem; text-decoration: none; } .heartbtn_side img { display: block; height: 2rem; /* or whatever size you want */ } .nav_content:nth-child(2) { height: 10%; width: 100%; align-content: center; justify-content: center; align-items: center; text-align: center; } .nav_content:nth-child(2) h1 { font-size: 3rem; } .nav_content:nth-child(3) { color: var(--blb-text-soft); height: 70%; width: 100%; align-items: flex-start; /* Align items to the left*/ flex-direction: column; justify-content: flex-start; gap: 0.75rem; padding: 1.5rem; } .nav_content:nth-child(3) a { font-size: 2rem; } .nav_content:nth-child(4) { height: 20%; width: 100%; align-items: center; justify-content: center; } /* Use flex-grow ratios — these will perfectly fill the height */ /* Shared style for all sections */ .nav_content { display: flex; align-items: center; justify-content: center; color: var(--blb-text); border-bottom: 0.0625rem solid var(--blb-border-3); font-size: 1.5rem; } /* Remove border on last one */ .sidebar-section:last-child { border-bottom: none; } /* Social Media Links */ .face_btn_2 { position: relative; bottom: 0; } .face_img_2 { width: 4rem; /* 64px */ } .face_btn, .insta_btn, .blank_img { padding-bottom: 0.625rem; } /* Touch target: the social icons render 21x29 on a phone, the smallest real controls on the listing. Grow only the tappable region, not the artwork. Measured safe: the next item in the social bar sits 46px away, so ~11px of growth per side cannot collide with it (and .blank_img, the placeholder for a missing account, is not a control at all). Same approach as .bp-promo-arrow. */ .face_btn, .insta_btn { position: relative; } .face_btn::after, .insta_btn::after { content: ""; position: absolute; inset: -0.85rem -1.25rem; } .face_img, .insta_img, .blank_img { width: 2rem; /* 32px */ } /* ──────────────────────────────────────────────────────────────── MAIN ───────────────────────────────────────────────────────────── */ a, button, [role="button"], [onclick], input, textarea, select, .carousel-dot { -webkit-tap-highlight-color: transparent; } html { font-size: 1rem; /* 16px */ } body { background-color: var(--blb-green-deep); color: var(--blb-text); margin: 0; font-family: var(--blb-font-body); } h1, h2, h3, p { margin: 0; } article { color: var(--blb-text-soft); position: relative; text-align: center; } footer { margin: 0; text-align: center; vertical-align: text-bottom; } button{ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } a, a:link, a:visited { text-decoration: none; color: var(--blb-text); } a:hover { color: var(--blb-accent); } span, span:link, span:visited, span:hover { text-decoration: none; } /* Keyboard focus. The stylesheet had no focus styles at all, which left anyone navigating by keyboard, or by an Android/iOS switch or keyboard accessory, with no idea where they were. :focus-visible (not :focus) means mouse and touch users never see the ring - the browser only applies it for keyboard-style interaction, so nothing changes for the phone users this site is built for. outline-offset is in rem so it tracks the root scale like everything else, and outline (not border) is used so it never affects layout. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 0.1875rem solid var(--blb-accent); outline-offset: 0.125rem; border-radius: 0.25rem; } .scale-down { font-size: 0.8em; /* everything that uses rem/em just shrinks */ } /* ──────────────────────────────────────────────────────────────── Modal Overlay ───────────────────────────────────────────────────────────── */ .modal-overlay { display: none; /* hidden by default */ position: fixed; z-index: 2000; /* inset beats left/top + 100vw/100vh: 100vw ignores a desktop scrollbar (stray horizontal scroll) and 100vh overshoots a mobile toolbar. `inset` is exactly the viewport, everywhere. */ inset: 0; background-color: var(--blb-overlay-modal); /* dark smoke effect */ backdrop-filter: blur(2px); justify-content: center; /* Top-aligned, not centred. Centring put the panel in the middle of the screen and it grew in both directions as results came in, so the input moved under the caret while you typed. Anchored to the top, the box only ever grows downward; the overlay scrolls if the panel outgrows the viewport. */ align-items: flex-start; /* Symmetric, so a modal that does not fill the height is inset by the same amount top and bottom. */ padding: 2rem 1rem; overflow-y: auto; overscroll-behavior: contain; } /* The search overlay is a window, not a scroller: the panel below is sized to the viewport and its results list scrolls internally, so the overlay itself never grows a scrollbar. That is also why there is no `scrollbar-gutter` here - with nothing to scroll there is no gutter to reserve, and reserving one would eat into the side inset and stop the four gaps from matching. */ #searchModal.modal-overlay { padding: var(--search-top, 2rem) var(--search-side, 1rem); overflow: hidden; } /* ── Shared modal shell ────────────────────────────────────────── Not search-specific: the business modal and the image preview on the listing page use these too (9 .modal-content and 10 .close-modal in the page markup). They must stay ABOVE the search panel's rules so .blb-s-panel can override them for the search modal only. */ .modal-content { position: relative; background-color: var(--blb-surface); padding: 2rem; border-radius: 1rem; box-shadow: 0 0 1rem var(--blb-glow); text-align: center; width: 90%; max-width: 39.0625rem; /* 625px - rem so it scales on large displays */ box-sizing: border-box; } .search-input { font-size: 1.5rem; padding: 0.75rem 1.25rem; width: 100%; border-radius: 0.5rem; border: none; outline: none; } .close-modal { position: absolute; top: 0.15rem; right: 0.55rem; background: none; border: none; color: var(--blb-text); font-size: 2rem; cursor: pointer; z-index: 10; } /* ==================================================================== SEARCH PANEL ==================================================================== Header, input wrapper, results block and footer are all built by search.js, not by markup: the modal is duplicated in every page file, so anything added to the HTML would have to be added seven times. The pages still carry only the input, the