/* ========================================================================== LYWAK.CA — MASTER TEMPLATE CSS Josef Lywak · lywak.ca THIS FILE IS THE MASTER TEMPLATE / SITE-WIDE CSS FIELD, COMPLETE. Paste it over everything in that field. It is a replacement, not an addition — do not append it to what is there. Everything here applies to the whole site: the navigation bar, the header, the home page hero, the footer, and the shared spacing scale. Nothing in this file is specific to one page. Structure 1. GLOBAL — every screen size 2. DESKTOP — @media (min-width: 769px) 2b. DESKTOP, NARROWER WINDOWS — 769px to 1400px 3. MOBILE — @media (max-width: 768px) 4. PHONE NAV BAR — touch devices and narrow viewports 5. SMALL PHONES — @media (max-width: 480px) 6. MASTER HEADER, INNER PAGES — mobile only 7. HOME PAGE HERO LOGO 8. FOOTER PHOTO CREDITS 9. PHONE MENU (hamburger panel) 10. FOOTER — BOYES GROUP REALTY INC. LOGO 11. SIGN UP / CREATE AN ACCOUNT POP-UP 12. FOOTER — EVEN SPACING 13. FOOTER — THE TWO BRAND BLOCKS SPACED ALIKE 14. FOOTER — LOGO SIZES AND THE EXPLORE LINKS 15. PHONE BAR — MENU ICON MIRRORS THE LOGO 16. PHONE BAR — 48px TRIAL (delete to undo) ========================================================================== WHAT CHANGED FROM THE VERSION YOU HAVE NOW Two things, both about the LYWAK logo in the black navigation bar on every inner page (Communities, Buying, Selling, Contact and the rest): · COMPUTERS: it sits 5px further left. Section 2, "Inner-page navigation logo" — left: -12px is now left: -17px. · PHONES: the computer nudge does not apply, and the logo's left edge now lines up exactly with the left edge of the LYWAK logo in the footer, at every phone width. Section 6, "Navigation LYWAK logo". The previous change, kept: the banner search bar is centred in the banner photo on desktop and phones (top: 5px in sections 2 and 6). ========================================================================== WHAT IS NOT IN THIS FILE, AND WHERE IT WENT The Contact page CSS that used to be section 7 of your site-wide field has been MOVED OUT, along with the six page stylesheets. They are in the companion file, lywak-page-css.css, split by page. Each block there goes in that page's OWN CSS field, not here. That is the point of the split: page rules keyed to #bid_ ids or to a page body class have no business loading on every page, and keeping two copies of the Contact rules — one here, one in the Contact page's field — is what produced the cropped-feet portrait earlier. NOTHING IS LOST. Between this file and lywak-page-css.css, every rule you had is still present, at the same value. ========================================================================== A NOTE ON ORDER Section 7 must stay AFTER sections 2, 3a and 5, because it overrides the hero logo offsets stated there. Do not move it up. The old rules in 3a and 5 are deliberately left in place. Section 7 overrides their width and offset, but they also carry margin-bottom values that stop the content under the hero from shifting, and those are still doing that job. Deleting them to tidy up would move everything below the hero. ========================================================================== A NOTE ON bid_ IDS The footer is keyed to .footer-011 rather than to a block id, on purpose. Every page carries its own footer block with a different id — home is #bid_7463624, Contact is #bid_4485012 — so an id there would fix one page and miss the rest. The same goes for .header-003-v2 (home page header) and .header-003-master-v2 (every other page): position is the durable handle, and it does not go stale when an image is swapped in the editor. ========================================================================== */ /* ========================================================================== 1. GLOBAL ========================================================================== */ /* The Bio section ships with a duplicate Boyes Group crest between the portrait and the "Josef Lywak" heading. It's the white nav-bar crest on a white background, so it's invisible at every size — but it still consumed space through the flex layout. Removed everywhere. */ .has-media-1.reverse-cols .brand-logo-image { display: none !important; } /* ---------- Let's Connect: vertical centring on the grey panel ---------- The grey panel is the Contact section's own background, so its height is the content plus whatever sits above and below it. The theme left the block hard against one edge — 102px above / 1px below on desktop, 24px above / 79px below on mobile — so the picture and form card never read as centred on the grey. Equal space above and below is what centres it, and because it is equal the block stays centred at any content height, so this holds as the form and image reflow across breakpoints. Both layouts happened to carry the same 103px of slack, so 51px on each side centres the block AND leaves the panel's overall height unchanged at both sizes — nothing below the Contact section shifts. Deliberately breakpoint-independent, which is why it lives here rather than in the desktop and mobile blocks: the requirement is the same at every width. Do not re-add a .forms200c-signup2 block-top-space height or padding-bottom inside a media query below — a later rule would win and knock the block off centre again. This is the HOME page's Let's Connect panel, not the Contact page. The Contact page's own form is section 7. */ .forms200c-signup2 .block-top-space { height: 51px !important; } .forms200c-signup2 { padding-bottom: 51px !important; } /* ========================================================================== 2. DESKTOP — @media (min-width: 769px) ========================================================================== */ @media (min-width: 769px) { /* ---------- Navigation menu: stop CONTACT dropping below the bar ---------- The top-level menu is a flex row set to wrap, and its eight items have a fixed combined width that never compresses — 802px on the search listings page. At the narrowest window where the horizontal menu is shown instead of the hamburger, only about 49px of room is left over. Anything that makes the labels slightly wider — the brand font not yet loaded and a wider fallback standing in, an OS minimum font size, small differences in text rendering between machines — spends that margin and CONTACT wraps onto a second row. The bar is a fixed 80px tall, so that second row lands below its background: CONTACT ends up under BLOG and half cut off. Reproduced by widening the labels about 6%. nowrap is the actual guarantee — the row can no longer break, so CONTACT can never drop out of the bar at any width. The padding trim below buys the space that makes nowrap comfortable rather than merely survivable. */ ul.mrp-menu-level-0 { flex-wrap: nowrap !important; } /* ---------- Home-page hero LYWAK logo ---------- Raised 80px from where the theme places it (40px, then 30px, then 10px). SUPERSEDED BY SECTION 8. The four-band hero rules at the end of this file set both the width and the offset, and out-specify this rule. It is left in place because removing it changes nothing and keeps the history of the file intact. Targeted by POSITION, not by filename: .header-003-v2 is the home page's header block and .banner-content is the hero area inside it. Inner pages use .header-003-master-v2 and keep their logo in .top-bar a.name-container, so neither is touched by this rule, and swapping the hero image file in the editor won't break it again. */ .header-003-v2 .banner-content img.custom-logo { position: relative !important; top: -80px !important; z-index: 2 !important; } /* ---------- Inner-page navigation logo ---------- The LYWAK logo in the black bar on search listings, blog, contact and the rest. The home page is different — its bar carries the Boyes Group crest, a different image — so this rule never touches the home page. No filename in the selector, deliberately. This rule used to be keyed to Lywak-Real-Estate-Logo-Flat-Gold; when that image was swapped for the newer one the rule stopped matching and the logo silently dropped back to the theme's own placement. Position is the durable handle. Nudge only — no sizing. The theme sets the height from its own --nav-custom-logo-size and that sizing is correct, so this rule states nothing but the offset and leaves the rest alone. Measured on the search listings page at 1440px: the logo sits at x=115.2, y=7.7 with nothing applied; these two values put it at x=100.2, y=12.7 inside an 80px bar, which leaves 5.3px of clearance beneath it. Visual only — nothing around it moves. (left was -12px; moved a further 5px left on 2 October 2026.) .header-003-master-v2 is load-bearing, not decoration. The home page's Boyes crest lives in an a.name-container too, so without that prefix this rule would drag the crest 10px left and 5px down as well. The home page's header block is .header-003-v2 — no "master" — which is what keeps the two apart. */ .header-003-master-v2 .top-bar a.name-container img.custom-logo { position: relative !important; top: 3px !important; left: -17px !important; } /* ---------- Sellers -> Let's Connect ---------- The one section break on the desktop home page that was out of step with the rest. Measured at 1440px, the gap between the bottom of each section and the top of the next ran 102, 93, 113, 102 — and then 153 into the Let's Connect panel. Half as much again as its neighbours, which reads as the page losing its thread just before the form you most want people to reach. The cause is a single spacer. Every comparable block on this page carries a 51px bottom spacer; the Sellers block carries 102px. Its own top spacer is 51px, and so is the Let's Connect panel's, so the pair came to 153 instead of 102. Bringing it to 51 makes this break exactly match the Buyers -> Sellers break above it (51 + 51), which is the one it most needs to agree with, since the three sections read as a sequence. WHY IT IS A clamp AND NOT A FLAT 51px. I tried 51px first and it moved the problem rather than fixing it. Every other spacer on this page is derived from vw, so they all shrink as the window narrows — the pair either side of Buyers -> Sellers is 102px together at 1440 but 73px at 1024. A fixed 51px does not shrink, so at 1024 this break became 102px while its neighbours were 73-80: the same outlier, pointing the other way. 3.54vw is that same proportion written out — 51px at 1440, 36px at 1024 — so the break now tracks its neighbours instead of fighting them. The bounds stop it collapsing on a small tablet or running away on a very wide monitor. Desktop only. The mobile value is set in section 3e and is a different number for a different layout. */ .b003-leads-200c-custom-cta + .b003-leads-200c-custom-cta .block-bottom-space { height: clamp(24px, 3.54vw, 56px) !important; } /* ---------- Communities -> Buyers ---------- The other desktop break that was out of step, and the smaller of the two. Measured at 1440 it ran 113px against the 102px of the breaks above and below it, because the Communities block's bottom spacer is only 10px while the Buyers block's top spacer is a full 102px. Trimming the Buyers side to 92px brings the pair to 102 and makes the four content breaks on the desktop home page identical: Bio -> Featured Listings 102 Communities -> Buyers 102 Buyers -> Sellers 102 Sellers -> Let's Connect 102 6.39vw is 92px at 1440, stated as a proportion for the same reason as the rule above: every other spacer on this page scales with the window, and a flat pixel value would drift out of step as soon as the window changed size. Verified at 1024, 1440 and 1920. Desktop only. The mobile value for this same spacer is 52px and is set in section 3d. */ .search-box-102-v2 + .leads-200c-c8 .block-top-space { height: clamp(44px, 6.39vw, 100px) !important; } /* ---------- Banner search bar (inner pages) ---------- The rounded search bar that sits on the banner photo of every inner page. top: 5px is what centres it — see "VERTICAL POSITION OF THE SEARCH BAR — DESKTOP" just below for the measurements. Moved with a relative offset rather than by padding: the search bar is a flex item centred inside the banner, so padding just re-centres it and only delivers half the movement. An offset gives the exact amount and leaves the banner's height untouched, so nothing below shifts. Pages whose banner search is collapsed — the listings and map pages — are unaffected, and the home page has no banner search at all. */ .banner-content .search-bar { position: relative !important; top: 5px !important; padding-top: 0 !important; } /* ---------- Banner height, and centring the search bar in it ---------- TWO PROBLEMS, ONE CAUSE. The banner photo and the banner's content are SIBLINGS, not nested. .content-container is position: relative and 192px tall, the photo (.with-smart-bg-outer) is positioned absolutely to fill it, and .banner-content sits beside it in normal flow — starting 90px lower than the photo on desktop and 84px lower on mobile. The result was that the search bar hung off the BOTTOM of the photograph: measured at 1440 the photo ended at y=272 and the pill ran to y=298, so 26px of it sat on the white below the picture. On a phone it was 19px. That is what reads as "too low in the banner" — it is not low in the banner, it is past it. THE FIX IS NOT A NUDGE. The offset is corrected once, here, so that .banner-content covers exactly the same box as the photo. From that point the centring is done by the theme's own flex rules — the container is already display: flex with align-items: center and justify-content: center — rather than by a number chosen to look right. The banner is also taller on desktop: .inner-container 272 -> 400 and .content-container 192 -> 320, which is the photo going from 192px to 320px. Both are needed; growing the photo alone leaves the header at 272 and the picture then overlaps the page content below it. */ .header-003-master-v2 .inner-container { height: 400px !important; } .header-003-master-v2 .content-container { height: 320px !important; } /* ===== VERTICAL POSITION OF THE SEARCH BAR — DESKTOP ===== Set by the top: 5px in "Banner search bar" above. Raise that number to move the bar down, lower it to move it up — 1px there is 1px on screen. Measured with the theme's reveal animation finished, banner photo running y=80 to y=400 (320px), rounded bar 70px tall: top: 0 120 above / 130 below (the previous value) top: 5px 125 above / 125 below <- current, dead centre Identical at 1024, 1440 and 1920. WHY 5px AND NOT 0. The flex centring centres the whole search block, and that block carries an empty selections row underneath the rounded bar. The bar therefore sits 5px high when the block is centred, and 5px puts it right. */ .header-003-master-v2 .banner-content { height: 320px !important; top: 0 !important; } /* ---------- Bio / About ---------- */ .leads-200c-c8:not(.b003-leads-200c-custom-cta) .content-container { align-items: center !important; } .leads-200c-c8:not(.b003-leads-200c-custom-cta) .content-container .content { height: auto !important; } /* ---------- Featured Listings ---------- VIEW ALL LISTINGS raised 15px (theme default was 22px of padding above it), tightening it to the carousel. The padding below is untouched, so the run-in to the Communities section is preserved and everything below simply follows the button up. */ .html-001:not(.inverted) .lywak-listings-cta { padding-top: 7px !important; } /* ---------- Communities ---------- */ .search-box-102-v2 .box-container { margin-top: 45px !important; } /* EXPLORE ALL COMUNITIES raised 8px (theme default was 16px). As above, the spacers below are untouched, so the Buyers section follows it up by the same 8px and the transition between them is unchanged. */ .search-box-102-v2 .button-list { margin-top: 8px !important; } /* ---------- Footer: LYWAK logo ---------- The theme wraps this logo in an image-container with a fixed height, a mismatched aspect-ratio and a 32px border-radius, which cropped the logo's own gold-bordered rectangle. Released here without affecting image rounding anywhere else on the site. THE SHRINKING — why the fixed width below is here. The theme sizes this container as a PERCENTAGE of its column, through an inline custom property on the element: --custom-image-width: 30%. The column narrows with the window, so 30% of it narrows too, and max-width: 100% on the image drags the logo down with it. Measured: container 176px and logo 169px at a 1534px window, container 116px and logo 109px at 1008px. The width: 260px that used to sit on the image never took effect at any width — max-width resolves against the container, so it always won. A fixed container width decouples the two. 176px is the size the container already reaches on a wide desktop, so the logo keeps the size you see there and simply stops shrinking. The image is stated as 100% of that box rather than a pixel value, so the two can never disagree again — to resize the logo, change the container width alone and the image follows. (For a 260px logo, set the container to 267px: 260 plus the 7px of padding below. That fits down to roughly a 900px window, below which the column itself is too narrow.) The column measures about 294px at the 769px breakpoint, so 176px clears it at every desktop width. LEFT EDGE CLIPPING — the image sits 7px to the left of its container, and the container was set to overflow: hidden, so the container's left boundary sliced through the logo's gold border. Measured: the drawn border began at x=106.3 while the container stopped clipping at x=107.2, cutting just under a pixel off the "L" side. overflow: visible lets the whole image through. padding-left is the real cure, and it is why the clipping cannot come back. The image is pulled 7px left of its container by a -7px margin that this stylesheet does not control and cannot override — tested against every level of specificity including an inline !important on the element, and it does not move. Those 7px are exactly what hung past the container's left boundary and got sliced. 7px of padding on the CONTAINER cancels the overhang from the other side: padding sits inside the clip region, so the boundary stays put while the image slides right onto it. Measured result — image left edge and container left edge both at 102.7, overhang 0. Nothing to clip, whatever overflow ends up being. margin-left then places the pair. The two numbers work as a set: the padding must match the image's overhang (7px), and the margin carries the result to where it should sit. At -5px the logo's drawn border lands on 108.8 against text at 107.7 — the position Josef settled on. To slide the logo, change only the margin; leave the padding at 7px. Note the theme's own margin is -0.5px, so the shift you see is 0.5px more than the number you write. */ div:has(> img[alt="LYWAK Footer Logo"]), div:has(> a > img[alt="LYWAK Footer Logo"]), div:has(> picture > img[alt="LYWAK Footer Logo"]) { min-height: 0 !important; height: auto !important; aspect-ratio: auto !important; /* The one lever for logo size. See the note above. */ width: 176px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 7px !important; border-radius: 0 !important; overflow: visible !important; margin-left: -5px !important; } img[alt="LYWAK Footer Logo"] { position: static !important; display: block !important; /* 100% of the container's content box — 169px against the 176px above. Stated as a percentage rather than a pixel value so the image can never disagree with its container the way width: 260px did. */ width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 0 -7px !important; padding: 0 !important; transform: none !important; object-fit: contain !important; object-position: left bottom !important; } /* ---------- Footer: layout ---------- */ .footer-011 .block-top-space { height: 44px !important; } .footer-011 .block-bottom-space { height: 10px !important; } /* 30px between the brand row and EXPLORE. Reads as a section break without the long dead run the old 18px produced — see the margin-top note on the Boyes column below for why that gap was really ~90px. */ .footer-011 .block-row { row-gap: 30px !important; } /* Column 2 is an empty, contentless column the theme still reserves a full row-gap around. */ .footer-011 .block-row > .block-column:nth-child(2) { display: none !important; } /* ---------- Footer: LYWAK column ---------- Raised to line up with the Boyes Group column beside it. -5px, not more, because the two were closer than they looked. The Boyes heading's cap sits 8.2px below its own box top (Oswald's leading), and the LYWAK logo's drawn gold border sits 7.5px below the image box top — the source PNG carries 13.4% transparent padding at top and bottom, measured off the file's alpha channel. Box tops 6px apart plus those two offsets left the logo's border 5.3px low, so -5px squared them off exactly. The final value is -12px: that 5px, plus a further 7px by choice. The logo's border now sits about 7px ABOVE the Boyes cap line, which is deliberate — change this one number to move the whole LYWAK stack, and -5px is where the two line up flush if you ever want to go back. Internal rhythm, set against the drawn border rather than the image box for the same reason: logo -> name 6px stated, ~13.5px optical name -> phone/email 14px Those two read as even in the rendered footer even though the numbers differ, which is the point. */ .footer-011 .block-row > .block-column:first-child { position: relative !important; top: -12px !important; } .footer-011 .block-row > .block-column:first-child .content-container { gap: 6px !important; } .footer-011 .block-row > .block-column:first-child .content-container .content { gap: 14px !important; } /* ---------- Footer: EXPLORE links ---------- HOME EVALUATION was dropping onto a second line as the window narrowed. The list sat in the 2-track-wide column — 385px at a 1008px window — and column-count: 3 divides that into 112px columns whatever the content needs. HOME EVALUATION renders about 105px, so it fitted with 7px to spare and lost that the moment the window came in. Track 3 of the footer grid is empty on this row, so the column spans 1/4 instead of 1/3 and the list gets 595px to divide. Capped at 470px so the three columns stay visually grouped rather than drifting apart; that still gives roughly 140px per column, against the 105px the longest label needs, at every desktop width down to 769px. nowrap is the guarantee behind the arithmetic — tested down to a 340px list, no label breaks. */ .footer-011 .block-row > .block-column:nth-child(3) { grid-column: 1 / 4 !important; } .footer-011 .info-list.col-3 { column-count: 3 !important; column-gap: 24px !important; max-width: 470px !important; } .footer-011 .info-list.col-3 .list-container { white-space: nowrap !important; } /* Optical nudges on the two top-row labels. Both moved right 4px from where they were (-1px and -4px), then MEET JOSEF back 3px, so both now sit flush with the labels beneath them — SEARCH LISTINGS and BUYER'S GUIDE. Set by eye against the Oswald glyphs, not by measurement — M, S, C and B all carry different left sidebearings, so a shared left edge does not read as aligned. Column order runs DOWN each column, so nth-child(1) is MEET JOSEF and nth-child(3) is COMMUNITIES. */ .footer-011 .info-list.col-3 .list-item:nth-child(1) .list-container { position: relative !important; left: 0 !important; } .footer-011 .info-list.col-3 .list-item:nth-child(3) .list-container { position: relative !important; left: 0 !important; } /* Boyes Group column: pulled into the first grid row, fourth column, then shifted 24px left. The shift is what keeps "BOYES GROUP REALTY INC." on one line. The column is sized by the grid and gets narrower as the window narrows — below about 1250px it dropped under the ~225px the heading needs and "INC." wrapped to a second line. nowrap on the heading stops the wrap outright, and moving the column left gives the extra width somewhere to go instead of pushing toward the page edge. 24px is set against the clearance to the EXPLORE links on its left, which runs 36–46px across desktop widths — so at the tightest window there is still 12px between them. Checked from 1024px up to 1600px: one line throughout, never overflowing the page, and no overlap with the photo-credits strip below. The address lines and Privacy Policy button move with the column, keeping the block aligned as a unit. */ .footer-011 .block-row > .block-column:nth-child(4) { grid-row: 1 !important; grid-column: 4 / 5 !important; position: relative !important; left: -24px !important; /* margin-top, not top. A relative offset moved the column up but left its full height reserved in the grid row, so the row stayed as tall as before and EXPLORE sat ~90px below the shortest column with nothing in between. A negative margin moves it AND gives the 25px back to the row, which lifts EXPLORE by the same amount and shortens the footer. The column lands in exactly the same place either way. */ margin-top: -25px !important; /* Aligns the top of BOYES GROUP REALTY INC. with the top of the LYWAK logo's gold border, at every desktop width. The first half cancels the theme's own inline padding-top: calc(var(--spacing-1, 0) * 5) on the container inside this column. --spacing-1 is derived from vw, so that padding grows with the window — 18.2px at 1024, 26.5px at 1600 — and it is what made the two drift apart: the natural gap ran 6.2px at 1024 up to 15.2px at 1600. Same variable, same multiplier, opposite sign, so the drift is removed at every width rather than averaged out. The 13px is the constant that places the block once the drift is gone. 11px is where the DRAWN edges sit flush — the logo PNG's first non-transparent row is 13.81% down, putting its gold border 7.8px below the image box, and the Oswald cap sits 9px below the heading's line box, so 11px squares the two. The extra 2px is by choice: the heading now sits 2px lower than flush. So 11px is flush and 13px is what is set. To move the block, change only this number — leave the calc(var(--spacing-1, 0) * -5) alone or the drift across window widths comes back. top, not a deeper margin-top, on purpose: a relative offset costs no layout, so the grid row keeps its height and EXPLORE and the footer height do not move. Confirmed identical at 1024, 1280, 1440, 1600 and 1920. */ top: calc(var(--spacing-1, 0) * -5 + 13px) !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3 { position: relative !important; left: -1px !important; white-space: nowrap !important; } /* Brokerage block rhythm: heading -> address 8px, between the two address lines 4px, address -> PRIVACY POLICY 26px. The old 2px/2px ran the heading and the address together as one mass; opening them slightly lets the three parts read as three. */ .footer-011 .block-row > .block-column:nth-child(4) .address-points { margin-top: 8px !important; row-gap: 4px !important; } .footer-011 .block-row > .block-column:nth-child(4) .content-container { gap: 26px !important; } .footer-011 .address-points { gap: 2px !important; } .footer-011 .block-row > .block-column:nth-child(4) a.fluid-button { position: relative !important; left: 2px !important; } /* ---------- Footer: photo credits strip ---------- */ .footer-011 + .html-001.inverted .container > div { text-align: right !important; } .footer-011 + .html-001.inverted .container { position: relative !important; top: -125px !important; } .footer-011 + .html-001.inverted { margin-bottom: -122px !important; } } /* ========================================================================== 2b. DESKTOP, NARROWER WINDOWS — @media (min-width: 769px) and (max-width: 1400px) Companion to the nowrap rule above. The menu items are spaced by 12.8px of padding on each side of every item, about 205px of the row's total width. Trimming that to 8px a side gives back roughly 76px — enough that the row fits with around 15% to spare at the tightest window, instead of the ~6% that was letting it break. Verified: labels widened 6% and 9% both stay on one line with this in place, where 6% alone broke it without. Only the horizontal padding changes, so item height, bar height and vertical alignment are untouched, and the dropdowns still hang from their parent items. Above 1400px the window is wide enough on its own — the row has 200px or more of slack there — so the menu keeps the theme's original spacing and looks exactly as it does today. Below 769px the theme has already swapped to the hamburger, so none of this applies on mobile. ========================================================================== */ @media (min-width: 769px) and (max-width: 1400px) { ul.mrp-menu-level-0 > li { padding-left: 8px !important; padding-right: 8px !important; } } /* ========================================================================== 3. MOBILE — @media (max-width: 768px) Vertical rhythm across the mobile page follows one fixed scale: 16px tightly related elements 24px related headings / elements 32px body text to CTA or buttons 48px image to its accompanying section label 72px transition between major sections Section-to-section transitions stay wider than within-section spacing. ========================================================================== */ /* ---------- 3a. Hero LYWAK logo ---------- */ @media (max-width: 768px) { /* Sized ~5% smaller than the previous pass, centred, holding its position on the wall. The reduced margin-bottom offsets the smaller height so nothing below the hero shifts. THE WIDTH AND OFFSET HERE ARE SUPERSEDED BY SECTION 8, which sets both from the theme's own --custom-logo-size and out-specifies this rule. The margin-bottom below is NOT superseded and is still doing its job — it is what keeps the content under the hero from shifting — so this rule stays. */ img.custom-logo[src*="Lywak-Real-Estate-Logo"] { position: relative !important; display: block !important; width: 64.5vw !important; max-width: 370px !important; height: auto !important; top: -83px !important; margin-top: 0 !important; margin-bottom: -44px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; object-fit: contain !important; z-index: 20 !important; } } /* ---------- 3b. About / Josef ---------- */ @media (max-width: 768px) { /* Nav bar to portrait. Trimmed from the previous pass: roughly 75px of breathing room now sits between the bottom of the black bar and the top of the portrait, instead of 100px. */ .leads-200c-c8:not(.b003-leads-200c-custom-cta) .block-top-space { height: 38px !important; } /* Portrait to "JOSEF LYWAK" heading: 48px, set by the theme. */ .has-media-1.reverse-cols .content { padding-top: 24px !important; } /* Heading to italic subtitle: 16px. */ .leads-200c-c8:not(.b003-leads-200c-custom-cta) h2.sub-title { margin-top: 4px !important; } .has-media-1.reverse-cols .content h2.sub-title { font-size: 20px !important; line-height: 1.2 !important; } /* Subtitle to first paragraph: 16px. */ .has-media-1.reverse-cols .content .text { margin-top: -8px !important; } .has-media-1.reverse-cols .content .text p { line-height: 1.5 !important; } /* Paragraph to paragraph: 24px. Set as an absolute value rather than a delta — these margins collapse, so the rendered gap is the larger of the two margins, not their sum. */ .leads-200c-c8:not(.b003-leads-200c-custom-cta) .content .text p + p { margin-top: 24px !important; } /* Last paragraph to SEARCH LISTINGS: 32px. */ .leads-200c-c8:not(.b003-leads-200c-custom-cta) .content .buttons { margin-top: 8px !important; } /* LET'S CONNECT to Featured Listings: 72px section transition. */ .leads-200c-c8:not(.b003-leads-200c-custom-cta) .block-bottom-space { height: 48px !important; } } /* ---------- 3c. Featured Listings ---------- */ @media (max-width: 768px) { /* Heading to its gold underline: 16px. The underline is an ::after pseudo-element on the heading, not a separate node. NOTE: .boxes-200c.text-001 also matches the Contact page's CONTACT title block. Section 7 re-states that one value for Contact only, with !important, so it can out-specify this rule. */ .boxes-200c.text-001 h2.title::after { margin-top: 16px !important; } /* Gold underline to first listing card: 48px. */ .featured-listings-003 .featured-listings { padding-top: 18px !important; } /* Pagination dots to VIEW ALL LISTINGS: the button sits 15px closer to the carousel than in the previous pass, so it reads as belonging to the Featured Listings block rather than floating between sections. The padding-bottom below it is unchanged, so the 72px transition into the Communities section is preserved and everything below simply follows the button up by the same 15px. */ .html-001:not(.inverted) .lywak-listings-cta { padding-top: 11px !important; padding-bottom: 58px !important; } } /* ---------- 3d. Communities ---------- */ @media (max-width: 768px) { /* Heading to gold underline: 16px, already set by the theme. */ /* Gold underline to first community image: 48px. */ .search-box-102-v2 .box-container { margin-top: 48px !important; gap: 16px !important; } /* Last community card to EXPLORE ALL COMUNITIES. Opened up so the button reads as the conclusion of the whole section rather than as part of the Aspen Ridge card above it, then eased back up 5px and a further 3px. As above, the spacers below are untouched, so the 72px transition into the Buyers section is preserved and that section follows the button up by the same amount. */ .search-box-102-v2 .button-list { margin-top: 31px !important; } /* Communities to Buyers: 72px section transition, split across the two sections' own spacer elements. */ .search-box-102-v2 .block-bottom-space { height: 20px !important; } .search-box-102-v2 + .leads-200c-c8 .block-top-space { height: 52px !important; } } /* ---------- 3e. Buyers + Sellers ---------- Both sections share the .b003-leads-200c-custom-cta class and are spaced identically, so they read as a deliberately matched pair. The Sellers headline still wraps naturally onto two lines — it is not shrunk to fit. */ @media (max-width: 768px) { /* Image to FOR BUYERS / FOR SELLERS label: 48px. */ .b003-leads-200c-custom-cta .block-container .content { padding-top: 24px !important; } /* Label to headline: 24px. */ .b003-leads-200c-custom-cta .titles.title-plain { gap: 24px !important; } /* Headline to body text: 16px in both sections. The two sections carry identical classes, so each is reached by what precedes it — Communities precedes Buyers, and Buyers precedes Sellers. The values differ only because each section starts from a different theme default. */ .search-box-102-v2 + .b003-leads-200c-custom-cta .block-container .content .text { margin-top: -9px !important; } .b003-leads-200c-custom-cta + .b003-leads-200c-custom-cta .block-container .content .text { margin-top: -8px !important; } /* Body text to guide button: 32px. */ .b003-leads-200c-custom-cta .content .buttons { margin-top: 8px !important; } /* Guide button to finder/evaluation button: 16px. */ .b003-leads-200c-custom-cta .button-list { gap: 17px !important; } /* Buyers to Sellers: 72px. */ .b003-leads-200c-custom-cta + .b003-leads-200c-custom-cta .block-top-space { height: 34px !important; } /* Sellers to Contact: 48px of white below HOME EVALUATION, then the grey Contact panel begins. The space between the panel's top edge and the picture is set by the centring rule in the GLOBAL section — it is not set here, because overriding it at this breakpoint would push the Let's Connect block off centre. */ .b003-leads-200c-custom-cta + .b003-leads-200c-custom-cta .block-bottom-space { height: 0 !important; } } /* ---------- 3f. Contact (HOME page Let's Connect panel) ---------- */ @media (max-width: 768px) { /* Contact image to LET'S CONNECT: 32px. */ .forms200c-signup2 h2.title { margin-top: 8px !important; } /* Heading to intro paragraph: 16px. */ .forms200c-signup2 .text { margin-top: -8px !important; } /* Intro paragraph to first form field: 24px. */ .forms200c-signup2 .box-form { margin-top: -1px !important; } /* Field to field: 16px. */ .forms200c-signup2 .form-group:not(.form-group-long-text) { margin-bottom: 16px !important; } /* Message field to SEND MESSAGE: 24px. */ .forms200c-signup2 .form-group.form-group-long-text { margin-bottom: 8px !important; } /* The space below the card, before the footer, is set by the centring rule in the GLOBAL section — it has to match the space above the picture for the block to sit centred on the grey panel, so it is deliberately not set here. */ } /* ---------- 3g. Footer ---------- */ @media (max-width: 768px) { /* LYWAK footer logo. Same container release as the desktop rule above — the theme's fixed height, mismatched aspect-ratio and overflow:hidden were clipping the gold border. Enlarged ~23% in an earlier pass to act as the footer's brand anchor. Sized by HEIGHT, not width, and deliberately so: on mobile the theme pins this image's width through its own image-container sizing chain, and a width declaration is ignored no matter how specific or how !important it is (verified live). Height is not pinned, so setting the height and leaving width:auto lets the browser derive the width from the image's real proportions. Aspect ratio is preserved exactly; nothing is stretched or distorted. Because the height is fixed, the mobile logo does NOT shrink with the window — the desktop shrinking problem does not exist here, and no width is set at this breakpoint. CORRECTION: the logo file is now 2172x724, a 3:1 ratio. An earlier note here said 2200x628 (3.5:1), which was the previous file — it was swapped and the note went stale. At 57px tall the logo renders about 171px wide, not the 200px that older note claimed. The height value below is unchanged; only the arithmetic in the comment was wrong. The container rule and the image rule below only work as a pair, so keep them together: releasing the container alone lets the image fill the full column width, and sizing the image alone leaves the container still pinning it back. The logo is also shifted 5px left of the text beneath it, per request — the source PNG carries transparent padding around its drawn gold border, so nudging it left brings that visible border closer to flush with the footer's left edge. */ div:has(> img[alt="LYWAK Footer Logo"]), div:has(> a > img[alt="LYWAK Footer Logo"]), div:has(> picture > img[alt="LYWAK Footer Logo"]) { overflow: visible !important; width: auto !important; max-width: 100% !important; height: 57px !important; max-height: none !important; aspect-ratio: auto !important; padding-left: 0 !important; /* The 5px left shift lives here, on the container, not on the image. Nothing applied directly to the moves it — margin-left, position/left and transform are all ignored (each tested live) — but the container accepts margin normally. */ margin-left: -5px !important; } img[alt="LYWAK Footer Logo"] { position: static !important; display: block !important; width: auto !important; max-width: 100% !important; height: 57px !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; object-position: left top !important; } /* Footer top edge to the logo: 32px. The logo-to-name gap below it is a 24px flex gap on the column and holds automatically at any logo size. */ .footer-011 .block-top-space { height: 32px !important; } /* Name to phone/email row: 16px. */ .footer-011 .contact-info-container { margin-top: -8px !important; } /* Empty, contentless second column — hidden so its reserved row-gap collapses. */ .footer-011 .block-row > .block-column:nth-child(2) { display: none !important; } /* Phone/email to EXPLORE heading: 32px. */ .footer-011 .block-row > .block-column:nth-child(3) { margin-top: 2px !important; } /* EXPLORE heading to first link: 24px, set by the theme. Link to link: tightened in an earlier pass, still a comfortable touch target at roughly 51px of pitch per row. */ .footer-011 .info-list .list-item:not(:first-child) { margin-top: 12px !important; } /* Last link to BOYES GROUP REALTY INC. */ .footer-011 .block-row > .block-column:nth-child(4) { margin-top: -10px !important; } /* Brokerage heading to address, and between the two address lines: 16px. Left as-is — this block already has a good internal rhythm. */ .footer-011 .block-row > .block-column:nth-child(4) .address-points { margin-top: 16px !important; row-gap: 17px !important; } /* Address block to PRIVACY POLICY: 24px, set by the theme. The button's own size, outline styling and left alignment are untouched. */ /* PRIVACY POLICY to photo credits: 24px. */ .footer-011 .block-bottom-space { height: 20px !important; } /* Photo credits to the myRealPage legal strip: 24px. The credit text itself — photographer names, Dreamstime references and image IDs — is not touched: not resized, not hidden, not reworded. */ .html-001.inverted { padding-bottom: 19px !important; } } /* ========================================================================== 4. PHONE NAVIGATION BAR Applies on touch devices at any width and on narrow viewports, so the bar is consistent whether the site is opened on a phone or in a narrow desktop window. Previously this lived in two separate blocks at two different heights; consolidated here to a single height. The bar is ~17% shorter than before. Width and left/right positioning are unchanged, the Boyes crest stays left aligned at its current reduced size, and the hamburger stays right aligned at its current size. Both are vertically centred by flex, so they stay centred at any bar height, with about 7px of clearance above and below the crest. ========================================================================== */ @media (hover: none) and (pointer: coarse), (max-width: 768px) { .outter-top-bar, .outter-top-bar.sticky, .outter-top-bar .top-bar, .outter-top-bar.sticky .top-bar { height: 43px !important; min-height: 43px !important; max-height: 43px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; } .outter-top-bar .top-bar, .outter-top-bar.sticky .top-bar { position: relative !important; } /* Boyes Group crest — left aligned, never centred. */ .top-bar > a.name-container { position: relative !important; width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; padding: 0 0 0 19px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; overflow: visible !important; } .top-bar > a.name-container > img.custom-logo { display: block !important; position: static !important; width: 54px !important; max-width: 54px !important; height: auto !important; max-height: 29px !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: 10 !important; } /* Hamburger — right aligned, unchanged in size. */ .top-bar > .menu-container { position: absolute !important; right: 0 !important; top: 0 !important; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } .top-bar .vmenu-opener { height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; padding: 0 2px 0 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; transform: translateX(26px) !important; } .top-bar .vmenu-opener svg { display: block !important; width: 20px !important; height: 20px !important; margin-top: -1px !important; } } /* ========================================================================== 5. SMALL PHONES — @media (max-width: 480px) Hero logo only. Everything else is already handled by the mobile and navigation blocks above. ========================================================================== */ @media (max-width: 480px) { /* ~5% smaller than the previous pass. The margin-bottom compensates for the reduced height so nothing below the hero moves, and the small top adjustment keeps the logo centred on the same part of the wall. As in 3a, the width and top here are SUPERSEDED BY SECTION 8; the margin-bottom is not, and is what keeps the content below the hero from shifting. */ img.custom-logo[src*="Lywak-Real-Estate-Logo"] { width: 66.5vw !important; max-width: 351px !important; height: auto !important; top: -88px !important; margin-bottom: -51px !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } } /* ========================================================================== 6. MASTER HEADER, INNER PAGES — mobile only The home page has its own header block; every other page (search listings, Search Homes, blog, contact and the rest) uses .header-003-master-v2, which carries the LYWAK wordmark in the nav bar and, on Search Homes, a hero image with the rounded search bar over it. These three fixes apply only there, and only on mobile. The query matches touch devices at any width as well as narrow viewports, deliberately mirroring section 4's nav bar rule. The two must agree: the hero offset below is derived from that 43px bar height, so if these queries diverge the hero gap reopens on whatever widths fall between them. Verified against desktop at 1409px — nav bar, logo, hero and search tool all pixel-identical with and without this section. ========================================================================== */ @media (hover: none) and (pointer: coarse), (max-width: 768px) { /* ---------- Navigation LYWAK logo ---------- Inner pages put the wide LYWAK wordmark in the nav bar, but it was being sized by section 4's rule, which was written for the home page's square Boyes crest and caps width at 54px — rendering the wordmark at 53x15px. Now about 99x33px. Stated as a height, not a width: height is what has to fit the 43px bar, and it is the value that survives the image being swapped for one with different proportions. 33px leaves 5px of clearance above and below. The width follows from the image itself. The current wordmark is 3:1, so 33px of height gives roughly 99px of width — near enough to the 101px that was settled on when the older, wider 3.5:1 wordmark was in place, so the logo reads at the same size in the bar as before. The container has to grow with it: at 72px wide, with 19px of left padding, it only had 53px of room, so the image alone could not get bigger. Scoped by .header-003-master-v2, not by filename. The filename version of these rules stopped matching the moment the logo image was swapped, which dropped the wordmark back to section 4's 53x15px. The header block class cannot go stale that way. It also keeps the home page out: its Boyes crest sits in an a.name-container as well, and would be stretched to 99px by an unscoped rule — the home page's block is .header-003-v2, without "master". These deliberately out-specify section 4 rather than replacing it, since that rule still governs the Boyes crest. */ /* LEFT EDGE LINED UP WITH THE FOOTER LOGO (2 October 2026). The logo's drawn gold border starts exactly where the footer logo's border starts, at every phone width. The two cannot be lined up with a fixed number: the footer's left edge moves with the screen width (8% of it, less a little), while the bar's logo sat a fixed 19px in. It is the same image file at two sizes, and its gold border starts 2.39% of the way into the picture — 4.1px on the 171px footer logo, 2.4px on the 99px bar logo. Allowing for both, the bar's left padding is 8vw - 3.25px. CORRECTED after Josef's phone screenshot. The first version of this rule used 8vw - 10.8px, measured in a desktop test window. A desktop window shows a scrollbar, a phone does not, and the scrollbar shifts the footer about 7.5px — so on a real phone the bar logo sat 7.5px left of the footer logo, exactly what the screenshot showed. Measured again with the scrollbar removed, as a phone draws it (footer / bar): 320px 24.4 / 24.4 362px 27.7 / 27.7 390px 30.0 / 30.0 430px 33.2 / 33.2 600px 46.8 / 46.8 The width grows by the same amount, so the logo always has its full 99px to sit in. */ .header-003-master-v2 .top-bar a.name-container { width: calc(8vw + 98px) !important; min-width: calc(8vw + 98px) !important; max-width: calc(8vw + 98px) !important; padding-left: calc(8vw - 3.25px) !important; } /* left: 0 — the desktop nudge in section 2 (left: -17px) must not reach the phone bar. On a touch tablet wider than 768px both sections match, and section 2's rule would otherwise slide this logo 17px left too. */ .header-003-master-v2 .top-bar a.name-container img.custom-logo { height: 33px !important; max-height: none !important; width: auto !important; max-width: none !important; left: 0 !important; } /* ---------- Close the gap under the nav bar ---------- The header reserves 5rem (80px) for the menu, but the mobile bar is only 43px tall, leaving 37px of empty space below it. On Search Homes that showed as a band between the bar and the hero image; on the listings and other inner pages, which have no hero, it showed as plain white before the content. The reserved height itself cannot be overridden — height rules on .outer-menu and .sticky-menu, and the --menu-height variable they read, are all ignored (each tested directly on the live page). Pulling the following content up by the same 37px achieves it regardless, and works on every inner page whether or not it has a hero. -37px = the 80px the menu reserves minus the 43px the bar occupies. If the mobile bar height in section 4 ever changes, this number changes with it. The hero rule below is the other half: with the content pulled up, the theme's own top:-10% bleed would push the image up behind the bar and waste part of it, so the offset is zeroed and the image starts exactly at the bar. The width and inset declarations keep it spanning the full viewport; its crop and centring are untouched. Measured flush at 360, 390, 414 and 430px on both page types. */ .header-003-master-v2 .outer-menu { margin-bottom: -37px !important; } .header-003-master-v2 .with-smart-bg { top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; } /* ---------- Property search tool ---------- Scaled down roughly 30% so it reads as secondary to the branding rather than filling the hero. Measured at 390px: the whole tool drops from 120px to 80px tall, the pill from 70px to 50px, and the gold button from 64px to 44px. 44px is deliberate, not arbitrary — it is the minimum comfortable touch target, so the button is as small as it can go and still be easy to tap. The field keeps a 48px height for the same reason. The input's font-size stays at 16px on purpose. Any smaller and mobile Safari zooms the page when the field is focused, which is far more disruptive than the few pixels it would save. Every selector here is prefixed with .header-003-master-v2 so none of it can reach the contact form, the listings search on the results page, or any other button on the site. */ /* ===== VERTICAL POSITION OF THE SEARCH BAR — PHONES AND TABLETS ===== The same mechanism as the desktop rule in section 2, and the same number. height: 100% makes .banner-content exactly as tall as the banner it sits in, and the theme's own align-items: center then centres the search block in it. top: 5px then moves the rounded bar onto the true centre — the block carries an empty selections row beneath the bar, which leaves the bar 5px high when the block is centred. position: relative is what makes the top value work here. The desktop rule in section 2 already positions the bar, but that rule stops at 769px, so on phones the bar was unpositioned and any top value was ignored. Measured with the theme's reveal animation finished, banner photo running y=43 to y=235 (192px), rounded bar 50px tall: top: 0 66 above / 76 below (the previous value) top: 5px 71 above / 71 below <- current, dead centre Identical at 360, 390, 430 and 768. Raise the 5px to move the bar down, lower it to move it up. */ .header-003-master-v2 .banner-content { height: 100% !important; top: 0 !important; } .header-003-master-v2 .search-bar { position: relative !important; padding-top: 0 !important; top: 5px !important; } .header-003-master-v2 .search-bar .input-container { height: 50px !important; border-radius: 25px !important; } .header-003-master-v2 .search-bar .input-holder, .header-003-master-v2 .search-bar .input-holder input { height: 48px !important; } /* THE PLACEHOLDER WAS BEING CUT OFF MID-WORD on phones — it ended at "...MLS® num". The bar itself was not too wide and nothing overflowed the screen; the hint text simply did not fit the field. Measured: "Enter location, address, or MLS® number" needs 291px at 16px. The field gives 238px of text room at a 390px screen and 212px at 360px, so it was 54px and 79px short. THE FIX IS ON THE PLACEHOLDER, NOT THE INPUT, and that distinction is the point. The input keeps font-size: 16px, because mobile Safari zooms the whole page when you focus a field whose text is smaller than 16px — far more disruptive than a clipped hint. iOS reads the INPUT's size for that decision, not the placeholder's, so shrinking only the placeholder fits the hint and still leaves what you type at 16px with no zoom. 3.3vw scales the hint with the screen rather than picking one size that is wrong at both ends: 11.9px at 360, 12.9px at 390, 14px from 424 up, where it stops so it never looks oversized on a tablet. Verified — full text visible, with room to spare: 430px 26px 414px 19px 390px 13px 375px 10px 360px 6px The 4px off the input's left padding and the 6px off the Filters icon's left padding below are where the rest of the room came from. text-overflow is the safety net: below about 340px the hint still will not fit, and an ellipsis is a tidier way to run out of room than stopping mid-word. */ .header-003-master-v2 .search-bar .input-holder input { padding-left: 14px !important; font-size: 16px !important; text-overflow: ellipsis !important; border-radius: 24px 0 0 24px !important; } .header-003-master-v2 .search-bar .input-holder input::placeholder { font-size: clamp(11.5px, 3.3vw, 14px) !important; opacity: 1 !important; } .header-003-master-v2 .search-bar .filters { padding: 0 8px 0 8px !important; } .header-003-master-v2 .search-bar button.search { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 22px !important; } .header-003-master-v2 .search-bar button.search svg { width: 24px !important; height: 24px !important; } } /* ========================================================================== 7. HOME PAGE HERO LOGO — sized and positioned CURRENT STATE: the DESKTOP band (1025px and up) is a further 10% smaller than the other three — 0.8179 against the 0.816 / 1.104 / 1.008 below it. That reduction was asked for on desktop only, so the tablet and phone bands are untouched. Checked at the boundary: at 1025px the logo is 428px wide and at 1024px it is 427px, so the step between the two bands is a single pixel and the change is invisible as the window crosses it. To bring the tablet band down to match, multiply its 0.816 by 0.9 to get 0.7344. The 40px lift applies on DESKTOP AND TABLET ONLY — those two bands carry -15px. The two phone bands are back to +25px. WHY THE PHONES ARE DIFFERENT NOW. The 40px lift was applied to all four bands, and on a phone it put the logo visibly too high on the wall. Measured at 390 x 844: the wall runs from 68px to 387px down the hero, and the logo sat at 155-224 — 87px of wall above it and 163px below, nearly twice as much. Putting the phone bands back to +25px gives 127px above and 123px below, which is centred to within 4px. At 768 it is within 1px. THE DESKTOP BANDS ARE LEFT HIGH, deliberately, because that is what was asked for. For the record they are not centred on the wall: the logo sits 67px above the wall's middle at 1024, 86px at 1440 and 90px at 1920. If you ever want them balanced the same way the phones now are, change the -15px in the desktop and tablet bands to +25px and they will match. THE 40px LIVES IN THE CONSTANT, NEVER THE vh. To move the logo again, change only the -15px. The vh part is what keeps the logo on the wall as the window changes shape, and editing it breaks that at every size other than the one you happened to be looking at. Note that up 20% then down 20% does not return to the starting size — 1.2 x 0.8 = 0.96, so the logo is now about 4% smaller than it was before it was ever enlarged. To go back to exactly that earlier size the four multipliers are 0.9467 / 0.85 / 1.15 / 1.05. Supersedes three earlier rules in this file, all of which are still above and all of which are now inert for width and offset: section 2 .header-003-v2 .banner-content img.custom-logo top: -80px section 3a img.custom-logo[src*="Lywak-Real-Estate-Logo"] 64.5vw / -83px section 5 the same selector again 66.5vw / -88px They are left in place deliberately. 3a and 5 also carry margin-bottom values that compensate for the logo's height so the content below the hero does not shift, and those are NOT superseded — they are still doing that job. Deleting those rules to "tidy up" would move everything under the hero. The offsets are in vh, not pixels, because the hero is as tall as the window and the photograph is sized with cover, so the wall and the sofa both move as the window changes shape. Sampling brightness down the middle of the 1600x900 image: ceiling and spotlights to 8.9%, the accent wall 8.9% to 50.7%, the back of the sofa from 50.7% on. The logo belongs between 15% and 47%, centred on 31% — and because the hero fills the window height, that 31% mark tracks vh. The 25px in each offset is measured on the logo's CENTRE, which is the only reading that survives a resize: scaling a centred logo moves its top and bottom edges in opposite directions while the centre stays put. That is also why resizing needs no change to the offsets — the logo shrinks around the same point on the wall. Verified: centre Y is 293px at 1920 and 212px at 1024, identical before and after this change. Measured with the current values. The last two columns are the logo's top and bottom edges as a percentage of the hero's height, before and after the 40px lift: logo top-bottom was top-bottom now 1920 x 1080 454 wide 21.7 - 36.8 17.7 - 32.8 1440 x 900 456 wide 19.3 - 37.8 15.3 - 33.8 1024 x 768 427 wide 20.4 - 41.1 14.6 - 35.3 768 x 1024 455 wide 21.5 - 37.7 17.6 - 33.7 375 x 667 198 wide 24.0 - 35.2 18.0 - 29.2 The wall runs 8.9% to 50.7%, so all five are still on it, and the lift takes every one of them further from the sofa. TWO ARE NOW TIGHT AT THE TOP, and you should know which. 1024 x 768 sits at 14.6% and 1440 x 900 at 15.3%, against the 15% I had been treating as the comfortable limit. Neither is in the spotlights — at 1024 x 768 there are still about 39px of plain wall above the logo — but they are the two shapes where a further lift would start to crowd the ceiling. A short, wide window is the case to watch. If you want those two to keep a clear 15%, change the constant in the tablet band from -15px to -10px. That gives up 5px of the lift at tablet sizes only and leaves the other three bands alone. ========================================================================== */ /* ========================================================================== DESKTOP — 1025px and up ========================================================================== */ /* 0.9467 * 1.2 = 1.1360, * 0.8 = 0.9088, * 0.9 = 0.8179. To resize again, multiply this number by the change rather than replacing it. */ @media (min-width: 1025px) { .header-003-v2 .banner-content img.custom-logo { position: relative !important; width: calc(var(--custom-logo-size) * 0.8179) !important; max-width: 100% !important; height: auto !important; top: calc(-21.5vh - 15px) !important; z-index: 2 !important; } } /* ========================================================================== TABLET — 769px to 1024px ========================================================================== */ /* 0.85 * 1.2 = 1.02, then * 0.8 = 0.816. Not reduced with the desktop band — see the note in the section header. */ @media (min-width: 769px) and (max-width: 1024px) { .header-003-v2 .banner-content img.custom-logo { position: relative !important; width: calc(var(--custom-logo-size) * 0.816) !important; max-width: 100% !important; height: auto !important; top: calc(-20.5vh - 15px) !important; z-index: 2 !important; } } /* ========================================================================== PHONES — 391px to 768px ========================================================================== */ /* 1.15 * 1.2 = 1.38, then * 0.8 = 1.104. */ @media (min-width: 391px) and (max-width: 768px) { .header-003-v2 .banner-content img.custom-logo { position: relative !important; width: calc(var(--custom-logo-size) * 1.104) !important; max-width: 100% !important; height: auto !important; top: calc(-21vh + 25px) !important; z-index: 2 !important; } } /* ========================================================================== SMALL PHONES — 390px and below ========================================================================== */ /* 1.05 * 1.2 = 1.26. At 375px the logo renders 248px wide with 64px of clear screen either side, and the REAL ESTATE line stays legible. */ @media (max-width: 390px) { .header-003-v2 .banner-content img.custom-logo { position: relative !important; width: calc(var(--custom-logo-size) * 1.008) !important; max-width: 100% !important; height: auto !important; top: calc(-21vh + 25px) !important; z-index: 2 !important; } } /* ========================================================================== 8. FOOTER PHOTO CREDITS — make them visible again The credits were not hidden behind anything and not the wrong colour. The container computed as opacity: 0 with transform: translateY(127.1px) — the theme's own .fx .slide-in-up .fade-in scroll-reveal sitting in its starting state, waiting for an animation that never runs. The observer never fires because the credit block is lifted into the footer by a negative offset and carries a negative bottom margin, so it never travels through the viewport the way the observer expects. The 127px matters as much as the opacity. With the transform applied the credit sat six pixels BELOW the black footer, on the white strip. Clearing it drops the credit back inside the footer where it belongs, so this one fix does both jobs. NO MEDIA QUERY, ON PURPOSE. The version that was in an earlier copy of your stylesheet sat inside @media (min-width: 769px), which left the credits invisible on phones for exactly the same reason. The reveal behaves the same at every width, so the fix belongs at every width. The selector is position-based — the html block immediately after the footer block — so it covers every page that has a credit and can reach nothing else. ========================================================================== */ .footer-011 + .html-001.inverted .container.fx, .footer-011 + .html-001.inverted .container.fx.slide-in-up.fade-in, .footer-011 + .html-001.inverted .with-smart-bg-outer.fx, .footer-011 + .html-001.inverted .with-smart-bg-outer.fx.fade-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* The credit's own backdrop layer, which the block carries twice. Left opaque it paints over the EXPLORE links to its left once the credit is lifted into the footer. */ .footer-011 + .html-001.inverted .with-smart-bg-outer, .footer-011 + .html-001.inverted .with-smart-bg { background: transparent !important; } /* ========================================================================== 9. PHONE MENU — the panel that slides in from the hamburger (added 2 October 2026) The theme's default was a charcoal panel with small grey-white text in ordinary case, grey divider lines, grey arrows and an empty grey strip across the top. Restyled to match the rest of the site: · Panel ........... the site's near-black (#111111), the same as the navigation bar and footer. · Top strip ....... your LYWAK logo, left-aligned with the menu items, with a fine gold line under it. Inside Search, Buy or Sell the strip shows that section's name in Oswald capitals with a gold back arrow instead. · Items ........... Oswald capitals with a little letter spacing, like the desktop menu and the page headings; 56px rows, a comfortable size to tap. Gold when tapped or hovered. · Dividers ........ faint warm hairlines. · Arrows .......... gold. Nothing about how the menu opens, slides or links has changed — styling only. It is the same menu on every page, which is why it lives here in the master template rather than in a page's own field. The theme marks no "current page" item in this menu, so no item is highlighted for the page you are on. The logo is loaded from your site's own media library (the same file as the LYWAK logo in the inner pages' navigation bar). If you ever replace that file, copy the new image address into the url(...) below. Checked on a 390px phone, top level and inside Search. ========================================================================== */ /* Panel colour: the site's near-black. */ .mm-ocd .mm-spn.mm-spn--dark, .mm-ocd .mm-spn.mm-spn--dark ul { background-color: #111111 !important; color: #F2EEE7 !important; } .mm-ocd .mm-spn { --mm-spn-item-height: 56px !important; } .mm-ocd .mm-ocd__content { background-color: #111111 !important; } /* Top strip: taller, solid, with a fine gold line under it. */ .mm-ocd .mm-spn.mm-spn--navbar::after { height: 72px !important; line-height: 72px !important; opacity: 1 !important; box-shadow: inset 0 -1px 0 rgba(159, 118, 43, 0.55) !important; font-family: Oswald, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #ffffff !important; } /* The menu starts below the taller strip. The theme's own grey line under the strip is removed, so the gold line is the only one. */ .mm-ocd .mm-spn.mm-spn--navbar ul { top: 73px !important; } .mm-ocd .mm-spn.mm-spn--navbar ul::before { display: none !important; } /* LYWAK logo in the strip, on the top level only. Inside Search, Buy or Sell the strip shows that section's name and a back arrow instead. */ .mm-ocd .mm-spn.mm-spn--navbar.mm-spn--main::after { content: "" !important; background-image: url("https://josef-lywak.myrealpagewebsite.com/_media/ChatGPT%20Image%20Aug%2026,%202026,%2009_54_10%20PM.png") !important; background-repeat: no-repeat !important; background-position: 24px center !important; background-size: auto 36px !important; } /* Back arrow in a sub-menu: gold, centred in the taller strip. */ .mm-ocd .mm-spn.mm-spn--navbar::before { top: 37px !important; border-color: #B58A2A !important; opacity: 1 !important; } /* Menu items: Oswald capitals, like the desktop menu and headings. */ .mm-ocd .mm-spn li > a, .mm-ocd .mm-spn li > span { font-family: Oswald, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 24px !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #F2EEE7 !important; padding: 16px 24px !important; transition: color 0.15s ease !important; } .mm-ocd .mm-spn li > a:hover, .mm-ocd .mm-spn li > a:focus-visible, .mm-ocd .mm-spn li > a:active { color: #C9A35A !important; } /* Divider lines between items: a faint warm hairline. */ .mm-ocd .mm-spn li::after { opacity: 1 !important; border-top-color: rgba(242, 238, 231, 0.09) !important; margin-left: 24px !important; } /* The thin divider beside Search / Buy / Sell, and their arrows. */ .mm-ocd .mm-spn li.has-submenu > a::after { opacity: 1 !important; border-color: rgba(242, 238, 231, 0.09) !important; background-color: rgba(242, 238, 231, 0.09) !important; } .mm-ocd .mm-spn li.has-submenu::before { border-color: #B58A2A !important; opacity: 1 !important; } /* ========================================================================== 10. FOOTER — BOYES GROUP REALTY INC. LOGO (added 2 October 2026) Replaces the typed heading "BOYES GROUP REALTY INC." in the footer with the Boyes Group Realty Inc. logo, in white so it reads on the black footer. Every page, every screen size. The logo is built into this CSS (the long block of letters in url(...) below is the image itself), so there is nothing to upload to your media library and nothing that can break if a file is moved. It is a white version of the logo you sent, trimmed of its empty margins. · 230px wide (about 42px tall) — close to the width of the old heading, so the address and PRIVACY POLICY button below stay where they were. · Top edge level with the top of your LYWAK logo's gold border opposite it on a computer (2px lower than flush, the same setting the old heading had). · The words "Boyes Group Realty Inc." are still there for screen readers and search engines — only hidden from view, so the logo stands in for them. · Fades slightly on hover, as a cue that it can be clicked. · Levelled: the logo file you sent was tilted about half a degree (left end about 4px lower than the right at full size). The built-in image below has been turned 0.54° so the lettering sits dead level. The canvas size and centre are unchanged, so nothing around it moves. The home page picks this up from the master template too. CLICKING IT: CSS cannot make something clickable. The small script footer-boyes-link.txt does that — it opens boyesgrouprealty.com in a new tab. The logo shows without it; it just will not be a link. ========================================================================== */ .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3 { display: block !important; width: 230px !important; max-width: 100% !important; height: 42px !important; margin-top: 9px !important; margin-bottom: 2px !important; left: 0 !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; white-space: nowrap !important; overflow: hidden !important; background-image: url("data:image/png;base64,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") !important; background-repeat: no-repeat !important; background-position: left top !important; background-size: contain !important; transition: opacity 0.15s ease !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3 a { display: block !important; width: 100% !important; height: 100% !important; font-size: 0 !important; color: transparent !important; text-decoration: none !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3:hover { opacity: 0.8 !important; } /* ========================================================================== 11. SIGN UP / CREATE AN ACCOUNT — the pop-up form (added 2 October 2026) The Sign up form opens as a pop-up from any page — Signup on the login page, "No account? Sign up here.", and the listing pages when someone tries to save a home — so its styling lives here in the master template rather than in one page's field. Styling only. Every field, checkbox, the email-consent wording, the Terms and Privacy links, and how the form submits are unchanged. · Pop-up window ... square corners and the site's soft card shadow; the close (X) button in the site's near-black, gold on hover. CONTACT | SIGNUP | LOGIN across the top as small gold capitals instead of the theme's blue. (These three touches also apply to the Login and Contact pop-ups, so all three match.) · Heading ......... SIGN UP in Oswald capitals with the short 64px gold rule, the X / Google / Facebook buttons in a row under it — the same as the Member Login page. · Fields .......... labels above the boxes in small spaced capitals, required-field stars in gold, 48px boxes with a warm beige outline that turns gold when you click in. First/last name, email/phone and the two passwords sit in pairs on a computer, so the form is about half as long; on phones they stack one per line. · "I am in the market for" — the six options in a neat grid (three across, two on phones) with gold tick boxes. · Fine print ...... the consent and terms lines in a smaller, softer grey, with gold links; dividers are fine warm hairlines. · Buttons ......... SIGNUP in solid gold and CANCEL in gold outline, side by side across the full width. Checked on a computer at 1232px. ========================================================================== */ /* ---------- The pop-up window (shared by Signup, Login, Contact) ---------- */ .mrp-popup.mrp-vow-form { font-family: Roboto, sans-serif !important; border-radius: 0 !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important; } .mrp-popup.mrp-vow-form .mrp-vow-link-toolbar { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; row-gap: 6px !important; text-align: center !important; } .mrp-popup.mrp-vow-form .mrp-vow-link-toolbar > a { padding: 0 14px !important; border: 0 !important; font-family: Roboto, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #8A6624 !important; text-decoration: none !important; } .mrp-popup.mrp-vow-form .mrp-vow-link-toolbar > a + a { border-left: 1px solid #D6C7A8 !important; } .mrp-popup.mrp-vow-form .mrp-vow-link-toolbar > a:hover { color: #141414 !important; } .mrp-popup.mrp-vow-form .mrp-vow-link-subbar { flex: 0 0 100% !important; } .mrp-popup.mrp-vow-form .mrp-vow-link-subbar a { font-size: 13px !important; color: #6B6B6B !important; text-decoration: underline !important; text-decoration-color: #D6C7A8 !important; text-underline-offset: 3px !important; } /* Close (X) button: the site's near-black, gold on hover. */ .mrp-popup.mrp-vow-form a.mrp-popup-close { background-color: #111111 !important; border-radius: 0 !important; transition: background-color 0.15s ease !important; } .mrp-popup.mrp-vow-form a.mrp-popup-close:hover { background-color: #9F762B !important; } /* ---------- Sign up form ---------- */ .mrp-vow-signup-form { font-family: Roboto, sans-serif !important; color: #1F1F1F !important; } /* SIGN UP heading, short gold rule, social buttons under it. */ .mrp-vow-signup-form .mrp-form-title-main { display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 8px 0 26px !important; font-family: Oswald, sans-serif !important; font-size: 40px !important; font-weight: 300 !important; line-height: 1.2 !important; text-transform: uppercase !important; color: #141414 !important; } .mrp-vow-signup-form .mrp-form-title-main::after { content: "" !important; order: 1 !important; display: block !important; width: 64px !important; height: 2px !important; margin-top: 16px !important; background-color: #9F762B !important; } .mrp-vow-signup-form .vow-dialog-social { order: 2 !important; display: flex !important; gap: 10px !important; float: none !important; position: static !important; margin: 22px 0 0 !important; } .mrp-vow-signup-form .vow-dialog-social a { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 0 !important; } /* Labels above the fields, full width. */ .mrp-vow-signup-form .form-group { display: block !important; margin: 0 0 16px !important; } .mrp-vow-signup-form .form-group > .control-label, .mrp-vow-signup-form .form-group > .controls, .mrp-vow-signup-form .mrp-vow-signup-duration > * { float: none !important; display: block !important; width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; } .mrp-vow-signup-form .control-label { margin: 0 0 7px !important; font-family: Roboto, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #1F1F1F !important; } .mrp-vow-signup-form .mrp-form-field-required-symbol, .mrp-vow-signup-form .mrp-form-field-required-symbol::after, .mrp-vow-signup-form .mrp-form-field-required-symbol::before { color: #9F762B !important; } .mrp-vow-signup-form input.form-control, .mrp-vow-signup-form select { height: 48px !important; padding: 0 14px !important; font-family: Roboto, sans-serif !important; font-size: 16px !important; color: #141414 !important; background-color: #ffffff !important; border: 1px solid #CFC6B8 !important; border-radius: 0 !important; box-shadow: none !important; } .mrp-vow-signup-form input.form-control:focus, .mrp-vow-signup-form select:focus { border-color: #9F762B !important; outline: 1px solid #9F762B !important; outline-offset: 0 !important; box-shadow: none !important; } /* Names, email/phone and the two passwords in pairs, side by side, on anything wider than a phone — the form is half as long that way. */ .mrp-vow-signup-form .mrp-vow-signup-section-basic > * { min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } @media (min-width: 576px) { .mrp-vow-signup-form .mrp-vow-signup-section-basic { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px !important; } .mrp-vow-signup-form .mrp-vow-signup-section-basic > .mrp-vow-signup-duration { grid-column: 1 / -1 !important; } } /* "Duration: 30 days" — small and quiet. */ .mrp-vow-signup-form .mrp-vow-signup-duration { margin: -6px 0 6px !important; font-size: 13px !important; color: #6B6B6B !important; } /* Hairlines between the parts of the form. */ .mrp-vow-signup-form .mrp-form-separator { height: 0 !important; margin: 20px 0 !important; border: 0 !important; border-top: 1px solid #E2DCD2 !important; background: none !important; } /* "I am in the market for" — label on top, options in a tidy grid. */ .mrp-vow-signup-form .mrp-vow-in-market-for > .control-label { float: none !important; display: block !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; text-align: left !important; } .mrp-vow-signup-form .mrp-vow-in-market-for-values { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px 16px !important; float: none !important; width: 100% !important; margin: 0 !important; } .mrp-vow-signup-form .mrp-vow-in-market-for-values > div { display: contents !important; } .mrp-vow-signup-form .mrp-vow-in-market-for-values label, .mrp-vow-signup-form .mrp-vow-working-with-agent-label { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; font-family: Roboto, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #1F1F1F !important; } .mrp-vow-signup-form input[type="checkbox"] { width: 17px !important; height: 17px !important; margin: 0 !important; flex: 0 0 auto !important; accent-color: #9F762B !important; } /* "Are you currently working with an agent?" */ .mrp-vow-signup-form .mrp-vow-working-with-agent { margin: 20px 0 4px !important; } .mrp-vow-signup-form .mrp-vow-working-with-agent > div { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 14px !important; float: none !important; width: 100% !important; padding: 0 !important; } .mrp-vow-signup-form .mrp-vow-working-with-agent select { width: auto !important; min-width: 140px !important; height: 44px !important; } /* Email consent and terms — the fine print. */ .mrp-vow-signup-form .mrp-marketing-consent label { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 !important; font-weight: 400 !important; } .mrp-vow-signup-form .mrp-marketing-consent input[type="checkbox"] { margin-top: 2px !important; } .mrp-vow-signup-form .mrp-marketing-consent small, .mrp-vow-signup-form .mrp-vow-agree-to-terms, .mrp-vow-signup-form .mrp-vow-agree-to-terms * { font-family: Roboto, sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #555555 !important; } .mrp-vow-signup-form .mrp-vow-agree-to-terms a, .mrp-vow-signup-form .mrp-marketing-consent a { color: #8A6624 !important; text-decoration: underline !important; text-decoration-color: rgba(159, 118, 43, 0.4) !important; text-underline-offset: 3px !important; } /* SIGN UP (gold) and CANCEL (gold outline), side by side, full width. */ .mrp-vow-signup-form .mrp-popup-button-bar { display: flex !important; flex-direction: row-reverse !important; gap: 12px !important; margin: 24px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .mrp-vow-signup-form .mrp-popup-button-bar .sending-msg { float: none !important; } .mrp-vow-signup-form .mrp-popup-button-bar button, .mrp-vow-signup-form .mrp-popup-button-bar a.btn { flex: 1 1 0 !important; float: none !important; width: auto !important; max-width: none !important; height: 50px !important; margin: 0 !important; padding: 0 20px !important; font-family: Roboto, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; border-radius: 0 !important; box-shadow: none !important; background-image: none !important; text-shadow: none !important; transition: background-color 0.2s linear, color 0.2s linear !important; } .mrp-vow-signup-form .mrp-popup-button-bar .mrp-form-button-ok { flex: 1.4 1 0 !important; color: #ffffff !important; background-color: #9F762B !important; border: 1px solid #9F762B !important; } .mrp-vow-signup-form .mrp-popup-button-bar .mrp-form-button-ok:hover { background-color: #86601F !important; border-color: #86601F !important; } .mrp-vow-signup-form .mrp-popup-button-bar button:not(.mrp-form-button-ok), .mrp-vow-signup-form .mrp-popup-button-bar a.btn:not(.mrp-form-button-ok) { color: #9F762B !important; background-color: #ffffff !important; border: 1px solid #9F762B !important; } .mrp-vow-signup-form .mrp-popup-button-bar button:not(.mrp-form-button-ok):hover, .mrp-vow-signup-form .mrp-popup-button-bar a.btn:not(.mrp-form-button-ok):hover { background-color: #F7F2E9 !important; } @media (max-width: 575px) { .mrp-vow-signup-form .mrp-form-title-main { font-size: 34px !important; } .mrp-vow-signup-form .mrp-vow-in-market-for-values { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================================== 12. FOOTER — EVEN SPACING, DESKTOP AND PHONES (added 2 October 2026) Measured on the live footer (Buying page, 1366px and a 390px phone), to the drawn edges of the logos and text: COMPUTER, before: footer top -> LYWAK logo border ............ 39px PRIVACY POLICY -> EXPLORE .................. 66px last EXPLORE link -> bottom of footer ...... 10px <- cramped The bottom of the footer was four times tighter than the top, and the gap above EXPLORE was oversized. COMPUTER, after: footer top -> LYWAK logo border ............ 39px PRIVACY POLICY -> EXPLORE .................. 48px last EXPLORE link -> bottom of footer ...... 30px (about 38px to the letters — matching the top) PHONES, before: top 39 · contact -> EXPLORE 33 · last link -> BOYES 30 · bottom 20 PHONES, after: top 39 · contact -> EXPLORE 40 · last link -> BOYES 40 · bottom 32 The two section breaks are now the same, and the bottom matches the top. Nothing moves sideways, and the logos, links, address and photo credits keep their sizes. Overrides the older footer values in sections 2 and 3g simply by coming after them. ========================================================================== */ @media (min-width: 769px) { .footer-011 .block-row { row-gap: 12px !important; } .footer-011 .block-bottom-space { height: 30px !important; } } @media (max-width: 768px) { .footer-011 .block-top-space { height: 32px !important; } .footer-011 .block-bottom-space { height: 32px !important; } .footer-011 .block-row > .block-column:nth-child(3) { margin-top: 9px !important; } .footer-011 .block-row > .block-column:nth-child(4) { margin-top: 0 !important; } } /* ========================================================================== 13. FOOTER — THE TWO BRAND BLOCKS SPACED ALIKE (added 2 October 2026) The two brand blocks at the top of the footer — your LYWAK logo, name and contact line on the left, the BOYES GROUP logo, address and PRIVACY POLICY on the right — now use the same spacing as each other. Measured to the drawn edges of the logos and the letters: COMPUTER before after top of the two logos 39 / 41px 39 / 39 (level) logo -> first text line 22 / 16 30 / 30 text -> next item 31 / 31 31 / 31 So on both sides, and on computers and phones alike, the rhythm is the same: logo, 30px, first line of text, 31px, the next item. (Checked at 1920, 1366 and 1024px and on a 390px phone.) PHONE logo -> first text line 38 / 24 30 / 30 text -> next item 31 / 31 31 / 31 ADDRESS LINES ON PHONES: "714 Duchess St" and "Saskatoon, SK, S7K 0R3" had 17px between them on a phone (4px on a computer), so they read as two separate items rather than one address. Now 4px on both. On a computer your name sat closer under your logo (22px) than your contact line sat under your name (31px), and the Boyes logo sat 2px low and tight on the address; on a phone your name sat further below your logo than the address sat below the Boyes logo. All of it now matches. ========================================================================== */ @media (min-width: 769px) { .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3 { margin-top: 7px !important; } .footer-011 .block-row > .block-column:first-child .content-container { gap: 14px !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-points { margin-top: 22px !important; } } @media (max-width: 768px) { .footer-011 .block-row > .block-column:first-child .content-container { gap: 16px !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-points { margin-top: 22px !important; row-gap: 4px !important; } } /* ========================================================================== 14. FOOTER — LOGO SIZES AND THE EXPLORE LINKS (added 2 October 2026) 1. LOGO SIZES — your logo leads, Boyes Group second. The Boyes Group logo (230px wide, bold white) had been reading larger than your LYWAK logo (about 160px of drawn border), putting the brokerage ahead of your brand. COMPUTER LYWAK 160 x 41 -> 187 x 47 (about 15% larger) BOYES 230 x 42 -> 185 x 34 (about 20% smaller) PHONE LYWAK 163 x 42 -> 188 x 47 BOYES 230 x 42 -> 185 x 34 The tops of the two logos stay level on a computer, and the even rhythm under each is kept: logo, 30px, first line, 31px, next item (this section re-states the gaps that make that true at the new sizes, so it overrides the matching values in the section above). 2. EXPLORE LINKS (computer only — phones keep their single list). The six links were in the order the menu happens to list them, read down each column, which mixed buying, selling and "about" pages. Now each COLUMN is one theme, and each ROW reads sensibly too: SEARCH LISTINGS HOME EVALUATION COMMUNITIES BUYER'S GUIDE SELLER'S GUIDE MEET JOSEF column 1 = buying · column 2 = selling · column 3 = area & you row 1 = the tools · row 2 = the guides and about Same three column positions and spacing as before. The links are picked out by their position in the list (1st = Meet Josef ... 6th = Home Evaluation); if you ever add, remove or reorder links in the footer editor, tell me and I will update the order. 3. YOUR NAME AND CONTACT LINE. The two blocks now mirror each other line for line: LYWAK logo BOYES GROUP logo 30px 30px Josef Lywak 714 Duchess St (same visible gap) (same visible gap) phone · email Saskatoon, SK, S7K 0R3 Your phone/email line sits under your name with the same VISIBLE gap as the second address line under the first. Measured line to line it is 33.6px against the address's 29.6px: the extra 4px makes up for the "y" in Lywak dipping below the line and the gold phone and envelope icons standing taller than the letters, which made an equal measurement look tighter on your side. The Boyes Group side is unchanged. Checked at 1920, 1366 and 1024px and on a 390px phone. ========================================================================== */ @media (min-width: 769px) { div:has(> img[alt="LYWAK Footer Logo"]), div:has(> a > img[alt="LYWAK Footer Logo"]), div:has(> picture > img[alt="LYWAK Footer Logo"]) { width: 203px !important; } .footer-011 .block-row > .block-column:first-child .content-container { gap: 13px !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3 { width: 185px !important; height: 34px !important; margin-top: 9px !important; } /* Your name to your phone/email: the same VISIBLE gap as between the two Boyes Group address lines opposite. 4px more than the address's line-to-line spacing, because the "y" in Lywak dips below the line and the gold phone and envelope icons stand taller than the letters — both ate into the gap and made it look tighter at an equal measurement. */ .footer-011 .block-row > .block-column:first-child .contact-info-container { margin-top: -7.4px !important; } /* EXPLORE links: three themed columns. */ .footer-011 .info-list.col-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-count: auto !important; column-gap: 24px !important; row-gap: 0 !important; } .footer-011 .info-list.col-3 > .list-item { margin-top: 0 !important; } .footer-011 .info-list.col-3 > .list-item:nth-child(2) { order: 1 !important; } /* Search Listings */ .footer-011 .info-list.col-3 > .list-item:nth-child(6) { order: 2 !important; } /* Home Evaluation */ .footer-011 .info-list.col-3 > .list-item:nth-child(3) { order: 3 !important; } /* Communities */ .footer-011 .info-list.col-3 > .list-item:nth-child(4) { order: 4 !important; } /* Buyer's Guide */ .footer-011 .info-list.col-3 > .list-item:nth-child(5) { order: 5 !important; } /* Seller's Guide */ .footer-011 .info-list.col-3 > .list-item:nth-child(1) { order: 6 !important; } /* Meet Josef */ } @media (max-width: 768px) { div:has(> img[alt="LYWAK Footer Logo"]), div:has(> a > img[alt="LYWAK Footer Logo"]), div:has(> picture > img[alt="LYWAK Footer Logo"]) { height: 66px !important; } img[alt="LYWAK Footer Logo"] { height: 66px !important; } .footer-011 .block-row > .block-column:first-child .content-container { gap: 14px !important; } .footer-011 .block-row > .block-column:nth-child(4) .address-info-container h3 { width: 185px !important; height: 34px !important; } /* Your name to your phone/email: the same VISIBLE gap as between the two Boyes Group address lines opposite. 4px more than the address's line-to-line spacing, because the "y" in Lywak dips below the line and the gold phone and envelope icons stand taller than the letters — both ate into the gap and made it look tighter at an equal measurement. */ .footer-011 .block-row > .block-column:first-child .contact-info-container { margin-top: -15.4px !important; } /* Optical left edge on phones: each line's visible ink now starts on the same line as the LYWAK logo's gold border. Letters and icons carry a little built-in space on their left, so with every box lined up the text still read 1-3px to the right of the logo. Measured ink offsets at 390px: name 1.3px, phone icon 2.8px, EXPLORE 1.3px, address lines about 0.5px — each is pulled back by that much. */ .footer-011 .block-row > .block-column:first-child .content-container .content > *:not(.contact-info-container) { position: relative !important; left: -1.3px !important; } .footer-011 .block-row > .block-column:first-child .contact-info-container { position: relative !important; left: -2.8px !important; } .footer-011 .block-row > .block-column:nth-child(3) .title { position: relative !important; left: -1.3px !important; } /* The six EXPLORE links (MEET JOSEF ... HOME EVALUATION) stay where the theme puts them — pulled back with the rest they read slightly too far left, so they are left unshifted. */ .footer-011 .block-row > .block-column:nth-child(4) .address-points { position: relative !important; left: -0.5px !important; } /* The two address lines as one address: 4px apart, as on a computer (the theme's phone value was 17px). Re-stated here so it applies even if an earlier copy of section 13 without it is in place. */ .footer-011 .block-row > .block-column:nth-child(4) .address-points { row-gap: 4px !important; } } /* ========================================================================== 15. PHONE BAR — MENU ICON MIRRORS THE LOGO (added 2 October 2026) The hamburger (menu) icon now sits exactly as far from the RIGHT edge of the screen as the LYWAK logo's gold border sits from the LEFT edge, on phones and tablets. Measured to the drawn lines of the icon: logo from left menu icon from right before 28 - 61px 36 - 101px (drifting further in as the screen widened) after 28 - 61px 28 - 61px (equal at 360, 390, 430 and 768px, on the home page and inner pages) The logo's distance is 8% of the screen width (less a little), so the icon's shift is written the same way and stays matched at every size. Only the icon moves — the bar, its height, the logo and the menu that opens are unchanged. Computers are unaffected. ========================================================================== */ @media (hover: none) and (pointer: coarse), (max-width: 768px) { .top-bar .vmenu-opener { transform: translateX(calc(8vw + 5.4px)) !important; } } /* ========================================================================== 16. PHONE BAR — 48px TRIAL (added 2 October 2026) THE PHONE BAR, SLIGHTLY TALLER — a trial; delete this whole section to go back to the slim 43px bar exactly as it was. bar ............ 43px -> 48px LYWAK logo ..... 33px -> 37px tall (99 -> about 111px wide), so the REAL ESTATE line under it is a little more legible menu icon ...... 20px -> 22px, re-centred in the taller bar, and set 1.5px in from a strict mirror of the logo so the two edges look balanced inner pages .... the banner photo still starts right under the bar Phones and tablets only; computers are unchanged. The phone menu that slides out is unchanged. ========================================================================== */ @media (hover: none) and (pointer: coarse), (max-width: 768px) { /* The bar: 43px -> 48px. */ .outter-top-bar, .outter-top-bar.sticky, .outter-top-bar .top-bar, .outter-top-bar.sticky .top-bar, .top-bar > a.name-container, .top-bar > .menu-container, .top-bar .vmenu-opener { height: 48px !important; min-height: 48px !important; max-height: 48px !important; } /* LYWAK logo: 33px -> 37px tall (about 111px wide), still 5.5px clear above and below. The box grows by the same 12px so the logo has room, and the left edge stays lined up with the footer logo. */ .header-003-master-v2 .top-bar a.name-container, body.index .header-003-v2 .top-bar a.name-container { width: calc(8vw + 110px) !important; min-width: calc(8vw + 110px) !important; max-width: calc(8vw + 110px) !important; padding-left: calc(8vw - 3.5px) !important; } .header-003-master-v2 .top-bar a.name-container img.custom-logo, body.index .header-003-v2 .top-bar a.name-container img.custom-logo { height: 37px !important; max-height: none !important; width: auto !important; max-width: none !important; } /* Menu icon: 20px -> 22px to keep its weight against the larger logo. Set 1.5px further in than a strict mirror of the logo's border: the icon is three solid bars, while the logo's edge is a fine gold outline with the lettering set inside it, so at an exactly equal measurement the icon looked too far right. To nudge again, change only the 4.15px (smaller = further left). */ .top-bar .vmenu-opener svg { width: 22px !important; height: 22px !important; } .top-bar .vmenu-opener { transform: translateX(calc(8vw + 4.15px)) !important; } /* Inner pages: the content under the bar is pulled up by the space the theme reserves (80px) minus the bar's height — now 80 - 48 = 32px. */ .header-003-master-v2 .outer-menu { margin-bottom: -32px !important; } } /* ========================================================================== 17. SLIMMER MENU BAR ON COMPUTERS (added 2 October 2026) Computers only (mouse or trackpad, 769px and wider). Phones, and touch tablets, already use the slim phone bar and are untouched. Bar ......... 64px tall (was 80px) — what 80% zoom gave you Logo ........ 147 x 49 (was 184 x 61), 80% Menu words .. 14px (was 16px). 80% zoom made them 12.8px; 14px keeps them easy to read. For the exact 80% look, use 13px. Logo and menu words stay centred in the bar (checked: centre of logo and words within 1px of the bar's centre, home and inner pages). Page content under the inner-page banners does not move. To change the bar height, edit the two 64px together. 48px would match the phone bar exactly but leaves the 14px words cramped on a computer. ========================================================================== */ @media (min-width: 769px) and (hover: hover) and (pointer: fine) { /* Bar height. The theme reads this number for the bar, the logo box, the sticky bar, and (home page) the photo height above the bar. */ .header-003-v2 .inner-container, .header-003-master-v2 .inner-container { --menu-height: 64px !important; --menu-height-fixed: 64px !important; } /* LYWAK logo in the bar: 80% of its old size (was 184 x 61). */ .header-003-v2 .top-bar a.name-container img.custom-logo, .header-003-master-v2 .top-bar a.name-container img.custom-logo { width: 147px !important; height: 49px !important; max-width: none !important; max-height: none !important; } /* Menu words: 14px (was 16px). */ .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li > a, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li > a { font-size: 14px !important; } /* ---------- Alignment (added 3 October) ---------- Measured on the home, Buying and Communities pages at 1100, 1349, 1600 and 1920 wide, and with the bar stuck to the top while scrolling: · the LYWAK lettering starts exactly on the page's left content edge · the end of CONTACT finishes exactly on the right content edge · logo and menu words are centred top-to-bottom in the bar (±0.3px) 1. The bar was laid out across the full window INCLUDING the scrollbar (100vw), while the page below is laid out without it — so the whole bar sat 7.5px right of the page. This lines the two up. */ .header-003-v2 .outter-top-bar, .header-003-master-v2 .outter-top-bar { left: 0 !important; right: 0 !important; width: auto !important; } /* 2. LYWAK logo: the old 17px nudge left is replaced by -3.66px, which is just the logo image's own transparent margin, so the gold border starts on the content edge. top centres it in the 64px bar (the home page's bar positions its logo slightly differently, hence its own number). */ html body .header-003-master-v2 .top-bar a.name-container img.custom-logo { position: relative !important; left: -3.66px !important; top: 2.65px !important; transform: none !important; } html body.index .header-003-v2 .top-bar a.name-container img.custom-logo { position: relative !important; left: -3.66px !important; top: 0.25px !important; transform: none !important; } /* 3. Menu: the last item (CONTACT) carried empty padding on its right, so it stopped short of the edge. Removing it lets the whole row slide right until CONTACT ends on the content edge. top: 1.7px centres the capital letters in the bar — they sat 2.7px high. */ .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li:last-child, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li:last-child { padding-right: 0 !important; } .header-003-v2 .top-bar nav.hmenu, .header-003-master-v2 .top-bar nav.hmenu { position: relative !important; top: 1.7px !important; /* was 2.7px with Roboto; Lato (section 18) sits 1px lower in its line */ } /* ---------- Menu refinements (added 3 October) ---------- */ /* 4. Spaced capitals, 1px — the same feel as the site's buttons and gold labels. The last item takes back the 1px of spacing after its final letter so CONTACT still ends exactly on the content edge. */ .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li > a, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li > a { letter-spacing: 1px !important; transition: color 0.2s ease !important; } .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li:last-child > a, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li:last-child > a { margin-right: -1px !important; } /* 5. Lighter dropdown arrows (SEARCH, BUY, SELL): 18px instead of 24px, drawn with a thin rounded line instead of the theme's heavy solid chevron, and centred on the words. */ .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li.has-submenu::after, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li.has-submenu::after { width: 18px !important; height: 18px !important; align-self: center !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; transition: background-color 0.2s ease !important; } /* 6. Gold on hover — words and arrows turn the brand gold. */ .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li:hover > a, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li:hover > a { color: #9F762B !important; } .header-003-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li.has-submenu:hover::after, .header-003-master-v2 .top-bar nav.hmenu .mrp-menu-level-0 > li.has-submenu:hover::after { background-color: #9F762B !important; } } /* ========================================================================== 18. MENU BAR FONT — LATO (added 3 October 2026) First step of the font change (option D): the menu words in the black bar — HOME to CONTACT — and the drop-down menus under SEARCH, BUY and SELL are set in Lato instead of Roboto. Nothing else on the site changes yet; body text, buttons and subtitles stay as they are. Lato is loaded here, so nothing needs adding to the site's head section. Both menus: · computer: the words in the black bar and the drop-downs (measured on the live page: CONTACT still ends exactly on the right content edge, words centred in the bar); · phone: the items in the slide-out menu (HOME, SEARCH, BUY ...) and the section name shown at the top inside SEARCH, BUY or SELL. They were Oswald 17px; Lato is a wider letter, so it is set at 15px to keep the same line length, with the same spaced capitals. TO UNDO: delete this section. The menu goes straight back to Roboto. ========================================================================== */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @media (min-width: 769px) and (hover: hover) and (pointer: fine) { .header-003-v2 .top-bar nav.hmenu a, .header-003-master-v2 .top-bar nav.hmenu a { font-family: 'Lato', 'Roboto', sans-serif !important; font-weight: 400 !important; } } /* Phone slide-out menu (styled in section 9). */ .mm-ocd .mm-spn li > a, .mm-ocd .mm-spn li > span { font-family: 'Lato', 'Roboto', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 1.6px !important; } .mm-ocd .mm-spn.mm-spn--navbar::after { font-family: 'Lato', 'Roboto', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; } /* ========================================================================== 19. SITE FONT — LATO, WITH GOLD SERIF SUBTITLES (added 3 October 2026) Option D, the rest of the site (the menus became Lato in section 18). 1. LATO FOR ALL BODY TEXT. The theme and the page CSS fields ask for "Roboto" by name in about 150 places across 19 pages. Instead of editing every page, the name "Roboto" is pointed at Lato's font files here, so every one of those rules — paragraphs, buttons, forms, the footer, the listings pages, the sign-up and login forms — now draws Lato. Tested on the live site: text asked for as "Roboto" measured exactly the width of Lato. Weights map straight across (Light, Regular, Bold, and the italics); Roboto Medium, used on some buttons and form labels, becomes Lato Regular, the nearest Lato has. 2. GOLD SERIF SUBTITLES. The italic lines under headings — "Preparation. Communication. Results.", "Helping You Move Forward", "Get matched with Saskatoon homes that fit your needs" and the like on 8 pages — are set in Cormorant Garamond italic in the brand gold. Left alone on purpose: · the footer's "Josef Lywak, REALTOR®" — a name line, kept in Lato italic, and the footer spacing is tuned to it; · BUY WITH A CLEAR PLAN / PREPARE FOR A STRONG SALE on the home page and "Mortgage Summary" on the calculator — they share the same theme class but are upright headings, not italic subtitles. font-size-adjust scales the serif up to Lato's letter height, so the lines read at the size they were. Lato is about 5% narrower than Roboto, so some paragraphs end a word earlier on a line. Nothing is positioned by text width, so no layout moves; alignments set to the pixel (menu edge, contact columns, communities chart, home logo) are unaffected. TO UNDO: delete this section. Everything returns to Roboto and the subtitles to their previous style. The menus stay Lato (section 18). ========================================================================== */ /* Roboto Light -> Lato Light */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Regular -> Lato Regular */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Medium -> Lato Regular (Lato has no Medium; Regular is the closest) */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Bold -> Lato Bold */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Italic -> Lato Italic */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Medium Italic -> Lato Italic */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Bold Italic -> Lato Bold Italic */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u_w4BMUTPHjxsI5wq_Gwft.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond Medium Italic, for the subtitles */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-iNM8.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .titles:not(.title-plain) .sub-title:not(.footer-011 .sub-title) { font-family: "Cormorant Garamond", Georgia, serif !important; font-style: italic !important; font-weight: 500 !important; font-size-adjust: 0.46 !important; letter-spacing: 0.01em !important; color: #9F762B !important; } /* ========================================================================== 20. FOOTER — EXPLORE LINKS IN TWO COLUMNS ON PHONES (added 3 October 2026) On phones the six Explore links sit in two columns of three: SEARCH LISTINGS HOME EVALUATION COMMUNITIES SELLER'S GUIDE BUYER'S GUIDE MEET JOSEF Left column is for buyers, right column for sellers, then you. Each column starts with its tool, so the top row holds the two most-used links — the same two that lead the computer footer. Computers keep their three-column layout. ========================================================================== */ @media (max-width: 768px) { html body .footer-011 .info-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(3, auto) !important; grid-auto-flow: column !important; /* fills down, then across */ column-count: auto !important; column-gap: 24px !important; row-gap: 12px !important; /* same spacing as the old list */ } html body .footer-011 .info-list > .list-item, html body .footer-011 .info-list > .list-item + .list-item { width: auto !important; min-width: 0 !important; margin: 0 !important; } /* Left column: buying. Right column: selling, then you. */ html body .footer-011 .info-list > .list-item:nth-child(2) { order: 1 !important; } /* Search Listings */ html body .footer-011 .info-list > .list-item:nth-child(3) { order: 2 !important; } /* Communities */ html body .footer-011 .info-list > .list-item:nth-child(4) { order: 3 !important; } /* Buyer's Guide */ html body .footer-011 .info-list > .list-item:nth-child(6) { order: 4 !important; } /* Home Evaluation */ html body .footer-011 .info-list > .list-item:nth-child(5) { order: 5 !important; } /* Seller's Guide */ html body .footer-011 .info-list > .list-item:nth-child(1) { order: 6 !important; } /* Meet Josef */ } /* ========================================================================== LYWAK.CA — SAVED LISTINGS / VOW SIGNUP PAGE Josef Lywak · lywak.ca Scope: body.vow-signup Spacing and layout only. Colours, type, wording, images, buttons and branding are all left exactly as they are — the page already uses the site's language, so nothing here changes how it sounds or what colour anything is. What it changes is rhythm: the gaps between sections, the three feature cards, and the two-column portrait section. WHERE THIS GOES The Saved Listings page's own CSS field (vow-signup.html). The body class is themeb003-v2 vow-signup blocks-site so every rule here is inert on every other page. UPDATED 2 October 2026 to match Find Your Home exactly. Sections 1-9 are as they were (one value changed, noted in section 1); sections 10-12 are new and are the same finishing Find Your Home was given: 10. the SEARCH SMARTER, DECIDE SOONER title — gold rule, spacing 11. LET'S TALK on phones — room above the footer 12. the portrait heading level with the top of the photo WHY THE FIND YOUR HOME FILE DID NOT WORK HERE. The two pages are built slightly differently. On Find Your Home the title is a block of its own with a gold underline built in; on this page the title is the first line of the intro block (bid_5661276) and has no underline at all. Rules written for one title cannot reach the other, so section 10 here is written for this page's own title. A NOTE ON bid_ IDS The four spacer rules in section 1 are keyed to block ids, because that is the only handle a spacer div has. Those ids belong to these specific blocks — delete a block and rebuild it in the editor and it gets a new id, and that gap silently reverts to the theme default. The ids here: bid_5661276 SEARCH SMARTER, DECIDE SOONER bid_1612673 the three feature cards bid_9817511 the portrait section bid_4485012 Josef Lywak / contact Everything outside section 1 is keyed to classes and does not have this problem. ========================================================================== */ /* ========================================================================== 1. THE RHYTHM BETWEEN SECTIONS TWO THINGS WERE WRONG, both of them only visible on a desktop. First, one gap was less than half the others. Measured at 1440px, the spacing between sections ran 102px, 102px, 102px — and then 44px before the contact block. The eye reads that last section as belonging to the portrait above it rather than standing on its own. The cause is that the theme's spacers are derived from vw while the contact block's is a flat 44px, so they agree at phone widths and drift apart as the window grows: at 430px the four gaps are 31/30/31/32 and look fine, at 1440px they are 102/102/102/44, at 2560px 107/107/107/44. Second, the vw-derived gaps swing too far. 31px at 430 and 107px at 2560 is more than a threefold change in the page's whole rhythm, which is why the page feels tight on a phone and loose on a large monitor. clamp() fixes both: it keeps the theme's proportional behaviour in the middle of the range and stops it at both ends. The gaps now run from about 56px at the narrowest to 88px at the widest, and the contact block gets the same gap as everything else. WHY THE PAIRS. Where two blocks meet, the gap is the bottom spacer of one plus the top spacer of the next, so those are set to half each. The portrait block has no spacers of its own, so its neighbours carry the whole gap on their side. ========================================================================== */ /* Banner -> SEARCH SMARTER. Matched to the room above the page title on Contact, Buying, Communities and Find Your Home (clamp 44-78px, and 40-52px on phones — see section 10). */ body.vow-signup #bid_5661276-top-space { height: clamp(44px, 7vw, 78px) !important; } /* SEARCH SMARTER <-> the three cards. Half each. */ body.vow-signup #bid_5661276-bottom-space, body.vow-signup #bid_1612673-top-space { height: clamp(28px, 3.2vw, 44px) !important; } /* Cards -> portrait. The portrait block has no top spacer, so this one carries the full gap. */ body.vow-signup #bid_1612673-bottom-space { height: clamp(56px, 6.4vw, 88px) !important; } /* ========================================================================== THE FOOTER'S SPACER IS DELIBERATELY NOT TOUCHED. DO NOT ADD IT BACK. An earlier version of this file set body.vow-signup #bid_4485012-top-space { height: clamp(56px, 6.4vw, 88px) } on the reasoning that its 44px was out of step with the ~102px between the other sections. That reasoning was wrong, and the result was a large blank band across the top of the footer. bid_4485012 is the footer itself — its classes are "block-layout layout boxes-200c footer-011 inverted" and its background is #111. So #bid_4485012-top-space is not white space between two sections; it is the dark headroom INSIDE the footer, above the LYWAK logo. Measured: the portrait section ends at y=1839 and the footer begins at y=1839 — the gap between them is 0, and always was. That spacer is also the same element the master template styles as .footer-011 .block-top-space, which is set to 44px on desktop and 32px on mobile so the footer looks identical on every page. Setting it here only breaks that agreement on this one page. The lesson generalises: before normalising a block's spacer, check whether the block is the footer. The rhythm rules above apply to the four content sections only. ========================================================================== */ /* The two rules below put the footer back to the master template's own values, so this page's footer matches every other page's exactly. They are belt and braces. If you delete the old #bid_4485012-top-space line from this page's CSS field, the master template takes over again on its own and these two do nothing. They are here so the footer is right either way, including if a copy of the old rule is still sitting in the field somewhere. The numbers are not invented — they are what .footer-011 .block-top-space computes to on the home page and the Contact page: 44px on desktop, 32px at 768px and below. Both pages agree at all three widths, and the LYWAK logo sits 32px inside the footer on each. If you ever change the footer's headroom site-wide in the master CSS, change these to match or delete them. */ body.vow-signup #bid_4485012-top-space, body.vow-signup .footer-011 .block-top-space { height: 44px !important; } @media (max-width: 768px) { body.vow-signup #bid_4485012-top-space, body.vow-signup .footer-011 .block-top-space { height: 32px !important; } } /* ========================================================================== 2. THE THREE FEATURE CARDS NEVER MISS A LISTING / SAVE YOUR SEARCHES / TRACK YOUR FAVOURITES THE ORPHAN. The row is a flex row set to wrap, and at tablet widths the three cards no longer fit across, so the third wraps onto a second row — and because the row is centred, it lands in the middle of the page on its own. Measured at 768px: cards at x=54 and x=389 on the first row, then the third at x=222, centred under the gap between them. It reads as a mistake rather than a layout. Rather than let the wrap decide, the count is stated at each size: three across on a desktop, two on a tablet with the third aligned under the first, one on a phone. A two-and-one row with the odd card left-aligned reads as deliberate in a way that a centred orphan never does. ========================================================================== */ /* THE ROW IS LEFT AS A FLEX ROW, deliberately. Converting it to a grid looks like the obvious move and it is the wrong one — I tried it and the cards collapsed to 91px wide. The theme sizes these columns itself, and replacing the row's display pulls that sizing out from under them. Everything below works with the flex row rather than against it: the row keeps its own display and its own gap at desktop, and only the wrap behaviour and the internal rhythm are stated here. */ body.vow-signup #bid_1612673 .block-row { align-items: stretch !important; row-gap: clamp(32px, 4vw, 56px) !important; } body.vow-signup #bid_1612673 .block-row > .block-column { min-width: 0 !important; } /* Each card's inner column has to fill the card for the link-alignment below to have anything to push against. */ body.vow-signup #bid_1612673 .content-container { height: 100% !important; } /* The photographs. The wrapper is .image, not .image-container — the .image-container name belongs to a different block family on this site, and a rule written against it here silently matches nothing. */ body.vow-signup #bid_1612673 .image img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; } /* Image -> heading -> body text. The theme's flat 24px between every part of the card gives the heading the same separation from its own photo as from its paragraph; 20px and 12px read as a group instead of a list. */ body.vow-signup #bid_1612673 .content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; gap: 0 !important; padding-top: 0 !important; } body.vow-signup #bid_1612673 .content > .titles { gap: 12px !important; margin: 0 0 12px !important; } body.vow-signup #bid_1612673 .content > .text { margin: 0 !important; } /* THE LINKS LINE UP. This is the whole point of the flex column above. The three cards carry three, four and three lines of text, so without this the VIEW LISTINGS, SAVE A SEARCH and SET UP ALERTS links sit at three different heights — most obvious at tablet widths, where the text wraps differently again. margin-top: auto pushes each link to the bottom of its own card, and align-items: stretch on the row makes every card the height of the tallest, so the three links land on one line. 32px is the floor, so a card whose text happens to fill the space still keeps a clear gap above its link. */ body.vow-signup #bid_1612673 .content > .buttons { margin-top: auto !important; padding-top: 32px !important; } /* ========================================================================== 3. THE PORTRAIT SECTION FINDING A HOME SHOULD FEEL EXCITING THE GAP IN THE MIDDLE. The photograph is 1086 x 1448, a 3:4 portrait, and it sits in a column that is half the screen wide and only as tall as the text beside it — 713 x 576 at 1440px. object-fit: contain fits the whole photo inside that box without cropping, which is right, but it means the photo renders 432px wide inside a 713px column and sits centred, leaving about 140px of empty space on each side. The 140px on its right is what opens the gulf between the photograph and the heading, and it grows with the window. object-position moves the photo to the inner edge of its column instead of the middle. Nothing is cropped and the photo is not resized — the empty space simply moves to the outside of the page, where it reads as margin rather than as a hole in the middle of the section. The gap between photo and text drops from about 190px to about 48px at 1440. The section stays full-bleed, which is how it was designed. */ body.vow-signup #bid_9817511 .image-container img { object-position: 100% 50% !important; } /* The text column's own padding. The theme gives it padding on the left and none on the right, so the text is pushed away from the photo and then runs on toward the screen edge. Matching the two centres the text block in its column. */ body.vow-signup #bid_9817511 .content-container { padding-right: clamp(24px, 3.4vw, 48px) !important; } /* A measure for the paragraphs. Without a cap they run the full width of the column, which on a large monitor is well past the length a line of text stays comfortable to read. The headline is deliberately not capped — it is meant to run wide. */ body.vow-signup #bid_9817511 .content > .text { max-width: 54ch !important; } /* Heading -> subtitle -> paragraphs -> button. The theme uses one flat 24px between all four; these group the headline with its subtitle and give the button room to stand clear. */ body.vow-signup #bid_9817511 .content { gap: 0 !important; } body.vow-signup #bid_9817511 .content > .titles { gap: 10px !important; margin: 0 0 22px !important; } body.vow-signup #bid_9817511 .content > .text { margin: 0 0 30px !important; } body.vow-signup #bid_9817511 .content > .buttons { margin: 0 !important; } /* ========================================================================== 4. THE OPENING BLOCK SEARCH SMARTER, DECIDE SOONER Left narrower than the rest of the page on purpose — it is centred text, and a centred paragraph that runs the full width of a desktop is hard to read. Measured at 1440px it is 907px wide against the 1210px of the cards and the footer. That is a deliberate measure, not a misalignment, so it is not changed here. The two buttons are the only adjustment: they sit tight together at the theme's 16px, and at narrow widths they wrap with no breathing room between the rows. ========================================================================== */ body.vow-signup #bid_5661276 .button-list { gap: 14px 20px !important; justify-content: center !important; } /* ========================================================================== 5. TABLET — 1024px and below The cards drop to two across. The third sits under the first, left aligned, rather than centred under the gap. ========================================================================== */ @media (max-width: 1024px) { /* Two across, and the odd card left-aligned under the first rather than centred under the gap between them. justify-content is what does it — the row carries .block-row-center, which is what put the orphan in the middle of the page. */ body.vow-signup #bid_1612673 .block-row { flex-wrap: wrap !important; justify-content: flex-start !important; } body.vow-signup #bid_1612673 .block-row > .block-column { flex: 0 1 calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; } /* The portrait's text column loses its outer padding here, where the screen is narrow enough that the text needs the width more than it needs the margin. */ body.vow-signup #bid_9817511 .content-container { padding-right: clamp(20px, 3vw, 32px) !important; } body.vow-signup #bid_9817511 .content > .text { max-width: none !important; } } /* ========================================================================== 6. PHONES — 640px and below One card per row, and the portrait gets its own shape back. ========================================================================== */ @media (max-width: 640px) { body.vow-signup #bid_1612673 .block-row > .block-column { flex: 0 1 100% !important; max-width: 100% !important; } body.vow-signup #bid_1612673 .block-row { row-gap: 36px !important; } /* With one card per row there is no row to line up with, so the link goes back to sitting directly under its own text instead of being pushed to the bottom of a stretched card. */ body.vow-signup #bid_1612673 .content > .buttons { margin-top: 0 !important; padding-top: 22px !important; } /* THE PORTRAIT, STACKED. Once the two columns stack, the photo's box becomes short and wide — 415 x 311 at a 430px screen — and a 3:4 portrait fitted inside a landscape box is a small picture floating in two grey bands. Giving the box the photo's own 3:4 ratio means the photograph fills it exactly: no bands, no crop, and the portrait is about 553px tall on a 430px screen instead of 311px. max-height keeps it from taking over a short screen. */ body.vow-signup #bid_9817511 .image-container { aspect-ratio: 3 / 4 !important; max-height: 72vh !important; } body.vow-signup #bid_9817511 .image-container img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; } /* Side padding matched on both sides, so the text sits square on the screen rather than inheriting the desktop column's left-only padding. */ body.vow-signup #bid_9817511 .content-container { padding: 28px 20px 4px !important; } body.vow-signup #bid_9817511 .content > .titles { margin-bottom: 18px !important; } body.vow-signup #bid_9817511 .content > .text { margin-bottom: 26px !important; } /* Both buttons full width and comfortably tappable. */ body.vow-signup #bid_5661276 .button-list { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } body.vow-signup #bid_5661276 .button-list > * { width: 100% !important; } } /* ========================================================================== 7. NO SIDEWAYS SCROLL The page does not currently overflow at any width I measured, so this is a guard rather than a fix: the grids above all use minmax(0, 1fr), and these two stop a long unbroken word in a card or the portrait text from forcing a column wider than its share. ========================================================================== */ body.vow-signup #bid_1612673 .content, body.vow-signup #bid_9817511 .content { min-width: 0 !important; } body.vow-signup #bid_1612673 .text, body.vow-signup #bid_9817511 .text { overflow-wrap: anywhere !important; } /* ========================================================================== 8. THE UNFIRED SCROLL REVEAL THIS IS THE BIG ONE ON THIS PAGE, and it is a bug rather than a spacing choice. The theme animates blocks in as you scroll, using .fx with a slide-in class. The starting state of that animation is the element shifted down and transparent, and an observer is supposed to clear it once the block enters the viewport. On this page the intro block is already on screen when the page loads, so for that block the observer never fires and the starting state never clears — leaving it translated 127px DOWN permanently. Measured on the live page at 2560, from the bottom of the banner to the top of SEARCH SMARTER, DECIDE SOONER: with the reveal stuck 199px with it cleared 72px <- the spacer actually set above So nearly two thirds of that gap was an animation that never ran. No amount of adjusting the spacers in section 1 would have fixed it; they were already correct. Clearing it here means the blocks on this page simply appear rather than sliding in. That is a small loss next to a 127px hole in the layout, and it is the same fix already applied to the footer photo credits in the master stylesheet for the same reason. */ body.vow-signup .fx, body.vow-signup [class*="slide-in"] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* ========================================================================== 9. THE PORTRAIT AND ITS COPY, A LITTLE CLOSER The gap between the photograph and the heading is set by the text column's left padding. Measured at 2560 it was 50px; this brings it to 32px, which is as close as the two should get before the copy starts to feel crowded against the picture. Section 3 above already does the heavier lifting here: object-position pulls the photograph to the inner edge of its column, so it sits beside the text rather than floating in the middle of it. If the gap on your screen still looks like 300px rather than 30px, that rule is not loading — check for a cached stylesheet before changing anything here. */ body.vow-signup #bid_9817511 .content-container { padding-left: 32px !important; } @media (max-width: 1024px) { body.vow-signup #bid_9817511 .content-container { padding-left: 24px !important; } } @media (max-width: 640px) { /* Stacked, so the side padding is symmetric again and set in section 6. */ body.vow-signup #bid_9817511 .content-container { padding-left: 20px !important; } } /* ========================================================================== 10. THE PAGE TITLE — SEARCH SMARTER, DECIDE SOONER Made to match the title on Find Your Home, Contact, Buying and Communities: the same room above it (section 1), a 132px gold rule 20px under it, and 48px down to the intro line. This title had no rule at all, so one is drawn under it here. ========================================================================== */ body.vow-signup #bid_5661276 .content > .titles .title { margin: 0 !important; } body.vow-signup #bid_5661276 .content > .titles .title::after { content: "" !important; display: block !important; width: 132px !important; height: 2px !important; margin: 20px auto 0 !important; background-color: #9F762B !important; } /* 24px of margin + the block's own 24px gap = 48px from the gold rule to the intro line. The 24px from the intro line to the buttons is kept. */ body.vow-signup #bid_5661276 .content > .titles { margin-bottom: 24px !important; } @media (max-width: 768px) { body.vow-signup #bid_5661276-top-space { height: clamp(40px, 11vw, 52px) !important; } body.vow-signup #bid_5661276 .content > .titles .title::after { width: 104px !important; margin-top: 18px !important; } /* 8px + 24px gap = 32px on phones, as on the other pages. */ body.vow-signup #bid_5661276 .content > .titles { margin-bottom: 8px !important; } } @media (max-width: 575px) { body.vow-signup #bid_5661276 .content > .titles .title { font-size: 41px !important; line-height: 1.15 !important; } } /* ========================================================================== 11. LET'S TALK ON PHONES The button sat 4px above the black footer on a phone, almost touching it: section 6 gives this text column only 4px of padding at the bottom. 48px of room under the button now. Computers and tablets are not affected. ========================================================================== */ @media (max-width: 640px) { body.vow-signup #bid_9817511 .content-container { padding-bottom: 48px !important; } } /* ========================================================================== 12. HEADING LEVEL WITH THE TOP OF THE PHOTO The capitals of FINDING A HOME SHOULD FEEL EXCITING sit exactly level with the top edge of the photograph, as on Find Your Home, Meet Josef, Buying and Communities. The text column was centred top-to-bottom beside the photo with about 46px of padding on top. Now it starts at the top, and the heading is lifted by the room Oswald leaves above its capitals — 0.225 of the font size, 12.6px at 56px — in em so it stays right as the heading scales. The photo is anchored to the top of its box, so on a narrow tablet window, where the box is taller than the photo, its top edge stays on the heading's line. Phones are not affected — the photo sits above the text there. ========================================================================== */ @media (min-width: 641px) { body.vow-signup #bid_9817511 .content-container { padding-top: 0 !important; } body.vow-signup #bid_9817511 .content { justify-content: flex-start !important; } body.vow-signup #bid_9817511 .content > .titles .title { margin-top: -0.225em !important; } body.vow-signup #bid_9817511 .image-container img { object-position: 100% 0% !important; } }