/* ========================================================================== 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,iVBORw0KGgoAAAANSUhEUgAAAeAAAABXCAYAAADcbJbsAABPAklEQVR42u19d7wkVZX/t7r75TeJCcwQhhwlSEYJEkUFxBXXrOuy5rTGxV11Zc2Kuq7ZVVEMKKgoiBJ0Ja6CZIckSGZgBpiZNzMvzHuvu87vj/s9vzpdU+FWd/WbGbfv51OfF7q66t5zT74nBCISAKjADQEQoPgQj3uC2H3i+b0yR8CrAqBR8P0BgCq/E7Y494qBdaswDjJgnzevwHw/KLB39vnx53Ryr7LWnQSfsIR3Vlp8VjXlexWD+5sC54vSBtqAYyWBtgMDA3jSXcV8J/SYV+CJQz40tqn2KCjITzv1DHSAtgNPuAYlrkE6uJ7S5GIgIpsDwUsJAPd5V5wxzAewmNdc/r8XwDSADfy5CsBDAJ5KYNQhNl+G2h3FhYfFj7kAtgKwkL83AMwmTowCmCJOrOfPekzghh3G6bJpwwq3AbP+7fn7IJWMBoAJACMAxgA8DWA5YdLIEMRbyrAGSWMTKT41ALMAbE0etYi/V/n5BgArAKwl3J8C8LiBdaVNRao7ZkipCkRkHjd4mBs3SiHUH9NWxWj4ijST/HuASBPGiM7+Pk7EGeXv0zEEqXSAYOPMJQCwC4BDARwCYHcy1UUA5vC+Hq57mj+fBPAIgPsA3AngRgB/aUEQ9wLYDsA8wqpCpq0w1XdXY3DUq8fMqWHg18+rDuBhAKsz5jAbwA4A+gCs4099n11HyHfozyHz/DGuYRvzXcWBHt4XxgRQg/hV596Dc+4191s46GcgvlT57B6zP6GBxWzu0b0tCt7AMNu9ADyb144AFhA3dA8V9iNUzlYDuI548SCAlTGtf0fCaoKK3JrNVPD2AdgXwIEAngngGWT6s7nuHrOmOtezgT/vBbCMP28krVjPwH4AdqWgvpXfCVJoJgCwlLSp+FDj+2sxvFLc6jFz6jGKgqTwIzE4NE1BNsL1jJl3xHGj00rfEgD7kz8dSsNgyNBDYOY+bda8HMAtAP4M4GYAD2QoV3ljkPjal8D/EfMANmL7kgRvpedRKg31DFjMJ61JTN6EhvbHqfxW+dwewqDBOQdUSNYZZXJv3mfl16DZ1zj/CWNrHOSzpxOEqYXHGPnBes5T8rwxgYi8HMCbCPRx3jjEDQ8TkLdhFr6OgOtNEb7xSY6RUd4P4FEKtHvIyCbMRoQlMRh9dx+AgwGcCuAYCuEFLTxzhAzkBgC/BXBVzEUmGe6XAQD/AeD5BlniiKpCLExgGCGRd5AIOGYIZoDM4/0ALjIMyDLBBoC/4xz6+IxhIkstRnBWAE+RKFYD+ACAKwG8BcDbjQLRH3NTJykQ6qKd5k+rpTdiCD+Ln00apB/me6rmfmWg8wB8B8An+VngqchZXHsGgFOIIwcSpkXwYjWA6wn/m4njBwD4CJnp4wA+CODyEnG8LNp4DoAXUSndmfAs6raboCC7mwrJrwmHlwB4LxW/+4ijf0jAUUsr7wLwz9zbMeJDr7nf8pkG96rOeweJz40ERdCuPTA8aYT7swrAXwH8L4DHjDJVtnEQxNzrOwN4Aa9nkjfVCj6zwXUsA/AbAFdQIIsnvuk9BwD4VyqOU5xHEBM0oeFHvQbekqDkTNODcheAj1M5sHuvz54F4H0ATiLdV2Jrq8d4xEAMJ9bxWbMAfAvAefzsEACfBrCbUfz6Y99NEsBpR40SM5Z0raqMjhN3HjCK6YNGIWjaixqJbV9qH0XHkha+cyAXPkWCfYxa868AXM0FtMugKsaqOwzAKwGcAGBPbHwWVSPgHifBTVIBWchr2Nw7F8CxvF4C4GJu9M0eykOdmv0+HWKqUxlCQ9e8kIjY38LzJwyOLKFWuTmNeSlMPYsJhlQuTgdwBoDDjZtPrYsh7uuTFLKKnwv4ziHixVwy0tOooF1MPDmNz5vFe4FNdyaVRBtvAPBcANvGXKF1Y9msIX08QZfzPK5/OyruamkM0Go7hsrMjQCOJt2pQjXbQ1mdRwHQyREiOR5jguu8E8BPqGg/heZjrLKE70IArwHwKsJo0HgLp/h3yPf/lfswRTrckXSoXiS1II+hwvf3AH4B4Mf0vOS5pQOj6B7FfSxzzDKepCBFgTiAONnu+J3ZpwHy3e1nmM5CGjcP02i7HMAl/N//51M1EskPqSksJFENGOnvE/yyku4F1bYadF9tRaYTxlzXFQoBJdiDALwQwIUAvkxNuVVkrxq35BsAvB7AHjH3mRi31SXUGO9GdJY3QGTZlwz0SOPmVXjsCuA9ZDDfAXABGXSaEO4F8Es+YxGt8J2NRhcUIOAGGeIyup9GSJzLUohM/74FwJfINLelu3Vro8UFsd9V8NxBoaKu90v4vf0peLbjPjc8cCUgEj5gGFsVzYE3MMwgII4sMYKhkmDVjBTAF13nNgDOJJ4MGGtc8WgWtdhfAriNsF7Nz3bmdTiAE4kvdcLhOOKF0kKFjLO+ia1enc8SAP8A4B/p6kWC16KHyvF5AH5PfFtHATXAdW5L6/k0KpYKvxqZ6QG0DMb5nTEK4SymBXoRpvjMvSic+hKsJqT8PU0r+zHuYYX7sy33fCh2fGa/O2D29rkALgXwRQDXxGikXeF7CD1Kz6OgVZd+j+GP9wH4EYD/oeIzznnPoQJ0BIDXURkODX8a5PP3BXA8gLMpALKMBP3fo+QRB/G5e/K50+ZYKE7P8f+pRaxW4CrKmUeNsE16/2/IT3YgzfcaT99AgldVecckBZ3KoT+a9TxIi/hwCuKlhJ0keEWS9nWSXtsVhk8Pcp5LjLeuYfZXrzk8ftmPlv1xhO2y/49HIlIVkQERWSoix4vIB0XkVhGpi0jIK2k0+HNURN4pIruKyDNFZD8R2UdEjhORt4nIb0Rkg/lOyJ8NvqNunhWKyOUisq+IQEQq/Ol7VflzRxE5h3PT907z+XX+b5WInCUi22Y8ryIiu4vIv4vIGn5Pvz9tfl8jIl80z6omPKtXRHpEZK6IbCcip4jIBSIyFoNn1tD3XS8ify8ii7l3gSd8As5hmDD6OxG51uxJaOYxKSK/4D1LRKTfrCsQkdkisr2IPIfwucXMLw9nHhaRlxMOO/PahTi0G2G+O/HoYK71u2YPLL7oO79AWCAHHopTC0Tk6wbPp2JwmBaRi4nHWTBdJCLvEpH7DV5Mx3Bc8e3kDPzo5BWYd+4rIj8WkXGDU5bWFbaXisiJIjKY8+we0v1/ichIjDYaIjJh6P9RETmpAAxmicih5C/Xmb0Jc+jjcRF5vuFts0krx4jIe0XklzHeEMbW34jxpb+IyKl8XlCA3uJ7oPvwWhFZFpv3lOFRCv/DcuBUFZFDyEfqZu4W74S4+S5DH5Wc/ewlzR8pIu8TkbsNvYUZ/ElhuU5EvkLaWUr413Lg08drWxE5TUQ+IiLXECZp+yQicq+IfFxEjuacF5JXxeE0LCI7kZ9daPhu2nosLnyK61hKvrkzedPpIvJtEVmeMMck+SYicrWIHKv4kAaMg0Xk954C+GlDVEnXYhH5NDclTdDYyQoZ/7YFmZXetzMRUgwzCGMAepLKQa9ByGrsqhlE7RORM0VkfYzQQ4Mg0yLyMwoR33lvQ+RZ4yGE7bt+KCJbGcKu8Ao8GYH9+1XcQyETEDLST3DvfGDfSwK4JodQFW4PkriLMLB5IvLPFN52L3XO/2n2M8hYe4V7+0EqGRaulrB/SyUAMXyoxPBFn32yiNxh1hlXaFaRiW8KAazv209ErogpL42E/bmACpH9vl5xWtF7hkTk/Qk0YvH6QTKfPBgECUJiHxG5KuHZSfj1sIgckfGebTjXxzLoTvdO8esuM/egReFbI995KoYnEqObX4nIXjHeVIn9XjXz2I5CxdKFNTyEAueThm8UMW5OMwpmPUdghSLyVSpP7eLtDiLyGcOfwth+/ZFCvlKQ5y2ggjAVo9Gk9YiIfDjj2XMpiJfl4NJaKqMiIjeIyOEigjjCW6J6ExmxRcIkAfyUiLzUaHeWSQ2Zn5+k1h1mCJq6ud5fQOPUDdiVQlDICMZTEOTzhlnXcp7fYxjMd4x2H8bmrWv6FZUAUBOrJRBixcC5X0Q+SgIJc4SwZWTHG5gX0cr1/bqufxCR1WYN66lsDBrYVhKQ3DIDffcHYpZFGoN8iNZVwH2oplw18w7dqzeKyArzPGUwHzfzCHLw5Pki8ohRnJLmd4rZ/zyLWvfyFKMg1GNweJKWfCsMvAzhu7+I/I+ZU3x/FA7XisieBt4+zK1mFNWPke7sO6xleloBARDQchni3+83tNfIUfBOMHMLYjxJYfJPVIyyBIu1Js+nsCsiwCy9v4O0FjcM7PtvEZEDDe5VPGG/l1GA0/Z2UkQ+R5hmrcHyCOUvX0wQ8Em8ab1RNHsNfwgKwqpmcPALCR7MNQaXajlGiN1/fe7RInJfAg9IEsAfJZ+uJMg4fcdLid9puDRtvBwiIt8UkdmVWGSX9WM/xTOJholETTvXCxPCxkN+v0o//tfpm886Q6maiNlTGGggyC5eoWcaWzGK7nSTutAbS4WpMNDrGyaUvZ5zpjNt1nA2z1GrsXOUqrn3FACf5flAw3yGGIz0sw0A/pPn38iJttTz3x159lZB8XxTMWfhQzybmMdz2QDATwmfccJQYtGkSIhe1kjJJ8wZn+TMYdrsS9pVN+/Qs/1zAXyT7ymSYhGYQLpXMyjD7o+NSL+aZ4hAfopZaOZ3Cc8LxxLO2qrYuAjKTARc6Znvx3gGFc/VhZn/05z/PbFI4jx80oCtSQCfYwBaJRZPAJMmggK4OkoaCRjnMOpxDtuTkkUQIkqDqwD4AQOVsuoQ2EIqz2NgXRF6Uzw4lWe+8wivaizorcJ1fsPwmHoO/C3s7wbwNZ63VmLnrDXe1wPgrXBZL7UMXBSTYaD7eB/nV8lZ+1qzXw1snB0DD1mi9K9xOhfzPD8wcRS3mrPUePZF2nNtXNMq8jwfXlVHc3qlfZbu4yWMPEcKftZiePlcAIdWUhiKTXvpIeHkpTSkhcbrJj7KgIaxBAEWR1gwcGqfHAAFZnFvZUShbnZ/TPipsDuHyFQkYlaF9z0MihhNQPKKIZrTmUoRUNBXMp5bI2P5HBEqa14W1i9hoESegpIljJ7DADNQMF1HBrzWUzmJ40xehSxLLAM5UZlpezAJ4CsM2KjEmHtPDiMURDm+STANTCDKRIH5WUHzHTL1ON4OJgSxdFr4Kh28By7FJUwQvjYQ5UcALjOKTZFgIxUEaxlIucwo1PZdYy0qIaq0NTzwayADFyQWGHceA3WqORHCmipzCAM8fehOecS+cOlX2xg4BTHhEDDY6tcJe+NDfwEDrX6XIgRqJsD03VQkQo99CGNrydqfuNLTzrDBqXchyi3X595HhbFo1TpBOVXz4rg0Trp/PAdWShPbATgyC4EmPQXUYA7js2MZoopSWcgeMlJt+4xoO6tdHsWIzsEUq1M38ga4HL92IkkvbYpiS9aWAeC11HLEg3FVAdwO4NvGa9DI0aj3AvBSCp6wgBDWeQ8BeDERQagNfgUud7CIcuKrjMVxZqCF56vC8hSjCe83uNebodUrTvUyYnmHBJzSv6dJ2BtaSDuoMFL4W4jyHcOYhj5TEc9DXNMLSRvWu5Q07wfg0m7yFOS8/anC5UN/H1FdgdB8PlBQuCRFEfvsRehxD8jc7/WkmQAuX3y+B75bOnsrgGel0KkY4+BSMvCixTP0uWtohY2kRDurRbktgHeSvxblHXmfFZEHvsJyBC4TIzTPftzTgk0bG3I8u3YOQ8YIDTKUj2XkST6jCmCPSgYgZ+dYvkWZLmg5jiRo4UkIVSWiBxmuoRAupecMADuZ76XN8X8YUh60wGB0Dg/xOVMpjEqF12IA74DLu81DcjHu32tyXGz2sxPIEIrU8Nbvn0CXmjK1Hxvrp900Cx/kK4o/gXFrVWmtX4KNK4MlEWRgtM59zd+VFBe/pOCRryVyMy2RRuxdM+V6DihItwfwCtJRI4X5i6GNOwt6JdIYZgPA+XCpJxaf+hDlurYyqgVgKJ6fr4ZLMYEn7i9ElMvsI4BfAFcAJw3nlHYfgDuiEw83b9Z6boDLGc5yqTdoHLwGUYWowAOnfGkgLBmXtVrZlFEkV7Xo/YPxkvTmrC3w5Gti5NtTMQ9UGh8TAIsrOdqsDxJoSTSfYfMAfRs45CH4ybzSvqPMdCWAmxDlyrWC4BWu93paSWmCXP9/HNyZcCUHyZVxrwDwPbjc21qOFSxwOXqnIcrBzSMSVVq2BvBP1IRBC+C7iCqbtVuM34dIW2Uw1nNwobE0+837gwzmuShFyOieDSAqilC06YTiyBiVqeWc2zSFT61F92urgvAkeocmybzSaGOSHpj1aL/YhCrBj8IV1xk3TLOvzbVPevIaKcBfphGVB/W1rgdzFBVLZ6/kzzwFSEuZtmrRWdfsDWiuPpdEo71wsRAHFhDAZSk/rdD8euKw0v66AkpT0phAcmnJVvlVEFPmfHBvTiVj0b4TnEB2cn1884tYFutSkMMGl7wULrChkeMesOcIQZsIcT9c4nfas5QAa2SC23poa7rOS+GCgLKQWYVFHwXwfp7r0s9fAHcOqiXUvknlpN0KZL5EWvQMpma8MfbM7AYA/wZXgvJiNJcqTBq9yK4Wpt97FlyBCilodVll6npeSFDAOtmgQNcxn7g3n2vozcC5+xEVcSmj2pN+/zdU7hSvGm3il68ALgrjMfI6n7XXPVyXus/HwhXLEA9ecQu9g63CX3F1ih6YkQwDQfnnHuQFPcg/D652iLZ9ZIZavFPG6Jtuk5aKeA1931En3H3L4VYrOQD3sWiyAh7iYxaFZdaiVIN+Cs1FxZMKWx8GV40pjflLTACvKGHTAOfGvjNGQGnW4CEUdnkbogJ6BO4M8RHkB6uFFL6n0ALMQiolur0AvBmRe/83cME3dbTPfCcMkZRBpLqWHQB8Ai7Kcx8zx0kAP4OrsXyFh3clrx2kEvu+cEF0ixEFEVYL4IhawT+j50UDfvpbIP5WBDDgAvQOMf+rZtDG3WhuoFCG5VKh8L3GWH/tMmdfntSAXwyDVm3qh7/bdzTHYtZjjDlwbt6FGd4hhdPTpPd2K23p9/6CqOpUFo5UOMddPTxYZXsfWuEt+n4bcNkqHVUKwNRnTfq8NSnepkTFz1cA5/m/Bz0Zy3xk18PVtIMALuL4zwn3KoIPwgXULMqxLlVQ3QO/FAafjRunu2gDss8PND3qeETdlvLOvitwpf8uMlppmGOxvQSu/qtkMAUtRfgyuILviiznGCExE+3XighghdU+cIFEbzQKF8yafM9X64iCq4IMmFboWfkonDtaGXrVUwjovvyBil8FUQesTo7AWELHGs9LnlJ2H9wZW1nWuRg6vQwuPU0tl3bKcfpaYUW8Fn1wAZ9VT4auJSHzcPYAowBJjnduOa+yxiNGSRAPZfMww3/Shi2lKiUoP+3ufbtWdsXwgjy6DAtYw3q27BODMJpnDfieiTQ8mEINLuVlQQZC6hmc1mhOCpjS7y2hq7CKbPezapgPl+Ris6kq4xmbYt9zBKLzVp/D/AZcesR9OZq5MtDd4YqvD6bAVpnhEbxPu1edDxfMFJQAjyJKW+hBpLZbzL5U3NYmwKJInuEY8qObVWHrgasR/WUAL6c13EBzXnI1A+80L/oKMsO6sdA7eQYstLoOQxRHkGV9jRPPJkqel9LsrXAu7oB4Vy0IgyCFJ2V9v7+AstMLd0abxdQVVpNw7t3VKffbaOn9EDWUkBy35iNwUb3t4oY+cz2idK88b+MQFfLhHEOmxxOmPR3Cb0trPscAPnhV9YSpTzyUGk+zPHi8GiBPVXIm6AvIRs4iNWDoWEQdViopi+yFC2A5N8ctuhfyO3bYSMenSmJu+sy1iAIB8pjHTnDR0D4alBLwLXDnmlnJ74H57IVkupLgMVAvhXZdAb0L3+A6WokKb0dp87GA9TmLqTj0ITvR3hcPRjzXodGcJ8C5vs+m92AvKokNg7OVGIMQQ5TnwZ1TfwguyhVoLQitiLDamzjnw9DXU1Fo1/2ZNtYA+BMtqNDTivLxyuXxIx8FL4CLFN85x1JVXNVC/5MZNBmSCR9KoeaT5vNIyR6IDTQQfKOED0LUnjVoU7nuLdHTk6Z8jeUYP768apbHM3wFsPLYrTyURA3+u6tWArInMXw7Ae1h+zZaMhYhk/rFXkTX38oU61etkwMRtbeq5DDldXCH+GVaHysN0eS5oXupZV6KqIKT5GjbU3CVeo6hK6uB9BSrBlyXj9fAde1ZY4SIzuFEXhVaO9+ne7TMoBvf1LW8VAVVLOpwxUIOLCBss565Ai7a9xg0t+XLctGFcHELr4brmXsHgGvhAsBuoetwKkY3VsF4hIpOp4fFQdteNMjZs7WGNsq2xEFG8z24I5sKLeJW97FsBS+E6xO+dQasbJGZK0hfQY63by6ic1UNxsxTUibbxG8Loynyp4YxeIIMA2t3uDiLh0qAfQOd6fpl5VEZAr4oLokH7W2NqPNeGr9WnrMCwB9qOYD0RYZpwzTjk50D11z71Wgu8BCa7wDOTXwugC8gqiaSFYC0E6J+mYEHgo+XjBDrkV3Czm5glZbnbEQt+HwCsu6gN2Bvs9ZKhhV8ChWYi2KW3GJEudKAO5v8KaIym+2e2QRG864X/F6QoMBp6s58Cr2FCdZIq4zpT9yDreGXWmCVwGG4tmaHc///CJc+8kd6FJajudRjUruzTkZAq3K6C9KPI+L4OtIB5TQ+p7t4FfFatOOVkxw8VNf8fLhiNHOR7KoPjQBdBuC/kF7kwo7tYjibhZNa+KVeEvwVX0f57FrOvVrha+uUfZGCQq9TOG4Fpq1y2E4Q1gaPZ+QpcxVjLBxMAZz3rCqV+NuyNkdD8300nnVoLsvVT8G7N9z52SuMOyauFayDi5T8DjXMcQ8E7zcI7hNRWu8AUoSIyhX6jPmIomB9eiwrcfwAwPMRlY7LIrqFcG7m68hUVft9GVxOsvbi/QZcbdV2047iROqrtGmdWUkQ/tbqfB9csZAilk0eEWlg1NYoVs9XYtbQLLgI0ufShXszXDGLa+AKIawzmnvRet3tjBq9IRWkn//OhMWSJDilTTgUsXz6UhS9wAi719HDkqQoqWJfg4vm/hBcIKdPlbClxr0ZeMB/DVovwJFGi6NUOAc89qYCF8xq42mkReUH6EzFt6BkRdZ3PUEGXwso10bJ319GHpzmWVMFeQVc5smaWhsTtKHsxyNqnr4NEXBvuEjAJUZAqNaxhi6SW+CCra4zlmEF+TVZZ1PL9BXA42j/0D6O4GsQlUILPOYxjGI50Go5r4CrUnVojhWsc3g+nKv5AiLOnkQMVYB+BuC36ExOqq9bZwDurGTIMDQNnJkLF+n8Uq5lyLhzBtBczEJaILpHCM+DCZOG574ECQxa37+E3ocT6Wq9nF6IP8KvgH1ZDErzfxcn0GnaGJ0BASxtWr5S0NoJcxj2VjQM3oaoZGfVWLw2QOdaAB+ncTCIqEFIGj8E3LnyUM6cbRBcWe5ny4PWwe+8XS38xRQOaQK4SB6wdAB3gg4IeZ/oZ+2FIDH5FBiDpkIP44kp81VDQ+v+fxrAVQCCMgTwPLhap6/n31oLtGY0PHv/LXCFH66hFaZIoozWp6jHHIPgPq7RqQ5YIfUYgQc5RDkbxcrwWS38p3DdVE6NWWFxZGpQqLwdrgjEQ3A1qQ/gPffC5RivLdH6RQFmrwi/AK44/SuN+6ZqBIgNsLNHDPXYPkoLzCmAq3n8LLjUJikghPOEcS8Vnj3o2jwXLs3rwQQrsFOjB/lnjnZMY2ZqVMsM4ZgKiwmDIxXS3zw49/yr4FL34kFSNk/8ESqqn6PlWzHPzGLYfcRh3z3oVEDeOvjn5Fep+GbNeQKbNg+4Exaw730DiJrTxN+/DY2FdyUo9NYzWEPUDOh73JtKrYQJ2miytM8tkm1Ht+JOcAUAHiSyP4nmqL0sAM+FX/EPfcZYB7T8NE04DY5zc+CUBb8RuFKRh9JVlFbzWi2tQ+Fc1n+hIOjnfH9MV2kwA0SS5yZ9lgd8KzFFYcqTqSDH6lgPF9W8lN4bPTOcRnOqTCuMQS2I7eEKhDwbLqjwmjYs9yJjqKAADjq4z75Wuy/zzrPCbAOEl8AFFw2RMS6hV24v4z2zzLJBIfM0XIDdD7hn61tQVoM2YVAWfyryrFoO3vs25wE6kwdcdi31Is/T83S1gAfhjrAOIX89Ec11HmxwsR5jrIJLafwaTOZJu1HQYiyrRxGV4ZpHK2cBnE/ctp5bykvoflkOFxl5NVzt2MdigrvVuVlCqKH8AJMpJOcnl4mY1gq+Bq6T04uR7vK2hRjeRIaizOZGuLzfqQ5Zv74wUJxZQY1Qz6nUzTNAZK4leE+0y0/QhjBTIrkbrj/rJ+DOx2uEV6UNYrdpdzr346glfwDOLd1pS7howY9WrIlOB5P5CAHJwL9eAG8xylAfmgM+Q8NHlI7UOvkhXIzAmAcfKssz0OmgpTIs8WoBvOovWZlI8n61K+SLVOI7Eu64oo+ybVu4KPfdEWUbNBK8CjrvP8H1fL8IsSyYdqKgFXHXw7WGu5gMrEFLby4nuh+c6/RgbkxoXBr9XMRucGdop8MFY12M5KbmrWrgPSi/ClHROYy3gTTaQPqHcBG42yA7LSlAVN1GWw3+AC44qJPMfyyHQdq2aZ8gYvag2W26DTXLU+glGUNUC1qbdNsiHa0SXwBX//odcAU3Xo7muII68ktX5glizXvdE65e9dNUombiTLgsxps0hsl4rHdL8yB13aOIckIbMatA77X0rbEh6zPmM1GAhvoT9jtEcmcqIV49TEUVaD4TLrr3RRWgToyyvBRFrfpOlVmNezGrbT4vL/bBwu94CmGtaNeDjd3hScHFt8KV+v0FXLEbrZI1ZbXlVpmpAnqC1u9j5rMR/m8Z3DnKj8jgzqRFXEdUris0rrPj4QJwjqHGcE+KwPAlRNsGrVIQkXwIvEiD9SkU7zFr16B5iFfARW/awLY0xqoBFv8Ll4Pc6LBG76vNb4CLBbgx5fML6Q35N7giHDDWMdoUvnauWq/4o3ABUy8koe1iaKNuLIqiwlgZfZ3uzw/BBWs80cF9GC2o6A3CPwhN4XYMLcxhavRDXE+PEbgTaHbvhjEB3Gdgowzr+wB+ifTGCHnWvT1zu4DC/CVwQVdhyh7aXP13wFXtugjtV8srIrA2lTcqzlPrJTxPFf4yeW2SRZ/XkapMGNV4SYzP6TVJeTlGQXs9edsdlIOW707HH5zlcgg8CXgrNOejxhnycgrUNXBnb1th44IcSqALaJEsJANOEsLrCjKZaonIEBiNueah+SVFTbcqLMbg3Mgn0rvQ8Fj3WgA/JyJ0wvq16/ZVjCrGgkrCmTEqbiMA/huuiImWMy27XKKeCV8Il0Z0KFz09WFwvZbnxNxgRYVxYITS8bTsv43OVZ5aj/zoVwvDOfBvpqLzXQoXx1G2V+l/kd1WM/Ckkw30pF1HxfdtyM5U0P3ZkUbC3VTMiubIa7lKzevt8eSf1RJ5k/VS9LQw5zS88VUqNBCtbOu+guQgrFZpyIeGbVXCP1B49hjeOg5Xs2I1ZdwquGyelTFBWzGCGlkCuJXSY7ZUV1qksZ61nEu34r+guSSlPRdThH8RF/ZuRIEQNsftabgScj6R2n0lIoIkEE6A7JrA4KZMtvneAK5RwxVwEbxpTMUi5zIAV86A9VtEGw1j7s8kfAG1yAvgXLgaSNaOG9/iWRizpgMqK7+FO2/fCS6Q7Wi4ylI7ozmnslHAFaYMvgfuDP8SWsFlFEGJ7/kEmnul5o1Z8MsosHt0KwXcM+GCm7bm2qbgd8atCmxIxnUXFcSrzX6IhxWU9XxtzfcV4s+Jhk+lCeE6XHDge3mNtUAzwr3dQHzJi5rujyl5ZSllfZ4CRouBPGo8D2gD9j3Izz1uVQDHZU4nPQSWL10O4LOIOqPZZiOTSO+GFyDnGKPWpoagSFT3ENDKbP6bxHBYAhD17Ewj+F4Bl4d3bsxiGEVz9Z68c4dKiVpZYNyhszyfKXDR3mNtziEgU7mC7tL5yE+heRhR8fhOjCBGfGXgTMMg8FVwJTb3gl8TBx+CSvssMBbBPby+TwF8FNz5+z5wZfv6zFx9zv1s2b89yaQ7oQyFaC7sn6ag2f8NFcBj0CK4n5bwdnAxHKejOe4gyPE6PAkX03AtXXUrkV7fVxKMAh/8CmjJfgLuWGFn/r+W4akI4Y7LrofLPPANmrNrXg//rIsALkWq7HNTGw2f92wtXSkZCoevF7EHxfO2fXAubgGX0Q1p3FOGbEB0Bp3UGjde0c87diBPAJfZsFgJbzmtuIMQBTpUEualNaTfSib8sLGk1fT3FWQL4ILCHisRwXs9ND0xQvNhRO0LWy1GoPvxVyog8z2+sxadL7QQZ2I+awk9ceoOMnwVwFMeOJsUWLQtXNWjPlq4D6Qw+kaMmMbIjK8no9yfwvgERPXIBX5F90FrcT9EfXLLdENrNK9aMzVkR8urJ2d2wfdMUoA+CRfIpp6Zz8JFfacxYJ3LNFxK3H8gv6FJK0IgNEp8jUL+C3CBcLMy9ko9FbPppbsTLlCwqKdiOdyR00LPPVtMvNxQktCqwB3z9Xry7L/SQMiaoy/sGyiv6BFSPLLtKuJJBmaaF1GVEuuxTWpPGLa6UXkuuzKYaZw4rkeUC5XXr3IPMjwbdDRFt1VepyAdizyEVVFrb3v45fUGcO7yZTnutSJjgyeShWQE0yVZ/z74VCbOaJS9VpSqUWBkWVeNmABQHN+fDPjLAN6J/EYetiqSEus6MvNPwqV5fZhu07qnqzLk/Jei3GMRC686BfCk517MoRXr40mKK1o2ZetmOHfvmgxYiKGHiwnPWgHm7ptiJQlM8rv0ZiCHYaoQ3pNCeCH8Snra8QgVPGTQu60kOBvtN5i376pyT3uRHrBog4huRdSzOe25ReIvejrAb+IWcKOE5/m2I9Q+1spfQnO1lUZWlgAWz/usW3SN53cG6bbrRfMZ8zLjWs17/5BhuO2GyYsR6sOe670XrihGmcjo64pb1yGNtF0BLAXuuZUejzTXjr5zDzg38ZKEeUzTYzEE4AV0Sfrud7xEYQUu2vHLAN4IF1Q1ifwyqvpzWyOAy3I9WnjeQJdiHm2ExOGd4NdEPAkm9gz9Xvgdd0zCBdgFCUpT3vdCT7xvxCyYcQCfpwJVycBB24DjFLho735PvqH3PEmFpO6pcG+L5nPgdvGgn1a1T2W6CbgOYRMpc7WRvr74UbZyqb2krQVcxlFipSRe1RbDbFcAt2J+r0XUyi/P2uwhgvbG/r+M7kkgv73fLD6jLGZXM1ZMHmEK3XSrS963Mo8HyiQUX3wJC3znz7RG3g0XUBZ3D2n0/MfgSm2eiI0DCDcYt+T2cJHOVfj3TLWat01puZeW8LeR32pSRy86kyup732AMPOxwGqIgtxaVQiUSdUKeDaqBXDTRtmHBWjUKgsVuNKsn6KHoJpjBasgeSeAk9FcyjRvrg16bVZ54sNSNOcttzsWw0V05xkcAVzU7k053jlNLfKtLV02TwkQFeexnp52eFQZ/e47LoB9ia8o0Y4XBOC8GEEF1PB/naG5WebTB5eHOQ/t5/fp8/YxVkNWBPQqAL/zsJCKDJ8yc0GMIALMzPBNXfPVPgEXdPdzuBqqj6Xg3SlklPsgKqhhRxVRAn0fXP3W3drAB5tnvYrC/yqDI1nPXY/OncsHiDqMjXsKgF3oNSiDn/i69VqhA19XdYDmuuu2JvTv4LqBTWLjfuNJgnQ+gPfApaTl5Z/b88Vb4VJX0pSgIGYBb18i3e0AF/MC5Lufr6YSmcfbV3p40pQ3LinJ26jP6IE7CugxyvSaEuBVpHJfRwyZMixgPcMoAuhB+OceZiHRb+HXVD6AOwPM61DiuxnbwVVsyrMIAhLhTSXv23gBBlbBzI0iie1F6+UmlYhUBro1BeoACXNViitt2gj0PeGKNFTaZBQahb4SLpd4AvmVruodImgxMLkGUROILAtY4I54DiyBaY7y6pRbr524FDGw/y4FcZ4rWs+Dnw3gXynU8oLttHj/E3DpK2M5gl4QdQCrtgl//e5eRgCn3afu50uRH48DWsqTHu8fRJQlICXh9DBcBLsaYY9xPjMhgCt8f60TDLOS85kvshc10eflIEh8JLXWCuBSIX6FKH8tzBAIuyBqSN+ucDmQSJYmeJQQxuDyWNeg/GhX36IEwwXdfe0oJr6Mw9edFWeoYcq7joUrdao4MJlicUzHtOqXklkVcUNnCZM/wwUYIUUB0Ij4vyIKpOtUYZQ74QqL5AX+6RHNftj4mKfoKNIsQ9qkwVaer8LzCbio6IeQ7Yq23dROhzvvr+UIyQb3VijcbkB6609b1OcI0mq7AniI/Gl2isVujYMb4YqfwIM/rUQUKZ3V+a1CPltWUBlo/e5s5n8/XAzBTBkMHTNiKjmavW960Tr4u0TVRTKvgKtvBBsXu1aGeiFc5ZqsaGg9IzzKEFClRQTvI7NahPTzEn3+H8kEy656VNR9MpMWsM+87Blo0Ma7Qu7DK9Cc8jGRwMhsVLD2Vd4LwJsRtcJsl9DGjWaexqTWwAW9THeIsHXdk3B5tn9B+tGHPSd/LumyHZypwt8F3YqCVwRfJAc+1wL4ovFYZAnhcfKN98LvPFhx6RFa2+tS3mG//ywjZFrh4xoQuitcLfU0b4btCHYO8ivk6f+fgHOrhznKBODan25dAi/RiO5nw52TqzK0DO3XVCgS99Epj9VGk7AvGStgnTQKLKZGAebbsHodtfl4Dm1oNP3PIkp/aKQ8qxcuD3Rxm8DcEa46Upq7SFsFPgrgv+C6/pRdgaqTAXIzoVHWUM5ZfA3AadxXaxknucomeMXn8Uq4oiYB2i9g34vkohbWSr4fLoK6k0qSLaF3rlE+Ghn3PwMuMK1dl3xRr0En8Municw0FZSrkX1ur+1Wx6jsfQjOZe97HnwJXPxC1tyEAut5HhZ22tA9PtJ4+pJ4kz77J3CpYD7Wrxan+ZNRJrKMnV0Q1XBvl8bnwVVFVO/AKrgjvXqbCmwDfgF12lik0QmayDvL8BGsvgUI9J6t4Iq59+YgsW7wI9z4JFea/n0hXNP6JKFj3T+HwNXjLUrQ8c4YB1IhiG9KaIj76wAuQ2fq/fpGY9oa2zMxfINketGcQx20SJz7wNX5nYPIpT2G5nNIiTERC78G8fEDcOlLDbRXN3xxhuav7ufL6frstIDT9X0fLjgsrc+2Koe9AF5LBbNVD5FvelyreZxlHYspz1oF18ltBbJd0VXiawOugNAH4WJAsnifwnCEivgdiAp6SIoy+SJawa0I4Cnu3enGw5NmHNwOl7M9guzz6biy9Ae46nBpSpStEvgauFiZEFGzjlbk0qlUKvT5NwK4rQQF1jafyIsfGkCHjvEqGS+twi9Ss8IJpuVVBcYtJbRYDkHzWUSSdqI/f430rkiKZBO0gi9Bchsx/e5cuBrKOxZQHCyTWkqLqT/h+7bV2c/gauX65gEWHUWCmHzTJ2bK+lVmM6sNnNWzrjfDBa9YRWgCUYm5OMx6YvNVj8l+cKlEu3DPighhmy53BOclCYpZBc4d/EukxyyUOZQ2nqCr9XZDG2lC+Jmkj1aOaYp4EBoonnZTtLdtj4eFGsCltX0PUR1ryRH+AuBVcClx/UhuRRcXwrfDVf1ajqjPtcTgJnCu29egueC/r1ISwMU0HI6N4yTUjVqDO8v9KJwbtwr/jISAiuM5SM88se87Fq6K4QCiqmx5+GFlRUhD7V8RZa+sgYupeRrtVxQcNh6xrGdZuVY6H7Wbp+W2lMEtgjvIlxwrdRjufNWefcar5Ghi/LMBvIvfSROAoUHq6+DyOrNKOOpz7qdmeiuifMQwBriQc/hHRMXg85C8ZhjGu+Hq3YrRiuJzvgrAWXDJ+O26nm30rz1fm5/DwKxWvbOBsz6jUgIixashiadXRYXVjjHcy7uqaK6wcwaVIYkRiSS4mtNc0FYInwSXI7qHUZzyBHHV4NqzaX30xIRXwyiJ34U7MulkT+YkmF8B4COIgo6SrDBdz+vgUrosTqfhS2D2Jh7nEKTQqlpEgx7CvGJgrPEXVQ+BPIgoxSzgnsTrSOtnG+ByuG9Cc3/jLIOlAtex7QwDzyo2jtS3gZAXAngfFaIaNg4o1GCsM+DOmcMcq9/STcPwtbhxoN6AGnnSv1MJtILZt851g8bFZWju85ykIFfhipi8k++eivGIauyqoDnP/iQAn+E+Kj3+EC7otmhqUJyP6r7MyVDwLA/dDc05yJWSeCggIknXsIj8t4g0eIWy8Qj5mYjIlSJykIgEKc8bEJEXisiNvL+R8qw6LxGRW0XkOfx+2nNhPq/w90NF5HfmPXUzf33vkyLyBvOdGn+3V5UXRKRXRM4UkfWxdYciMm3WcamIHMzvVHLm3OpVE5F/F5HJ2FziQ///gIic5AHDolf8eQtE5AIzpzBnXn8UkX1beG+viLxGRJbzOfUYHO4SkT3MHug+7CYi/2vmoLgRx/GLReQws/cBf6/Fftr93ZV7L7FnTZt5fVtEZncYN9L2SdfwTyLyiIFbfJ90rneLyMtFpMfwg1oCfVgcmC8iHxGREUMb+rNOWOj/7hORAwvCYomInJ+DXxYPfi0iOxXgG6/l3EPDgyQHh1eJyJtEpD/nPVWzD68Skb+m7EHD8L4jzfcrKfxJ4b8febAkPE/50woReX1sLkVxSWF1uIgs43OnUniQ/m9ERL4kIkeJyLyc5/eIyFIReaOI/MU8X0TkKtJwGfTTIyJv4/6JBw+9V0RO7AAPRfWss86qIWosMI8WwBl0s8zK0DatlrcDXB/VQWqUPXzWTrQYXw/X23c3NBegj/d1VC3oap7LXVPQWqjA5YjdxLO9vY0Faw/Vh3mWI7QK1mHjJst67QgX/fgeREXrbcH/Gtf8M855WYnnBeoi0oL5SwG8Gq4O8XwPixPch/2MZqnfaSeyT63Dfrjo453g+qi+zFgoefNaYqwUrfGs611E7XQuz5F2Jn6dTC3/rfx+vBOUusl+gagKkeLoYgB/z7M7azUHxhKYJM4cTittOc/J7Fm6rf86ABcA9jG45gz2eQ1juZ1Hr8hKdL4lZJZH5M9wGQO7IypWYs8K9b6FpI/5cCVAH4+t2x4fLYQr7XkmecYcnsFXzX1q4YzSq/UVuPSXqZS59hMPtiFu7Ufv04uQnSpl17GUfEnd0f3GI5F0PPUgjyD2Tzm2sRZ+YCz5Z/PntPlOHRvXolZ6WEYc3QNRdb4w5iXYhmteBVe2dyqFNw3Atbc8i3ho9zI0Ft/t3J+foL0GILr25VzDfqTDeElSyyMHKAMOgovQXkgcmUXP6QK4IiRHAPg7xnS83jy3BhcD9C9cR1H60TPcYeLzTsTTf47xgiCHh+5P3LP1yKfb5fOBiBwKV7pvIa/9EeVG5kX6qVtiggCdgov+fZiT3J5MdB6i0PehFDeStoC7EC5y82Gk58/luRoacMEwZ8Dl7u3Iz+sx18I6MoJfwNVuXWc2dxEZ8YtIZNrvdJIbqi6Je+jC+lEsmKNdAVzh+08m/Aa5L4oIDQ9Y2Get49nJw3CBbZcBuAitdWg6gOdNO3GPFbF74RctKEZYreCcJhDV+u0zTKbfCOOtDQOejrnZdE+vhAsmWo7mQgt7wQXGHWX2eBX3dSv+vZ7P7+N8rqTAuJPPm+Bn88g8D4GLoN4Bzb1mFb9X0+38Kb5rUwhfJJxzHULX4IuJV3Fat/10b4PrdHQn92mMfGIeYboP8VQL00wRFrZT2BNwATyXw6XlPZAxvyr50YtIg4sJ66Xwa/NWQXPd7ieplK+gYv8dbFwiUr9zOOl45wT8CmKCVIyAmCZN6Xu+C1ckCDH+ZeG7H3nTKwz+Wb5RJbx/x2OtRwx/mkPYHwMXFLooxg8Cw28vYQzAn1rgp8gxvI7iefIxsSMGG4wXxhTyEeLDekObs0jb82NKjrZePYv8OatwSho+LabBshtxfWcqoP3IrisfVzpUgXyCMu5xusR/izaa7AQi8k64AKa+GWQGanFMc0G309r9PQXadJvnZBVDHEeSIb8QzR2RpgwzH6EGPG6QaB41tkFjLfaYDXmUzOS7cDmFUhKDtQntZ8L1Mu3E+CPPUB/ynLfVbBVnerD5jT9Qk34yxgT2YbDNQfzfrXDFGBr0KhyB9IL4T5PgxqhAKsMYRHO/a1t3+hYAX4OLzp/axMIXCbEQ8ymAXwtXxKQ/Jli0rdwQ/36adDLF//WTRtJiEZaTlq8hLG6icEKKILD49W/0KpQ9/gyX6vNEbD9sANm74Lpd9bbxno/DBV01Mtap8TPP47n7EWguTtQwyvwqwl8t4V5aiPOMYWHxb5qGxfcpgJ8qKLyK4NEeAN5OhcmWgK2juVa78s1ahkywCs7jVIa+QYWtKP3o/QdR8ZvfAXz6Ei1z3xrwGw09mP8zor6mNeNGibsUrNuuagQZkFylqGKCYkIKuDVGW3wMLnjqr3TPhTHgtTpCYwlfxfVdRmF8CC04q3DM5f+y4AQy4EcoeK8gs1+F5mCzMsdTcKU2bbBX1RBbkLBHSoAb0BxIZO/roeAda3Fe60ggFYMn49g4+C5pbooTYzFL2P4/iLngx4w7zQZTAM2BVX2I2lTGGd8GuPzb2cT5s+kBAFx7zCOIHwdSS55r3qGusjRmpFbQarhI51/Tq3Ifmhu9b+phLb5VcAGOv6PFeTzd/EsQBTv1mPsX8UoaDa59Bdd8O1wFqL+SvhGzgsIcF+f9pC0b0Ka11DXKfAOSg2vqnP+6GOOfDZfCkoQbNsjoe7QuD+eehuZ9Q2huBRoP/uslP7zHY41qUf2M+HckXPDbM2ntzzIwU+9kFn+aIvxvhKvAdaXxNBTtZ+yLR1Xi+wfIX0+mt1CtzTxXdpJQf5xep/MRlfJsh34mqfwtNF6NIIFHJQV+Wo/qqFFO+6g8LW8XroGILKIbsce4gARRLmXgMdGk+4HmKD1luOt5TaG5uLcNxy+7YpRu3hCJ6xlwtYD3ppU7i5p8jfeMc75TXNeDFFh303JahijVpSyXc5IGt5RapVVkkgRcXLiNmrmlCcXVdHGNtjC3xYSjjQRcZxhhgOTwfdvkvp4gVNXtZNfTTyKaQHNkbFwBrBjBcl/CfvTTTb6Qa7/DfKdu8GM3WoS7ET+2IzPp47195ihimvO6n7hxB119D/F5wyhWt3smR9wiWkDF4yC4s9Cl5AtzCJcg5tpcyZ8rSB/3EA5P8qrHhFSRHtALEJ2PKi5oY4lh8zeQHC0v5nOLS2upQOflfc7n+5VfIcHwGI8pFRamq0kPRdy5IKyXwKXwHEDX9Pa0dGcZQTRmjkwepyFzG68HELWiDND5dDcr3IfIWw8nHu1AOKrHxKasbjAW/Vri0O0UvteSjts1xgLCbXaMF1UyZFs1JnyVXzXM/moa5XLj1WlZAG8OLjGgs30XkzTvKgXJEhKcnusOkrGOEzHGiOSrY9ZWnja/JYyZTIfZnNdewcaFZ7QDy2IyxmGjoI2R+Y0aIbQaG6diyWYOX2ud23kOksHM53q3Mgq6KkNP8+c6wqGewJiBmS0Es6XiYdzwqMbc/MNUBDWgdIRwX09cHENze9ckfJ4JPLLvGyDt7GSUuBqFYY04o0rME7SkH8tQEP82N19EZqJIQ5YbYyYBHC+cURbDmgkFpRPwlxLm1UrVnqx80bTqOr5FIbICdazHpuHJDIvihmyBjCNA+83OK0jObmh3PnG8aCeQqEgAj08RjzJpq11jZHPAv6Lejpnir51qptA2nDe1Bbw5aJ6Bh3AIN5HC0B2bh3cmyFAg8TeGG3GaSCr/msSEunTRWcVbMj7fHPcgKEBDUpZA2xIt4C66d0d3dEd3bP5Cucus/8ZGpQuC7uiO7uiOzX50hW9XAHdHd3RHd3RHd3RHVwB3R3d0R3d0R3d0BXB3dEd3dEd3dEd3dAVwd3RHd3RHd3RHVwB3R3d0R3d0R3d0hx21Lgi6ozu6ozu26BHPCe6OrgD+m0LuvMpPkvC3dHA+FSRXjEobEpv3TJbPnKmSnUnVk+Kfhx2YRyW2H0EKPiAHb8qqTJY2wpzvCGamLGyn1lcGDCsJ+5VX1SmJP2AG+EFWESFBOZXDuqPTiN0txNGx0akmDd3RHd0x8wqAbEZz8Wmw8H+ilnJXAP/tE91sADuiuQ1ZFVHTeMAVog/hCtWvQtQKTQkhLGkufXBdnLRjk/bcrCJqFBCiuUPQBs5Lu5Gs4BXOAOz64LqiTMB1kerk0Kbtk2juQ9rgWufCFbG/s8S1V+Ea0c/lfghcIwNd/zTf38+9qnOPevj7Bn7eA1dMfwWKF9Dv4/trXPOEsXi0a0sdrrWldtHphWs0ERoc0laXg5zLyGZEi7O5xkk0t9nsRdRVK0DUnKAVfN0OrnnACGGq71gD1zUsTQgPEfd6EHXsms19DAzNPVGyIjAM18ltV7jOXZOIuj3dxHkDroXkOFrretYdHR5dF3Q6ous4HK5B+AISv7YEHKKgU8E8QOK4D64t3W0ArkbUJzcsgfD64HpuvoSMdYJMZ8gw7kkqAMp8BxG1YlsA1y7vXXDdbDql2etzdwLwVTKg1yJqDB524F3PgGuEPp8w116uulejcH16l8N1Lmpn7bqGhQA+Cte+cLVh3KPEjV7zP21wXzWCLuC+zIHrW/1puFZ+PnPTe7YB8B64Pte2D7QK1VmE/9kA/sjv6rz3JQ5Nc76zKOi+DuBrm9iKsk04TgDwZsJtNXG8iqiDGeBaQJ4D4JYCe2vfcQzhqN3QJrl39wH4GJ9rcVe/uyeA98P1wZ0mPc4ySlADwA+Jm+20W9XvzgJwFIDXAXgOcX0l5zYLrnPVXwF8m/N5MYDz4PoOd8tZdgXwFjMUUR8G8HO4ZuUnAtia/38EwA/IEIbJ+A8E8EoS6XIS3pep/baD/Er0YxQiEwBOIgH287MrAXyDjLRmLKA9AbyQikRAohzuoAAOjFX+HAD70bo4BMBvOrhfdwP4Llxj85Mp1EAG+Gu4JuV/RnMP6nYVtFlc1zP49wMAfkKBNwpgfwBvIFMfh2v2fj3nti2A0+D6voKMe7CFuayF60+9I4DnUujruArAhdxra4Gth2t2vpKC5yiu6Qnev8zQwKZm2BUqlPcTzqcYnFeYX0UBvKpFGm8AuAHAjwxd9fCzZxBn3kyrMt6tZwWAiwA8CuB53HNw/3/D/b4e7TXsUJramcrzy6lMX0R8u5efb00e9VoAXyTOLaLSbfG2K4Q3Gykj0r38rn4ROVtEpkSkISKXiEhv7J4lIvIF3iMiUheRL4rIsIgEvMqazxIROZ9zaYjI5zLu3VNEzuOcrhORbfn/SgfgVOXPRSJyAWEwJSJfEZFaB+AQv/pE5LMiMi0ioYj8ibDqxBp3FJGr+J4bROSY2H37i8i9/PwvInIg/6/rP1JEbuPnl4vI0tjnvldNROaKyDtEZBXxYVpEvsTPsr77AhEZEZH7ReREj/tn+gqIp4GILBCRD4rIONf4iIicWvL7thKRT4rIOuLutIhMiMgHOI9Kyv4EInKYiNzEuX2Vzypj/RCRPUTkJ3z2iIicSb6SdP8pIvIg6X2tiLzH0HvQ5eWbz9XNA/Y756vRtbfCnLX186ynYv73BID/pDWqZ2ovoXuqlb65afOpULtdjSgKd65xb1b5rl7O8R5qxCuoJXfS86Ha9V60Rqu0Jg6jNV4WHJIspRpdh/eaMzg9F6x2YN11uinrAL5CS6xGuAf8rGrOE9XtXOPf1wH4poFJq675kGeX5wK42LzjOHogFD7WoqpwDgdxvh8D8FsDt83JE6VHCU8DuNG4jdcRt9Wb1868A+LpanpS7iJ8QFp/C4AXcC5BAu4FcGev1/Cemwx9Bm3gtMahvB3A3xPXvko+M2pwqWbw+9ek94mul3PzHl0B7MfcGgmum1FEwVcNIxwfB3CtIZ5hALsbIg9KYkg14yaDIcDQuA6nEQWl3EoX29qYC69s93PI5x9DN9kE57ILgGeVCIckuDQI99kGt3sRnZGXHXjWA3eeejOAX6A58Ev47oq5d9jsn67/Z3QRboPs3qk+x0nreAzxF6MEvcrgSRDbpyMoWM6nKzMtxW1TDzvvAdIdjCIcoP2MA7svI3Bnv8sp4OtwAX4fBrC3UQjic2xQCZ+i4hcYId6q27lGl/Or+M7bqbTpUVOd79Ugvyq/90viZa/hTwG6oyuAt3BrOC3pXQzzHYlZGpUOzkfHFJojWnUMUCBNU3P+F7jza6AzObGAC746Du7s/Jd8zzwAR3M+nYzADmNWdgPFI4uLjCvhgpZGY+8HBX+aIqeW5lMA/puMtdVzwtA871bCXK3E0+DO/0MjEDSY5/VwQV+fQRS81dgM6c7mttYRRfmHRtkp8z0aJ3AvLclH+fchpJ9ZBr7xPR+DOyvWTIhWlV177vsy0s8EgF+Rfqspe6VK6CO0hGsdVLi7oyuAZ1QL74kJvEYC8VYQBcIow5hIEdplMAsdmvLSgyjydgjAP9F91QfgQQC/j82nbEYJWla7AvgOgJ/CuYVBQXAYOueGtulHaiVtMF6AsmCv+/44raKfJjDiuMIWJuCLjgsAfARREJG0uPaAePlzCnRVhl5jrG+991Q4l+o5tPKq2DKCc6qGbzXMPpetxA1Q0F5Gr8I04Xs6gH8w8A5Svq9K5kQLcLXBkQdR8AucC/4mZEdTi/n8Nr5/e5SffdAdXQE841r4lPl7iELNWpqaGrGPsTgehzu3KlMAIEGwK3PSOaiVczoFYq1Nl5gPYwzh0iBeABedej1c3u3dvGc7WsFBB4Wwnn1XDI73dWjNk3Dn6hMZOFNNYMpxITwGlzoyUQKOBhS+5yPKkT0FLkJaLe9dALyDgvfHaC89ZlMK4LhSXCZf1HP0DQC+RctTj5TeBhcp3cDGlbAmY96lsEUc1pzyg0nHAYDHSEvigQfg/n4d0bl5d3QF8BZr/QLNKSw1Y3EFJLw6Bcwx/P8oXOrJbWgvyCZtTlaYjpMhbEDkAj8SLtdzBTYuUdepsQ+AZ8K5ZkfJNC5DVJDiaAqATghgdaFOmGdXsPEZaNnvDFLwZQOayxuGBZ7RjgdgGu5MWhW/JXDpcXOIM2+nVfQZOBd42bjZaQEczIBypfTeA+dSPhtRMZk96fnYERufB5dRelXXt4j0pOMJWsF5yry++1EAn6CHZqbovzu6Argj1q8KXRjX0jpDgPMAvAjA5+HcfveQSL81A/sncNGuLwbwal4fhiu2MDemOHSq8IYGhmmk6KX8/zhcUNoKI6AP7rBAtBGxnT4DzmJqNgI2qw51mYxRPS/3wuWhj/HZx8DliB5CYXw1FaMtrThDHKad2NspAzc9U70ZwH/BnZkrPN+NqCJeEPPADLaJw+Az5hscGSm4Vw24SOzxLgvfPEc3RL01whC4AgqfIoL306I4nsT7JbhAmCtjLqVOWV5TFGz/Qkt8K7iyegtmSOutkNh3gHN3LqO1oIEi98C5RbeFixo+AS5AZH3JsNGo0cEOKxytCIuZsj7EwP1SKmXHw7lO30KBsQau0tU0tryzwZmAqQYuWQFchXPr7w9XDKNCRfcWAN+PWeXt4p1+dx6aq2rVW4RX1/LtCuC/OQE8CFcdaxZcuodGGn4VrjTdFP83ic52RgI17msAfNYwqG0BvJEWaacFkT77MMLjp2iunf0wXLrNsXDn0wfDRXfe3kHlpBPW5ZYyD7WCH4JzRT+bOHI0Pz8LwB8QndtvaTTYaQHcQzydjgm+OtyZ6p6kq60AnAnn6v19TOCFJc2jFtvXViLku6MrgP8mhg3suRnA+8jY3gIXbSxwwS4vpMDpZGRpEPv9fjQ3PNBCAM+iJh2mKBJlwESjRk+kYtJDYTuX96yDO38c4X078/PbOwAXPQdPcv2KB2MPS8YXnzPgTlrBl9EKPs7gxaVorzTipqZBe87aCRe01nxfjOYguipcsNyn4GIrtqfy/R64vOFHS+KpirsjiNzHFXQ+ha87NpFA6Q5/bdJGrt4H54L6DID/ITx3gzt/3Q9RBaZOCWD77GFEUdA9RijfhKgyUyetsWdwzX1wrvAfwlXrORuustAbEJ2XzaJAWIDkykLtwETzOCtGyexPUFqShFbZzE2MgKh0EBeyvBIriaO6tgcQ5bVuicy8gSjSuFM5rlpVbYhCz9J/hd6DzyPqgHUSgH8282s3n1qM4rrS/H8nKtMoQDNai6BbhKNrAW+Rw+aWrjea8GxadU9TK/4onNt3L7jz2A8CeCtcbmcnztniQT2DiM6rtDjBarjqV3NiBDiAqJxlO4LYphOdTObwYbjUqzlUQMYpeEfhoqPfSjg9E841erGZc9lWsKaG+UTKDnNPn0I5DRuAKJgHVIqGNoEAjiuOM2mJd2I9mn43D51LqwuNFRyfg3pJvgNgD7gmDTUA/wgX8zER461BG2t9kkr08fx7G7j8+hUFn9U9/+0K4L8ZeClBVclgVSu+Di6w5RNk5KfCBSOdzfvKOuvUZ0yiucdnmHDPBrg8z5qxGramEHwcrqRdu5ZCg4zhaLj6ud9E8/mvHX+G67yzLVxO8PFwwVghyj0Ljp8Thh5KxIvhzrD/g4yvrD7OvvPo1JhCc1rWlj6sC1ozEcoW8lOIcn7jrnql91G4+t970JuzFVxw1qNorwIWDD2Mwh11aTrUEri4k2vh570M4IIeF8OlA65uE+5llPzsjhhQu8PPylMr01pZ8Xt+xEtofb0VrhRgJ2Bdi1l2ksGAxw0DPgTAe+EilqVNJUyfeRic+/k6RLmvemmh+AqcO+1ao5Achs7kBPcbBpjFLPSMfgktmaNQrkszHrG7KUaYYA1v6fRogw8HS362eohmI6qzHDdWVAjfBRf4eC//fwBc4Rtbg73dufyONAN6UE6l8tpAegMKW3L0ZCoKu7bBh1TwNtC5AjpdAdwduUgYP0uxzLUKl97xTWqtIGN/N4WTlomslLBnWoTenk9NG8JTwWfPhJVhnUSm9WSb81AC7yGRh0Yzt5GgWi5QexHfDFfkHnDRpMcnMNZ296iOjSsSBQmKgb7zRVRMHs2w3lvBk2qMadt6zMEM4GtglJ+4IhBgy2GkttpUHHbVEtcSx139W8+D43EUAVz089fgjqfmImoE0q5ioLjyAL1Ympd8CIA3GUVxOAYf3fMGBfUZVHjvb8HLZHFmd7iKesNdIdwVwJuC+MUwddCqtDWGG2QGy+AS9p/i/w8F8AEK4+kSLBDt6rMWzS5oFYhaE9pe+r+T4FqajSKqltXq0DUfSgG8DC7fVxAFW9nRw+tGuIC1EO6c+AS4YKxGCfioQs5GQU8jSgWrm3tUMdgHroF5jTCdatNi1feIsfRhFAPdo05bxGLmYBsW9KK1+sSbclg3sK3BPm7orIyh+DFMYboQLriwjo2LYIhRKr8HlyNcjeFZWRb5xXDpZAEF+1up2Nco+CW259NwVbS+QCH8MUSxKK3A6nlwZ97nwKVdLeoK4a4AnkkXXgh3zrmvceltx78tLFVz/gVcQXx13bwYwCfpoprVptU5B+686WBa1kpQzwHwd3BnvEtIJEvgzn+2p2vsA/z/KKL0BmlxHjWu/0y+A3At23qQfOY4SVhMwwWuKVyPggtgmYX2A7EqcC7tIzmPEC4o7hhaJovJVOdT6KtydADhMIH2ivtru7zZ3IdDERVDWUIFaHvu30CHlUZVeLaHC3jT/did6+3dQhioPXuswcUPDBiaPBpRylU7/KyXtLUX3BHNQdynN8MFC26TYNVqQOZauKjoaznXCQrGMnhPhd6qj8Adb9UR5R9/hvMdQHQktQDA8+GKgxwHF4OinqmwINyF6347aWp3uNoCR3blR0mEKtI9T89gYgLX//OVRDptaqDjNrhzzxsBXERC1B6dh1Nr3Nvc/xBc0/bzAVwB/wjFirEYX0GrcV9EfYZVG13JOamlrS7vuRTWyvRXkKh+jvS2ZlkwOQyuld0xcGdL+v57+f6rAZxHq0GfvxQuFUnrU883zx0DcAPhch4VhKAgbA7kmg4lU7LMYSVcOlbDWDpDcAE0O5r7vgLgnQmWly9c+ulhOJZM8kiuU70j43ANKh6FCz77JcqLuLawWAzXQ3ZH7vuxsfvuh+tBfBNhvhybX0lKnY8WEDmSysQxcHnkOp6Aiz6+A8CFcL2QW1nLAXA9d0+i1Wu7HT1ND885cH2T6wkeshCuOMe3yANeB5dvXYS+8vZ1O7ic45dRoVMX9QNwwWgDxLclpKnPAzjXzLcITCzdfpNWMKgMnEH8LWNt/6dHNwo6f6jF+RCJXN2amoM4n8y8brRW7cv6IRL0BiLqYhLTIjKWDZ7MwkZgTtGavJGCbspYl3ONxdBDIqzQTXcLospHD8N1KSpKlDrXIbrpbgDwW2P5aRnI4QTC7Oean6SHoG7coWo1zkLx7jZi3j9BAXe5cQ8Krd4+wqqH/19HwfM0PxuEK1ohaD0Cuso92IYW0C8Qndfbov1DaO7YVLbwq3DNO8FFu/8EUdCONm1fSIE20KE5lDWUbo7g3j1IIdvgfvZRkRpGa6VfAzTHK1wL5/IdJhzXcE+HDc+sY+MOUgHx55Oc6xNteJiScLwCF8l8FpX351HZ3I4W+hTnuhIu7/5i0nyr+Kz5zMupVCwgff6cNAZ0i4J0LeAZ0MIHEJ1paoEH627WgIdRbNwLVqOMAxJtn/l7rAV3Z80IUUv4cear7582Gvo0Gf80ovSpVkcfhYqma9iKX71c12jC3LVNoq2vWzfzVWu46Ny049FkDCaqjDTMO/Rv+w4t+behTYap1Yp6uK4NBlYgvFR5m0Jze8uy3bazYzBRvNXz4EHCYKSD8yhrzOM1iSgoahrNZ/01ehjWtknvNnCtYTwUVSOYfGhjfQcElBWks6n8b8Vrior2CD1ctsCNtAEP5WF7k7bvRbmpX10B3B3d8X9UuUKJVkoWA+uOLQsnkiLFN5eCFr7tDuOKepk43MXrksb/A2+50MnOWtVMAAAAAElFTkSuQmCC") !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 — CONTACT PAGE ---------------------------------------------------------- Scoped to three blocks on contact.html only: #bid_9602433 CONTACT title #bid_1714532 two-column introduction #bid_7408443 SEND A MESSAGE form Header, search banner, nav, footer, other pages and global styles are untouched. No new fonts or dependencies. Reused from the theme (not redeclared): Oswald 300 uppercase ...... .titles .title / .text-size6 Roboto body ............... theme default Content container ......... .proto-block.container Buttons ................... .button.btn (already #9F762B) Spacing unit .............. var(--spacing-1) Gold #9F762B is the exact value the homepage divider and buttons compute to. The theme exposes no global gold custom property, so it is aliased once below rather than repeated. SPACING RULE: every vertical gap has exactly ONE source. Where the theme provides a spacer div, that spacer owns the gap and the neighbouring section gets no padding. ---------------------------------------------------------- LATEST CHANGE — 2 October 2026 SEND MESSAGE now matches the site's other buttons on computers and phones: same height (44px / about 42px), same lettering and padding, natural width at the left edge of the form. See section 7. On phones, the page's side margins now match every other page (8% of the screen each side). See section 9. ---------------------------------------------------------- EARLIER REVISION — 1 October 2026 SEND A MESSAGE now has the same look and feel as the Home Evaluation form: a white card with the site's card shadow, generous inside padding, the 40px heading, the same fine print (Roboto 15px, #555555) under the message box, and the same gold submit button with white text and a darker gold hover. On phones the button now runs the full width of the form, as it does on Home Evaluation. Changed: section 7 (new card, heading, consent and button rules) and the phone button rule in section 9. Everything else is exactly as it was. ========================================================== */ #bid_9602433, #bid_1714532, #bid_7408443 { --lywak-gold: #9F762B; } /* ---------------------------------------------------------- 0. Height resets — no section may be forced taller than its content. ---------------------------------------------------------- */ #bid_9602433, #bid_9602433 .proto-block, #bid_1714532, #bid_1714532 .proto-block, #bid_7408443, #bid_7408443 .proto-block { min-height: 0; height: auto; } /* ---------------------------------------------------------- 1. CONTACT title area Banner bottom -> "CONTACT": owned by this padding alone. ---------------------------------------------------------- */ #bid_9602433 { padding-top: clamp(44px, 7vw, 78px); padding-bottom: 0; scroll-margin-top: 96px; } #bid_9602433 .titles.title-underline .title { margin: 0; } #bid_9602433 .titles.title-underline .title::after { width: 132px; height: 2px; margin-top: 20px; /* CONTACT -> gold rule */ background-color: var(--lywak-gold); } /* ---------------------------------------------------------- 2. Section gaps — one spacer each, the other set to zero The theme sets these spacers with an INLINE style that scales with viewport width; clamp() keeps its rhythm but bounds it. gold rule -> introduction 42-48 portrait -> SEND A MESSAGE 70-80 The first number is the spacer, not the gap you see. The text column is pulled up 13px so the heading's cap lands flush with the top edge of the photograph. The form's own top spacer stays at zero so the gap below the introduction is not created twice. ---------------------------------------------------------- */ #bid_1714532-top-space { height: clamp(42px, calc(var(--spacing-1, 0) * 14), 48px) !important; } #bid_1714532-bottom-space { height: clamp(70px, calc(var(--spacing-1, 0) * 21), 80px) !important; } #bid_7408443-top-space { height: 0 !important; } #bid_7408443-bottom-space { height: clamp(90px, calc(var(--spacing-1, 0) * 28), 110px) !important; } /* ---------------------------------------------------------- 3. Two-column introduction — top aligned, 1160px measure Columns are 47fr / 40fr with an 80px gap: at 1160 that is roughly 507px of text against 432px of photograph. row-gap stays at zero — the theme's 34px was feeding an empty third column and adding 34px under the section. ---------------------------------------------------------- */ #bid_1714532 .proto-block { max-width: 1160px; margin-left: auto; margin-right: auto; } #bid_1714532 .block-row { grid-template-columns: minmax(0, 47fr) minmax(0, 40fr); column-gap: 80px; align-items: start; row-gap: 0; } #bid_1714532 .block-row > .block-column:nth-child(1) { grid-column: 1 / 2; } #bid_1714532 .block-row > .block-column:nth-child(2) { grid-column: 2 / 3; } #bid_1714532 .block-row > .block-column:nth-child(3) { grid-column: 1 / -1; } /* The heading's CAP sits flush with the top edge of the photo. Oswald at 40px carries 12px of empty space above its cap height, so the heading's box has to start above the photo by that much. Verified on the live page: -13px puts the cap at 0px from the photo's top. Tuned to Oswald at 40px / 54px line-height. Change the heading's size and it has to be re-derived. */ #bid_1714532 .block-row > .block-column:nth-child(1) .content-container { padding-top: 0; margin-top: -13px; } /* ---------------------------------------------------------- 4. Text rhythm ---------------------------------------------------------- */ #bid_1714532 .content { row-gap: 0; } #bid_1714532 .content > .text { margin-top: 26px; max-width: 650px; } #bid_1714532 .content > .text p { margin-bottom: 22px; text-align: left; font-style: normal; } #bid_1714532 .content > .text p:last-child { margin-bottom: 0; } #bid_1714532 .content > .info-list { margin-top: 32px; } /* ---------------------------------------------------------- 5. PHONE / EMAIL Track order in .list-container is [icon] [label] [value]. ---------------------------------------------------------- */ #bid_1714532 .info-list .list-container { grid-template-columns: 0 160px minmax(0, 1fr); column-gap: 0; align-items: center; padding-top: 0; padding-bottom: 0; } #bid_1714532 .info-list .list-item + .list-item { margin-top: 24px; } #bid_1714532 .info-list .list-title, #bid_1714532 .info-list .list-title p { font-family: Oswald, "Roboto", sans-serif; font-weight: 400; letter-spacing: 0.08em; color: var(--lywak-gold); } #bid_1714532 .info-list .list-value, #bid_1714532 .info-list .list-value p { color: #000; } #bid_1714532 .info-list .list-value a { color: inherit; text-decoration: none; transition: color 0.15s ease; } #bid_1714532 .info-list .list-value a:hover, #bid_1714532 .info-list .list-value a:focus-visible { color: var(--lywak-gold); } #bid_1714532 .info-list .list-value a:focus-visible { outline: 2px solid var(--lywak-gold); outline-offset: 3px; } /* ---------------------------------------------------------- 6. Portrait — unchanged. Shows the bottom 87.6% of the 1466x2200 source: ~9% headroom, shoes never cropped as the column resizes. ---------------------------------------------------------- */ #bid_1714532 .image, #bid_1714532 .image-container { height: auto; aspect-ratio: 1466 / 1927; } #bid_1714532 .image-container { position: relative; overflow: hidden; } #bid_1714532 .image-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform: none; border-radius: 0; box-shadow: none; filter: none; } /* ---------------------------------------------------------- 7. SEND A MESSAGE — matched to the Home Evaluation form Layout and styling only. No markup, field names, validation, consent wording or submission behaviour is touched. THE 1fr COLUMNS ARE LOAD-BEARING. The theme sets .form-inner to a fixed `617px 617px`; minmax(0, 1fr) lets the columns follow whatever width the card ends up being. ---------------------------------------------------------- */ #bid_7408443 .proto-block { max-width: 1000px; margin-left: auto; margin-right: auto; } /* THE CARD — new. White, with the site's card shadow, the same values the Home Evaluation form and the Buyers Guide cards use. The block already carries .column-shadow but the shadow computes to none here, so it is stated outright. */ #bid_7408443 .block-column { background-color: #ffffff !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important; } /* Inside padding — Home Evaluation's value: 52px on a wide screen, easing down to 28px on a phone. */ #bid_7408443 .block-column > .content-container > .content { padding: clamp(28px, 4vw, 52px) !important; } #bid_7408443 .form-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; } /* SEND A MESSAGE — 40px, short gold underline, 28px to the first field. Same heading treatment as Home Evaluation. */ #bid_7408443 .form-inner > h2.title { font-size: 40px !important; line-height: 1.25 !important; margin: 0 0 28px !important; } /* Short gold underline — the same 64px rule, 16px below the heading, as REQUEST YOUR PERSONALIZED HOME EVALUATION. */ #bid_7408443 .form-inner > h2.title::after { content: "" !important; display: block !important; width: 64px !important; height: 2px !important; margin-top: 16px !important; background-color: var(--lywak-gold) !important; } #bid_7408443 .form-inner > h2.title::before { content: none !important; display: none !important; } #bid_7408443 .form-group { margin-bottom: 14px; } /* Message -> consent, and consent -> button. */ #bid_7408443 .form-group-long-text { margin-bottom: 20px; } #bid_7408443 .form-group-optin { margin-bottom: 24px; } #bid_7408443 input[type="text"], #bid_7408443 input[type="email"], #bid_7408443 input[type="tel"], #bid_7408443 select { height: 56px; } #bid_7408443 textarea { min-height: 160px; height: 160px; } /* CONSENT — the same fine print as Home Evaluation: Roboto 15px on a 1.5 line, #555555, set on the label and on everything inside it so no inner span keeps its own type. The checkbox stays pinned to the first line. */ #bid_7408443 .form-group-optin .checkbox label { display: flex !important; align-items: flex-start !important; gap: 10px !important; } #bid_7408443 .form-group-optin .checkbox label, #bid_7408443 .form-group-optin .checkbox label * { font-family: "Roboto", sans-serif !important; font-size: 15px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.5 !important; letter-spacing: normal !important; text-transform: none !important; color: #555555 !important; } #bid_7408443 .form-group-optin .checkbox input[type="checkbox"] { flex: 0 0 auto; margin: 3px 0 0; } /* Button to the left edge of the fields (the theme floats it right). */ #bid_7408443 .form-buttons, #bid_7408443 .buttons-right { text-align: left !important; justify-content: flex-start !important; } /* SEND MESSAGE — the site's standard button (2 October 2026). It had been a taller 56px button with extra side padding, which made it look heavier than every other button on the site. It now uses the same proportions as SEARCH LISTINGS, BUYER'S GUIDE and the rest: the same height relative to its lettering (2.885 times the letter size, which the theme scales with the window) and 1.5em each side, the same lettering and spacing — 44px tall on a computer and about 42px on a phone, exactly like them. Gold, white words, darker gold on hover — unchanged. */ #bid_7408443 button.submit-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background-color: var(--lywak-gold) !important; border: 1px solid var(--lywak-gold) !important; color: #ffffff !important; text-transform: uppercase; letter-spacing: 1.6px !important; line-height: 1 !important; min-width: 0 !important; width: auto !important; height: 2.885em !important; padding: 0 1.5em !important; transition: background-color 0.2s linear !important; } /* Empty icon slot after the words (8px left margin) made the right side wider than the left. Removed so the words sit centred. */ #bid_7408443 button.submit-button .icon:empty { display: none !important; } #bid_7408443 button.submit-button:hover { background-color: #86601F !important; border-color: #86601F !important; } #bid_7408443 input:focus-visible, #bid_7408443 textarea:focus-visible, #bid_7408443 select:focus-visible, #bid_7408443 button.submit-button:focus-visible { outline: 2px solid var(--lywak-gold); outline-offset: 2px; } /* ---------------------------------------------------------- 8. Tablet — 769px to 1024px ---------------------------------------------------------- */ @media (min-width: 769px) and (max-width: 1024px) { #bid_1714532 .block-row { grid-template-columns: minmax(0, 50fr) minmax(0, 43fr); column-gap: 48px; } #bid_1714532-top-space { height: 48px !important; } #bid_1714532-bottom-space { height: 64px !important; } #bid_7408443 .proto-block { width: 90%; max-width: none; } #bid_7408443 .form-inner { column-gap: 14px; } } @media (min-width: 769px) and (max-width: 860px) { #bid_7408443 .form-inner { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------- 9. Mobile — 768px and below ---------------------------------------------------------- */ @media (max-width: 768px) { /* Side margins: 8% of the screen width each side — the same as every other page on the site (31px on a 390px phone, 48px at 600px). They had been a fixed 26px (24px on small phones), so this page's content ran wider than the rest. */ #bid_9602433 .proto-block, #bid_1714532 .proto-block, #bid_7408443 .proto-block { margin-left: 8vw !important; margin-right: 8vw !important; max-width: none; width: auto; } #bid_9602433 { padding-top: clamp(40px, 11vw, 52px); } #bid_9602433 .titles.title-underline .title::after { width: 104px; margin-top: 18px; } #bid_1714532-top-space { height: 32px !important; } /* underline -> intro */ #bid_1714532-bottom-space { height: 50px !important; } /* portrait -> form */ #bid_7408443-top-space { height: 0 !important; } #bid_7408443-bottom-space { height: 64px !important; } #bid_1714532 .block-row { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; } #bid_1714532 .block-row > .block-column:nth-child(1) { grid-column: 1 / -1; order: 1; } #bid_1714532 .block-row > .block-column:nth-child(2) { grid-column: 1 / -1; order: 2; /* overrides the block's .mobile-first */ margin-top: 30px; /* intro text -> portrait */ } #bid_1714532 .block-row > .block-column:nth-child(3) { grid-column: 1 / -1; order: 3; } #bid_1714532 .block-row > .block-column:nth-child(1) .content-container { padding-top: 0; margin-top: 0; } #bid_1714532 .content, #bid_1714532 .content > .text, #bid_1714532 .content > .text p, #bid_1714532 .titles { text-align: left; } #bid_1714532 .content > .text { max-width: none; } #bid_1714532 .image-container img { width: 100%; height: 100%; max-width: 100%; } #bid_1714532 .info-list .list-container { grid-template-columns: 0 100px minmax(0, 1fr); } #bid_1714532 .info-list .list-item + .list-item { margin-top: 20px; } /* Form: one column, every control the full width of it. */ #bid_7408443 .form-inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; } #bid_7408443 .form-group { margin-bottom: 15px; } #bid_7408443 .form-group-long-text, #bid_7408443 .form-group-optin { margin-bottom: 20px; } #bid_7408443 .form-inner > h2.title { font-size: 30px !important; } #bid_7408443 input[type="text"], #bid_7408443 input[type="email"], #bid_7408443 input[type="tel"], #bid_7408443 select, #bid_7408443 textarea { width: 100%; } #bid_7408443 textarea { min-height: 150px; height: 150px; } /* SEND MESSAGE keeps its natural width on phones too, sitting at the left edge of the form like the site's other buttons (it used to stretch the full width of the form). */ } /* ---------------------------------------------------------- 10. Small phones — type scale only ---------------------------------------------------------- */ @media (max-width: 575px) { #bid_9602433 .title { font-size: 41px; line-height: 1.15; } #bid_1714532 .titles .title { font-size: 33px; line-height: 1.2; } #bid_1714532 .content > .text { margin-top: 24px; } #bid_1714532 .content > .text p { font-size: 17.5px; line-height: 1.65; margin-bottom: 20px; } #bid_1714532 .content > .info-list { margin-top: 28px; } #bid_1714532 .info-list .list-value, #bid_1714532 .info-list .list-value p, #bid_1714532 .info-list .list-value a { font-size: 17.5px; } #bid_1714532 .info-list .list-value a { display: inline-block; padding: 6px 0; } /* (The 24px side margins that used to be set here are gone — the 8%-of-screen margins in section 9 now apply on small phones too.) */ } /* Below ~360px the label/value row gets cramped — stack it */ @media (max-width: 360px) { #bid_1714532 .info-list .list-container { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } } /* ---------------------------------------------------------- 11. THE SCROLL REVEAL — cleared unconditionally. A bug fix: the introduction is on screen at load, so the theme's observer never clears its 127px starting offset and the portrait hangs onto the SEND A MESSAGE heading. The cost is that these three blocks appear rather than slide in. ---------------------------------------------------------- */ #bid_9602433 .fx, #bid_1714532 .fx, #bid_7408443 .fx, #bid_9602433 [class*="slide-in"], #bid_1714532 [class*="slide-in"], #bid_7408443 [class*="slide-in"] { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } /* ---------------------------------------------------------- 8. LINE UP WITH THE MENU BAR AND THE OTHER PAGES (added 3 October, computers and tablets, 769px and up) The introduction (LET'S START WITH A CONVERSATION + the photo) was a fixed 1160px wide, so on most screens it ran past the page's column — wider than the CONTACT title, the menu bar and every other page. It now uses the site's own column: 84% of the window, never more than 1250px. The text starts exactly under the LYWAK logo and the photo ends exactly under CONTACT in the menu. Measured at 1100, 1349, 1600 and 1920 wide — text left edge, photo right edge, logo and menu edges all to the pixel. The SEND A MESSAGE card stays a centred 1000px card on wide screens (it is a card, set in from the edges on purpose), but it is no longer allowed to be wider than the column, so on narrower windows (1100px and below) it no longer pokes out past the edges. ---------------------------------------------------------- */ @media (min-width: 769px) { #bid_1714532 .proto-block { max-width: min(84vw, 1250px) !important; margin-left: auto !important; margin-right: auto !important; } #bid_7408443 .proto-block { max-width: min(84vw, 1000px) !important; } } /* ---------------------------------------------------------- 9. PHONE NUMBER NEVER BREAKS (added 3 October) The theme gives the PHONE / EMAIL values a fixed 150px box, right-aligned. "(639) 317-7700" only just fits in 150px, so on some window sizes (around 1200px wide) it broke after the hyphen onto two lines. The value box now takes the room it needs, the number and address stay on one line, and both start at the same left edge under each other. ---------------------------------------------------------- */ #bid_1714532 .info-list .list-value, #bid_1714532 .info-list .list-value p, #bid_1714532 .info-list .list-value a { width: auto !important; max-width: none !important; text-align: left !important; white-space: nowrap !important; } /* On the narrowest phones (360px and under) the PHONE / EMAIL rows had slipped into a three-way split that pushed the labels toward the middle. They now use the same layout as every other phone: label on the left, value beside it. */ @media (max-width: 22.5rem) { #bid_1714532 .info-list .list-container { grid-template-columns: 0 92px minmax(0, 1fr) !important; row-gap: 0 !important; } } /* ---------------------------------------------------------- 10. PHONE / EMAIL — TIGHTER (added 3 October) The number and address started about 120px past the end of PHONE / EMAIL, so each label read as cut off from its detail, and the two rows sat 56px apart — nearly two lines of the paragraph above. Now: · the details start about 36px after PHONE (the longer label), on computers and phones alike; · the rows are about 44px apart on computers and 50px on phones (a little more there, so each line is still an easy tap target). ---------------------------------------------------------- */ html body #bid_1714532 .info-list .list-container { grid-template-columns: 0 72px minmax(0, 1fr) !important; } html body #bid_1714532 .info-list .list-item + .list-item { margin-top: 12px !important; } @media (max-width: 768px) { html body #bid_1714532 .info-list .list-item + .list-item { margin-top: 10px !important; } } @media (max-width: 22.5rem) { html body #bid_1714532 .info-list .list-container { grid-template-columns: 0 72px minmax(0, 1fr) !important; } }