/* ========================================================================== Budget My Reno — landing / marketing pages Ported from the "Budget My Reno Landing" design canvas. Structural styling stays inline on the elements (as authored in the design); this file carries the global resets, the responsive rules and the image-slot geometry that the canvas runtime used to apply at runtime. ========================================================================== */ :root { --sans: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { margin: 0; background: #E5E7EB; /* The design set fonts inline on every element, so itself never had one and anything not covered fell back to Times. Give the document a base. */ font-family: -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #111827; /* Belt-and-braces: nothing should ever push the page sideways on a phone. */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } a:hover { opacity: .75; } * { box-sizing: border-box; } img, input, textarea { max-width: 100%; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Visible keyboard focus — the design supplies none. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #4C4CBD; outline-offset: 2px; } /* Hidden from sight but still available to assistive tech / form posts. Deliberately 1px rather than offset off-canvas, so it can never widen the page on a narrow viewport. */ .visually-hidden, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link for keyboard users — revealed on focus. */ .skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; clip: auto; clip-path: none; z-index: 100; padding: 12px 18px; background: #111827; color: #F0F0FB; font: 600 14px/1 -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ── Page shell ─────────────────────────────────────────────────────────── The card is a max-width child of a column flex container, so it aligned to the cross-start edge — i.e. hard left, with every pixel of leftover space dumped on the right (1280px of it on a 2560px screen). Centre it. ------------------------------------------------------------------------ */ #top { align-items: center; } /* ── Sticky header ──────────────────────────────────────────────────────── Keeps "Get started" on screen for the whole page. Note the card must not set overflow:hidden — an overflow-clipped ancestor silently disables position:sticky on everything inside it. ------------------------------------------------------------------------ */ [data-r="nav"] { position: sticky; top: 0; z-index: 50; /* Own background, so it looks identical on the landing page (inside the card) and on the blog/legal pages (directly on the body), and so page content cannot show through once it is stuck. */ background: #F0F0FB; transition: box-shadow .2s ease; } /* Lifted only once the page has scrolled, so it sits flat at rest. */ [data-r="nav"].is-stuck { box-shadow: 0 6px 24px rgba(17, 24, 39, .10); } @media (prefers-reduced-motion: reduce) { [data-r="nav"] { transition: none; } } /* Anchored sections must clear the sticky header when jumped to. */ [id] { scroll-margin-top: 96px; } /* ── Brand ────────────────────────────────────────────────────────────── */ .brand { display: inline-flex; align-items: center; } .brand:hover { opacity: .8; } .brand-logo { display: block; height: clamp(32px, 3.4vw, 44px); width: auto; } .brand-logo--footer { height: 34px; } /* ── Tap targets ────────────────────────────────────────────────────────── The design sets line-height:1 on the nav and footer links, leaving them 13–14px tall. Padding brings them to a comfortable target without moving anything visually (the flex rows stay centred). ------------------------------------------------------------------------ */ [data-r="navlinks"] a, [data-r="signin"], [data-r="footer"] a:not(.brand) { display: inline-block; padding: 6px 0; } /* The footer link row grew to five items when the help centre came back; at 320px that pushed past the viewport, so let it wrap. */ [data-r="footer"] > div { flex-wrap: wrap; row-gap: 4px; } /* The blog card title was promoted from

to

for a descending heading outline; the theme styled it by element name, so carry the look across. / .single-blog-grid .blog-content h2 { display: block; line-height: 28px; margin: 0; } .single-blog-grid .blog-content h2 a { font-size: 17px; color: #081828; font-weight: 700; display: inline-block; } .single-blog-grid .blog-content h2 a:hover { color: #4C4CBD; } / Same for the promoted sidebar headings — these are class-styled, so only the browser's default heading margins need neutralising. / .sidebar .widget .widget-title, .sidebar .widget .post-title { margin-top: 0; } / Retained blog/legal pages: the old theme leaves breadcrumb, post-meta and "read more" links a few pixels under the 24px minimum target. / .breadcrumbs a, .meta a, a.btn { display: inline-block; padding-top: 3px; padding-bottom: 3px; } / ── Image slots ────────────────────────────────────────────────────────── The design canvas rendered each as an absolutely positioned image inside an overflow-hidden frame, with a stored pan/scale. .slot-cover → the 11 slots stored at x:0 y:0 s:1, i.e. plain centred cover. .slot-pan → the 3 slots with a vertical pan. Cover is width-driven for each of them, so width:100% + a top offset of (50 + y)% reproduces the stored crop exactly at any viewport width. ------------------------------------------------------------------------ / .slot { position: relative; overflow: hidden; } .slot > img { display: block; } .slot-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; } / Was an absolutely positioned image at width:100% with the canvas's stored pan as a `top` percentage. That only holds while the image overflows the slot: the slot has a fixed height, the image's height follows the viewport, and below about 700px it became the shorter of the two — so the percentage pushed its top edge down the slot and the #F0F0FB background showed through as a band above every browser mockup (9-18px at 402px wide). Cover cannot do that. It always fills the box, and at desktop the stored pans resolved to 0.2% / 0% / 0% of the overflow — top-aligned — so this reproduces the intended crop and holds it at every width. / .slot-pan { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } / ── Contact form controls ────────────────────────────────────────────── / .form-field::placeholder { color: #9CA3AF; } .form-field:focus { border-color: #4C4CBD; } .form-status { display: none; margin: 0; font: 500 14px/1.5 -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; padding: 12px 14px; } .form-status.is-ok { display: block; background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; } .form-status.is-error { display: block; background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } .form-submit { border: 0; cursor: pointer; width: 100%; } .form-submit[disabled] { opacity: .6; cursor: default; } / ── Mobile menu ────────────────────────────────────────────────────────── The port shipped this as a plain white slab of evenly-weighted rows — it read as an unstyled fallback rather than part of the design. It now carries the header's own background so it looks like an extension of the bar, the rows get a chevron and a current-page state, and the sign-up CTA moves inside: on a phone this panel is the only navigation there is, so it is also the only place a tap-through can be offered. ------------------------------------------------------------------------ / .mobmenu { flex-direction: column; background: #F0F0FB; border-top: 1px solid #DDDDF5; border-bottom: 1px solid #DDDDF5; padding: 0 clamp(20px, 4.4vw, 56px) clamp(20px, 4vw, 26px); } / display:none → flex cannot transition, so the reveal is a keyframe. / .mobmenu.is-open { animation: mobmenu-in .18s ease-out; } @keyframes mobmenu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .mobmenu-links { display: flex; flex-direction: column; } .mobmenu-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; border-bottom: 1px solid #DDDDF5; font: 500 16px/1.2 var(--sans); color: #111827; } .mobmenu-links a:last-child { border-bottom: 0; } / Chevron, drawn rather than shipped as an asset. / .mobmenu-links a::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid #9CA3AF; border-bottom: 1.5px solid #9CA3AF; transform: rotate(-45deg); } .mobmenu-links a:hover, .mobmenu-links a:active, .mobmenu-links a[aria-current="page"] { color: #4C4CBD; opacity: 1; } .mobmenu-links a:hover::after, .mobmenu-links a:active::after, .mobmenu-links a[aria-current="page"]::after { border-color: #4C4CBD; } .mobmenu-foot { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 22px; border-top: 1px solid #DDDDF5; } .mobmenu-cta { / Full width on a phone; capped and centred on a tablet, where the burger is still showing but a 750px-wide button looks stretched. / width: 100%; max-width: 420px; align-self: center; padding: 17px 24px; background: #4C4CBD; color: #FFFFFF; border-radius: 2px; text-align: center; font: 600 16px/1 var(--sans); box-shadow: 0 12px 30px rgba(76, 76, 189, .28); } / A real link, so it needs a real target — the 14px line alone is 20px tall. / .mobmenu-signin { align-self: center; padding: 12px 16px; text-align: center; font: 400 14px/1.4 var(--sans); color: #4B5563; } .mobmenu-signin strong { color: #111827; font-weight: 600; } / Burger folds into a close cross while the panel is open. The bars are 1.5px tall with a 5px gap, so 6.5px is centre-to-centre. / [data-r="burger"] span { transition: transform .18s ease, opacity .18s ease; } [data-r="burger"][aria-expanded="true"] { border-color: #111827; } [data-r="burger"][aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } [data-r="burger"][aria-expanded="true"] span:nth-child(2) { opacity: 0; } [data-r="burger"][aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .mobmenu.is-open { animation: none; } [data-r="burger"] span { transition: none; } } / ── Responsive ─────────────────────────────────────────────────────────── Breakpoints as authored in the design (960 / 700), plus a 480 tier for small phones. ------------------------------------------------------------------------ / [data-r="mobmenu"] { display: none !important; } [data-r="mobmenu"].is-open { display: flex !important; } @media (max-width: 960px) { [data-r="burger"] { display: flex !important; } / The mobile menu is a child of the nav's flex row, so it lined up as a third item beside the logo and CTA — a narrow column floating right, squeezing the header. Let the row wrap and give the menu a full line of its own. / / row-gap:0 so the panel meets the header row on its own margin, not the nav's flex gap. / [data-r="nav"] { flex-wrap: wrap; row-gap: 0; } [data-r="mobmenu"] { order: 99; / Cancel the nav's own padding so the panel spans the full card width, and pull its foot onto the nav's bottom border. flex-basis stays auto: a 100% basis would pin the border box to the container's content width, so the negative margins would shift the panel left rather than widen it, and the right-hand rules would stop short of the edge. / flex: 0 0 auto; width: calc(100% + 2 clamp(20px, 4.4vw, 56px)); margin: clamp(14px, 2.2vw, 26px) calc(-1 * clamp(20px, 4.4vw, 56px)) calc(-1 * clamp(14px, 2.2vw, 26px) - 1px); } [data-r="hero"], [data-r="split"] { grid-template-columns: 1fr !important; gap: 34px !important; } [data-r="cols3"] { grid-template-columns: 1fr 1fr !important; } [data-r="stack"] { flex-direction: column; align-items: flex-start !important; gap: 18px !important; } [data-r="shots"] { flex-wrap: wrap; } [data-r="shots"] > div { flex: 1 1 320px !important; } [data-r="phones"] { flex-wrap: wrap; justify-content: center !important; gap: 32px !important; } [data-r="navlinks"] { display: none !important; } } @media (max-width: 700px) { [data-r="cols3"], [data-r="cols2"] { grid-template-columns: 1fr !important; } [data-r="cols3"] > div[style="border-right"] { border-right: none !important; } [data-r="shot"] { height: auto !important; aspect-ratio: 16 / 10; } [data-r="cmp"] { grid-template-columns: 1fr 62px 62px !important; font-size: 13.5px !important; line-height: 1.4 !important; align-items: start; } [data-r="signin"] { display: none !important; } [data-r="footer"] { flex-direction: column; align-items: flex-start !important; } [data-r="phone"] { width: min(250px, 78vw) !important; } [data-r="phoneshot"] { height: auto !important; aspect-ratio: 232 / 469; } h1 { letter-spacing: -0.01em !important; } } @media (max-width: 480px) { / Keep the header on one line on a 375px phone. / [data-r="nav"] { gap: 12px !important; } [data-r="navcta"] { gap: 10px !important; } [data-r="navcta"] > a { padding: 12px 14px !important; font-size: 13px !important; } [data-r="cmp"] { grid-template-columns: 1fr 62px 62px !important; font-size: 12.5px !important; } / The comparison headers are short labels in narrow columns — let them wrap between words, never mid-word ("BUDG / ET MY / RENO"). / [data-r="cmp"] span { overflow-wrap: normal; word-break: normal; hyphens: none; } [data-r="cmp"]:first-child { font-size: 10px !important; letter-spacing: .05em !important; } / The app renders the same lockup noticeably larger; 28px left the wordmark's hairline strokes under a device pixel on a phone. / .brand-logo { height: clamp(26px, 8.5vw, 34px); } / Long words (email addresses, URLs) must not widen the page. / h1, h2, p { overflow-wrap: break-word; } / The design pins white-space:nowrap on every button. Below ~360px the longest CTA no longer fits on one line, so let them wrap instead of spilling out of the card. / a, button { white-space: normal !important; } / Grid/flex children default to min-width:auto, which stops them shrinking below their content and pushes the layout wide. / [data-r="hero"] > div, [data-r="split"] > div, [data-r="cols2"] > div, [data-r="cols3"] > div { min-width: 0; } / Article price badges are inline-flex, so their text sits in a max-content anonymous flex item and never wraps. The longest one overflows a 320px screen; inline-block lets it break across lines instead. */ .blog-article .badge { display: inline-block; max-width: 100%; } }