, so `.section-head p` at (0,1,1) outranked `.eyebrow` at (0,1,0) and took the pill over: 19px instead of 12px, muted grey instead of primary, and a 16px top margin the chip is not supposed to have. It made the eight section pills a third taller than the identical chip in the hero directly above them. */ .section-head p:not(.eyebrow) { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--text-body-lg); } .section--dark .section-head p { color: var(--color-on-dark-muted); } /* -------------------------------------------------------------------------- 5. Buttons — pill-shaped, warm -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 1.05rem 2.25rem; font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-pill); border: 1.5px solid transparent; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: none; } .btn svg { width: 1.05rem; height: 1.05rem; } .btn--primary { background: var(--color-primary); color: var(--color-on-dark); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--gold { background: var(--color-secondary); color: #FFFFFF; } .btn--gold:hover { background: var(--color-secondary-hover); } .btn--gold:active { background: var(--color-secondary-active); } .btn--outline { border-color: var(--color-primary); color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: var(--color-on-dark); } .btn--outline-light { border-color: var(--color-on-dark-border); color: var(--color-on-dark); } .btn--outline-light:hover { border-color: var(--color-secondary); color: var(--color-secondary); } /* Text link */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: 700; color: var(--color-primary); } .link-arrow svg { width: 1rem; height: 1rem; /* --color-secondary is 1.90:1 on the accent card behind these links. The arrow travels with a text label so it is closer to decoration than to a meaningful graphic, but at 1.90:1 it is barely there at all; this is 3.31:1 and still reads as the same gold. */ color: #9E7B39; transition: transform var(--duration-med) var(--ease-out); } .link-arrow:hover svg { transform: translateX(5px); } /* -------------------------------------------------------------------------- 6. Header & Navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out); } .site-header.is-scrolled { border-color: var(--color-border); box-shadow: var(--shadow-sm); } /* The header row is not capped at --container-max the way page content is. Measured at 1440: the full Gold nav needs 1255px of row (208 for the agent's name, 929 for eight links, the rest burger and gutters) while the 78rem container only ever offers 1168 - so the nav did not fit at any screen size, and nav-fit was nesting three items on a desktop to compensate. Uncapping it buys 105px of headroom at 1440 and more above that, which also leaves room for the names this has to survive: the row carries the agent's name, and "Christopher Vanderhoeven" is not "Cali Doe". Page content stays capped, so only the header spans wider. */ .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); height: 5.5rem; max-width: none; } .brand { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; } .brand-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50% 50% 4px 4px; /* miniature arch */ background: var(--color-primary); color: var(--color-secondary); } .brand-mark svg { width: 1.35rem; height: 1.35rem; } .brand-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-primary); line-height: 1; } .brand-name small { display: block; font-family: var(--font-body); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-secondary); margin-top: 0.3rem; } .site-nav { display: flex; align-items: center; gap: var(--space-8); } .nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .nav-list a { font-size: var(--text-caption); font-weight: 600; color: var(--color-text); padding: 0.5rem 0.875rem; border-radius: var(--radius-pill); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .nav-list a:hover { background: var(--color-accent); color: var(--color-primary); } .nav-list a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-dark); } .nav-cta { padding: 0.8rem 1.6rem; } /* The header CTA inherits .btn--gold, whose white-on-gold is 2.26:1. Ink on the gold is 5.15:1, so the label is legible at rest. Hover then inverts to the primary fill (10.4:1) instead of .btn--gold's darker gold, which would have taken ink text down to 4.04:1 - darkening the fill under dark text is the wrong direction once the text is no longer white. Scoped to .nav-cta on purpose: .btn--gold carries the same 2.26:1 in the page body, and that is a template-wide decision rather than a header one. */ .nav-cta.btn--gold { color: var(--color-primary); } .nav-cta.btn--gold:hover, .nav-cta.btn--gold:focus-visible { background: var(--color-primary); color: var(--color-on-dark); } .nav-toggle { display: none; color: var(--color-primary); width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent); } .nav-toggle svg { width: 1.4rem; height: 1.4rem; } .nav-toggle .icon-close { display: none; } .nav-open .nav-toggle .icon-menu { display: none; } .nav-open .nav-toggle .icon-close { display: block; } /* Burger panel — the overflow menu, and the phone menu, and the same thing at every width in between. This used to be @media (max-width: 63.99em), one number standing in for 586 different agent-name lengths, and it left this nav 26px over the viewport before the Home Valuation link was even added. What replaced it is global-js/nav-fit.js: it keeps as many items inline as the row can hold and nests the rest here. This template's container caps at 1248px, so a couple of links nest even on a large screen — that is the honest answer, and it is the one the breakpoint was hiding. */ /* A drawer, not a band: anchored to the right edge, sized to its contents, and sliding in from the side with a fade rather than dropping the full width of the window down over the page. Width is set by breakpoint rather than by content: half the window from 442px up, the whole window at 441 and below. Sizing to the longest label read as arbitrary - the same menu came out a different width on every template, because it was really measuring the font - whereas half the screen is a proportion a visitor recognises and it is reproducible across designs. On a phone there is no useful page left to show behind a drawer, so it takes the lot. Height fills the screen instead, and that is a change. It was auto for a good reason under the old policy: the panel could hold a single leftover link, and a full-height column containing one word reads as a broken page. data-nav-fit="all" removes that case - the drawer now holds either the entire nav or nothing at all, so it is never nearly empty. Left on auto it stopped partway down and opened a dead band between its bottom edge and the foot of the window. Reaching the bottom is also most of what makes this read as a drawer rather than a dropdown. This pairs with the all-or-nothing policy. A template still running priority+ wants the old auto height, for the reason above. visibility is in the transition with a delay so it flips instantly on open and only after the slide has finished on close. Without that the panel disappears on the first frame of closing and the animation is never seen. */ .nav-panel { position: fixed; top: 5.5rem; right: 0; left: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; /* The rhythm is on the rows now, not on this gap. Every child used to sit 2rem from the next, which on a 390x844 phone put the CTA 71px past the bottom of the drawer; the rows carry their own padding and rules instead, so the whole menu including the CTA is reachable without scrolling. */ gap: 0; padding: var(--space-6) var(--space-8) var(--space-8); /* Teal, with the sun behind it. --gradient-sun is the same wash the page heroes put in their top corner; at this size and this low a stop it reads as depth in the ground rather than as a shape, and it keeps the drawer from being a flat rectangle of primary. The gold rule at the top is what separates the drawer from the header, which turns --color-primary while the menu is open - without it the two are one unbroken block of teal and the panel has no edge at all. */ background: linear-gradient(90deg, var(--color-secondary) 0%, rgba(201, 168, 106, 0.35) 38%, transparent 100%) top left / 100% 2px no-repeat, var(--gradient-sun) top right / 26rem 26rem no-repeat, var(--color-primary); box-shadow: var(--shadow-lg); width: 50%; height: calc(100svh - 5.5rem); overflow-y: auto; /* Reaching the last link and having the page start moving underneath is the part that reads as broken. */ overscroll-behavior: contain; transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform var(--duration-med) var(--ease-out), opacity var(--duration-med) var(--ease-out), visibility 0s linear var(--duration-med); z-index: 99; } .nav-open .nav-panel { transform: translateX(0); opacity: 1; visibility: visible; /* Nothing waits on the way in. */ transition-delay: 0s; } /* Phones take the whole window. Half of 400px is a 200px column of menu beside 200px of a page nobody can read, which serves neither. 441 is the ceiling rather than a round 440 so that a 440px-wide phone still gets the full width. */ @media (max-width: 441px) { .nav-panel { width: 100%; } } /* The fade carries the state change on its own, so the slide is the part that goes. Keeping visibility out of the transition here means it still flips immediately rather than lingering for a duration that no longer runs. */ @media (prefers-reduced-motion: reduce) { .nav-panel { transform: none; transition: opacity var(--duration-fast) linear, visibility 0s linear var(--duration-fast); } .nav-open .nav-panel { transform: none; } } .nav-open .site-header { background: var(--color-primary); border-color: transparent; } .nav-open .site-header .brand-name { color: var(--color-on-dark); } .nav-open .site-header .nav-toggle { background: rgba(247,245,242,0.12); color: var(--color-on-dark); } .nav-panel .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } /* Top-level rows in the display face. Plus Jakarta at 1.25rem/600 is the bar's voice, which is right for eight items in an 88px band and wrong for a column with a drawer to itself: it made the menu read as a settings list. DM Serif names the pages, and the sub-rows below stay in Jakarta's uppercase, which is what makes them read as belonging to the row above rather than competing with it. */ .nav-panel .nav-list > li > a { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); font-weight: 400; line-height: 1.25; color: var(--color-on-dark); padding: 0.5rem 0; transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } /* Hairlines between the top-level entries, in the template's own on-dark border tone. */ .nav-panel .nav-list > li + li { border-top: 1px solid var(--color-on-dark-border); } /* The marker is .eyebrow's gold dot, reused: it is this template's smallest brand unit, it already means "you are here" beside every section label on the site, and it needs no box around it. Held at zero scale until the row is hovered, focused or current, so the column stays quiet at rest. */ .nav-panel .nav-list > li > a::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-secondary); transform: scale(0); transition: transform var(--duration-fast) var(--ease-out); } .nav-panel .nav-list > li > a:hover, .nav-panel .nav-list > li > a:focus-visible { color: var(--color-secondary); } .nav-panel .nav-list > li > a:hover::before, .nav-panel .nav-list > li > a:focus-visible::before { transform: scale(1); } /* The page you are on: gold ink and the dot already lit, so the drawer answers "where am I" before anything is touched. The gold FILL this used to paint behind the label goes: at 1.55rem in a serif it read as a highlighter pen across the row, and it is kept for the sub-rows below, where a chip is what this template does with small caps. */ .nav-panel .nav-list > li > a[aria-current="page"] { color: var(--color-secondary); } .nav-panel .nav-list > li > a[aria-current="page"]::before { transform: scale(1); } /* ---- The drawer's CTA ------------------------------------------------- Full width, and taller than the bar's version: it is the last thing in the column the menu makes, and at .nav-cta's own 0.8rem/1.6rem it sat in the drawer like a button that had wandered in from the header. The pill shape is this template's, so it stays a pill rather than becoming a bar. */ .nav-panel .nav-cta { width: 100%; margin-top: var(--space-6); padding: 1.05rem 1.6rem; /* order, because the DOM order is not ours to keep. nav-fit.js sends this element home with panel.appendChild() - its panel home is the panel itself rather than the list, because this template's list is a
and a direct child of .hero-copy, so `.hero-copy > p` at (0,1,1) outranks `.eyebrow` at (0,1,0) and took the pill over: 17px instead of 12px, muted grey instead of primary, and a 32rem max-width that made it wrap to two lines on a phone. The home hero was the only place it happened, so the chip looked like a different component there than on the other seven pages. */ .hero-copy > p:not(.eyebrow) { font-size: var(--text-body-lg); color: var(--color-muted); max-width: 32rem; margin-bottom: var(--space-8); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* Once these wrap they are a stack, and a stack of two pills sized to their own labels is ragged - "Find Your Home" came out 213px against "Talk to Cali" at 153px. Below the width where they can sit side by side they share it instead. Not on .btn generally: the same class is a lone inline button elsewhere. */ @media (max-width: 30em) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } } .hero-figure { position: relative; justify-self: center; width: min(100%, 26rem); } .hero-figure img { width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; border-radius: var(--radius-arch); box-shadow: var(--shadow-lg); } .hero-figure::before { content: ""; position: absolute; inset: -1.1rem -1.1rem auto -1.1rem; height: 55%; border: 1.5px solid var(--color-secondary); border-bottom: none; border-radius: var(--radius-arch); opacity: 0.55; pointer-events: none; } /* Rotating circular badge */ .spin-badge { position: absolute; bottom: -2.25rem; left: -2.75rem; width: 8.5rem; height: 8.5rem; display: grid; place-items: center; } .spin-badge .spin-text { position: absolute; inset: 0; animation: spin 22s linear infinite; } .spin-badge .spin-text text { font-family: var(--font-body); font-size: 8.2px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; fill: var(--color-primary); } .spin-badge-core { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; background: var(--color-secondary); color: #fff; border-radius: 50%; } .spin-badge-core svg { width: 1.5rem; height: 1.5rem; } .spin-badge::before { content: ""; position: absolute; inset: 0.65rem; background: var(--color-accent); border-radius: 50%; z-index: -1; box-shadow: var(--shadow-md); } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 47.99em) { .spin-badge { left: auto; right: -0.75rem; bottom: -1.75rem; transform: scale(0.85); } } /* -------------------------------------------------------------------------- 8. Marquee strip -------------------------------------------------------------------------- */ .marquee { background: var(--color-primary); color: var(--color-accent); overflow: hidden; padding-block: var(--space-4); border-block: 1px solid var(--color-primary); } .marquee-track { display: flex; gap: var(--space-8); width: max-content; animation: marquee 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.06em; white-space: nowrap; } .marquee-track i { font-style: normal; color: var(--color-secondary); font-size: 0.9rem; } @keyframes marquee { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 9. Page hero (interior pages) — the home hero's band, text-led -------------------------------------------------------------------------- Deliberately the same ground, glow, measure and load-in as .hero-split, so an interior page reads as the same site rather than a second design. It differs in the two ways it has to: it is not full-height, and it carries no figure, because only some interior pages have a second image to spare and a hero that appears on four pages of seven is the inconsistency this replaced. Every child of .container here must be inside .hero-copy. The grid places direct children, so a bare
and
too, and a bare `> p` here beats .eyebrow on specificity - it would take the pill's own bottom margin away and sit it straight on the headline, which the home hero does not do. */ .page-hero .hero-copy > p:not(.eyebrow) { font-size: var(--text-body-lg); color: var(--color-muted); max-width: 34rem; } /* The headline is the last child on every one of these pages today, and its margin would push the copy off centre inside the band. */ .page-hero .hero-copy > :last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 10. Statement section — big serif with inline images -------------------------------------------------------------------------- */ .statement { max-width: 56rem; margin-inline: auto; text-align: center; font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.35; color: var(--color-primary); } .statement .inline-img { display: inline-block; width: clamp(3.5rem, 3rem + 2vw, 5.5rem); height: clamp(2.25rem, 2rem + 1.2vw, 3.25rem); border-radius: var(--radius-pill); object-fit: cover; vertical-align: middle; margin-inline: 0.35rem; transform: translateY(-4px); box-shadow: var(--shadow-sm); } .statement em { color: var(--color-secondary); } .statement-attribution { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); } .statement-attribution img { width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; } .statement-attribution strong { display: block; font-family: var(--font-body); font-size: var(--text-caption); font-weight: 700; color: var(--color-primary); text-align: left; } .statement-attribution span { font-size: var(--text-label); color: var(--color-muted); } /* -------------------------------------------------------------------------- 11. Property cards -------------------------------------------------------------------------- */ .section-foot { margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); text-align: center; } /* -------------------------------------------------------------------------- 12. Neighborhoods — horizontal snap row of arches -------------------------------------------------------------------------- */ .hood-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-6); -webkit-overflow-scrolling: touch; scrollbar-color: var(--color-secondary) var(--color-accent); scrollbar-width: thin; } .hood-card { scroll-snap-align: start; text-align: center; } .hood-card figure { position: relative; overflow: hidden; border-radius: var(--radius-arch); aspect-ratio: 3 / 4; margin-bottom: var(--space-4); } .hood-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); } .hood-card:hover img { transform: scale(1.07); } .hood-card figcaption { position: absolute; inset-inline: var(--space-3); bottom: var(--space-3); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: 0.6rem 1rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-primary); } .hood-card p { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); } /* -------------------------------------------------------------------------- 13. Services -------------------------------------------------------------------------- */ .service-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 48em) { .service-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .service-grid { grid-template-columns: repeat(3, 1fr); } } /* A four-card grid stays 2x2 at every width above the phone, rather than going three across and stranding the fourth on a row of its own. Buyers and sellers carry four; home carries two and about three, which is why this is a modifier and not a change to .service-grid itself. */ @media (min-width: 64em) { .service-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* And --2 for the same reason in the other direction. Home's "Two ways in" carries two cards into the base three-column grid, which left a third of the band empty beside them and read as a card that had failed to render. */ @media (min-width: 64em) { .service-grid--2 { grid-template-columns: repeat(2, 1fr); } } /* Static white, no hover state. Hover used to repaint the card --color-accent, which is the exact colour of the .section--accent band every service grid in this template sits on, so the card dissolved into its own background as the pointer crossed it. The card is not a link - the .link-arrow inside it is, and that keeps its own hover - so there is nothing the card-level state has to signal. Nothing animates any more, so the transition goes with it. */ .service-card { position: relative; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); } .service-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50% 50% 8px 8px; background: var(--color-primary); color: var(--color-secondary); margin-bottom: var(--space-6); } .service-icon svg { width: 1.4rem; height: 1.4rem; } .service-card h3 { font-size: 1.45rem; margin-bottom: var(--space-3); } .service-card p { color: var(--color-muted); font-size: var(--text-caption); line-height: 1.8; } .service-card .link-arrow { margin-top: var(--space-6); } /* Alternating service features (services page) */ .feature { display: grid; gap: clamp(2.5rem, 2rem + 3.5vw, 5rem); align-items: center; } @media (min-width: 64em) { .feature { grid-template-columns: repeat(12, 1fr); } /* The gap above is the space between the image and the text when this grid is one column on a phone. Spent 11 times across 12 columns it is not a gutter, it is the layout: at 5rem it left each column 24px wide, so the two blocks came out 90px narrower than the .contact-layout columns they sit alongside, with 184px of dead ground between them. The row gap is what the stacked layout needs; the column gap is a gutter. */ .feature { column-gap: var(--space-6); } /* grid-row is the load-bearing half of each of these. Auto-placement walks the items in order-modified document order and moves DOWN a row whenever an item's column-start is left of where the cursor already is - so a partial whose text comes before its image silently drops the image into a second row, left column, with a column of white space above it. That is how Buyers shipped. Pinning the row makes the placement independent of the order the partial happens to write the two blocks in. */ .feature-media { grid-column: 1 / 6; grid-row: 1; } .feature-body { grid-column: 7 / 13; grid-row: 1; } .feature--reverse .feature-media { grid-column: 8 / 13; grid-row: 1; } .feature--reverse .feature-body { grid-column: 1 / 7; grid-row: 1; } } .feature + .feature { margin-top: var(--section-padding); } /* Stacked, this figure gets the whole container, and at 707px wide the 4/4.4 ratio made it 777px tall - taller than a tablet viewport, for what is a supporting image beside a paragraph. Capping it at the width it has in the two-column layout keeps it the same picture at every size, and centring it stops the cap reading as a left-aligned image in a wide band. */ .feature-media { width: min(100%, 28rem); margin-inline: auto; } @media (min-width: 64em) { .feature-media { width: 100%; margin-inline: 0; } } .feature-media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--radius-arch); box-shadow: var(--shadow-md); } .feature-media--round img { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; } .feature-num { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-secondary); letter-spacing: 0.14em; display: block; margin-bottom: var(--space-3); } .feature-body h2, .feature-body h3 { margin-bottom: var(--space-4); } .feature-body > p { color: var(--color-muted); margin-bottom: var(--space-4); } .feature-body .btn, .feature-body .link-arrow { margin-top: var(--space-4); } /* -------------------------------------------------------------------------- 14. Checklist & value pills -------------------------------------------------------------------------- */ .checklist { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-6); } .checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-caption); } .checklist svg { width: 1.2rem; height: 1.2rem; color: var(--color-secondary); flex-shrink: 0; margin-top: 2px; } .value-list { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); } .value-item { display: flex; gap: var(--space-4); align-items: flex-start; } .value-item .service-icon { margin-bottom: 0; flex-shrink: 0; width: 3rem; height: 3rem; } .value-item .service-icon svg { width: 1.2rem; height: 1.2rem; } .value-item h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-bottom: var(--space-1); color: var(--color-text); } .value-item p { font-size: var(--text-caption); color: var(--color-muted); } /* -------------------------------------------------------------------------- 15. Timeline (vertical process) -------------------------------------------------------------------------- */ .timeline { position: relative; max-width: 44rem; margin-inline: auto; padding-left: 3.5rem; } .timeline::before { content: ""; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem; width: 1.5px; background: linear-gradient(to bottom, var(--color-secondary), var(--color-border)); } .timeline-item { position: relative; padding-bottom: var(--space-12); } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ""; position: absolute; left: -3.5rem; top: 0.4rem; width: 2.2rem; height: 2.2rem; border-radius: 50% 50% 6px 6px; background: var(--color-accent); border: 1.5px solid var(--color-secondary); } .timeline-item::after { content: attr(data-step); position: absolute; left: -3.5rem; top: 0.4rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.95rem; color: var(--color-primary); } .timeline-item h3 { font-size: 1.4rem; margin-bottom: var(--space-2); } .timeline-item p { color: var(--color-muted); font-size: var(--text-caption); max-width: 36rem; } .section--dark .timeline-item p { color: var(--color-on-dark-muted); } .section--dark .timeline-item::before { background: var(--color-primary-soft); } .section--dark .timeline-item::after { color: var(--color-accent); } .section--dark .timeline::before { background: linear-gradient(to bottom, var(--color-secondary), var(--color-on-dark-border)); } /* -------------------------------------------------------------------------- 16. Stats band -------------------------------------------------------------------------- */ .faq-list { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); } .faq-item { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out); } .faq-item.is-open { border-color: var(--color-secondary); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); text-align: left; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-primary); } .faq-question svg { width: 1.15rem; height: 1.15rem; color: var(--color-secondary); flex-shrink: 0; transition: transform var(--duration-med) var(--ease-out); } .faq-item.is-open .faq-question svg { transform: rotate(45deg); } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-med) var(--ease-out); } .faq-item.is-open .faq-answer { grid-template-rows: 1fr; } .faq-answer-inner { overflow: hidden; } .faq-answer p { padding: 0 var(--space-6) var(--space-6); color: var(--color-muted); font-size: var(--text-caption); line-height: 1.85; } /* -------------------------------------------------------------------------- 20. CTA band — warm arch -------------------------------------------------------------------------- */ .cta-band { position: relative; background: var(--color-primary); color: var(--color-on-dark); overflow: hidden; } .cta-band::before { content: ""; position: absolute; bottom: -24rem; left: 50%; transform: translateX(-50%); width: 52rem; height: 52rem; background: radial-gradient(circle at 50% 50%, rgba(201, 168, 106, 0.32) 0%, rgba(42, 61, 69, 0) 62%); border-radius: 50%; pointer-events: none; } .cta-band .container { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: center; } @media (min-width: 64em) { .cta-band .container { grid-template-columns: 7fr 4fr; } } .cta-band h2 { color: var(--color-on-dark); margin-bottom: var(--space-4); } /* :not(.eyebrow) again - see .section-head. Every page closes on this band and every one of them opens it with a
, so this rule was overriding the chip's size, its colour and its bottom margin on all eight pages. .eyebrow--on-dark is a single class too and lost the same way, which is why the pill's translucent fill never showed. */ .cta-band p:not(.eyebrow) { color: var(--color-on-dark-muted); font-size: var(--text-body-lg); max-width: 32rem; margin-bottom: var(--space-8); } .cta-figure { justify-self: center; width: min(100%, 20rem); } .cta-figure img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--radius-arch); border: 1.5px solid rgba(201, 168, 106, 0.4); } /* -------------------------------------------------------------------------- 21. Forms -------------------------------------------------------------------------- */ .contact-layout { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 5rem); } /* The form takes the wide column and the details the narrow one. It was the other way round: the injected form - five fields, two of them side by side, a message box and a consent paragraph - was folded into 453px while four lines of address and phone number had 635px and left most of it empty. */ @media (min-width: 64em) { .contact-layout { grid-template-columns: 7fr 5fr; align-items: start; } } .contact-info { display: flex; flex-direction: column; gap: var(--space-8); } .contact-item { display: flex; gap: var(--space-4); align-items: flex-start; } /* The label and the value are one column beside the icon, not two more items in its row. Without this wrapper the three children of .contact-item lay out as icon | OFFICE | 222 Demo State St on a single line, which put every value at a different left edge and wrapped the long ones under their own label. */ .contact-item__text { min-width: 0; } .contact-item .service-icon { margin-bottom: 0; flex-shrink: 0; width: 3rem; height: 3rem; } .contact-item .service-icon svg { width: 1.2rem; height: 1.2rem; } .contact-item h3 { font-family: var(--font-body); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-1); } .contact-item p, .contact-item a { font-size: var(--text-body-lg); color: var(--color-primary); line-height: 1.5; } .contact-item a:hover { color: var(--color-secondary-hover); } .contact-form-panel { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1.4rem + 2vw, 3rem); box-shadow: var(--shadow-md); } .contact-form-panel h2 { margin-bottom: var(--space-2); } .contact-form-panel > p { color: var(--color-muted); font-size: var(--text-caption); margin-bottom: var(--space-8); } .contact-map { margin-top: var(--section-padding); } .contact-map img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-lg); } /* -------------------------------------------------------------------------- 23. Footer -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Hero load-in */ .hero-copy > * { animation: hero-rise 1s var(--ease-out) both; } .hero-copy > *:nth-child(1) { animation-delay: 0.05s; } .hero-copy > *:nth-child(2) { animation-delay: 0.18s; } .hero-copy > *:nth-child(3) { animation-delay: 0.32s; } .hero-copy > *:nth-child(4) { animation-delay: 0.46s; } .hero-copy > *:nth-child(5) { animation-delay: 0.6s; } .hero-figure { animation: hero-rise 1.1s var(--ease-out) 0.25s both; } @keyframes hero-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } .spin-badge .spin-text { animation: none; } } /* ===================================================================== ADDED IN CONVERSION — markup the source template did not have ===================================================================== */ .ylopo-easy-widget { min-height: 420px; position: relative; } .ylopo-easy-widget.ylopo-loading::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius, 8px); background: linear-gradient(90deg, var(--color-surface, #f1ece4) 25%, #fff 37%, var(--color-surface, #f1ece4) 63%); background-size: 400% 100%; animation: california-shimmer 1.4s ease infinite; } .ylopo-easy-widget.ylopo-ready::before { display: none; } @keyframes california-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* ---- Market trends host (Gold, one page per community) ---------------- Same job as the rail above, and it was not doing it: this host reserved no height at all, so on a Market Trends page the listings band and the two below it sat 724px too high and dropped the moment the chart landed. It gets the listings widget's own floor and shimmer, so the two read as one system. The hook is :not(:has(*)) rather than the .ylopo-loading class the rail uses - ylopo-bundle.js only sets that class on the listings widget. :empty would not work either: the Nunjucks source leaves a newline inside this div, and a text node is enough to fail :empty. The floor is deliberately BELOW the widget's real height (measured 724px at 1440). min-height only reserves, so a low floor absorbs most of the shift and can never leave a hole under a widget that came in shorter. */ .ylopo-market-trends { position: relative; } .ylopo-market-trends:not(:has(*)) { min-height: 420px; } .ylopo-market-trends:not(:has(*))::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface) 25%, #fff 37%, var(--color-surface) 63%); background-size: 400% 100%; animation: california-shimmer 1.4s ease infinite; } /* ---- Chart clearance under the metric tabs --------------------------- The four metric tabs carry 0.6rem below them and the chart no margin at all, and the chart's top axis label is drawn ABOVE its own box: the skin gives that svg overflow:visible so the vendor's fixed 600x200 viewBox is not clipped. Measured, the top label lands 5px under the tab row at 1440 - close enough to read as a collision. 1.75rem puts it in proportion with the 2.75rem the skin sets between the stat tiles and the tabs. WHY THE SELECTOR IS SHAPED LIKE THIS. The rule it corrects lives in the OTHER project - ylopo-grid's templates/california.css - which ylopo-bundle.js appends AFTER this stylesheet, so an equal-specificity rule here loses on cascade order. That skin selects with six classes; this restates the same six and adds one element, which outranks it without !important. It is a copy of a selector this repo does not own: if the tab or chart spacing is ever set deliberately in the skin, delete this block rather than tuning it, and make the change there where it belongs. */ .ylopo-market-trends .YLOPO-widget .market-trends .market-trends-content .market-trends-area div.market-trends-desktop { margin-top: 1.75rem; } /* Credential list on About. The source had no bulleted list of its own. */ .check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.85rem; } .check-list li { display: flex; align-items: flex-start; gap: 0.7rem; line-height: 1.5; } .check-list svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; color: var(--color-secondary, #c9a86a); } /* QA build notices, visible while the reviews, sold-properties and contact widgets are being built. Remove once all three ship. */ .qa-note { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; max-width: 60ch; margin-inline: auto; padding: 1.4rem 1.6rem; border: 1px dashed var(--color-secondary, #c9a86a); border-radius: var(--radius, 8px); background: color-mix(in srgb, var(--color-secondary, #c9a86a) 8%, transparent); text-align: left; } .qa-note__tag { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--color-secondary, #c9a86a); border-radius: 999px; padding: 0.35rem 0.8rem; } .qa-note p { font-size: 0.94rem; flex: 1 1 22ch; margin: 0; } @media (max-width: 640px) { .qa-note { flex-direction: column; gap: 0.8rem; } } /* Mobile CTA width ---------------------------------------------------- At phone widths a standalone CTA goes full width with its label centred. Sized to its own text it leaves a ragged edge against the copy above it, and of two stacked buttons the shorter reads as the lesser one purely because it is narrower. .hero-actions already stacks below 30em; this raises that to the same breakpoint as the buttons so the two cannot disagree. Card actions and widget-injected markup are excluded. Written as a max-width override rather than a mobile-first base rule so the desktop layout cannot be affected by construction. */ @media (max-width: 640px) { .btn { width: 100%; justify-content: center; text-align: center; } .community .btn, .ylopo-easy-widget .btn { width: auto; } .hero-actions { flex-direction: column; align-items: stretch; } /* .link-arrow is a text CTA rather than a button, so it is centred without being stretched. fit-content keeps its underline and arrow tight to the label instead of dragging them across the column. */ .link-arrow { display: flex; width: fit-content; margin-inline: auto; } } /* Sold page with nothing to show. The visitor-facing counterpart to .qa-note: an agent whose Ylopo agent ids are not on file yet gets this instead of an empty band. Which of the two renders is decided in Nunjucks - the widget has to be absent from the page, not hidden here. */ .sold-empty { max-width: 46ch; margin-inline: auto; padding: var(--space-8, 2rem) var(--space-4, 1rem); text-align: center; border-top: 1px solid var(--color-border, #E8E2D6); border-bottom: 1px solid var(--color-border, #E8E2D6); } .sold-empty .sold-empty__title { font-family: var(--font-display, Georgia, serif); font-size: var(--text-h4, 1.375rem); font-weight: 400; margin: 0 0 var(--space-3, 0.75rem); color: var(--color-text, #2C2C2C); } .sold-empty p { margin: 0; font-size: var(--text-body, 1rem); color: var(--color-muted, #707070); } .sold-empty a { color: var(--color-secondary, #C9A86A); text-decoration: underline; text-underline-offset: 0.2em; } .sold-empty a:hover { color: var(--color-secondary-hover, #B8945A); } /* Sale date on sold cards - OFF unless SHOW_SOLD_DATE is on in scripts/feature-flags.mjs, which is what emits data-sold-date on the widget. The Ylopo widget puts the date in .gallery-card-b-generate-sort-block, which this template's card CSS in the ylopo-grid project hides outright. Overriding that !important needs both the flag attribute and this specificity, so the rule lives here rather than there - and so the per-template design of the bar, when it happens, sits with the rest of this template's tokens. :has(.sold-date) is load-bearing, not decoration. For-sale cards reuse the same container for "Listed 4 Months Ago", so revealing it unscoped would put that strip on every listing card on every home and search page. Only a sold card has .sold-date inside. Two selectors, not one: the card redesign takes .property-details-wrap out of layout with display:none, and on these templates that wrapper holds the sort block and nothing else - so the block alone computes to a 0x0 box inside a hidden parent. Revealing the wrapper duplicates no content precisely because it is otherwise empty; check that still holds before copying this to a new template. Still wearing the widget's own grey bar styling: designing it per template is the work that has to happen before the flag is turned on. */ .ylopo-easy-widget[data-sold-date="true"] .property-details-wrap:has(.sold-date), .ylopo-easy-widget[data-sold-date="true"] .gallery-card-b-generate-sort-block:has(.sold-date) { display: flex !important; } /* Backdrop for the nav drawer. Created by the template's script, not by the layout, so no markup changes. It exists as much to swallow the click as to dim the page: tapping beside an open drawer should dismiss it and nothing else, and a dim painted with a shadow on the panel would let that tap fall through to a link underneath. Sits one below the drawer. */ .nav-backdrop { position: fixed; inset: 0; /* This template's own ink at 0.55 rather than neutral black, with a little blur: the page behind the drawer should read as set down, not switched off. The blur is on the backdrop and not on the panel - backdrop-filter on the panel would make it the containing block for anything fixed inside it, which is the trap the header note above already describes. */ background: rgba(42, 61, 69, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--duration-med) var(--ease-out), visibility 0s linear var(--duration-med); z-index: 98; } .nav-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }