/* Original editorial composition: quiet glass only where it serves hierarchy. */ :root{--klre-ink:#12263a;--klre-navy:#003057;--klre-paper:#f7f9fb;--klre-muted:#55636e;--klre-line:#d5dde4;--klre-gutter:clamp(1.25rem,5vw,4rem)} *{box-sizing:border-box}html{scroll-padding-top:2rem}body{margin:0}a{text-underline-offset:.22em}a,button,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid #003057;outline-offset:5px}h1,h2,h3,p{overflow-wrap:break-word}h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}button,input,select,textarea{font:inherit}img{max-width:100%;height:auto}.wp-site-blocks{padding-top:0;padding-bottom:0}.wp-site-blocks>header,.wp-site-blocks>footer{margin-block-start:0}.klre-main{margin-block-start:0!important}.klre-home>.wp-block-post-content{max-width:1240px}.klre-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1240px;margin:auto;min-height:112px;border-bottom:1px solid var(--klre-line)}.klre-brand{display:flex;align-items:center;gap:.8rem;color:var(--klre-ink);text-decoration:none;font-size:1.08rem;font-weight:750;letter-spacing:.1em;line-height:1.2;flex-shrink:0}.klre-brand-photo{width:52px;height:52px;flex:0 0 auto;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px rgba(23,44,42,.14)}.klre-brand-sub{display:block;font-size:.62rem;font-weight:550;letter-spacing:.22em;margin-top:.4rem}.klre-desktop-nav{display:flex;gap:1.15rem;align-items:stretch;align-self:stretch} .klre-nav-item{position:relative;display:flex;align-items:center} .klre-nav-item>a{font-size:.88rem;text-decoration:none;color:var(--klre-ink);padding:.8rem 0;display:inline-flex;align-items:center;gap:.34rem;white-space:nowrap} /* Caret geometry: a rotated square sharing two borders, so it inherits colour and needs no icon file. It flips to point up while the panel is open, which is the affordance telling a pointer user the panel is open. One class serves the desktop caret button and the drawer's, so the two cannot drift. */ .klre-caret{width:.4em;height:.4em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.14em);opacity:.7;transition:transform .16s ease} .klre-nav-item:hover .klre-caret, .klre-nav-item:focus-within .klre-caret, .klre-nav-item[data-klre-open] .klre-caret, .klre-drawer-group[data-klre-open] .klre-caret{transform:rotate(225deg) translateY(-.04em)} /* The caret is a button, not decoration. It is the only part of a nav item that can mean "open the menu" while the label beside it means "go to the hub": a click on the label cannot do both, because the hover reveal has already opened the panel by the time a pointer reaches it. */ .klre-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:2.2rem;margin-left:.05rem;padding:0;background:none;border:0;color:var(--klre-ink);cursor:pointer;border-radius:6px} .klre-nav-toggle:hover{background:#12263a12} /* Used for the accessible name of the caret buttons, which draw no text. */ .klre-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* The panel hangs from the bottom of the sticky bar, not from the bottom of the link box, because the item is stretched to the bar height. */ .klre-nav-panel{position:absolute;top:100%;left:0;z-index:110;min-width:14.5rem;padding:.5rem;display:grid;gap:.05rem;background:#f7f9fb;border:1px solid var(--klre-line);border-radius:0 0 10px 10px;box-shadow:0 18px 38px #12263a1f;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-.35rem);transition:opacity .14s ease,transform .14s ease,visibility .14s ease} .klre-nav-panel a{font-size:.84rem;line-height:1.3;text-decoration:none;color:var(--klre-ink);padding:.5rem .68rem;border-radius:6px;white-space:nowrap} .klre-nav-panel a:hover{background:#e8eef5} /* Two equal columns, and the branch's own hub spans both. * * Measure this rather than trusting it. As two plain "1fr" tracks the columns * came out 217px and 94px, because "The Greater Sacramento Region" is 217px of * unbreakable text and sets the first track's min-content floor while "Sacramento" * sets the second at 94 -- so the city column rendered as narrow chips beside a * wide one. Making the first entry full width removes the long line from the track * calculation entirely; what is left is eleven city names of 65-110px, which fit * comfortably inside the two 143px tracks the 19rem min-width produces. * * Spanning it is also the honest reading: that entry is the hub the other eleven * hang from, not a twelfth city. */ .klre-nav-panel--2col{grid-template-columns:repeat(2,minmax(0,1fr));min-width:19rem} .klre-nav-panel--2col>a:first-child{grid-column:1/-1} /* Revealed on hover, on focus-within, and on a click of the caret button. The hover and focus rules stay first so a keyboard user who tabs to the label gets the panel with no script running; the click rule is what makes the caret work on a device that has no hover at all. */ .klre-nav-item:hover>.klre-nav-panel, .klre-nav-item:focus-within>.klre-nav-panel, .klre-nav-item[data-klre-open]>.klre-nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} /* Last rule on purpose: equal specificity to the :focus-within rule above, so source order is what lets Escape win while the pointer is still hovering. */ .klre-nav-item[data-force-closed]>.klre-nav-panel{opacity:0;visibility:hidden;pointer-events:none}.klre-button,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.9rem 1.35rem;background:var(--klre-navy);color:#fff!important;border:1px solid transparent;border-radius:6px;text-decoration:none;font-size:.95rem;font-weight:650;line-height:1.4;transition:background .16s ease,box-shadow .16s ease}.klre-button:hover,.wp-block-button__link:hover{background:#00223d;box-shadow:0 5px 14px #12263a15}.klre-header-action .klre-button{font-size:.84rem;white-space:nowrap}.klre-skip-link{position:fixed;top:8px;left:8px;z-index:1000;background:#fff;color:var(--klre-ink);padding:1rem;transform:translateY(-160%)}.klre-skip-link:focus{transform:none}.klre-menu{display:none}.klre-hero{position:relative;display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"copy aside" "trust aside";column-gap:clamp(2.5rem,6vw,6rem);row-gap:clamp(1.25rem,2vw,1.9rem);align-items:start;padding:clamp(3.5rem,6vw,6rem) 0 4rem;isolation:isolate}.klre-hero:before{content:"";position:absolute;z-index:-1;inset:0 -3vw 0 33%;background:radial-gradient(ellipse at 78% 32%,#cfe0f0b3,transparent 64%);pointer-events:none}.klre-eyebrow{font-size:.7rem;font-weight:700;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--klre-navy);margin:0 0 1.5rem}.klre-hero h1{font-size:clamp(2.7rem,4.75vw,4.8rem);font-weight:520;line-height:1.045;letter-spacing:-.055em;margin:0 0 1.7rem;max-width:680px}.klre-hero-lead{font-size:1.18rem;line-height:1.65;max-width:38rem} .klre-hero-copy{grid-area:copy} .klre-hero-aside{grid-area:aside} .klre-hero-trust{grid-area:trust;align-self:start} /* Flexible-timing guidance. A quiet rounded panel rather than another bordered box: the hero already has one large glass card, and a second hard edge beside it competes with it. No border, just a tinted surface and rounded corners. */ .klre-timing{ margin-top:1.7rem; padding:1.15rem 1.3rem 1.25rem; background:#eff4f9; border-radius:14px; } .klre-timing>.klre-eyebrow{margin:0 0 .45rem;font-size:.62rem;letter-spacing:.12em} .klre-timing>h2{font-size:1.03rem;font-weight:600;letter-spacing:-.012em;line-height:1.35;margin:0 0 .8rem} .klre-timing-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem} .klre-timing-list li{font-size:.88rem;line-height:1.5;color:var(--klre-muted);margin-block-start:0} .klre-timing-list li strong{color:var(--klre-ink);font-weight:600} /* The headline break. Two spans, inline by default so narrow screens wrap naturally, block above 900px so "Sell Your House for Cash" holds together as one unit. There is no hyphen in the headline for a line to break against. */ .klre-hero h1 .klre-h1-l{display:inline} @media(min-width:901px){.klre-hero h1 .klre-h1-l{display:block}} /* Emphasis on the seven-day clause by weight and ink colour, not a badge. The brief forbids anything that reads as a discount promotion. */ .klre-hero-speed{color:var(--klre-ink);font-weight:600}.klre-hero-copy>p:not(.klre-eyebrow){color:var(--klre-muted)}.klre-hero-copy>.wp-block-buttons{margin-top:2rem}.klre-fineprint{font-size:.79rem;max-width:25rem;line-height:1.55;margin-top:1rem}.klre-glass{background:#fffffff0;border:1px solid #fff;box-shadow:0 18px 55px #0b25400c,inset 0 1px 0 #fff;border-radius:14px}.klre-form-panel{padding:clamp(1.35rem,2.6vw,2.3rem);margin:0!important;position:relative}.klre-form-panel h2{font-size:clamp(1.8rem,2.5vw,2.35rem);letter-spacing:-.04em;margin:0 0 .65rem}.klre-form-panel>.klre-eyebrow{font-size:.64rem;margin-bottom:1.05rem}.klre-form-panel>p:not(.klre-eyebrow){font-size:.9rem;color:var(--klre-muted);line-height:1.65;margin-bottom:1.05rem}.klre-form-panel form{margin:0}.klre-form-panel label{display:block;font-size:.83rem;font-weight:600;color:var(--klre-ink);margin-bottom:.4rem}.klre-form-panel input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),.klre-form-panel textarea,.klre-form-panel select{display:block;width:100%;min-height:48px;background:#fcfdfe;border:1px solid #b9c8d6;border-radius:5px;color:var(--klre-ink);padding:.72rem .8rem;font-size:1rem}.klre-form-panel textarea{min-height:100px}.klre-form-panel input[type=checkbox]{width:20px;height:20px;accent-color:var(--klre-navy);flex-shrink:0}.klre-form-panel button[type=submit],.klre-form-panel input[type=submit]{width:100%;min-height:50px;background:var(--klre-navy);color:#fff;border:0;border-radius:6px;padding:.9rem;font-weight:650;cursor:pointer}.klre-form-panel small{color:var(--klre-muted);line-height:1.55}.klre-principles{display:flex;justify-content:space-between;gap:1.5rem;padding:1.65rem 0;border-block:1px solid var(--klre-line)}.klre-principles p{margin:0;font-size:.88rem;font-weight:550}.klre-principles p:before{content:"↗";color:var(--klre-navy);margin-right:.8rem}.klre-section{padding:clamp(3.5rem,7vw,6.25rem) 0;margin:0!important}.klre-section>.klre-eyebrow{margin-bottom:1.2rem}.klre-section>h2{max-width:770px;margin:0 0 1.5rem;font-size:clamp(2rem,3.8vw,3.35rem)}.klre-section>p:not(.klre-eyebrow){max-width:740px;color:var(--klre-muted)}.klre-section>p:last-child a{font-size:.95rem;font-weight:600}.klre-section+.klre-section{border-top:1px solid var(--klre-line)}.klre-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;margin:3rem 0 2rem}.klre-step-number{font-size:2.9rem;line-height:1;font-weight:350;letter-spacing:-.05em;color:var(--klre-navy);margin:0 0 2rem}.klre-step h3{margin:0 0 .8rem}.klre-step p:last-child{color:var(--klre-muted);font-size:.97rem}.klre-situations{padding:0;margin:2.5rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem;list-style:none}.klre-situations li{padding:1.2rem 0;border-top:1px solid var(--klre-line);font-size:1.03rem;display:flex;gap:1rem;align-items:baseline}.klre-situations li:before{content:"↗";color:var(--klre-navy)}.klre-holding{display:grid;grid-template-columns:1fr 1fr;column-gap:5rem}.klre-holding>.klre-eyebrow{grid-column:1/-1}.klre-holding>h2{grid-row:2/4}.klre-holding>p{margin-top:0}.klre-options{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2.5rem 0}.klre-option{padding:2.5rem;background:#eef3f8;border:1px solid #d3dee7;border-radius:8px;margin:0!important}.klre-option-direct{background:#dfe9f3}.klre-option h3{font-size:1.75rem;margin:0 0 1.2rem}.klre-option p,.klre-option li{font-size:.95rem;color:var(--klre-muted)}.klre-option ul{padding-left:1.15rem;margin-top:1.5rem}.klre-option li{padding:.4rem 0}.klre-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;margin-top:2.5rem}.klre-benefit{border-top:2px solid #5b8fbe;padding-top:1.5rem}.klre-benefit h3{margin-top:0}.klre-benefit p{color:var(--klre-muted);font-size:.97rem} /* ========================================================================== WORDPRESS'S BLOCK GAP DOES NOT BELONG INSIDE A GRID -------------------------------------------------------------------------- Core's is-layout-flow rule puts `margin-block-start: ` on every child after the first. That is correct for a stack of paragraphs. Inside one of our grids it is a bug, because the gap already owns the spacing: it pushed columns 2 and 3 down by exactly 20px and knocked their top rules out of line with column 1 in .klre-benefits, which is what Kevin spotted. Measured before the fix, at 1440px, on .klre-benefit: #0 margin-top=0px height=141.359px #1 margin-top=20px height=121.359px #2 margin-top=20px height=121.359px Grid stretch shrinks an item's border box by its own margin, which is where the 20px of extra height on the first column came from as well. Zeroing the margin on direct children of every grid and row container fixes both halves. ========================================================================== */ .klre-benefits>*, .klre-steps>*, .klre-options>*, .klre-commitments>*, .klre-situations>*, .klre-footer-top>*, .klre-footer-links>*, .klre-trust-row>*, .klre-principles>*, .klre-chooser>*, .klre-words>*, .klre-related>*, .klre-area-list>*{margin-block-start:0}.klre-qualification{background:var(--klre-ink);color:var(--klre-paper);padding:clamp(2rem,5vw,4rem)!important;border-radius:10px;margin-bottom:4rem!important}.klre-qualification>.klre-eyebrow,.klre-qualification>p:not(.klre-eyebrow){color:#cfdce8}.klre-qualification .wp-block-button__link{background:#dfeaf4;color:#12263a!important}.klre-kevin{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(2rem,5vw,5rem);row-gap:1.5rem;align-items:start}.klre-kevin>*{margin-block-start:0}.klre-kevin>.klre-eyebrow{grid-column:1/-1;grid-row:1}.klre-kevin>h2{grid-column:1/-1;grid-row:2;margin-bottom:0}.klre-kevin>.klre-portrait{grid-column:1;grid-row:3;justify-self:start;margin-bottom:0}.klre-kevin>.klre-kevin-body{grid-column:2;grid-row:3}.klre-kevin>.klre-kevin-body>*{margin-block-start:0}.klre-kevin>.klre-kevin-body>p+p{margin-top:1.15rem}.klre-commitments{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem;margin-top:2.5rem}.klre-commitments li{font-size:.97rem;color:var(--klre-muted)}.klre-commitments strong{display:block;color:var(--klre-ink);font-size:1.15rem;margin-bottom:.5rem}.klre-listing-alternative{padding-block:3rem!important}.klre-listing-alternative>h2{font-size:clamp(1.65rem,2.8vw,2.5rem)}.klre-faq-list{max-width:900px;margin-top:2.5rem}.wp-block-details{border-bottom:1px solid var(--klre-line);margin-top:0!important;padding:0}.wp-block-details:first-child{border-top:1px solid var(--klre-line)}.wp-block-details summary{position:relative;display:block;list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;font-weight:550;min-height:60px;font-size:1.04rem}.wp-block-details summary::-webkit-details-marker{display:none}.wp-block-details summary:after{content:"+";position:absolute;right:.5rem;top:1.1rem;font-size:1.5rem;font-weight:350;color:var(--klre-navy)}.wp-block-details[open] summary:after{content:"−"}.wp-block-details p{margin:0 0 1.5rem;color:var(--klre-muted);max-width:750px;font-size:.97rem}.klre-final-cta{position:relative;text-align:center;padding:clamp(3rem,7vw,6rem) 1.5rem!important;background:#e8eef5;border:1px solid #d2dde7!important;border-radius:12px;margin:1rem 0 5rem!important;overflow:hidden}.klre-final-cta h2,.klre-final-cta p{margin-left:auto!important;margin-right:auto!important;max-width:650px}.klre-final-cta .wp-block-buttons{justify-content:center;margin-top:2rem}.klre-footer{max-width:1240px;margin:0 auto;padding:4rem 0 2rem;border-top:1px solid var(--klre-line)}.klre-footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem}.klre-footer-wordmark{font-size:clamp(1.7rem,2.5vw,2.5rem);font-weight:500;letter-spacing:-.045em;line-height:1.2;margin:0 0 1.3rem}.klre-footer-top>div>p:not(.klre-footer-wordmark){font-size:.8rem;color:var(--klre-muted)}.klre-footer h2{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:0 0 1.2rem}.klre-footer nav a{display:block;width:fit-content;color:var(--klre-muted);font-size:.88rem;text-decoration:none;padding:.5rem 0;min-height:40px}.klre-footer-bottom{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--klre-line);color:var(--klre-muted);font-size:.75rem}.klre-footer-bottom>p{max-width:900px}.klre-footer-legal{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.25rem}.klre-footer-legal a{color:var(--klre-muted)}.klre-phone{font-size:.9rem;font-weight:600}.klre-mobile-cta{display:none}.klre-page{padding-top:clamp(3rem,6vw,6rem);padding-bottom:4rem;min-height:60vh}.klre-page>.wp-block-post-title{font-size:clamp(2.5rem,5vw,4.5rem);margin-bottom:2rem}.klre-page .klre-form-panel{margin-top:2.5rem!important;margin-bottom:3rem!important}.klre-page .klre-steps{gap:1.5rem}.klre-page .klre-options{gap:1rem}.klre-page .klre-option{padding:1.75rem}.klre-page .klre-final-cta{margin-bottom:0!important}.wp-block-post-template{padding-left:0}.wp-block-post-template>li{padding-block:2rem;border-bottom:1px solid var(--klre-line)}.wp-block-post-template h2{font-size:2rem}.wp-block-search__input{border:1px solid #b9c8d6;border-radius:5px;min-height:48px}.wp-block-search__button{border-radius:5px;background:var(--klre-navy);color:#fff;border:0;padding:.75rem 1.2rem} @supports(backdrop-filter:blur(12px)){.klre-glass{background:#ffffffb8;backdrop-filter:blur(18px)}} @media(min-width:1600px){.klre-hero h1{font-size:clamp(3.75rem,4.3vw,4.6rem)}} @media(max-width:1420px){.klre-desktop-nav{gap:.8rem}.klre-nav-item>a{font-size:.79rem;gap:.2rem}.klre-header{gap:1rem}} @media(max-width:1080px){.klre-hero{gap:2.2rem}.klre-form-panel{padding:1.45rem}.klre-hero h1{font-size:clamp(2.75rem,5.3vw,4rem)}} /* 1024 was too early for the desktop navigation. Measured, the bar needs about 1200px to hold the wordmark, eight items and the button, so between 1025 and about 1190 the cluster ran past the right edge of the viewport and gave the whole document a horizontal scrollbar. The drawer stays up until there is genuinely room for the wide bar. */ @media(max-width:1279px){.klre-desktop-nav,.klre-header-action{display:none}.klre-menu{display:block}.klre-menu summary{min-height:44px;min-width:75px;cursor:pointer;display:flex;align-items:center;gap:1.3rem;font-size:.88rem;list-style:none}.klre-menu summary::-webkit-details-marker{display:none}.klre-menu nav{position:absolute;right:0;left:0;top:calc(100% - 1px);z-index:100;background:#f7f9fb;border:1px solid var(--klre-line);border-radius:0 0 8px 8px;padding:1.25rem;box-shadow:0 16px 32px #12263a18;display:grid;grid-template-columns:1fr;gap:.25rem}.klre-menu nav a{padding:.65rem;min-height:44px;font-size:.92rem;color:var(--klre-ink)}.klre-menu nav .klre-button{grid-column:1/-1;margin-top:.5rem}} @media(max-width:900px){.klre-header{min-height:92px}.klre-hero{grid-template-columns:1fr;grid-template-areas:"copy" "aside" "trust";gap:2.5rem;padding-top:3rem}.klre-hero-copy{max-width:660px}.klre-hero h1{font-size:clamp(3rem,7.5vw,4.6rem)}.klre-hero-lead{font-size:1.13rem}.klre-form-panel{max-width:660px;width:100%;padding:2rem}.klre-principles{gap:1rem}.klre-principles p{font-size:.75rem}.klre-steps,.klre-benefits{gap:1.5rem}.klre-holding,.klre-kevin{column-gap:2rem}.klre-footer-top{gap:2rem;grid-template-columns:1.3fr 1fr 1fr}} @media(max-width:600px){.klre-header{min-height:84px}.klre-brand{font-size:.93rem}.klre-brand-sub{font-size:.54rem}.klre-hero{padding-top:2.5rem;padding-bottom:2.5rem;gap:2rem}.klre-hero h1{font-size:clamp(2.65rem,10.4vw,3.9rem);line-height:1.07;letter-spacing:-.05em}.klre-eyebrow{font-size:.62rem;letter-spacing:.12em}.klre-hero-lead{font-size:1.08rem}.klre-hero-copy>p:not(.klre-eyebrow):not(.klre-fineprint){font-size:1rem}.klre-hero-copy>.wp-block-buttons{margin-top:1.5rem}.klre-form-panel{padding:1.5rem}.klre-form-panel h2{font-size:1.85rem}.klre-principles{flex-direction:column;gap:.7rem;padding:1.25rem 0}.klre-principles p{font-size:.83rem}.klre-section{padding:3.25rem 0}.klre-section>h2{font-size:2.15rem}.klre-steps,.klre-benefits{grid-template-columns:1fr;gap:1.75rem;margin-top:2rem}.klre-step{display:grid;grid-template-columns:2.5rem 1fr;column-gap:1rem}.klre-step-number{grid-row:1/3;font-size:2rem;margin:.1rem 0 0}.klre-step h3{margin:0}.klre-step p:last-child{margin:.65rem 0 0}.klre-situations{grid-template-columns:1fr;margin-top:2rem}.klre-situations li{padding:1rem 0;font-size:.95rem}.klre-holding,.klre-kevin{display:block}.klre-holding>p,.klre-kevin>p{margin-top:1rem}.klre-kevin>.klre-portrait{margin:0 auto 1.5rem}.klre-options{grid-template-columns:1fr;margin:2rem 0}.klre-option,.klre-page .klre-option{padding:1.6rem}.klre-qualification{padding:2rem 1.5rem!important;margin-bottom:1rem!important}.klre-qualification h2{font-size:2rem}.klre-commitments{grid-template-columns:1fr;gap:1.5rem}.klre-final-cta{margin-bottom:3rem!important;padding:3rem 1.5rem!important}.klre-final-cta>h2{font-size:2.15rem}.wp-block-details summary{font-size:.98rem}.klre-footer{padding-top:2.5rem;padding-bottom:calc(7rem + env(safe-area-inset-bottom))}.klre-footer-top{grid-template-columns:1fr 1fr;gap:2rem 1.5rem}.klre-footer-top>div{grid-column:1/-1}.klre-footer nav a{min-height:44px;font-size:.82rem}.klre-footer-wordmark{font-size:2rem}.klre-footer-bottom{font-size:.72rem}.klre-mobile-cta{position:fixed;display:flex;align-items:center;gap:.75rem;bottom:0;left:0;right:0;z-index:90;padding:.7rem var(--klre-gutter) calc(.7rem + env(safe-area-inset-bottom));background:#f7f9fbf5;border-top:1px solid #ccd9e5;box-shadow:0 -4px 20px #12263a0b}.klre-mobile-cta>.klre-button{flex:1;font-size:.9rem;min-height:48px}.klre-mobile-phone .klre-phone{font-size:.8rem;display:flex;align-items:center;min-height:44px}.klre-page{padding-bottom:3rem}.klre-page>.wp-block-post-title{font-size:2.65rem}.klre-menu nav{max-height:75dvh;overflow-y:auto}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}} @media(forced-colors:active){.klre-glass,.klre-button,.klre-mobile-cta{border:1px solid CanvasText}.klre-hero:before{display:none}} @media print{.klre-mobile-cta,.klre-menu,.klre-header-action,.klre-form-panel{display:none}.klre-hero{display:block}.klre-section{padding:1.5rem 0}.klre-footer{padding-bottom:0}} /* ========================================================================== LIQUID GLASS SYSTEM v2 — Lucano Buys Houses -------------------------------------------------------------------------- Built as progressive enhancement. Four layers, each one optional: L0 translucent tint + hairline edge every browser, print, forced colors L1 specular rim + internal sheen browsers with CSS mask-composite L2 backdrop blur + saturation @supports backdrop-filter L3 SVG refraction lens Chromium, opt-in .klre-glass--refract Glass only reads as glass when there is something behind it to refract, so this layer also adds a restrained ambient wash (L0b) for the blur to bite on. No images, no animation, no JavaScript — every effect is a gradient, a blur, or a mask, so it costs nothing to paint and collapses gracefully. Fallback contract: with backdrop-filter, masks, and gradients all unsupported, every surface still renders an opaque light panel with a visible border. Nothing here is load-bearing for reading or for lead capture. ========================================================================== */ :root{ /* Surface */ --klre-glass-radius:14px; --klre-glass-blur:20px; --klre-glass-sat:165%; --klre-glass-tint-1:rgba(255,255,255,.78); --klre-glass-tint-2:rgba(250,251,247,.66); --klre-glass-tint-1-blur:rgba(255,255,255,.60); --klre-glass-tint-2-blur:rgba(248,250,245,.46); --klre-glass-hairline:rgba(255,255,255,.88); --klre-glass-ring:rgba(23,44,42,.10); /* Depth */ --klre-glass-drop: 0 1px 1px rgba(23,44,42,.03), 0 8px 20px -10px rgba(23,44,42,.14), 0 32px 64px -28px rgba(23,44,42,.22); --klre-glass-inner: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(23,44,42,.045); /* Ambient wash behind the glass */ --klre-ambient-tint:rgba(207,224,240,.55); --klre-ambient-navy:rgba(0,48,87,.10); } /* L0b — ambient wash. This is the layer that makes the glass legible as glass: a backdrop-filter with nothing to refract just looks like a flat milky box. Large soft radial washes give the blur real tonal variation to bite on at every scroll depth. Pure gradients, no images, no animation, no scroll repaint cost. */ body{ background-color:#f7f9fb; background-image: radial-gradient(120% 58% at 86% 6%,rgba(207,224,240,.60),rgba(207,224,240,0) 60%), radial-gradient(95% 52% at 4% 38%,rgba(213,227,216,.55),rgba(213,227,216,0) 64%), radial-gradient(110% 58% at 94% 74%,rgba(0,48,87,.09),rgba(0,48,87,0) 66%), radial-gradient(90% 46% at 12% 96%,rgba(207,224,240,.42),rgba(207,224,240,0) 64%), linear-gradient(180deg,#f7f9fb 0%,#eff4f9 38%,#e9f0f6 62%,#f3f7fb 100%); background-repeat:no-repeat; background-attachment:scroll; min-height:100%; } /* Keep the filter definition out of layout and out of the a11y tree. */ .klre-glass-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none} /* -------------------------------------------------------------------------- L0 + L1 — the base surface. Always opaque enough to guarantee text contrast. -------------------------------------------------------------------------- */ .klre-glass, .klre-glass--soft, .klre-glass--strong{ position:relative; isolation:isolate; border-radius:var(--klre-glass-radius); border:1px solid var(--klre-glass-hairline); background-image:linear-gradient(152deg,var(--klre-glass-tint-1),var(--klre-glass-tint-2)); background-color:var(--klre-glass-tint-1); box-shadow:0 0 0 1px var(--klre-glass-ring),var(--klre-glass-drop),var(--klre-glass-inner); } /* L1a — internal sheen. Negative z-index inside its own stacking context, so it sits above the surface tint but *under* all content: text contrast is never touched by the highlight. */ .klre-glass::before, .klre-glass--soft::before, .klre-glass--strong::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background-image: radial-gradient(125% 85% at 10% -12%,rgba(255,255,255,.85),rgba(255,255,255,0) 58%), radial-gradient(95% 75% at 102% 106%,var(--klre-ambient-tint),rgba(207,224,240,0) 62%); } /* L1b — specular rim. A 1px gradient border rendered with a mask, which is what produces the lit "liquid" edge. Purely a ring at the border box, so it can never overlap the content inside the surface's padding. */ .klre-glass::after, .klre-glass--soft::after, .klre-glass--strong::after{ content:""; position:absolute; inset:0; z-index:3; padding:1px; border-radius:inherit; pointer-events:none; background-image:linear-gradient(148deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.44) 20%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.18) 70%, rgba(255,255,255,.80) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } /* Without mask support the rim would cover the whole panel: drop it. */ @supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){ .klre-glass::after, .klre-glass--soft::after, .klre-glass--strong::after{display:none} } /* -------------------------------------------------------------------------- L2 — real backdrop blur. Lower the tint alpha now that the backdrop does the work; the values stay high enough that body copy keeps AA contrast even over a busy photograph. -------------------------------------------------------------------------- */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .klre-glass, .klre-glass--soft, .klre-glass--strong{ background-color:transparent; background-image:linear-gradient(152deg,var(--klre-glass-tint-1-blur),var(--klre-glass-tint-2-blur)); -webkit-backdrop-filter:blur(var(--klre-glass-blur)) saturate(var(--klre-glass-sat)); backdrop-filter:blur(var(--klre-glass-blur)) saturate(var(--klre-glass-sat)); } .klre-glass--soft{--klre-glass-blur:12px;--klre-glass-tint-1-blur:rgba(255,255,255,.72);--klre-glass-tint-2-blur:rgba(250,251,247,.58)} .klre-glass--strong{--klre-glass-blur:28px;--klre-glass-tint-1-blur:rgba(255,255,255,.52);--klre-glass-tint-2-blur:rgba(248,250,245,.38)} } /* -------------------------------------------------------------------------- L3 — SVG refraction (opt-in). The displacement map bends the backdrop toward the panel centre near the edges, which is the actual "liquid lens" tell. Guarded three ways so it can only ever run where it is proven to work: 1. `.klre-refract-on` on — set by a capability script that requires a Blink engine (`navigator.userAgentData`), so Safari and Firefox never take this branch and keep their plain backdrop blur. 2. @supports — the declaration is dropped entirely elsewhere. 3. min-width 901px — an SVG backdrop filter is markedly more expensive to composite than a plain blur, so phones stay on the cheap blur path. Deliberately NOT applied to the sticky header: a backdrop-filter on a sticky element is recomposited on every scroll frame. Only the static hero panel gets the lens, which is also where it reads most clearly. -------------------------------------------------------------------------- */ @media (min-width:901px){ @supports (backdrop-filter:url(#klre-glass-refraction)){ /* * `.klre-refract-on` is REQUIRED on every selector here. An earlier revision * also listed a bare `.klre-glass--refract`, which is a real defect: the * point of the capability class is that @supports is not sufficient. A * non-Blink engine can accept the declaration at parse time and then paint * nothing, costing those users the ordinary backdrop blur they already had. * Listing the bare class meant any browser that merely passed @supports * would take this branch. The gate is the defence; do not bypass it. */ .klre-refract-on .klre-form-panel, .klre-refract-on .klre-glass--refract{ -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter:url(#klre-glass-refraction) blur(var(--glass-blur)) saturate(var(--glass-saturation)); } } } /* -------------------------------------------------------------------------- SURFACES -------------------------------------------------------------------------- */ /* Navigation. The glass rides on the theme's header wrapper rather than on the bar itself, and that is deliberate. A sticky element is constrained to its containing block. `.klre-header-bar` is the only child of WordPress's `
`, so that wrapper is exactly as tall as the bar and the bar has zero travel: it computes to `position: sticky` and then behaves like a static element and scrolls off. Sticking the wrapper instead gives it `.wp-site-blocks` as its containing block, which is the full page height, so it actually pins. */ .wp-site-blocks>header.wp-block-template-part{ position:sticky; top:0; z-index:80; } .klre-header-bar{ padding-inline:var(--wp--style--root--padding-left,clamp(1.25rem,5vw,4rem)) var(--wp--style--root--padding-right,clamp(1.25rem,5vw,4rem)); border-radius:0; border-width:0 0 1px; border-color:rgba(255,255,255,.65); background-color:rgba(255,255,255,.88); background-image:linear-gradient(180deg,rgba(255,255,255,.80),rgba(250,251,247,.62)); box-shadow:0 1px 0 rgba(23,44,42,.05),0 12px 30px -22px rgba(23,44,42,.35); -webkit-backdrop-filter:blur(var(--klre-glass-blur)) saturate(var(--klre-glass-sat)); backdrop-filter:blur(var(--klre-glass-blur)) saturate(var(--klre-glass-sat)); --klre-glass-blur:22px; } .klre-header-bar> .klre-header{border-bottom:0;min-height:clamp(72px,7vw,88px)} .klre-header-bar::after{border-radius:0;background-image:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.12))} .klre-header-bar::before{ background-image: radial-gradient(70% 220% at 8% -60%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%), radial-gradient(50% 180% at 92% 160%,rgba(207,224,240,.55),rgba(207,224,240,0) 64%); } /* The sticky bar replaces the old rule-line under the header. */ .klre-header{border-bottom:0} /* Mobile navigation sheet. Opaque enough to read over any section beneath it. */ .klre-menu nav{ border-radius:0 0 var(--klre-glass-radius) var(--klre-glass-radius); border:1px solid rgba(255,255,255,.85); border-top:0; background-image:linear-gradient(175deg,rgba(255,255,255,.86),rgba(247,247,242,.80)); box-shadow:0 24px 48px -18px rgba(23,44,42,.28),inset 0 1px 0 rgba(255,255,255,.9); } /* Hero lead form — the single most important surface on the site. */ .klre-form-panel{--klre-glass-blur:26px} /* Sticky mobile action bar. */ .klre-mobile-cta{ background-image:linear-gradient(180deg,rgba(255,255,255,.82),rgba(247,247,242,.72)); background-color:rgba(247,247,242,.92); border-top:1px solid rgba(255,255,255,.75); box-shadow:0 -1px 0 rgba(23,44,42,.06),0 -18px 40px -26px rgba(23,44,42,.4); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); } /* Process cards. */ .klre-step{ padding:clamp(1.5rem,2.4vw,2rem); border-radius:var(--klre-glass-radius); border:1px solid rgba(255,255,255,.85); background-image:linear-gradient(158deg,rgba(255,255,255,.74),rgba(248,250,245,.56)); background-color:rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(23,44,42,.07),0 10px 26px -14px rgba(23,44,42,.16),inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6); position:relative; isolation:isolate; } .klre-step::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background-image:radial-gradient(120% 80% at 6% -14%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%); } .klre-step-number{margin-bottom:1.35rem} /* Property-situation list sits on its own quiet panel. */ .klre-situations{ padding:1rem clamp(1.25rem,2.4vw,2rem); border-radius:var(--klre-glass-radius); border:1px solid rgba(255,255,255,.85); background-image:linear-gradient(160deg,rgba(255,255,255,.72),rgba(248,250,245,.54)); background-color:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(23,44,42,.07),0 12px 30px -18px rgba(23,44,42,.16),inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); } .klre-situations li:first-child{border-top:0} /* Direct-sale vs listing comparison cards. */ .klre-option{ background-image:linear-gradient(160deg,rgba(255,255,255,.70),rgba(245,248,242,.52)); background-color:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.85); border-radius:var(--klre-glass-radius); box-shadow:0 0 0 1px rgba(23,44,42,.08),0 14px 34px -20px rgba(23,44,42,.18),inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); position:relative; isolation:isolate; } .klre-option-direct{ background-image:linear-gradient(160deg,rgba(232,243,233,.82),rgba(214,232,218,.62)); background-color:rgba(225,235,225,.8); border-color:rgba(255,255,255,.9); } .klre-option::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background-image:radial-gradient(120% 70% at 8% -16%,rgba(255,255,255,.85),rgba(255,255,255,0) 62%); } /* Trust strip. */ .klre-principles{ padding-inline:clamp(0px,1.6vw,1.5rem); border-block:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(23,44,42,.05); background-image:linear-gradient(180deg,rgba(255,255,255,.52),rgba(248,250,245,.30)); } /* FAQ — one glass container holding the accordion. */ .klre-faq-list{ padding:0 clamp(1.25rem,2.6vw,2.25rem); border-radius:var(--klre-glass-radius); border:1px solid rgba(255,255,255,.85); background-image:linear-gradient(164deg,rgba(255,255,255,.66),rgba(248,250,245,.46)); background-color:rgba(255,255,255,.62); box-shadow:0 0 0 1px rgba(23,44,42,.07),0 18px 44px -26px rgba(23,44,42,.2),inset 0 1px 0 rgba(255,255,255,.9); -webkit-backdrop-filter:blur(18px) saturate(165%); backdrop-filter:blur(18px) saturate(165%); position:relative; isolation:isolate; } .klre-faq-list::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background-image: radial-gradient(60% 40% at 100% 0%,rgba(207,224,240,.5),rgba(207,224,240,0) 70%), radial-gradient(70% 50% at 0% 100%,rgba(255,255,255,.8),rgba(255,255,255,0) 62%); } .klre-faq-list .wp-block-details summary{padding-inline-end:3rem} /* Closing call to action. */ .klre-final-cta{ background-color:rgba(238,243,235,.72); background-image:linear-gradient(160deg,rgba(255,255,255,.78),rgba(226,236,226,.55)); border:1px solid rgba(255,255,255,.9)!important; box-shadow:0 0 0 1px rgba(23,44,42,.07),0 26px 60px -30px rgba(23,44,42,.26),inset 0 1px 0 rgba(255,255,255,.95); -webkit-backdrop-filter:blur(20px) saturate(165%); backdrop-filter:blur(20px) saturate(165%); isolation:isolate; } .klre-final-cta::before{ content:""; position:absolute; inset:-20% -10%; z-index:-1; border-radius:inherit; pointer-events:none; background-image: radial-gradient(42% 60% at 16% 12%,rgba(0,48,87,.13),rgba(0,48,87,0) 68%), radial-gradient(46% 64% at 86% 88%,rgba(207,224,240,.75),rgba(207,224,240,0) 70%), radial-gradient(38% 55% at 62% 6%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%); } /* Qualifying block stays dark and near-opaque: light body copy over a translucent dark panel is exactly where glass would cost us WCAG contrast. */ .klre-qualification{ border:1px solid rgba(255,255,255,.16); background-image:linear-gradient(158deg,rgba(30,55,52,.97),rgba(19,40,38,.99)); box-shadow:0 30px 70px -34px rgba(23,44,42,.55),inset 0 1px 0 rgba(255,255,255,.14); position:relative; isolation:isolate; } .klre-qualification::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background-image: radial-gradient(80% 60% at 88% -20%,rgba(0,48,87,.5),rgba(0,48,87,0) 66%), radial-gradient(70% 60% at 4% 118%,rgba(207,224,240,.24),rgba(207,224,240,0) 62%); } /* Hero ambient: give the lead form something worth refracting. */ .klre-hero:before{ background-image: radial-gradient(ellipse at 78% 28%,rgba(213,227,216,.85),rgba(213,227,216,0) 62%), radial-gradient(ellipse 46% 52% at 96% 76%,rgba(0,48,87,.11),rgba(0,48,87,0) 70%), radial-gradient(ellipse 40% 44% at 52% 6%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%); } /* -------------------------------------------------------------------------- ACCESSIBILITY FALLBACKS Every one of these collapses the surface back to an opaque panel. Glass is decoration; legibility is not negotiable. -------------------------------------------------------------------------- */ @media (prefers-reduced-transparency:reduce){ .klre-glass,.klre-glass--soft,.klre-glass--strong,.klre-header-bar,.klre-step,.klre-situations, .klre-option,.klre-option-direct,.klre-faq-list,.klre-final-cta,.klre-mobile-cta,.klre-menu nav{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background-image:none!important; background-color:#fff!important; } .klre-glass::before,.klre-glass--soft::before,.klre-glass--strong::before, .klre-step::before,.klre-situations::before,.klre-option::before,.klre-faq-list::before, .klre-final-cta::before,.klre-qualification::before,.klre-header-bar::before{display:none} .klre-qualification{background-color:#12263a!important} .klre-final-cta{background-color:#eff4f9!important} } @media (prefers-contrast:more){ .klre-glass,.klre-glass--soft,.klre-glass--strong,.klre-header-bar,.klre-step,.klre-situations, .klre-option,.klre-option-direct,.klre-faq-list,.klre-final-cta,.klre-mobile-cta,.klre-menu nav{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; background-image:none!important; background-color:#fff!important; border-color:#12263a!important; } .klre-qualification{background-image:none!important;background-color:#0d1f1d!important} } /* Print: no glass, no sticky, no sticky action bar. */ @media print{ .klre-header-bar{position:static!important} .klre-glass,.klre-glass--soft,.klre-glass--strong,.klre-header-bar,.klre-step,.klre-situations, .klre-option,.klre-option-direct,.klre-faq-list,.klre-final-cta,.klre-menu nav{ background-image:none!important; background-color:#fff!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } .klre-glass::before,.klre-glass::after,.klre-header-bar::before,.klre-header-bar::after, .klre-step::before,.klre-option::before,.klre-faq-list::before,.klre-final-cta::before, .klre-qualification::before{display:none} } /* Small screens: shorter sticky bar, softer blur (cheaper on mobile GPUs). */ @media(max-width:900px){ .klre-header-bar> .klre-header{min-height:clamp(64px,9vw,76px)} .klre-header-bar{--klre-glass-blur:16px} } @media(max-width:600px){ .klre-step,.klre-situations,.klre-option,.klre-page .klre-option{padding:1.35rem} .klre-faq-list{padding:0 1.15rem} .klre-header-bar> .klre-header{min-height:64px} } /* ========================================================================== IN-PAGE OFFER DIALOG -------------------------------------------------------------------------- Hosts the same [klre_lead_form] shortcode the /cash-offer/ page uses. Native supplies focus containment, Escape, page inertness and focus restoration, so this block only has to handle appearance. The panel tint is deliberately near-opaque rather than as sheer as the other glass surfaces: a form is a task, and typed text needs a stable background. The frosted depth comes from the ::backdrop blur behind it instead. ========================================================================== */ .klre-dialog{ width:min(660px,calc(100vw - 2rem)); max-width:none; max-height:calc(100dvh - 2rem); padding:0; border:0; background:transparent; color:var(--klre-ink); overflow:visible; } .klre-dialog::backdrop{ background:rgba(23,44,42,.44); -webkit-backdrop-filter:blur(7px) saturate(120%); backdrop-filter:blur(7px) saturate(120%); } .klre-dialog-inner{ position:relative; max-height:calc(100dvh - 2rem); overflow:auto; overscroll-behavior:contain; padding:clamp(1.5rem,3vw,2.5rem); background-image:linear-gradient(152deg,rgba(255,255,255,.94),rgba(249,250,246,.90)); } .klre-dialog-inner>h2{ font-size:clamp(1.6rem,2.6vw,2.15rem); letter-spacing:-.035em; margin:0 0 .75rem; } .klre-dialog-lead{font-size:.95rem;color:var(--klre-muted);max-width:44ch;margin:0 0 1.5rem} .klre-dialog-inner>p:first-of-type{margin-bottom:1rem} .klre-dialog-close{ position:absolute; top:.8rem; right:.8rem; z-index:4; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(23,44,42,.14); border-radius:50%; background:rgba(255,255,255,.92); color:var(--klre-ink); font-size:1.3rem; line-height:1; cursor:pointer; transition:background .16s ease,border-color .16s ease; } .klre-dialog-close:hover{background:#fff;border-color:rgba(23,44,42,.3)} .klre-dialog[open]{animation:klre-dialog-rise .22s cubic-bezier(.2,.7,.3,1)} @keyframes klre-dialog-rise{ from{opacity:0;transform:translateY(12px) scale(.985)} to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){.klre-dialog[open]{animation:none}} @media(max-width:600px){ .klre-dialog{ width:100vw; max-height:100dvh; margin:auto 0 0; } .klre-dialog-inner{ max-height:100dvh; border-radius:16px 16px 0 0; padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); } } /* ========================================================================== HOMEPAGE STRUCTURE -------------------------------------------------------------------------- The hero used to hold the lead form in its right column. The form now opens in a dialog, which left that column empty and the copy stretched into it. The column is now filled deliberately: the copy states the offer, and a glass aside states the three things the offer does NOT require. ========================================================================== */ .klre-hero{align-items:start} .klre-hero-copy{max-width:40rem} .klre-hero-support{font-size:1.08rem;color:var(--klre-muted);max-width:36rem} .klre-hero-ctas{gap:.85rem;align-items:center;margin-top:2rem} .klre-hero-aside{ align-self:start; padding:clamp(1.6rem,2.6vw,2.35rem); border-radius:var(--klre-glass-radius); } .klre-hero-aside>h2{ font-size:clamp(1.45rem,2.2vw,1.9rem); letter-spacing:-.032em; margin:0 0 1.4rem; max-width:20ch; } .klre-hero-points{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:1.1rem} .klre-hero-points li{ padding-top:1.1rem; border-top:1px solid rgba(23,44,42,.10); font-size:.97rem; line-height:1.6; color:var(--klre-muted); } .klre-hero-points li:first-child{border-top:0;padding-top:0} .klre-hero-points strong{ display:block; margin-bottom:.32rem; font-size:1.06rem; font-weight:650; letter-spacing:-.015em; color:var(--klre-ink); } .klre-aside-note{font-size:.9rem;color:var(--klre-muted);margin:0} /* Secondary call to action: subordinate to the primary, still clearly tappable. */ .klre-cta-secondary .wp-block-button__link{ background:rgba(255,255,255,.72)!important; color:var(--klre-navy)!important; border:1px solid rgba(0,48,87,.38)!important; box-shadow:0 1px 2px rgba(23,44,42,.05); } .klre-cta-secondary .wp-block-button__link:hover{ background:#fff!important; border-color:var(--klre-navy)!important; box-shadow:0 5px 16px rgba(23,44,42,.10); } /* ========================================================================== COMPARISON CARDS -------------------------------------------------------------------------- Each card carries exactly one real anchor. Its ::after is stretched over the whole card, so the entire panel is clickable and the hover highlight follows the cursor, while assistive technology still meets a single link with meaningful text rather than a card-shaped div pretending to be a button. ========================================================================== */ .klre-option{ position:relative; transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease; } .klre-option h3{margin-bottom:1rem} .klre-option-listing{ background-image:linear-gradient(160deg,rgba(247,249,252,.80),rgba(238,242,247,.62)); background-color:rgba(244,247,250,.76); } .klre-option-more{ display:inline-flex; align-items:center; gap:.45rem; font-size:.95rem; font-weight:650; color:var(--klre-navy); text-decoration:none; } .klre-option-more::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } .klre-option-more span{transition:transform .18s ease} .klre-option:hover, .klre-option:focus-within{ transform:translateY(-4px); border-color:rgba(0,48,87,.45); box-shadow:0 0 0 1px rgba(0,48,87,.22),0 26px 54px -24px rgba(23,44,42,.34),inset 0 1px 0 rgba(255,255,255,.95); } .klre-option:hover .klre-option-more span{transform:translateX(4px)} @media(hover:none){ .klre-option:hover{transform:none} } @media(prefers-reduced-motion:reduce){ .klre-option,.klre-option-more span{transition:none} .klre-option:hover{transform:none} .klre-option:hover .klre-option-more span{transform:none} } /* ========================================================================== RHYTHM AND RULES -------------------------------------------------------------------------- A hairline that fades at both ends reads as intentional composition; a hard full-bleed border reads as a spreadsheet. Same weight, better manners. ========================================================================== */ .klre-section+.klre-section{ border-top:0; background-image:linear-gradient(90deg,rgba(23,44,42,0),rgba(23,44,42,.16) 10%,rgba(23,44,42,.16) 90%,rgba(23,44,42,0)); background-repeat:no-repeat; background-size:100% 1px; background-position:top left; } .klre-section>.klre-eyebrow{letter-spacing:.12em} .klre-section>h2{letter-spacing:-.035em} @media(max-width:900px){ .klre-hero-copy{max-width:none} .klre-hero-aside{max-width:none} } @media(max-width:600px){ .klre-hero-aside{padding:1.5rem} .klre-hero-points li{font-size:.94rem} .klre-hero-ctas{gap:.6rem} .klre-hero-ctas .wp-block-button{width:100%} .klre-hero-ctas .wp-block-button__link{width:100%} } /* ========================================================================== REVIEW FOLLOW UPS -------------------------------------------------------------------------- 1. `.klre-fineprint` had no colour of its own and inherited the muted grey at 0.79rem, making the smallest line on the homepage its weakest. 2. The direct-sale comparison card was still flat and opaque while its listing counterpart was translucent. Same structure now, different tint. 3. The mobile footer reserved 7rem for a 104px action bar, leaving only a few pixels of daylight. ========================================================================== */ /* `.klre-hero-copy>p:not(.klre-eyebrow)` resolves to 0-2-1 in the base sheet. The `.klre-hero` ancestor takes this to 0-3-1 so the result no longer depends on source order or on how an engine scores :not(). */ .klre-hero .klre-hero-copy>p.klre-fineprint{ font-size:.82rem; color:#42544c; max-width:27rem; } .klre-option-direct{ background-image:linear-gradient(160deg,rgba(241,248,243,.82),rgba(228,240,232,.66)); background-color:rgba(235,245,238,.78); } .klre-step,.klre-situations,.klre-option,.klre-faq-list{ box-shadow:0 0 0 1px rgba(23,44,42,.06),0 16px 34px -18px rgba(23,44,42,.22),inset 0 1px 0 rgba(255,255,255,.92); } @media(max-width:600px){ .klre-footer{padding-bottom:calc(8.75rem + env(safe-area-inset-bottom))} } /* ========================================================================== TRUST CHIPS, SITUATION TAGS, LICENSEE BLOCK -------------------------------------------------------------------------- Three transfers from a membership site whose onboarding is unusually good: 1. Three short qualification chips sitting directly under the primary call to action, so a visitor learns what the offer is before reading a paragraph. 2. A scannable tag on each real-life situation, the way a recipe card carries a difficulty and category label. A reader self-selects in a glance instead of reading eight full sentences. 3. Licensee identification in the footer, which is where Business and Professions Code 10140.6(b)(1) expects it to be reachable from any page. ========================================================================== */ /* Hero trust row, three seller benefits on one line at desktop with a rule between each, stacking on mobile. Grouping is carried by real list markup, so the separators are decoration and carry no meaning on their own. */ .klre-trust-row{ list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem; border-top:1px solid var(--klre-line); padding-top:1.2rem; } /* * Each trust item is its own rounded chip, and this is the fourth treatment of * this block. The first three all tried to present the items as a line of text * with something between them, and each failed for a measured reason: a tick in * a pill read as decoration, a rule between items orphaned when the row wrapped, * and a dot on every item cost 16px an item and forced a second line at 1440px. * Loose text on a hairline also simply looks unstructured beside a glass card. * * A chip has no between-items element to orphan and no shared baseline to run * together. Wrapping is the normal state for a chip cloud, so there is no bad * width. No checkmark, per the brief; no hard outline, because an outlined * badge reads as a claim rather than a fact. */ .klre-trust-row li{ display:inline-flex; align-items:center; padding:.36rem .8rem; border:1px solid rgba(0,48,87,.14); border-radius:999px; background:#f0f4f9; color:var(--klre-ink); font-size:.81rem; font-weight:550; line-height:1.35; margin-block-start:0; } /* * No marker and no separator rule, deliberately, and this is the third attempt * at it. Each was measured rather than judged: * v1 a tick in a pill cost 0px, but four badges in a hero read as * decoration, and the brief bans checkmarks * v2 a rule between items orphaned on wrap: at 1280px a stray 1px line * hung to the left of "Written terms before * you decide" with nothing in front of it * v3 a dot on every item cannot orphan, but costs 16px an item, which * pushed the row to two lines at 1440px where * the brief asks for one * The separator loses to the layout every time. The gap does the work instead, * and the text layer carries real newlines between items so nothing inherits a * run-on. On wrap, an item simply starts on a new line at the left margin. */ /* The licence line. A disclosure, not a benefit: same block, quieter voice, so it stays above the fold for B&P 10140.6 without competing with the three reasons to act above it. */ /* The licence line, third treatment. It was reading as a fourth chip that had lost its styling: at .82rem it was within 0.16px of the chip type size, and at 12px of gap it hugged the row of chips above it. Now smaller than the chips so the hierarchy is unmistakable, with a real gap so it reads as a footnote to the block rather than another item in it. Still comfortably readable. */ .klre-licence-line{ font-size:.77rem; line-height:1.55; color:var(--klre-muted); margin:1.05rem 0 0; letter-spacing:0; } .klre-claim-note{ font-size:.9rem; line-height:1.6; max-width:35rem; margin-top:1.3rem; margin-bottom:0; } .klre-tag{ display:inline-block; margin-right:.7rem; padding:.26rem .55rem; border-radius:4px; background:rgba(0,48,87,.11); color:var(--klre-navy); font-size:.63rem; font-weight:700; letter-spacing:.1em; vertical-align:.09em; white-space:nowrap; } .klre-situations li{align-items:baseline} .klre-licensee{ font-size:.76rem; line-height:1.75; color:var(--klre-muted); margin:0 0 .9rem; } /* The licensee line carries a phone number and an email in running text. Without nowrap the phone broke mid-token across two lines ("916-" / "582-4076"), which reads as a typo in the one place a consumer is most likely to copy the number. */ .klre-licensee a{color:inherit;white-space:nowrap} .klre-disclaimer{ font-size:.72rem; line-height:1.6; color:var(--klre-muted); font-style:italic; margin:0 0 1rem; } @media(max-width:600px){ .klre-trust-row{margin-top:1.3rem} .klre-tag{margin-right:.5rem;font-size:.6rem} } /* ========================================================================== MOBILE TOUCH TARGETS, CARD TREATMENT, MOTION -------------------------------------------------------------------------- A site-wide audit at 390px found undersized tap targets on every page: footer navigation and legal links at ~17px tall, the phone link at 16px, and the wordmark 1px under the threshold. Everything interactive gets a real target height on small screens. 44px is the Apple guidance and the WCAG 2.2 minimum. ========================================================================== */ @media(max-width:600px){ .klre-footer a, .klre-footer-legal a, .klre-phone, .klre-brand{ display:inline-flex; align-items:center; min-height:44px; } .klre-footer a{padding-block:.2rem} .klre-footer-legal{gap:1rem 1.6rem} .klre-option-more{min-height:44px} .klre-footer nav a{min-height:44px} /* The real-life situations become cards rather than a bare list. On a phone a row of text with a hairline rule between items reads as one long paragraph; discrete cards read as choices, which is what they are. */ .klre-situations{gap:.65rem} .klre-situations li{ display:block; padding:1rem 1.15rem; border-top:0; border:1px solid rgba(23,44,42,.08); border-radius:12px; background:rgba(255,255,255,.74); box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 8px 18px -12px rgba(23,44,42,.18); font-size:.96rem; } .klre-situations li:before{display:none} .klre-tag{display:inline-block;margin:0 0 .45rem} /* Steps keep their compact number-beside-text layout, now clearly carded. */ .klre-step{ padding:1.25rem; border-radius:12px; background:rgba(255,255,255,.78); } .klre-step-number{font-size:1.85rem} } /* ========================================================================== SMOOTH SECTION ENTRANCE -------------------------------------------------------------------------- The reveal class is added by script, never by markup. If JavaScript is off or fails, nothing is ever hidden, which is the only safe way to do this: a CSS first fade-in makes content invisible for anyone whose JS did not run. ========================================================================== */ @media(prefers-reduced-motion:no-preference){ .klre-reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1); } .klre-reveal-in{opacity:1;transform:none} .klre-option,.klre-step,.klre-faq-list,.klre-hero-aside{ transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease,opacity .3s ease; } .wp-block-details p{animation:klre-fade .25s ease} @keyframes klre-fade{from{opacity:0}to{opacity:1}} } /* Inline links that sit alone in a section paragraph ("See how the process works") measured 17px tall on a phone. They are the only remaining targets under the 44px guidance. Scoped to a direct child paragraph of a section so ordinary prose links are untouched. */ @media(max-width:600px){ .klre-section>p>a, .klre-back-link a{ display:inline-flex; align-items:center; min-height:44px; padding-block:.1rem; } } /* ========================================================================== BLOG INDEX AND ARTICLE -------------------------------------------------------------------------- The blog used to be a bare list of titles with no way to highlight anything. Featured posts are driven by WordPress's own sticky flag, so Kevin can change what is featured from the editor without touching a template. ========================================================================== */ .klre-blog-subhead{ margin:3rem 0 1.5rem; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--klre-navy); } .klre-featured{margin:0} .klre-featured .wp-block-post-template{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; } .klre-feature-card{ height:100%; padding:1.6rem; border:1px solid rgba(23,44,42,.08); border-radius:14px; background:rgba(255,255,255,.74); box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 14px 30px -20px rgba(23,44,42,.22); transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease; } .klre-feature-card:hover{ transform:translateY(-4px); border-color:rgba(0,48,87,.4); box-shadow:0 0 0 1px rgba(0,48,87,.2),0 24px 46px -24px rgba(23,44,42,.3); } .klre-feature-card h3, .klre-featured .wp-block-post-title{ margin:0 0 .5rem; font-size:1.28rem; line-height:1.25; letter-spacing:-.025em; } .klre-feature-card h3 a, .klre-featured .wp-block-post-title a{color:var(--klre-ink);text-decoration:none} .klre-feature-card h3 a:hover{text-decoration:underline;text-underline-offset:.2em} .klre-feature-card .wp-block-post-date, .klre-feature-card time{font-size:.75rem;color:var(--klre-muted);display:block;margin-bottom:.75rem} .klre-feature-card p{font-size:.94rem;color:var(--klre-muted);margin:0 0 1rem} .klre-featured .wp-block-read-more{ font-size:.9rem; font-weight:650; color:var(--klre-navy); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; } .klre-featured .wp-block-read-more:after{content:" \2192"} /* Article page */ .klre-article>.wp-block-post-title{margin-bottom:1rem} .klre-post-meta{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--klre-muted); margin:0 0 .5rem; } .klre-post-meta a{color:inherit} .klre-article .wp-block-post-content>h2{ margin-top:2.4rem; font-size:clamp(1.2rem,1.7vw,1.48rem); letter-spacing:-.02em; line-height:1.3; } .klre-article .wp-block-post-content>p{max-width:44rem} .klre-article-cta{margin:3rem 0 2.5rem!important} .klre-related .wp-block-post-template{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem} .klre-related h3{font-size:1.05rem;margin:0 0 .4rem;letter-spacing:-.015em} .klre-related h3 a{color:var(--klre-ink);text-decoration:none} .klre-related p{font-size:.92rem;color:var(--klre-muted);margin:0} .klre-back-link a{font-weight:600;color:var(--klre-navy)} @media(max-width:900px){ .klre-featured .wp-block-post-template, .klre-related .wp-block-post-template{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .klre-featured .wp-block-post-template, .klre-related .wp-block-post-template{grid-template-columns:1fr;gap:1rem} .klre-blog-subhead{margin:2.25rem 0 1rem} .klre-feature-card{padding:1.3rem} } /* ========================================================================== BLOG: AN EXPLAINER PAGE -------------------------------------------------------------------------- Real estate vocabulary does three jobs at once and that is most of why it is confusing, so this page is built to be scanned and tapped rather than read straight through. NN/g's research found 79% of users always scan a new page and only 16% read word by word, which is why the structure leads and the prose supports it. Heading sizes are deliberately restrained. The previous blog inherited the page-title scale, which is sized for a hero, not for a list of article links. ========================================================================== */ .klre-blog>.wp-block-post-title, .klre-blog h1.klre-blog-h1{ font-size:clamp(1.9rem,3.1vw,2.6rem); line-height:1.15; letter-spacing:-.035em; margin:0 0 1rem; } .klre-blog-hero{ padding:0 0 2.25rem; border-bottom:1px solid rgba(23,44,42,.1); margin-bottom:2.25rem; } .klre-blog-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--klre-navy); margin:0 0 .9rem; } .klre-blog-sub{ font-size:1.05rem; line-height:1.65; color:var(--klre-muted); max-width:44rem; margin:0 0 1rem; } .klre-blog-note{ font-size:.86rem; color:var(--klre-muted); font-style:italic; margin:0; } .klre-blog-head{ font-size:clamp(1.3rem,2.1vw,1.65rem); letter-spacing:-.025em; margin:2.75rem 0 .6rem; max-width:none; } .klre-blog-lead{ font-size:.95rem; color:var(--klre-muted); margin:0 0 1.4rem; max-width:40rem; } /* --- the chooser: "which one sounds like you" ---------------------------- */ /* Two columns, not three. There are four cards in each group, so three columns leaves a single card stranded on a second row with two empty tracks beside it, which reads as a mistake rather than a set of options. Two columns also gives each sentence room to be read at a glance. */ .klre-chooser{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; } .klre-choose{ display:flex; flex-direction:column; gap:.45rem; padding:1.15rem 1.2rem; border:1px solid rgba(23,44,42,.1); border-radius:14px; background:rgba(255,255,255,.72); text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease,background .18s ease; } .klre-choose-q{font-weight:680;color:var(--klre-ink);font-size:1.02rem;line-height:1.3;letter-spacing:-.015em} .klre-choose-d{font-size:.88rem;color:var(--klre-muted);line-height:1.55;flex:1} .klre-choose-go{font-size:.82rem;font-weight:650;color:var(--klre-navy)} .klre-choose-go:after{content:" \2192"} .klre-choose:hover,.klre-choose:focus-visible{ transform:translateY(-3px); border-color:rgba(0,48,87,.42); background:rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(0,48,87,.18),0 18px 34px -20px rgba(23,44,42,.3); } .klre-choose:focus-visible{outline:3px solid #003057;outline-offset:3px} /* --- the glossary: tap to reveal ---------------------------------------- */ .klre-words{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1.2rem; } .klre-word{ border:1px solid rgba(23,44,42,.1); border-radius:12px; background:rgba(255,255,255,.66); padding:0; overflow:hidden; transition:border-color .18s ease,background .18s ease; } .klre-word[open]{background:rgba(255,255,255,.92);border-color:rgba(0,48,87,.34)} .klre-word>summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:52px; padding:.85rem 1rem; cursor:pointer; list-style:none; font-weight:650; font-size:.97rem; color:var(--klre-ink); } .klre-word>summary::-webkit-details-marker{display:none} .klre-word>summary:after{content:"+";color:var(--klre-navy);font-size:1.25rem;font-weight:400;line-height:1} .klre-word[open]>summary:after{content:"\2212"} .klre-word-tap{ font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--klre-navy); background:rgba(0,48,87,.1); border-radius:999px; padding:.2rem .5rem; margin-left:auto; margin-right:.5rem; } .klre-word>p{ margin:0; padding:0 1rem 1rem; font-size:.92rem; line-height:1.65; color:var(--klre-muted); } .klre-word[open] .klre-word-tap{display:none} /* --- self check ---------------------------------------------------------- */ .klre-selfcheck{ margin:2.75rem 0 1rem; padding:1.6rem; border:1px solid rgba(23,44,42,.1); border-radius:14px; background:rgba(255,255,255,.7); } .klre-selfcheck h2{font-size:1.25rem;letter-spacing:-.02em;margin:0 0 .4rem} .klre-selfcheck>p{font-size:.92rem;color:var(--klre-muted);margin:0 0 1.1rem} .klre-selfcheck label{ display:flex; align-items:center; gap:.7rem; min-height:48px; padding:.35rem 0; cursor:pointer; font-size:.97rem; color:var(--klre-ink); border-bottom:1px solid rgba(23,44,42,.07); } .klre-selfcheck label:last-of-type{border-bottom:0} .klre-selfcheck input{width:22px;height:22px;accent-color:var(--klre-navy);flex-shrink:0} .klre-selfcheck-out{ margin:1.1rem 0 0!important; padding-top:1.1rem; border-top:1px solid rgba(23,44,42,.1); font-size:.95rem; font-weight:600; color:var(--klre-ink)!important; } .klre-selfcheck-out a{color:var(--klre-navy)} /* --- post lists ---------------------------------------------------------- */ .klre-postlist .wp-block-post-template>li{padding-block:1.6rem} .klre-postlist h3{font-size:1.2rem;letter-spacing:-.02em;margin:0 0 .3rem} .klre-postlist h3 a{color:var(--klre-ink);text-decoration:none} .klre-postlist h3 a:hover{text-decoration:underline;text-underline-offset:.2em} .klre-postlist .wp-block-post-date{font-size:.78rem;color:var(--klre-muted)} .klre-postlist p{font-size:.94rem;color:var(--klre-muted);max-width:44rem;margin:.4rem 0 0} @media(max-width:900px){ .klre-chooser{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .klre-chooser,.klre-words{grid-template-columns:1fr} .klre-blog-head{margin-top:2.1rem} .klre-blog-hero{padding-bottom:1.6rem;margin-bottom:1.6rem} .klre-selfcheck{padding:1.2rem} } /* The article title inherited .klre-page>.wp-block-post-title, which is sized for a landing-page hero at up to 4.5rem. That is far too loud for a blog post. */ .klre-article>.wp-block-post-title, .klre-article .wp-block-post-title{ font-size:clamp(1.85rem,3vw,2.5rem); line-height:1.15; letter-spacing:-.035em; margin:0 0 .75rem; } .klre-article .wp-block-post-content>h3{ margin-top:2rem; font-size:clamp(1.1rem,1.8vw,1.3rem); letter-spacing:-.015em; } .klre-article .wp-block-post-content li{max-width:44rem} .klre-article .klre-fineprint{ font-size:.82rem; line-height:1.6; color:var(--klre-muted); padding:.9rem 1rem; border-left:3px solid rgba(0,48,87,.3); background:rgba(0,48,87,.05); border-radius:0 8px 8px 0; margin:0 0 1.8rem; max-width:44rem; } /* ========================================================================== FIXED MOBILE ACTION BAR -------------------------------------------------------------------------- The bar previously contained a button that core's wpautop had wrapped in an unmatched

, so it was not a flex child, flex:1 never applied, and the paragraph margin knocked it out of vertical alignment. The markup is now emitted from wp_footer instead of a shortcode block, so the structure is exact. Both controls are given the same height and centre alignment, and the offer button takes the remaining width. ========================================================================== */ .klre-mobile-cta, .klre-mobile-cta *{box-sizing:border-box} .klre-mobile-cta{ align-items:stretch; gap:.5rem; min-height:64px; } .klre-mobile-cta>p{margin:0;padding:0} .klre-mobile-call{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; flex:0 0 auto; min-height:48px; padding:.6rem .85rem; border:1px solid rgba(0,48,87,.32); border-radius:6px; background:rgba(255,255,255,.85); color:var(--klre-navy); font-size:.8rem; font-weight:650; line-height:1.1; text-decoration:none; white-space:nowrap; } .klre-mobile-call-icon{font-size:1rem;line-height:1} .klre-mobile-cta>.klre-mobile-offer, .klre-mobile-cta>a.klre-button{ flex:1 1 auto; min-width:0; min-height:48px; margin:0; white-space:nowrap; font-size:.88rem; } @media(max-width:600px){ .klre-mobile-cta{ padding:.6rem var(--klre-gutter) calc(.6rem + env(safe-area-inset-bottom)); } .klre-mobile-cta>.klre-mobile-offer, .klre-mobile-cta>a.klre-button{font-size:.86rem} .klre-mobile-call{font-size:.78rem;padding:.6rem .7rem} } @media(max-width:380px){ .klre-mobile-call-num{display:none} .klre-mobile-call{padding:.6rem .75rem} .klre-mobile-call-icon{font-size:1.15rem} } /* ========================================================================== JOKE OF THE DAY -------------------------------------------------------------------------- Kevin asked for a joke in every post. It sits between the introduction and the first argument heading so it reads as a breather rather than a non-sequitur, and it is labelled so nobody mistakes it for a business claim. Deliberately quiet: a tinted card with no link, no button and no hover state, so it never competes with the calls to action around it. The tint is 4.5% emerald over paper, which measures 5.65:1 against the emerald label and passes AA. Falls back to the flat tint wherever backdrop-filter is absent. ========================================================================== */ .klre-joke{ max-width:44rem; margin:2.2rem 0; padding:1.4rem 1.5rem; border:1px solid rgba(0,48,87,.16); border-left:3px solid rgba(0,48,87,.4); border-radius:0 12px 12px 0; background:rgba(0,48,87,.045); } .klre-joke .klre-joke-label{ font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--klre-navy); margin:0 0 .7rem; } .klre-joke .klre-joke-setup{ margin:0 0 .35rem; color:var(--klre-ink); font-size:1.02rem; line-height:1.6; } .klre-joke .klre-joke-punch{ margin:0; color:var(--klre-navy); font-size:1.02rem; font-weight:650; line-height:1.6; } @supports(backdrop-filter:blur(12px)){ .klre-joke{backdrop-filter:blur(14px)} } @media(forced-colors:active){ .klre-joke{border:1px solid CanvasText} } /* ========================================================================== CARDS THAT LOOK CLICKABLE MUST BE CLICKABLE -------------------------------------------------------------------------- Kevin reported that tapping a featured post did nothing. He was right, and the cause was structural rather than cosmetic: only the title text and the "Read this" text were anchors, so the body of the card, including the excerpt and the whole area his thumb actually landed on, was inert. The featured card also carries a hover lift, which promises a click that the layout then refuses. That is the same class of bug as the comparison cards that used to highlight with nothing to click. The fix is a stretched link: the card becomes the positioning context and the existing anchor's ::after is expanded over the whole surface. Using the existing anchor rather than injecting a new element keeps the accessible name correct (it is still the post title or the read-more label, never an empty link) and keeps keyboard behaviour unchanged. Because the outline then draws on the inner anchor rather than the card, a :has() rule mirrors focus onto the card so keyboard users can see where they are. Where :has() is unsupported the native outline still appears on the anchor, so focus is never invisible. ========================================================================== */ .klre-feature-card{ position:relative; cursor:pointer; } .klre-feature-card .wp-block-read-more::after{ content:""; position:absolute; inset:0; border-radius:inherit; } .klre-postlist .wp-block-post-template>li{ position:relative; cursor:pointer; border-radius:12px; transition:background .18s ease; } .klre-postlist .wp-block-post-template>li>h3>a::after{ content:""; position:absolute; inset:0; border-radius:12px; } .klre-postlist .wp-block-post-template>li:hover{ background:rgba(0,48,87,.04); } .klre-feature-card:has(.wp-block-read-more:focus-visible), .klre-postlist .wp-block-post-template>li:has(h3 a:focus-visible){ outline:3px solid var(--klre-navy); outline-offset:3px; } @media(forced-colors:active){ .klre-feature-card, .klre-postlist .wp-block-post-template>li{border:1px solid CanvasText} } /* ========================================================================== TRUST CHIPS: A DELIBERATE GRID, NOT A PIXEL RACE -------------------------------------------------------------------------- Measuring the hero chips across eleven widths showed the four of them need about 691px while the desktop hero column is only 617px wide, so the row always broke 3+1 and orphaned the fourth chip on its own line. Shortening the labels could not close a 74px gap without gutting the copy, and any pixel-fitted fix would break again the moment a label is edited or a font renders differently. The 3+1 also appeared at 600px, where the row has 540px. So the layout is made deliberate rather than fitted: two columns wherever two columns actually fit, which reads as an intentional block of four. That covers 481px and up, including the 600px case. Below 481px the chips wrap naturally, which gives a clean 2x2 on the common 390px and 430px phones and only stacks on very narrow screens where the longest label plus any other simply does not fit in two columns. ========================================================================== */ /* ========================================================================== SERVICE AREA CITY LIST -------------------------------------------------------------------------- Eleven city names in one tall bulleted column left most of the desktop width empty and read as an afterthought. As a three-column block it is scannable at a glance, which is the whole point of a coverage list. Bullets are dropped because these are place names, not a checklist of separate claims. ========================================================================== */ .klre-area-list{ list-style:none; padding:0; margin:1.2rem 0 1.4rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem 1.5rem; max-width:46rem; } .klre-area-list li{ font-size:.97rem; color:var(--klre-ink); padding-left:.85rem; position:relative; } .klre-area-list li:before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--klre-navy); opacity:.5; } @media(max-width:760px){ .klre-area-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none} } @media(max-width:420px){ .klre-area-list{grid-template-columns:1fr} } @media(forced-colors:active){ .klre-area-list li:before{background:CanvasText} } /* ========================================================================== MOBILE FIXES, 2026-09-11 Two reported defects. 1. The sticky action bar controls were not the same size. The call button was flex:0 0 auto (sized to its own label) and the offer button flex:1 1 auto, so measured at 320px the call button was 48px against the offer button's 224px, and at 430px it was 128px against 251px. The bar is now a two column grid, so both cells are exactly 1fr and the mismatch cannot return when either label is reworded. 2. THE FOOTER HAD NO HORIZONTAL GUTTER. Every other region on the site sits inside

, which carries padding of var(--klre-gutter). The footer is rendered from wp_footer, so it is outside
, and its only spacing came from max-width:1240px; margin:0 auto, which collapses to zero gutter for every viewport below 1240px. Measured at 390px the footer, the wordmark, the nav links, the licensee line and the legal row all sat at left=0 and right=390, flush against both screen edges, with "Disclosures" finishing 2.6px from the right edge. The footer now takes the same gutter as
. --klre-gutter resolves to exactly main's padding at every width (20 / 30 / 38.4 / 45 / 51.2 / 64px), so the two align precisely. The max-width is widened by the padding, which leaves the desktop composition above 1368px unchanged. 3. The bottom row crammed the copyright and all three legal links onto one flex line. They now stack: copyright on its own line, links below it. ========================================================================== */ .klre-footer{ max-width:calc(1240px + (var(--klre-gutter) * 2)); padding-left:var(--klre-gutter); padding-right:var(--klre-gutter); } @media (max-width:600px){ /* 1. equal width action bar controls, both exactly 1fr */ .klre-mobile-cta{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:.5rem; } .klre-mobile-call, .klre-mobile-cta>.klre-mobile-offer, .klre-mobile-cta>a.klre-button{ width:100%; min-width:0; flex:none; justify-content:center; text-align:center; white-space:nowrap; /* Same label size on both controls. The outer box was already identical, but the call button's label was 12.48px against the offer button's 13.76px, which is why an equal box still READ as unequal. */ font-size:.86rem; padding-left:.5rem; padding-right:.5rem; } /* 3. footer tail: breathing room and a readable stack */ .klre-footer{ padding-bottom:calc(9.5rem + env(safe-area-inset-bottom)); } .klre-footer-bottom{ margin-top:2.25rem; padding-top:1.5rem; font-size:.78rem; line-height:1.7; } .klre-footer-legal{ flex-wrap:wrap; gap:.25rem 1.25rem; margin-top:.85rem; } .klre-footer-legal>span{ flex:0 0 100%; } .klre-licensee{ font-size:.79rem; line-height:1.8; } .klre-disclaimer{ font-size:.75rem; line-height:1.65; } } /* ========================================================================== TAP TARGETS IN THE /areas/ HUB LIST, 2026-09-11 -------------------------------------------------------------------------- The hub's city names became links when the /areas// pages were added. A bare inline anchor inside a list item measures 17px tall, which is well under the 44px minimum and was caught by the site audit on mobile: "11 tap targets under 40px high". The row is now 44px tall, the anchor fills it so the whole row is clickable rather than just the text, and the bullet is vertically centred against the taller row. The three column desktop grid and the 2 / 1 column mobile steps are unchanged. ========================================================================== */ .klre-area-list li{ display:flex; align-items:center; min-height:44px; } .klre-area-list li:before{ top:50%; transform:translateY(-50%); } .klre-area-list a{ display:flex; align-items:center; flex:1 1 auto; min-height:44px; color:var(--klre-navy); text-decoration:none; } /* ========================================================================== STEP ONE OF THE PROPERTY FORM, IN THE HERO CARD, 2026-09-11 -------------------------------------------------------------------------- The hero aside now hosts the live form instead of a reassurance card, so a visitor can start without a click. Four adjustments were needed to make a form designed for a full-width page behave inside a card: 1. The fieldset draws its own border and padding, because on /cash-offer/ it is the outermost boundary of the form. Inside the glass card that border sits a few pixels inside the card's own hairline and reads as a double frame, so the card becomes the boundary instead. 2. The card must not tower over the copy column. Above 900px the four fields are placed on three rows (address full width, property type and occupancy side by side, condition full width), which removes a full row of height without hiding or reordering a single field. 3. `.klre-progress` ("Step 1 of 2") is hidden here. Each fieldset already carries a numbered legend, and the script moves focus to that legend on every step change, so the same information is announced either way and the card does not spend a line repeating it. 4. Below 900px the hero collapses to one column and the card is the only thing on screen, so it goes back to a single column of full-width fields and comfortable padding. ========================================================================== */ .klre-hero-form{ padding:clamp(1.4rem,2.2vw,1.9rem); } .klre-hero-form>h2{ font-size:clamp(1.5rem,2.1vw,1.95rem); letter-spacing:-.03em; margin:0 0 1.1rem; } .klre-hero-form .klre-lead-form{max-width:none} .klre-hero-form .klre-lead-form fieldset{ border:0; border-radius:0; padding:0; margin:0; } .klre-hero-form .klre-lead-form legend{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--klre-navy); padding:0; margin-bottom:.6rem; } .klre-hero-form .klre-progress{display:none} .klre-hero-form .klre-field{margin-block:.55rem} .klre-hero-form .klre-field>label{font-size:.79rem;margin-bottom:.3rem} .klre-hero-form .klre-field input:not([type=checkbox]), .klre-hero-form .klre-field select, .klre-hero-form .klre-field textarea{ min-height:46px; padding:.6rem .7rem; font-size:.95rem; } .klre-hero-form .klre-lead-form button{width:100%;margin:.6rem 0 0} .klre-hero-form .klre-consent label{font-size:.82rem;line-height:1.5} .klre-hero-form .klre-aside-note{margin-top:.75rem;font-size:.82rem} @media(min-width:901px){ .klre-hero-form .klre-lead-form fieldset[data-step="1"]{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; align-content:start; } .klre-hero-form .klre-lead-form legend, .klre-hero-form .klre-field:first-of-type, .klre-hero-form .klre-field:nth-of-type(4), .klre-hero-form .klre-next{grid-column:1/-1} } @media(max-width:900px){ .klre-hero-form{padding:1.6rem;max-width:none} .klre-hero-form .klre-field input:not([type=checkbox]), .klre-hero-form .klre-field select, .klre-hero-form .klre-field textarea{min-height:48px} } @media(max-width:600px){ .klre-hero-form{padding:1.25rem} .klre-hero-form>h2{font-size:1.6rem} } .klre-area-list a:hover, .klre-area-list a:focus-visible{ text-decoration:underline; } /* ========================================================================== FULL-WIDTH LINK ROWS: .klre-link-list, 2026-09-11 -------------------------------------------------------------------------- The service-area pages end with a "keep reading" list of links. Inline anchors measure 16px tall, so on mobile all six landed under the 44px tap minimum and the site audit reported them. Each row is now a full height target and the whole row is clickable, not just the words. Scoped to this class on purpose: applying it to .wp-block-list globally would change list rhythm on pages that are already signed off. ========================================================================== */ .klre-link-list li{ display:flex; align-items:center; min-height:44px; } .klre-link-list a{ display:flex; align-items:center; flex:1 1 auto; min-height:44px; } /* ========================================================================== HERO BALANCE, LOGO SCALE, HEADER TINT, 2026-09-11 -------------------------------------------------------------------------- The form card measures 657px and the copy column about 500px. A first attempt anchored the call-to-action group to the bottom of a stretched copy column, which aligned the bottom edges but opened 155px of dead space between the paragraph and the buttons, in the middle of the column where it reads as a mistake rather than as breathing room. The fix is to give the copy column content worth putting there: the three objection-handling points moved out of the card and into the column, beside the form. They fill the space, they are read at the moment the objection actually occurs, and the separate section that duplicated them is gone. ========================================================================== */ .klre-hero-copy .klre-hero-points{ margin-top:1.3rem; gap:.6rem; border-top:1px solid var(--klre-line); padding-top:1.1rem; } .klre-hero-copy .klre-hero-points li{ font-size:.87rem; line-height:1.45; color:var(--klre-muted); } .klre-hero-copy .klre-hero-points strong{color:var(--klre-ink)} /* NOTE: do NOT hide .klre-hero-points inside .klre-hero-aside. The fallback card, which renders when lead intake is not configured, still uses that list. An earlier draft hid it here and would have blanked the fallback card's content entirely — the failure mode is invisible in normal operation, which is exactly what makes it dangerous. */ /* A fourth light form behind the card. backdrop-filter can only refract what is actually behind the panel, and the bottom-right corner of the hero was the flattest region, so the blur had almost nothing to bite on there. This is a gradient only: no image, no animation, no repaint cost while scrolling. */ .klre-hero:before{ background-image: radial-gradient(at 82% 22%, rgba(213,227,216,.85), rgba(213,227,216,0) 58%), radial-gradient(52% 58% at 99% 84%, rgba(0,48,87,.13), rgba(0,48,87,0) 70%), radial-gradient(46% 52% at 50% 4%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%), radial-gradient(38% 42% at 16% 98%, rgba(207,224,240,.5), rgba(207,224,240,0) 68%); } /* Wordmark up ~10%. The brand block grew from 144px to ~158px wide, which is why the nav fit is re-measured at every breakpoint after this ships: the desktop bar has a 600px budget at the compact type step and was already close to it before this change. The portrait does not take a step here. It is set once at 52px and drops to 40 on a phone; a third size between those two existed for one revision and was removed, because a rule that is always overridden below it is dead code pretending to be a design decision, and the difference it made was 4px. */ .klre-brand{font-size:1.19rem} /* The header already carried a blur, but at 88% white over a cream page it read as a flat white bar, because it never overlaps content (it is static). Giving back a little opacity lets the page's warmth show through so it reads as a tinted glass strip rather than a painted one, without touching contrast: the ink is #12263a against an effective background of ~#fdfefe. */ .klre-header-bar{ background-color:rgba(255,255,255,.74); background-image:linear-gradient(180deg,rgba(255,255,255,.72),rgba(249,250,246,.56)); } @media(max-width:900px){ /* Single column: the card sits under the copy, so the points act as a closing reassurance for the column rather than as a space filler. */ .klre-hero-copy .klre-hero-points{margin-top:1.4rem} } @media(max-width:600px){ .klre-brand{font-size:1.02rem} .klre-brand-photo{width:40px;height:40px} .klre-hero-copy .klre-hero-points li{font-size:.86rem} } /* ========================================================================== TYPE SCALE AND ARTICLE ALIGNMENT, 2026-09-11 -------------------------------------------------------------------------- Measured on a live post before changing anything. Three defects, all of them visible on every article: 1. `.klre-article .wp-block-post-title` used a DESCENDANT selector, so it did not just style the post's own H1 — it also matched the related-post titles inside the "More posts" query. Those rendered at 40px, the same size as the article's H1, and "More posts" itself inherited theme.json's 44px h2, so a sub-section heading was LARGER than the page's own title. Everything in that footer region now has an explicit size, and the leaky selector is scoped to a direct child. 2. `.klre-final-cta` and `.klre-article-cta` set `margin: ... 0 ... !important`. The zero killed the `margin-inline: auto` the constrained layout uses to centre blocks, so the "Thinking about your own house?" panel sat flush at the 64px page gutter while the article body sat centred at 340px. It was 276px out of alignment. Restoring auto centring is the whole fix. 3. `.klre-post-meta` was one run of text in a single paragraph, so the date and the byline could not align as separate items. Scale below is Apple-ish: 17px body (already in use), 12px metadata, ~18px card titles, a restrained ~19-24px in-article section heading, and section headings capped just under 46px instead of 53.6px. Tight negative tracking on display sizes, near-neutral tracking on the uppercase headings, because negative letter-spacing on all-caps text is what makes it look cramped. ========================================================================== */ :root{ --klre-fs-hero:clamp(2.3rem,4.1vw,3.75rem); /* homepage hero only */ --klre-fs-display:clamp(2.125rem,3.4vw,3.25rem); /* page + article titles */ --klre-fs-section:clamp(1.75rem,2.6vw,2.5rem); /* section headings */ --klre-fs-sub:clamp(1.1875rem,1.6vw,1.5rem); /* sub-sections, article h2 */ --klre-fs-card:1.25rem; /* card + list-item titles */ --klre-fs-body:1.0625rem; --klre-fs-small:.875rem; --klre-fs-micro:.75rem; } /* --- one size per role, everywhere that role appears --------------------- */ /* Titles: inner pages and articles. Previously 72px on inner pages and 40px on articles, which made the same role two different sizes. */ .klre-page>.wp-block-post-title, .klre-article>.wp-block-post-title{ font-size:var(--klre-fs-display); font-weight:600; letter-spacing:-.024em; line-height:1.08; margin:0 0 1.75rem; } /* The homepage hero keeps its own, larger size: it is the one true display headline on the site and Apple does exactly this on a landing page. */ .klre-hero h1{font-size:var(--klre-fs-hero)} /* Section headings: every block that introduces a page section. */ .klre-section>h2, .klre-final-cta>h2, .klre-qualification>h2, .klre-listing-alternative>h2, .klre-holding>h2, .klre-kevin>h2{ font-size:var(--klre-fs-section); font-weight:600; letter-spacing:-.022em; line-height:1.12; } /* Sub-section headings: in-page sections and the heading on a form or CTA panel. These must stay clearly below the section scale, which is what stops a CTA panel from shouting louder than the page it sits on. Scoped to `.klre-page` rather than `.klre-article`: /direct-sale/ and /open-market-listing/ carry their `h2`s directly inside `.entry-content` without an `.klre-section` wrapper, so an `.klre-article` scope silently excluded them and their section headings fell back to theme.json's 44px, which is larger than the page's own title at 1280 and at 390. Measured, not assumed. `.klre-page` covers every page including the articles. */ .klre-page .wp-block-post-content>h2, .klre-article>h2, .klre-form-panel>h2, .klre-article-cta>h2{ font-size:var(--klre-fs-sub); font-weight:600; letter-spacing:-.014em; line-height:1.22; } /* Card and list-item titles. */ .klre-option h3, .klre-benefit h3, .klre-step h3, .klre-related h3, .klre-related .wp-block-post-title, .klre-hero-copy .klre-hero-points strong{ font-size:var(--klre-fs-card); font-weight:600; letter-spacing:-.01em; line-height:1.28; } .klre-related h3, .klre-related .wp-block-post-title{margin:0 0 .45rem} /* --- article masthead ---------------------------------------------------- */ .klre-post-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; margin:0 0 1.35rem; font-size:var(--klre-fs-micro); font-weight:500; letter-spacing:.02em; color:var(--klre-muted); } .klre-post-meta .wp-block-post-date, .klre-post-meta p, .klre-post-byline{ margin:0; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:1.4; color:inherit; } /* A hairline separator between the date and the byline, only when both show. */ .klre-post-meta .klre-post-byline:not(:first-child):before{ content:""; display:inline-block; width:1px; height:.85em; margin-right:.7rem; vertical-align:-.05em; background:currentColor; opacity:.35; } /* --- in-article section spacing (the sizes come from the shared scale) --- */ .klre-page .wp-block-post-content>h3{margin:2.25rem 0 .7rem} /* --- call-to-action panels: restore the centring the !important killed ---- */ .klre-final-cta, .klre-article-cta{ margin-left:auto!important; margin-right:auto!important; } .klre-article-cta>h2{ font-size:clamp(1.35rem,1.9vw,1.7rem); font-weight:600; letter-spacing:-.018em; line-height:1.2; margin:0 auto .8rem; } .klre-article-cta>p{ font-size:var(--klre-fs-body); line-height:1.5; margin:0 auto 1.6rem; max-width:32rem; } .klre-article-cta .wp-block-buttons{justify-content:center;margin:0} /* --- related post excerpts ----------------------------------------------- */ .klre-related .wp-block-post-excerpt__excerpt{ font-size:var(--klre-fs-small); line-height:1.5; } /* --- blog index: bring it onto the same scale as every other page --------- The blog list previously used its own restrained sizes (41.6px title, 26.4px section heads) on the reasoning that a list of article links is not a hero. The reasoning was sound but the result was a page that did not match any other page on the site. It now shares the roles, so there is one title size and one section size across the whole site. */ .klre-blog>.wp-block-post-title, .klre-blog h1.klre-blog-h1{ font-size:var(--klre-fs-display); letter-spacing:-.024em; line-height:1.08; } .klre-blog-head{font-size:var(--klre-fs-section);letter-spacing:-.022em;line-height:1.14} /* --- responsive scale ---------------------------------------------------- */ @media(max-width:900px){ :root{ --klre-fs-hero:clamp(2.3rem,4.1vw,3.75rem); --klre-fs-display:clamp(1.75rem,5.2vw,2.25rem); --klre-fs-section:clamp(1.625rem,4.6vw,2.125rem); --klre-fs-sub:clamp(1.1875rem,3.4vw,1.375rem); } .klre-article .wp-block-post-content>h2, .klre-article>h2{margin-top:2.25rem} } @media(max-width:600px){ :root{ --klre-fs-hero:clamp(2.3rem,4.1vw,3.75rem); --klre-fs-display:clamp(1.625rem,7.4vw,2rem); --klre-fs-section:clamp(1.5rem,6.6vw,1.875rem); --klre-fs-sub:1.1875rem; --klre-fs-card:1.125rem; } .klre-post-meta{font-size:.8125rem} .klre-page .wp-block-post-content>h2, .klre-article>h2{margin-top:2rem} } /* ========================================================================== LIQUID GLASS: WHAT WAS MEASURED, AND WHAT ACTUALLY CHANGED ========================================================================== A design directive asked for true refractive liquid glass on the hero form panel, on the premise that the panel was only frosted. The premise was wrong in an interesting way, and the measurements below are the reason this section looks the way it does rather than the way the brief imagined. WHAT WAS ALREADY TRUE (verified, not assumed): * the hero form panel ALREADY ran real SVG displacement refraction in Chromium. Computed style: backdrop-filter: url("#klre-glass-refraction") blur(20px) saturate(1.65), backed by a 128x128 displacement map inlined as a 13KB data URI with scale=16. * a masked 1px specular rim already existed (`.klre-glass::after`), which is the same "rim light" the reference article builds by hand. * `prefers-reduced-transparency`, `prefers-contrast: more`, `forced-colors: active` and `print` fallbacks already existed. WHAT WAS ACTUALLY WRONG (measured, and this is the real finding): * Applying refraction and then removing it changed the rendered panel by a MAXIMUM of 2/255, with 0 pixels moving more than 4. In other words the effect was live and doing nothing a viewer could possibly see. * Root cause one: the old displacement map's ramp ran from the border to the centre. At one quarter of the way across it was still at 78% of maximum, so when the filter stretched the map across a 537px panel the "bezel" was hundreds of pixels wide instead of a curved edge. Replaced with a convex squircle map whose ramp is confined to the outer 7%: at one quarter across it is now 0%. It is also 405 bytes instead of 9,761. * Root cause two, and the one that matters most: refraction can only be seen where the backdrop has structure at a scale LARGER than the blur radius. Measured sweep, displacement on vs off at an identical position: backdrop 40px detail, blur 8px -> peak 21/255, 943px affected same detail, blur 14px -> effect collapses toward 0 large soft forms, any blur -> peak 2-5/255 A 20px blur is wider than the backdrop's variation, so it averages away exactly the region the displacement then operates on; and a large smooth form shifted 20px is very nearly the same colour, so it reveals nothing either. The shipping panel blurred at 20px could therefore never show it. WHAT CHANGED BECAUSE OF THAT: only the hero form panel, which is the single primary glass component; blur comes down to 10px so the effect can register, the backdrop gains one moderate-scale light band to refract, and the panel gains a restrained chromatic edge. The panel is deliberately NOT pushed further: at these settings the effect reads as depth rather than as a demo, and the form stays the loudest thing in the card. NOT DONE, AND WHY: * A true squircle (superellipse) outline needs `corner-shape`, which no shipping engine implements for border-radius, or a clip-path that would clip focus rings. `border-radius` is used instead; it is circular, and that is an accepted approximation rather than an oversight. * No pointer-reactive lighting. It would cost a main-thread listener on a form for an effect that measured under 21/255 at best. * No animation. A sweeping highlight reads as a product demo, not an acquisition business. ========================================================================== */ /* --- tokens (directive s.17), aliased onto the existing names so the older L2/L3 rules keep working while there is one documented place to look --- */ :root{ --glass-surface-light:rgba(255,255,255,.52); --glass-surface-dark:rgba(248,250,245,.38); --glass-border:rgba(255,255,255,.88); --glass-highlight:rgba(255,255,255,.95); --glass-shadow-ambient:rgba(23,44,42,.22); --glass-shadow-contact:rgba(23,44,42,.10); --glass-radius:var(--klre-glass-radius); --glass-refraction-scale:20; --glass-edge-navy:rgba(0,48,87,.20); --glass-edge-cyan:rgba(150,214,200,.28); /* Aliases: the L2/L3 rules above already read these names. */ --glass-blur:var(--klre-glass-blur); --glass-saturation:var(--klre-glass-sat); --motion-fast:140ms; --motion-standard:280ms; --motion-easing-premium:cubic-bezier(.2,.7,.2,1); } /* --- the primary glass component: the hero property form ----------------- */ .klre-hero-form{ /* 10px, not 20px. This is the single measured change that lets the refraction register at all: a blur wider than the backdrop's structure erases the very variation the displacement acts on. Still emphatically frosted. */ --klre-glass-blur:10px; --glass-blur:10px; --klre-glass-tint-1-blur:rgba(255,255,255,.60); --klre-glass-tint-2-blur:rgba(248,250,245,.44); border-color:var(--glass-edge-cyan); border-radius:18px; } /* Chromatic separation at the refractive boundary only: pale cyan-green one side, restrained emerald the other, warm white between. Low opacity, so it reads as optical richness rather than as a coloured border. No rainbow, no neon. */ .klre-hero-form::after{ background-image:linear-gradient(150deg, rgba(255,255,255,.98) 0%, var(--glass-edge-cyan) 14%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.10) 62%, var(--glass-edge-navy) 88%, rgba(255,255,255,.62) 100%); } /* --- backdrop: one moderate-scale band the displacement can actually bend --- Feature scale matters more than amplitude here. A large smooth blob was measured at peak 2-5/255 because a gradient shifted sideways is the same gradient; this band has a transition around 70px, comfortably larger than the 10px blur and small enough to still be a gradient rather than an edge. */ .klre-hero:before{ background-image: radial-gradient(at 82% 22%,rgba(213,227,216,.85),rgba(213,227,216,0) 58%), linear-gradient(126deg,rgba(23,44,42,0) 42%,rgba(0,48,87,.10) 58%, rgba(0,48,87,.02) 68%,rgba(23,44,42,0) 82%), radial-gradient(52% 58% at 99% 84%,rgba(0,48,87,.13),rgba(0,48,87,0) 70%), radial-gradient(46% 52% at 50% 4%,rgba(255,255,255,.92),rgba(255,255,255,0) 72%); } /* Refraction stays desktop-only: an SVG backdrop filter is markedly more expensive to composite than a plain blur, and on a phone the form is the job. */ @media(max-width:900px){ .klre-hero-form{--klre-glass-blur:16px;--glass-blur:16px} } /* The licence line belongs to the offer request, not to the benefits row. A licence number is a credential; mixing it with "no repairs or showings" was a category error, and that is why it read as out of place. It now closes the form card, at the point where a consumer first makes contact about a transaction. The footer keeps the full licensee identification regardless, so this is a placement change, not a removal. Flag for attorney review. Specificity: .klre-form-panel>p:not(.klre-eyebrow) would otherwise force .9rem. */ .klre-form-panel>p.klre-licence-line{ font-size:.76rem; line-height:1.55; color:var(--klre-muted); margin:.95rem 0 0; letter-spacing:0; } /* The Meet Kevin portrait, as a card. What was here was a 300px circle. A circle crops a face to its inscribed square and then discards the corners, which is a good shape for a byline avatar and a wasteful one for the one photograph on the page that is meant to be looked at. The card keeps the whole frame, insets it by an even margin so the picture reads as mounted rather than pasted, and rounds both corners: 14px on the card and 8px on the photograph, so the two curves sit concentric instead of one cutting inside the other. The square file is used rather than the 760x1140 original. They are the same exposure, and the square is the tighter crop, so the face stays large when the card is small and a square needs no crop at all to fill a square card. Width is capped so the card never grows to fill a wide column: at the 760px content width on /about/ an uncapped portrait would push every word of the page below the fold, which is the opposite of what a page about a person is for. */ .klre-portrait{ margin:0 0 clamp(1.5rem,3vw,2.5rem); width:fit-content; max-width:100%; padding:.7rem; background:#fff; border:1px solid var(--klre-line); border-radius:14px; box-shadow:0 18px 45px #0b25400f,0 2px 6px #0b25400a; } .klre-portrait img{ display:block; width:100%; max-width:340px; height:auto; border-radius:8px; } /* Author byline: circular headshot, name, licence line. On a single post it is the full block under the title; on the blog index each row renders the compact form. The photograph is a real so it carries alt text for readers and crawlers. */ .klre-byline{display:flex;align-items:center;gap:.9rem;margin:0 0 2.25rem} .klre-byline-avatar{ width:64px;height:64px;flex:0 0 auto; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 6px 18px #0b254014; } .klre-byline-text{display:flex;flex-direction:column;line-height:1.35} .klre-byline-name{font-size:1rem;font-weight:650;color:var(--klre-ink)} .klre-byline-role{font-size:.78rem;color:var(--klre-muted)} .klre-byline--compact{margin:.85rem 0 .9rem} .klre-byline--compact .klre-byline-avatar{width:40px;height:40px} .klre-byline--compact .klre-byline-name{font-size:.9rem} .klre-byline--compact .klre-byline-role{font-size:.7rem} /* Two doors into the same funnel. The homepage has to read as equally open to a buyer and a seller, so the two cards are symmetrical in weight and each carries its own form rather than one form asking the visitor to classify themselves. */ /* stretch, not start: the seller card carries more fields than the buyer card, and two cards of visibly different heights read as a broken row rather than a deliberate pair. */ .klre-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:stretch;margin-top:2.5rem} .klre-path{margin:0!important} .klre-path>.klre-eyebrow{margin-bottom:.6rem} .klre-path h3{font-size:clamp(1.4rem,2vw,1.7rem);margin:0 0 .75rem} .klre-path-intro{font-size:.92rem;color:var(--klre-muted);margin-bottom:1.3rem} .klre-path form{margin-top:0} @media(max-width:900px){ .klre-paths{grid-template-columns:1fr;gap:1.25rem} } /* The hero aside is a chooser now, not a form: two full-width buttons that jump to the matching card, then the phone number for anyone who would rather talk. */ .klre-aside-ctas{display:grid!important;gap:.6rem!important;margin:1.5rem 0 .9rem!important} .klre-aside-ctas .wp-block-button, .klre-aside-ctas .wp-block-button__link{width:100%} .klre-aside-phone{font-size:.9rem;color:var(--klre-muted);margin:0 0 1.1rem} /* The 30-year rate card. Numbers come from theme/data/mortgage-rates.json, which cron refreshes; nothing here fetches anything at page render time. */ .klre-rate-card{padding:clamp(1.4rem,2.6vw,2.2rem);margin:2rem 0 2.5rem;max-width:520px} .klre-rate-card>.klre-eyebrow{margin-bottom:.5rem} .klre-rate-value{font-size:clamp(2.8rem,6vw,4rem);font-weight:400;letter-spacing:-.045em;line-height:1;color:var(--klre-navy);margin:.35rem 0 .5rem} .klre-rate-week{font-size:.95rem;color:var(--klre-muted);margin:0 0 1.4rem} .klre-rate-history{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.92rem} .klre-rate-history caption{text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--klre-navy);padding-bottom:.6rem} .klre-rate-history th,.klre-rate-history td{padding:.45rem 0;border-top:1px solid var(--klre-line);text-align:left;font-weight:400;color:var(--klre-muted)} .klre-rate-history td{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--klre-ink)} .klre-rate-source{font-size:.8rem;line-height:1.6;color:var(--klre-muted);margin:0} .klre-rate-stale{margin:1rem 0 0;padding:.85rem 1rem;background:#fff6e6;border:1px solid #f0d9ac;border-radius:8px;font-size:.85rem;line-height:1.6} /* Attribution for posts rewritten from the brokerage's local-content site. Kept quiet: it is a credit, not a call to action, and it sits above the closing CTA so the CTA still ends the page. */ .klre-source-credit{font-size:.82rem;line-height:1.65;color:var(--klre-muted);margin:2.2rem 0 0;padding-top:1rem;border-top:1px solid var(--klre-line)} .klre-source-credit a{color:var(--klre-muted);text-decoration:underline;text-underline-offset:2px} /* The quick process diagram at the top of the buyer's and seller's guides. A grid rather than a single strip: six chips across a 760px column leaves each one about 87px of text, which wraps every label onto three or four lines and leaves a ragged row. Three across gives each label room to read and lands as two even rows, and the numbers carry the order so the sequence survives the wrap. The connector is drawn in the gap by each cell rather than emitted as markup, so the arrows cannot disagree with the grid when it reflows. */ .klre-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:2.5rem 0 0;padding:0;list-style:none} .klre-flow li{margin:0;min-width:0;position:relative} .klre-flow-step{display:flex;flex-direction:column;gap:.3rem;height:100%;padding:.85rem .95rem;background:#eef3f8;border:1px solid #d3dee7;border-radius:8px} .klre-flow-num{font-size:.68rem;font-weight:700;letter-spacing:.09em;color:var(--klre-navy)} .klre-flow-label{font-size:.88rem;font-weight:600;line-height:1.35;color:var(--klre-ink)} .klre-flow li:not(:nth-child(3n))::after{content:"\2192";position:absolute;right:-.66rem;top:50%;transform:translateY(-50%);color:#9fb4c8;font-size:.9rem;line-height:1;pointer-events:none} .klre-flow-note{font-size:.82rem;color:var(--klre-muted);margin:1.1rem 0 0} @media(max-width:600px){ .klre-flow{grid-template-columns:1fr;gap:.4rem} .klre-flow li::after{content:none} } /* ========================================================================== MOBILE DRAWER — disclosure per branch -------------------------------------------------------------------------- The desktop bar reveals a parent's children in a hover/focus panel. A touch screen has no hover, so each parent row in the drawer carries the same caret as a button and reveals the same list. Both, rather than either: the row's label is a link to the hub, which is a real page and often the thing wanted, and a tap can only mean one of the two. Closed by default. Five branches, one of them twelve rows long, always open is a wall of links rather than a menu -- and it pushed the lower half of the list off a short viewport, which is what the max-height underneath was working around. The branch the visitor is already standing in opens on arrival. The sheet is one column throughout. It was a two-column grid, which was fine while every group was a single row; with a twelve-row list expanding inside one column, the other column becomes an unrelated sidebar beside it. ========================================================================== */ .klre-drawer-group{display:flex;flex-direction:column;min-width:0} .klre-drawer-row{display:flex;align-items:center;gap:.2rem} .klre-drawer-row>a{flex:1 1 auto;min-width:0} .klre-drawer-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.75rem;min-height:44px;padding:0;background:none;border:0;color:var(--klre-ink);cursor:pointer;border-radius:8px} .klre-drawer-toggle:hover{background:#12263a12} .klre-drawer-sub{ display:none; flex-direction:column; margin:.1rem 0 .4rem .78rem; padding-left:.72rem; border-left:2px solid var(--klre-line); } .klre-drawer-group[data-klre-open]>.klre-drawer-sub{display:flex} /* Specificity matters here: ".klre-menu nav a" is (0,1,2) and this is (0,1,1), so these rules were silently dead under the old markup and every nested link rendered at parent size. Naming the wrapper makes the child styles win. */ .klre-menu nav .klre-drawer-sub a{ min-height:40px; padding:.4rem .6rem; font-size:.87rem; line-height:1.35; color:#4a5b6b; } .klre-menu nav .klre-drawer-sub a:hover{color:var(--klre-ink)} /* Children roughly double the drawer's height, so the sheet scrolls rather than running off the bottom of a short viewport. */ @media(max-width:1024px){ .klre-menu nav{max-height:78dvh;overflow-y:auto} } /* Two columns of nested links are unreadable on a phone. */ @media(max-width:600px){ .klre-menu nav{grid-template-columns:1fr} } /* ========================================================================== MARKET REPORTS — the embedded Windermere document -------------------------------------------------------------------------- The frame holds a PDF that lives on Windermere's server, generated on request by the same endpoint their own share button uses. Nothing here downloads it, rehosts it or copies a figure out of it, which is the point: the document arrives whole, with its cover, its month and its disclaimers, and this page only supplies the frame and the attribution underneath. Two things the frame has to survive. A third-party PDF in an iframe is the least reliable element on the site, so the way out is printed under it rather than left to a right-click, and the frame is lazy so an area page pays nothing for it unless the reader scrolls that far. The second is print: a PDF frame prints as a blank rectangle, so it is dropped and the link is what remains. ========================================================================== */ .klre-report-embed{ margin:1.6rem 0 0; padding:0; background:#eef3f8; border:1px solid var(--klre-line); border-radius:12px; overflow:hidden; } .klre-report-frame{ display:block; width:100%; height:620px; border:0; background:#fff; } .klre-report-actions{margin:.7rem 0 0;font-size:.85rem;line-height:1.5} /* The wrapper carries the frame and the way out of it, so the two cannot be separated when the frame breaks out of the prose column below. */ .klre-report-embed-wrap>*{margin-block-start:0} /* * Breaking the document out of the prose column. * * The page's text column is 760px, and a seven-page PDF rendered into 760px is a * document nobody reads: the prose column is the right measure for a paragraph * and the wrong one for a page from somewhere else. Same technique as the area * grid at the end of this file, and for the same reason: alignwide does nothing * on this theme because theme.json declares no wideSize. 50% is half the 760px * column; subtracting half the target gives the negative margin that carries the * frame out, and both terms are capped by the same expression so it can never * run past the viewport. * * Only the document breaks out. The heading and the paragraph above it stay on * the prose measure, and the actions line goes with the frame rather than being * left behind at an edge that no longer lines up with it. */ @media(min-width:1000px){ .klre-report-embed-wrap{ width:min(1080px, calc(100vw - 2 * var(--klre-gutter))); margin-inline:calc(50% - min(540px, (100vw - 2 * var(--klre-gutter)) / 2)); } } /* The sub-heading only appears on Natomas, which carries two reports. */ .klre-report-section h3{margin:2rem 0 -.6rem;font-size:1.02rem;font-weight:650} @media(max-width:900px){ .klre-report-frame{height:520px} } @media(max-width:600px){ /* A seven-page document in a phone-width frame is cramped whichever height it gets, so it gets most of the viewport and the link underneath does the rest. */ .klre-report-frame{height:65vh;min-height:380px} } @media print{ .klre-report-embed{display:none} } @supports(prefers-reduced-transparency:reduce){ .klre-report-embed{border-color:#c3ced9} } /* ========================================================================== PROCESS DIAGRAMS — card style -------------------------------------------------------------------------- Two diagrams, one per audience, each six numbered cards showing the order the work happens in. This replaced the two lead forms that used to sit inline on the homepage: a visitor needs to see the shape of the job before being asked for anything, and a numbered card is the cheapest way to show a sequence. The cards sit on a tinted panel so the six of them read as one diagram rather than as six unrelated boxes, and the panel is the only place a tint is used, so white cards have something to sit against. Numbering carries the order. A chevron is drawn between cards on the three column layout only, where "next" is unambiguous left to right; at two and one columns the chevron is removed rather than guessed at, because a wrapped grid has no consistent reading direction. ========================================================================== */ .klre-process{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:2.5rem 0 1.6rem; padding:1.35rem; list-style:none; background:#eef3f8; border:1px solid #d9e3ec; border-radius:16px; } .klre-process>li{position:relative;min-width:0} .klre-pcard{ position:relative; display:flex; flex-direction:column; gap:.6rem; height:100%; min-width:0; padding:1.4rem 1.35rem 1.5rem; background:#fff; border:1px solid var(--klre-line); border-radius:12px; box-shadow:0 14px 30px -24px rgba(23,44,42,.4); } /* A hairline accent so the top edge of each card reads as deliberate. */ .klre-pcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:12px 12px 0 0; background:linear-gradient(90deg,var(--klre-navy),#8fb0cd); } .klre-pcard-num{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:50%; background:#eef3f8; border:1px solid #cfdbe6; font-size:.76rem; font-weight:700; letter-spacing:.04em; color:var(--klre-navy); } .klre-pcard-title{margin:0;font-size:1.03rem;line-height:1.3;letter-spacing:-.015em} .klre-pcard-body{margin:0;font-size:.91rem;line-height:1.5;color:var(--klre-muted)} /* Chevron between cards, three column layout only. */ @media(min-width:1025px){ .klre-process>li:not(:nth-child(3n))::after{ content:""; position:absolute; right:-.66rem; top:2.35rem; width:.44rem; height:.44rem; border-top:2px solid #b7c8d8; border-right:2px solid #b7c8d8; transform:rotate(45deg); pointer-events:none; } } @media(max-width:1024px){ .klre-process{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;padding:1.1rem} } @media(max-width:600px){ .klre-process{grid-template-columns:1fr;gap:.7rem;padding:.9rem;border-radius:13px} .klre-pcard{padding:1.2rem 1.15rem 1.3rem} } /* The closing ask offers both doors, so they sit on one row and wrap together. */ .klre-final-cta-buttons{flex-wrap:wrap;gap:.75rem} /* The no-agency statement inside a dialog. Quietest line in the panel, but it must stay legible: it is the sentence that stops a visitor assuming they have already hired someone. */ .klre-dialog-note{ margin:1.1rem 0 0; font-size:.78rem; line-height:1.5; color:var(--klre-muted); } /* ========================================================================== The blog: search, topic filter, post cards, pagination -------------------------------------------------------------------------- This pages 67 posts over six pages, so the listing has three jobs: let a reader find one subject without opening posts one at a time, tell them where they are and how much is left, and make two posts sitting side by side look like two different things rather than one grey column of links. The card is the same component on the index, on a category archive and on search results, and every card carries the same four fields in the same order. A list whose items show different information cannot be compared across: readers read the gaps as "this one is different", not as "the format varies". Nothing here relies on JavaScript. ========================================================================== */ /* --- search: the primary way in, so it is allowed to be prominent --------- */ .klre-search-band{ margin:0 0 2.4rem; } .klre-search{ max-width:46rem; } .klre-search-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--klre-navy); margin:0 0 .7rem; } .klre-search-row{ display:flex; align-items:stretch; gap:.6rem; } .klre-search-input{ flex:1 1 auto; min-width:0; min-height:54px; padding:.9rem 1.05rem; font-size:1rem; color:var(--klre-ink); background:#fff; border:1.5px solid #a9bccc; border-radius:8px; box-shadow:inset 0 1px 2px #12263a0f; transition:border-color .16s ease,box-shadow .16s ease; } /* The muted grey rather than the browser default, which fails contrast on white at around 4.5:1 and is the one line a reader has to be able to read. */ .klre-search-input::placeholder{ color:var(--klre-muted); opacity:1; } .klre-search-input:focus-visible{ outline:3px solid #003057; outline-offset:2px; border-color:var(--klre-navy); } .klre-search-go{ flex:0 0 auto; min-height:54px; padding:.9rem 1.7rem; background:var(--klre-navy); color:#fff; border:1px solid transparent; border-radius:8px; font-size:.95rem; font-weight:650; cursor:pointer; transition:background .16s ease; } .klre-search-go:hover{ background:#00223d; } /* --- the topic row ------------------------------------------------------- */ /* Sits directly above the results, so it reads as a filter on the list. */ .klre-topics{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:1rem 0 0; } .klre-topics-label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--klre-muted); margin-right:.15rem; } .klre-topic{ display:inline-flex; align-items:center; gap:.45rem; min-height:40px; padding:.45rem .9rem; border:1px solid rgba(23,44,42,.12); border-radius:999px; background:rgba(255,255,255,.72); color:var(--klre-ink); font-size:.87rem; font-weight:550; line-height:1.2; text-decoration:none; transition:border-color .16s ease,background .16s ease; } .klre-topic:hover{ border-color:rgba(0,48,87,.42); background:#fff; } .klre-topic.is-current{ background:var(--klre-navy); border-color:var(--klre-navy); color:#fff; } .klre-topic-count{ font-size:.72rem; font-weight:700; color:var(--klre-muted); } .klre-topic.is-current .klre-topic-count{ color:#c9dcee; } /* --- the top of the index: the heading beside the search field ----------- */ /* Search is the fastest way into 67 posts, so it belongs on the first screen beside the heading rather than below it in a band of its own. It also fills the right-hand two-fifths of the row, which the heading copy left empty. */ .klre-blog-top{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:clamp(2rem,4vw,4.5rem); row-gap:1.75rem; align-items:start; padding-bottom:2.25rem; margin-bottom:2rem; border-bottom:1px solid rgba(23,44,42,.1); } .klre-blog-top .klre-blog-hero{ padding:0; margin:0; border-bottom:0; } .klre-blog-top .klre-search-band{ margin:0; padding-top:.3rem; } /* In this column the field has about 300px to work with, which is not enough for a field and a button side by side: the field would collapse to roughly half that and clip its own placeholder. Stacking gives the field the whole column. Above the breakpoint the whole group is one column anyway. */ @media(min-width:1025px){ .klre-blog-top .klre-search-row{flex-direction:column} .klre-blog-top .klre-search-go{width:100%} } /* Below that the two columns do not fit side by side, so the heading takes the full width and the search field sits under it, where it keeps its own row. */ @media(max-width:1024px){ .klre-blog-top{grid-template-columns:1fr} } /* --- the listing --------------------------------------------------------- */ .klre-archive{ margin:0; } .klre-archive-head{ margin-top:0; } /* The topic filter belongs with the list it filters, not with the search field: a chip row floating under a heading reads as navigation for the page, while the same row directly above the results reads as a filter. */ .klre-count{ font-size:.84rem; color:var(--klre-muted); margin:.85rem 0 1.7rem; } /* Two across, not three. The content column on this site is 760px, so three columns would leave each card 242px wide: a title wrapping to four lines and a summary squeezed to eight words a line. Two across gives 368px, which is what the card was designed for, and it matches the two-column chooser and glossary further down the same page. */ .klre-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; list-style:none; margin:0 0 2.4rem; padding:0; } /* height:100% plus the parent grid's default stretch is what makes a row of cards level when their titles run to different line counts. */ .klre-card{ position:relative; display:flex; flex-direction:column; gap:.55rem; height:100%; padding:1.35rem 1.3rem 1.25rem; background:#fff; border:1px solid rgba(23,44,42,.1); border-radius:14px; box-shadow:0 12px 26px -22px rgba(23,44,42,.45); transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease; } .klre-card:hover, .klre-card:focus-within{ transform:translateY(-3px); border-color:rgba(0,48,87,.4); box-shadow:0 0 0 1px rgba(0,48,87,.16),0 20px 36px -22px rgba(23,44,42,.34); } /* The topic chip is a link, so it has to sit above the stretched title link or it becomes unreachable: the stretched pseudo-element covers the whole card. */ .klre-card-topic{ position:relative; z-index:2; align-self:flex-start; display:inline-flex; align-items:center; min-height:30px; padding:.28rem .62rem; border:1px solid transparent; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.05em; line-height:1.2; text-transform:uppercase; text-decoration:none; color:var(--klre-ink); } /* Six fixed tints, assigned from the category slug, so the same topic is the same colour on every card and on every page of the archive. Ink on a pastel clears 12:1, where white on the same hue would not. */ .klre-tint-1{background:#fdf1d8;border-color:#e9d6a7} .klre-tint-2{background:#ddefe7;border-color:#b4ddc8} .klre-tint-3{background:#e3eaf8;border-color:#bacfea} .klre-tint-4{background:#f8e5e5;border-color:#e7c6c6} .klre-tint-5{background:#efe7f8;border-color:#d4c5ea} .klre-tint-6{background:#e6f1f2;border-color:#c0dcdf} .klre-card-topic:hover{ filter:brightness(.96); text-decoration:underline; text-underline-offset:.18em; } .klre-card-title{ margin:0; font-size:1.16rem; font-weight:640; line-height:1.28; letter-spacing:-.022em; } .klre-card-title a{ color:var(--klre-ink); text-decoration:none; } .klre-card-title a:hover{ text-decoration:underline; text-underline-offset:.2em; } /* One real link, stretched over the panel: the whole card is a target, and a screen reader still meets a single link with meaningful text. */ .klre-card-title a::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:14px; } .klre-card-sum{ flex:1; margin:0; font-size:.9rem; line-height:1.55; color:var(--klre-muted); } .klre-card-meta{ display:flex; align-items:center; gap:.5rem; margin:.35rem 0 0; font-size:.76rem; color:var(--klre-muted); } .klre-card-dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; } /* --- pagination: real URLs, numbered, no JavaScript ---------------------- */ .klre-pager{ margin:0 0 2.5rem; } .klre-pager-list{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; } .klre-pager-item>a, .klre-pager-item>span{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:.4rem .72rem; border:1px solid rgba(23,44,42,.14); border-radius:8px; background:#fff; color:var(--klre-ink); font-size:.9rem; font-weight:550; text-decoration:none; transition:border-color .16s ease,background .16s ease; } .klre-pager-item>a:hover{ border-color:rgba(0,48,87,.45); background:#f2f6fa; } .klre-pager-item.is-current>span{ background:var(--klre-navy); border-color:var(--klre-navy); color:#fff; } .klre-pager-item.is-prev>a, .klre-pager-item.is-next>a{ padding-inline:1.05rem; } .klre-pager-item>span.dots{ min-width:auto; border:0; background:none; padding-inline:.3rem; } /* --- an empty result set is a fork in the road, not a dead end ----------- */ .klre-empty{ max-width:46rem; padding:1.5rem 1.6rem; margin:0 0 2rem; background:#fff; border:1px solid rgba(23,44,42,.1); border-radius:14px; } .klre-empty-lead{ margin-top:0; font-weight:600; color:var(--klre-ink); } .klre-empty .klre-chooser{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:1.2rem 0 0; } .klre-empty-all{ margin:1.4rem 0 0; } .klre-search-page .klre-topics{ margin-top:2.2rem; } .klre-archive-hero{ padding-bottom:1.6rem; margin-bottom:1.8rem; } @media(max-width:600px){ .klre-search-row{flex-direction:column} .klre-search-go{width:100%} .klre-topic{min-height:44px} .klre-cards{grid-template-columns:1fr;gap:.85rem} .klre-card{padding:1.2rem 1.15rem 1.1rem} .klre-card-title{font-size:1.1rem} .klre-empty{padding:1.25rem 1.15rem} .klre-empty .klre-chooser{grid-template-columns:1fr} .klre-pager-item>a,.klre-pager-item>span{min-width:44px;padding-inline:.6rem} .klre-pager-item.is-prev>a,.klre-pager-item.is-next>a{padding-inline:.8rem} } /* A card that lifts under a finger is motion nobody asked for, and hover does not exist on a touch screen. */ @media(hover:none){ .klre-card:hover{transform:none} } @media(prefers-reduced-motion:reduce){ .klre-card{transition:none} .klre-card:hover{transform:none} } @media(forced-colors:active){ .klre-card,.klre-topic,.klre-search-input{ border:1px solid CanvasText; } .klre-card-title a::after{outline:0} } /* ========================================================================== The three doors, and the market strip -------------------------------------------------------------------------- Merged from the Windermere one-page template. Its signature move is a photograph with a short label, a headline and a single call to action, repeated as a grid. That shape transfers; the properties it showed do not, because there is no IDX feed here and a house photo beside a price would be inventing a listing. So the shape carries the three routes a visitor actually arrives on, and every card ends on a page that exists. The homepage content column is 1240px, so three across gives each card about 400px. Below that the row goes straight to one column rather than two, because three cards in two columns leaves the third beside an empty track. ========================================================================== */ .klre-doors{ display:grid; grid-template-columns:1fr; gap:1.1rem; margin:2.2rem 0 1rem; } @media(min-width:1000px){ .klre-doors{grid-template-columns:repeat(3,minmax(0,1fr))} .klre-cards--wide{grid-template-columns:repeat(3,minmax(0,1fr))} } .klre-door{ display:flex; flex-direction:column; gap:.5rem; height:100%; padding:1.6rem 1.5rem 1.4rem; overflow:hidden; background:#fff; border:1px solid rgba(23,44,42,.1); border-radius:14px; box-shadow:0 16px 34px -26px rgba(23,44,42,.5); transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease; /* Same bug as the area cards, found by auditing rather than by being told: this card lifts its border on hover, so it reads as one target, and the only anchor in it was the eighteen-character line at the bottom. Each door has exactly one destination, so the whole card is the target. */ position:relative; cursor:pointer; } .klre-door:hover{ border-color:rgba(0,48,87,.4); box-shadow:0 0 0 1px rgba(0,48,87,.16),0 22px 40px -24px rgba(23,44,42,.34); } /* There is no picture in this card any more, so the card owns its own gutter and there is nothing to bleed to its edges. See the note on the area cards. */ .klre-door .klre-door-kicker{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--klre-navy); } .klre-door h3{ margin:0; font-size:1.12rem; line-height:1.26; letter-spacing:-.02em; } .klre-door .klre-door-line{ flex:1; margin:0; font-size:.92rem; line-height:1.55; color:var(--klre-muted); } .klre-door .klre-door-go{ margin:.2rem 0 0; font-size:.9rem; font-weight:600; } /* The stretch, and the visible focus ring that has to come with it: the target is now the whole card, so the ring belongs around the whole card rather than around one line of text. */ .klre-door .klre-door-go a:after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } .klre-door:focus-within{ border-color:rgba(0,48,87,.6); box-shadow:0 0 0 3px rgba(0,48,87,.16); } .klre-doors-note{ margin:.2rem 0 0; font-size:.88rem; color:var(--klre-muted); } /* The plain two-across grid from the blog index would orphan the third post on the homepage's wider column, so the strip declares its own column count on both sides of the breakpoint. It is written as a max-width rule rather than a bare base rule on purpose: a base rule sitting this late in the file would override the min-width block above it, because two rules of equal specificity are decided by source order, not by which one looks more specific. That is exactly the bug this comment is standing on. */ .klre-cards--wide{ margin-bottom:1.4rem; } /* WordPress's flow layout puts a block gap above every child after the first. Inside a grid that reads as two cards sitting lower than the first one, and it is invisible unless you measure their tops. */ .klre-doors > .klre-door{ margin-block-start:0; } .klre-market-section .klre-cards{ margin-top:1.6rem; } @media(max-width:999px){ .klre-cards--wide{grid-template-columns:1fr} } @media(hover:none){ .klre-door:hover{transform:none} } @media(prefers-reduced-motion:reduce){ .klre-door{transition:none} .klre-door:hover{transform:none} } @media(forced-colors:active){ .klre-door{border:1px solid CanvasText} } /* ========================================================================== HERO PHOTOGRAPH -------------------------------------------------------------------------- This is the Windermere template's opening section, merged in whole. The template's hero is one photograph, full bleed, with the headline centred on it, a line under that, and one call to action. Its type is Montserrat for the headline and Poppins for everything else, white, centred. Its wash is a flat black at 46%. Three departures, each deliberate: 1. The wash is 0.56 rather than 0.46. The template's 0.46 sits under a 100px headline, which is large text and needs 3:1; white on 0.46 black over pure white is 3.47:1 and passes. Our line under the headline is a sentence at paragraph size, which needs 4.5:1, and 3.47:1 does not clear it. White on 0.56 black over pure white is 4.94:1, so no pixel the photograph contains can fail, at any size. 2. The band carries the photograph's own aspect ratio on desktop, so the whole picture is visible instead of a crop of it. The template left the height to its content and lost a little off the sides at wide widths. 3. The typeface sizes hit the template's mobile numbers exactly (48px headline, 20px line, 14px call to action) and scale up towards its desktop numbers (100/48/18). They stop short on the two text sizes because our headline is 36 characters against the template's 13, and our line is a sentence against its two words. ========================================================================== */ /* The two typefaces, self-hosted. Two files, 26KB, no third-party request and nothing to fail at render time. Latin subset only, which is all this site writes in plus the ® and · it uses. */ @font-face{ font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/montserrat-700-latin.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:"Poppins";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/poppins-400-latin.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; } .klre-hero--photo{ /* The photograph runs edge to edge, but the words on it still have to line up with the column every other section sits in. --klre-hero-inset is that distance: the page gutter, plus half of whatever slack is left once the 1240px content column is centred inside it. The same value pulls the band out and pushes the copy back in, so the copy cannot drift from the sections below it whatever the viewport does. */ --klre-hero-inset:calc(var(--klre-gutter) + max(0px, (100vw - 2 * var(--klre-gutter) - 1240px) / 2)); /* The padding that keeps the words on the page column, and that the band does NOT carry. An absolutely positioned box resolves inset:0 against its containing block's padding box. With the padding on the band, the picture and the wash were drawn in a box 200px narrower and 144px shorter than the one aspect-ratio describes, so cover trimmed 3.6 per cent off the picture at 1440 while the ratio looked correct. Offsetting the two overlays to cancel the padding made it worse: with width and height left auto the picture resolved the offsets against the padding box and the wash against the border box, and the two ended up different sizes; stating width/height as percentages then had the height resolve against the border box and the width against the padding box, so the picture came out 144px taller than the band. None of that is worth diagnosing further. The band carries no padding, so its padding box and its aspect box are the same box and nothing can disagree; the padding moves to the copy block, which is in flow and cannot affect the picture. max-width is raised by the same padding so the words keep the measure they had. */ --klre-hero-pad-y:clamp(2.75rem,5vw,4.5rem); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); /* The band carries the photograph's own ratio, so cover has nothing left to crop and the whole frame is on screen at every width. The file is the builder's original 2220x1306, whole. An earlier build shaved it to 1141 so that a zoom control burned into the bottom-left corner of the source file, which is a screen capture, would not be published. That was the wrong trade and it is reverted: the control is faint, it sits on bare ground, and the gradient wash below leaves it less contrast than the ground's own texture carries at arm's length, so the whole frame ships and nothing is cropped. Measured at 1440 and at 2880: inside the control's footprint the local contrast peaks at 11 to 19 against 11 to 20 for clean ground beside it, which is to say it is not a feature, it is texture. There is deliberately no height cap. A cap was there, and on a 1920x1080 laptop it silently cropped ten per cent off the bottom of the picture. */ aspect-ratio:2220 / 1306; padding:0; text-align:center; isolation:isolate; /* Painted before the photograph decodes, so the band cannot flash white. */ background:#0b1725; } /* The ambient radial behind the old text hero has nothing to do here. */ .klre-hero--photo:before{display:none} /* The band has no padding, so inset:0 is the band's own box, which is the box aspect-ratio describes. The picture therefore fills it exactly and cover has nothing to trim. */ .klre-hero-photo{ position:absolute; inset:0; width:100%; height:100%; z-index:0; margin:0; border-radius:0; object-fit:cover; object-position:50% 50%; } /* A vertical wash, not the template's flat one. The template paints one value, #00000075, across the whole photograph. A flat wash is the wrong shape for this picture for two reasons. It darkens the sky, which is the part of a dusk photograph worth looking at, as much as it darkens the words, which are the only part that needs it; and a single value has to be set by the single brightest pixel anywhere under the type, so the whole band pays for one lit cloud. The ramp below is the minimum this photograph requires and not a value chosen by taste. It was solved, not eyeballed: for every pixel under every line of type, at six desktop widths, bisect on the alpha until white clears 4.5:1, then take the worst pixel per line. The worst numbers come out at 0.566 (headline, 901px), 0.504 (standfirst, 1200px) and 0.572 (the phone line, 1440px), so the ramp holds 0.60 to 0.62 across the type and is free to fall away above and below it, where nothing sits on the picture. The previous ramp was set by eye and carried a margin of 0.17 to 0.28 at every one of those points, which is the photograph being darkened for nothing. Two traps in doing that arithmetic, both of which cost a rewrite here: 1. CSS composites alpha in sRGB, not in linear light. Working in linear light makes every bright pixel look far more dangerous than it is. 2. A screenshot clip taller than the viewport is silently truncated to it, which maps band rows onto the wrong part of the picture and invents contrast requirements that do not exist. Capture full-page. The colour is the site's navy #081220 rather than black, so the darkening reads as dusk and not as a grey film. margin:0 is load-bearing, not tidiness. WordPress's flow layout puts `margin-block-start: var(--wp--style--block-gap)` on every child after the first, the scrim is the second child, and a margin still applies to an absolutely positioned box. With inset:0 and a 20px top margin the wash started 20px below the top of the photograph and ended 20px short of it: measured at y=125 h=691 against the photograph's y=105 h=711, at every width. */ .klre-hero-scrim{ position:absolute; inset:0; width:100%; height:100%; z-index:1; margin:0; pointer-events:none; background-image:linear-gradient( 180deg, rgba(8,18,32,.10) 0%, rgba(8,18,32,.24) 14%, rgba(8,18,32,.50) 26%, rgba(8,18,32,.60) 32%, rgba(8,18,32,.61) 42%, rgba(8,18,32,.61) 52%, rgba(8,18,32,.62) 64%, rgba(8,18,32,.62) 74%, rgba(8,18,32,.56) 82%, rgba(8,18,32,.42) 90%, rgba(8,18,32,.20) 100% ); } .klre-hero--photo .klre-hero-copy{ position:relative; z-index:2; /* The band's padding lives here now. This block is in flow, so its padding cannot move the picture, and the words still land on the page column. The measure is raised by the same padding so the text keeps exactly the width it had when the padding sat on the band. */ max-width:min(100%, calc(62rem + 2 * var(--klre-hero-inset))); padding:var(--klre-hero-pad-y) var(--klre-hero-inset); margin-inline:auto; } .klre-hero--photo h1{ font-family:"Montserrat",Helvetica,Arial,sans-serif; font-weight:700; color:#fff; /* 48px at 390 and 100px from about 815 up, which are the template's own two values. The clamp floor drops to 37.6px below 390 because at 320 the title otherwise wraps to a fourth line, and a hero that grows to fit its words is a hero that crops its photograph to pay for them. */ font-size:clamp(1.875rem,5.6vw,2.5rem); line-height:1.08; letter-spacing:0; max-width:100%; margin:0 auto clamp(.85rem,1.6vw,1.35rem); } /* Centred, so the forced line break the left-aligned hero needed is wrong here: let it break where the measure says rather than where the markup says. */ .klre-hero--photo h1 .klre-h1-l{display:inline} .klre-hero--photo .klre-hero-copy>p:not(.klre-eyebrow){ font-family:"Poppins",Helvetica,Arial,sans-serif; font-weight:400; color:#fff; /* 20px on a phone, which is the template's own mobile value, and 30px on a desktop, which is not its 48px. The template's line under the headline is two words; ours is a 97 character sentence, and at 48px it needs three lines, which pushes the band past the photograph's aspect ratio and starts cropping the picture the band exists to show. */ font-size:clamp(1rem,1.15vw,1.375rem); line-height:1.5; max-width:40rem; margin:0 auto clamp(1.5rem,2.8vw,2.25rem); } .klre-hero--photo .klre-hero-ctas{ justify-content:center; align-items:center; gap:clamp(.6rem,1.4vw,1rem); margin-top:0; } /* The template's call to action is Poppins 400 at 18px with a pixel of tracking, and 14px on a phone. */ .klre-hero--photo .wp-block-button__link{ font-family:"Poppins",Helvetica,Arial,sans-serif; font-weight:400; /* 15px on a phone rising to 17px, which is the one place the type did not come down: the action is the point of the section and 14px on a desktop read as a caption rather than a button. */ font-size:clamp(.9375rem,1.1vw,1.0625rem); letter-spacing:.6px; } /* Navy buttons disappear into a dusk photograph, so the band inverts them: solid white for the primaries, a white hairline for the phone. */ .klre-hero--photo .klre-cta-primary .wp-block-button__link{ background:#fff; color:var(--klre-navy)!important; border-color:#fff; } .klre-hero--photo .klre-cta-primary .wp-block-button__link:hover{ background:#eef3f8; box-shadow:0 8px 22px rgba(0,0,0,.3); } /* A hairline outline with no fill read as a disabled control over the middle of the photograph, where the picture is lightest. A dark translucent fill keeps it the quieter of the two buttons without making it look switched off. */ .klre-hero--photo .klre-cta-secondary .wp-block-button__link{ background:rgba(4,14,24,.42); color:#fff!important; border-color:rgba(255,255,255,.72); } .klre-hero--photo .klre-cta-secondary .wp-block-button__link:hover{ background:rgba(255,255,255,.14); border-color:#fff; } /* -------------------------------------------------------------------------- The band under the photograph. What the hero used to say, at full width on an opaque surface where it can be read: the offer in full, the timing list, and the request card. -------------------------------------------------------------------------- */ .klre-hero-lower{ display:grid; grid-template-columns:1.15fr 1fr; grid-template-areas:"intro intro" "timing aside" "trust aside"; column-gap:clamp(2.5rem,6vw,6rem); row-gap:clamp(1.25rem,2vw,1.9rem); align-items:start; padding-block:clamp(3.5rem,6.5vw,5.5rem); } .klre-hero-lower .klre-hero-intro-block{grid-area:intro;max-width:52rem} .klre-hero-lower .klre-hero-intro-block>.klre-eyebrow{margin-bottom:.9rem} .klre-hero-lower .klre-hero-intro{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6} .klre-hero-lower .klre-timing{grid-area:timing} .klre-hero-lower .klre-hero-aside{grid-area:aside} .klre-hero-lower .klre-hero-trust{grid-area:trust} /* Above the column break the title has to shrink faster than the viewport, or it takes three lines on a 1024 laptop, the copy outgrows the photograph's aspect ratio and the band starts cropping the picture to pay for the extra line. This is the one place the template's flat 100px cannot be followed: its headline is 13 characters and ours is 36. */ @media(min-width:901px){ .klre-hero--photo h1{font-size:clamp(2.5rem,3.6vw,3.25rem)} } @media(max-width:1080px){ .klre-hero-lower{column-gap:2.2rem} } @media(max-width:900px){ /* A phone gets the photograph whole and the words underneath it, because at this width there is no version of "words on the photograph" that is free. The copy is taller than the picture's ratio, so an overlay band must either crop the sides or show slack. Cover cropped them: a phone saw about 40 per cent of the width, which is what read as a zoomed-in detail. Contain showed the entire frame and then had to fill the leftover height with the band's own dark ground, which is what showed as two bars above and below the picture. Stacking is the third answer and the only one that costs nothing: the photograph sits in the flow at the full gutter width and its own height, so there is nothing to crop and no slack for a bar to fill. */ .klre-hero--photo{ aspect-ratio:auto; display:block; padding:0; } .klre-hero-photo{ position:static; display:block; width:100%; height:auto; } /* No words sit on the photograph at this width, so there is nothing for a wash to make room for, and a wash over an unscrimmed picture is only mud. */ .klre-hero-scrim{display:none} /* Only the vertical padding changes down here; the inline padding and the measure carry over from the base rule so a tablet keeps the text width it had before the padding moved off the band. */ .klre-hero--photo .klre-hero-copy{ position:static; padding-block:clamp(2rem,6vw,2.75rem) clamp(2.25rem,6vw,3rem); } .klre-hero-lower{ grid-template-columns:1fr; grid-template-areas:"intro" "timing" "aside" "trust"; row-gap:2.5rem; } } @media(max-width:600px){ /* The band keeps its zero padding on a phone so the photograph reaches both edges; the breathing room lives on the copy block instead. An earlier build padded the band here, which on a stacked layout would inset the picture. */ .klre-hero--photo .klre-hero-copy{ padding-block:1.75rem 2.25rem; } .klre-hero--photo .klre-hero-copy>p:not(.klre-eyebrow){font-size:1rem} /* Full-width tap targets are worth more on a phone than a shorter band. */ .klre-hero--photo .klre-hero-ctas{gap:.6rem} .klre-hero-lower{padding-block:3rem} } @media(forced-colors:active){ .klre-hero--photo{background:#000} .klre-hero-scrim{background-color:#000} } .klre-main{overflow-x:clip} /* On a phone the three hero buttons wrap rather than stacking. Full-width targets would be the better convention, and they are what the rest of the site uses, but inside a full-bleed photograph every extra row of buttons pushes the band taller and the photograph gets cropped harder to pay for it. Wrapping keeps the band about 60px shorter, which is the difference between showing a third of the picture and a quarter of it. */ .klre-hero--photo .klre-hero-ctas{flex-wrap:wrap} .klre-hero--photo .klre-hero-ctas .wp-block-button, .klre-hero--photo .klre-hero-ctas .wp-block-button__link{width:auto} /* ========================================================================== THE PHONE, AS A LINE RATHER THAN A THIRD BUTTON -------------------------------------------------------------------------- Three buttons over the photograph made the hero an action bar. The template has one action; two is where a chooser stops being a chooser, and the phone number is already in the header, the footer, the aside and the mobile bar. It stays reachable and stops competing. ========================================================================== */ .klre-hero--photo .klre-hero-copy>p.klre-hero-phone{ margin:clamp(1.1rem,1.8vw,1.5rem) auto 0; font-family:"Poppins",Helvetica,Arial,sans-serif; font-size:clamp(.875rem,1vw,1rem); line-height:1.5; color:rgba(255,255,255,.9); } .klre-hero--photo .klre-hero-copy>p.klre-hero-phone a{color:#fff} /* ========================================================================== AREA CARDS -------------------------------------------------------------------------- These eleven cards used to open with a photograph from the site builder's stock library, and each area page opened with the same picture again. They came off for two reasons. The pictures are generated and they read as generated. Reduced to what a reader actually receives, the eleven are one photograph: the average colour of each is within a tenth of the black-to-white scale of the others, so a grid of them is a grid of one beige thing. Blurring them was considered and is worse, because blurring removes the detail that was the only thing telling them apart and leaves eleven interchangeable smears that no single text colour sits on. And a photograph at the top of a page called Roseville is a claim about Roseville that a stock file cannot support. What is left is what the hub is actually for: the name, in a card, with the whole card as the target. It is also 6.9KB of page instead of a megabyte. ========================================================================== */ .klre-area-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.1rem,2vw,1.5rem); margin-top:clamp(2rem,3.4vw,2.75rem); } .klre-area-card{ margin:0; /* Named as a whole-card target in the generator, and it was not one: the only anchor in a card is the city name, which covered between 2.7 and 15.5 per cent of it. Clicking the arrow, the padding or the border did nothing, which is what "the buttons don't work" means. The card is the box, the anchor is stretched over it below, and the cursor agrees with the anchor. */ position:relative; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:58px; padding:1rem 1.25rem; background:#fff; border:1px solid var(--klre-line); border-radius:14px; transition:border-color .16s ease,box-shadow .16s ease; } /* The one card that is not a city. Filled rather than outlined, because it is an action and the other eleven are destinations. */ .klre-area-card--action{ background:var(--klre-navy); border-color:var(--klre-navy); } .klre-area-card--action .klre-area-card-name a{color:#fff} /* Two classes, not one. .klre-area-card:after is declared further down this file at the same specificity, so a single-class override loses to it on source order and the arrow stays navy on a navy fill, which is to say invisible. */ .klre-area-card.klre-area-card--action:after{border-color:#fff} .klre-area-card:hover{ border-color:#9db4c9; box-shadow:0 14px 30px -22px #0b254080; } /* Declared after the rule above, not before it. Same specificity, so the later one wins; before it, the filled card hovered to a pale outline on navy. */ .klre-area-card--action:hover{border-color:#00223d;box-shadow:0 14px 30px -20px #0b2540b3} /* The arrow is drawn rather than written. A character here would be decoration pretending to be copy, and it would have to be translated. */ .klre-area-card:after{ content:""; width:.5rem; height:.5rem; flex:0 0 auto; border-right:1.6px solid var(--klre-navy); border-bottom:1.6px solid var(--klre-navy); transform:rotate(-45deg); transition:transform .16s ease; } .klre-area-card:hover:after{transform:rotate(-45deg) translate(.15rem,-.15rem)} .klre-area-card-name{margin:0;font-size:1.06rem;font-weight:600;line-height:1.3} .klre-area-card-name a{color:var(--klre-ink);text-decoration:none} .klre-area-card-name a:hover{text-decoration:underline;text-underline-offset:.22em} /* The stretch. One transparent layer over the whole card, so every pixel of it that is not the arrow is the anchor. z-index is not decoration either: the arrow is the card's own ::after and paints after this, so without it a click on the arrow itself would land on the card and do nothing -- which is the bug this rule exists to fix, reappearing in the one place people aim at. */ .klre-area-card-name a:after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } /* Focus has to be visible where the target is, not only around the two words. */ .klre-area-card:focus-within{ border-color:var(--klre-navy); box-shadow:0 0 0 3px #0b254026; } @media(max-width:600px){ .klre-area-grid{grid-template-columns:1fr;gap:1.1rem} } /* Three across once the grid has the wide measure to use. Below that it stays at two, because at 760px three names would be 240px each, which is narrower than the longest one needs. */ @media(min-width:1000px){ .klre-area-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* -------------------------------------------------------------------------- Breaking the area grid out of the prose column. The page's text column is 760px. Eleven photographs were then either two columns of 367px, which reads as a list with pictures, or three of 236px, which reads as a contact sheet. alignwide does nothing here because theme.json declares no wideSize and the attribute resolves to the content width, so the breakout is done directly: 50% is half the 760px column, and subtracting half the target width gives the negative margin that carries the grid out to the wide measure the homepage uses. Both terms are capped by the same expression so the grid can never run past the viewport. -------------------------------------------------------------------------- */ @media(min-width:1000px){ .klre-area-grid{ width:min(1240px, calc(100vw - 2 * var(--klre-gutter))); margin-inline:calc(50% - min(620px, (100vw - 2 * var(--klre-gutter)) / 2)); } }