/* ========================================================================== cire-header.css - THE MOBILE MASTHEAD (sitewide) Branch: redesign/featured-islands Created: 2026-08-15 -------------------------------------------------------------------------- Nick, 2026-08-15, with a BHS (bhsusa.com) mobile screenshot, masthead circled: "I like this. Logo left. Menu and search button far right. I like the look. Size. Font of these as well. Please make mine look the same." SCOPE: the theme's own mobile masthead band only - `@media (max-width: 1365px)`, which is exactly where `.navbar__mobile-menu` (`hide-for-large`, Foundation large = 1366px) exists. Above it the desktop masthead is untouched, byte for byte. The 729/1024 sub-breakpoints inside the band get the site's inset scale, not a different layout: one mobile masthead, not two. ARCHAEOLOGY - measured on the LIVE page (2.0c24) at a true 375px viewport, confirmed from inside the document. Masthead BEFORE: element x w h note .navbar 0 375 65 position:fixed, white .navbar__mobile-menu 20 32 32 LEFT. bars are 3px thick .navbar__logo 77 141 44 floating between the two .navbar__search (none) form is display:none SITEWIDE .navbar__link-login 311 44 44 WHITE-ON-BLACK 37px box + ring Four findings that shape this file: 1. THERE IS NO SEARCH CONTROL ON THIS SITE TODAY, at any width. `css/cire-luxury.css` section 23 ("HEADER FIXTURES", sitewide, no media query) sets `.navbar .navbar__search, .navbar form.js-navbar__search, .navbar .navbar__search-submit, .navbar .navbar__search-input { display:none }`. That was a deliberate earlier decision. Nick's new instruction reverses it FOR MOBILE; this file un-hides the form inside the mobile band only and leaves the desktop decision standing until he says otherwise. cire-luxury.css belongs to another worktree and is NOT edited here - the un-hide wins on specificity (0,3,1 vs 0,2,0) and on print order (see the enqueue note below). 2. THE BLACK BOX IS style.css, NOT app.css, and it beat the redesign. `div.navbar__search-wrapper .navbar__link-login { color:#fff; background:#000; border:1px solid #000; width:37px; height:37px; box-shadow:0 0 0 1px #fff }` is (0,2,1) and prints after cire-luxury.css's (0,2,0) de-boxing rules on every template, which is why the account box survived the luxury pass. Overridden here at (0,3,2). 3. THE DRAWER'S "Sign In" CARRIES THE SAME CLASS. `.mobile-nav__login a` is literally `a.magnific-popup-trigger-ajax.navbar__link-login`, so a rule on `.navbar__link-login` alone would hide the account link in the hamburger drawer too - i.e. it would remove the only remaining way in. Every rule below is scoped through `.navbar .navbar__search-wrapper`. Account access after this change: the drawer, which carries TWO entries (`.mobile-nav__login` at the top, and More > Sign In). 4. THE MASTHEAD HEIGHT IS COUPLED TO `body { margin-top }`. app.css pins the page to a fixed masthead with `body{margin-top:60px}` (61 from 729px, 95 from 1366px) while the masthead actually measures 65px - a pre-existing 5px overlap, not introduced here. Nothing in this file changes the masthead's height, precisely so that coupling is not disturbed; "roomier" is bought with insets, 44px targets and whitespace. Re-syncing the two is its own unit. ENQUEUE: registered in `includes/enqueue.php` (sitewide) with deps [ 'cire-luxury', 'style' ]. Both are load-bearing - the head order is NOT the same on every template (agent profile and blog print style.css LAST), so a sheet without both dependencies would print before one of them on some template and silently lose there but not here. Version tracks NEUTRINO_VERSION; never hardcode. ========================================================================== */ /* The inline SVG icons added to header.php stay out of the way until the mobile band asks for them (and never render at desktop). */ .navbar .cire-icon { display: none; } @media (max-width: 1365px) { /* ------------------------------------------------------------------------ 1 THE ROW: put the masthead on the site's own reference edge `.row.extended-width` pads 20px at mobile while every page band starts at 16 (cire-alignment.css / ALIGNMENT-SPEC D1). The logo now begins on the same vertical line as the content beneath it. ---------------------------------------------------------------------- */ .navbar .row.extended-width { padding-inline: 16px; } .navbar .row.extended-width > .columns { padding-inline: 0; } /* ------------------------------------------------------------------------ 2 THE ORDER: logo left, search + menu hard right `.navbar__main` is already `display:flex`. The hamburger is FIRST in the markup, so the arrangement is done with `order` - no markup was moved, and the drawer JS (`.js-navbar__mobile-menu`) keeps its element. ---------------------------------------------------------------------- */ .navbar .navbar__main { align-items: center; justify-content: flex-start; gap: 0; } .navbar .navbar__main .navbar__logo { order: 1; margin-right: auto; /* everything else is pushed to the far right */ padding-right: 0; } /* ONE logo size across the whole mobile band, and a BRAND.md fix carried in passing: the lockup is 132px wide up to 728px but app.css sizes it by HEIGHT (37px) from 729px up, which renders it 111px wide - under the guide's hard "minimum width 120px, never render smaller". Measured, not read: 111px in the BEFORE probe at 1024 as well, so this is a pre-existing miss being corrected, not one introduced here. */ .navbar .navbar__main .navbar__logo img { width: 132px; max-width: 132px; height: auto; } .navbar .navbar__main .navbar__search-wrapper { order: 2; flex: 0 0 auto; width: auto; margin-left: 0; /* kills app.css's `margin-left:-125px` <=480 */ align-items: center; justify-content: flex-end; gap: 2px; } .navbar .navbar__main .navbar__mobile-menu { order: 3; width: 44px; height: 44px; margin: 0; padding: 0; background: transparent; border: 0; } /* ------------------------------------------------------------------------ 3 THE SEARCH CONTROL: one quiet 44px glyph The form is un-hidden but the TEXT FIELD is not: at this width the button is the whole control. Tapping it submits the (empty) form, and the inline handler at the foot of header.php strips empty params and sends the visitor to the form's own action - `/for-sale/homes/`, where the real filtering lives. No new URL, no dead link, no overlay. ---------------------------------------------------------------------- */ .navbar .navbar__search-wrapper .navbar__search, .navbar .navbar__search-wrapper form.js-navbar__search { display: flex; align-items: center; position: static; width: auto; max-width: none; height: auto; padding: 0; flex: 0 0 auto; } .navbar .navbar__search-wrapper .navbar__search-input { display: none; } .navbar .navbar__search-wrapper .navbar__search-submit { display: inline-flex; align-items: center; justify-content: center; position: static; transform: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; box-shadow: none; color: var(--cire-charcoal, #384249); } .navbar .navbar__search-wrapper .navbar__search-submit:hover, .navbar .navbar__search-wrapper .navbar__search-submit:focus { background: transparent; color: var(--cire-gold, #c9ac77); } .navbar .navbar__search-wrapper .navbar__search-submit:focus-visible { outline: 2px solid var(--cire-gold, #c9ac77); outline-offset: 2px; } /* The keyword-suggestions panel is a FLEX SIBLING of the button, so even collapsed (app.css caps its max-height at 0 while .collapsed) it still claimed the masthead's free space - measured: the wrapper was 119px wide for a 44px control, holding the search glyph 75px away from the hamburger. It can never open at this width because its input is hidden, so it is taken out of the layout entirely here. */ .navbar .navbar__search-wrapper .keyword-search-options { display: none; } /* the icon-font glyph steps aside for the thin-stroke SVG */ .navbar .navbar__search-wrapper .navbar__search-submit .icon { display: none; } .navbar .navbar__search-wrapper .navbar__search-submit .cire-icon--search { display: block; } /* ------------------------------------------------------------------------ 4 THE HAMBURGER: three 1px rules, BHS weight app.css draws it as 3px bars across the full 32px button. Same element, same JS, thinner strokes and a narrower, calmer mark. ---------------------------------------------------------------------- */ .navbar .navbar__mobile-menu .navbar__mobile-menu-bars { top: 50%; left: 50%; width: 22px; height: 1px; transform: translate(-50%, -50%); background: var(--cire-charcoal, #384249); } .navbar .navbar__mobile-menu .navbar__mobile-menu-bars::before, .navbar .navbar__mobile-menu .navbar__mobile-menu-bars::after { left: 0; width: 22px; height: 1px; } .navbar .navbar__mobile-menu .navbar__mobile-menu-bars::before { top: -7px; } .navbar .navbar__mobile-menu .navbar__mobile-menu-bars::after { top: 7px; } /* ------------------------------------------------------------------------ 5 THE BLACK ACCOUNT BOX: out of the masthead, still in the drawer Scoped through .navbar__search-wrapper so the drawer's own Sign In - same class name - is untouched. Verified present in the served markup at .mobile-nav__login and under More. ---------------------------------------------------------------------- */ .navbar div.navbar__search-wrapper a.navbar__link-login, .navbar div.navbar__search-wrapper .navbar__link-login { display: none; } }