Hero Collage
A centred hero with pictures scattered around the title: they open one after the other, then follow the mouse a little, each at its own depth.
View codeHero Search
A hero with a real search card: Buy and Rent swap the budget list under a sliding pill, the place field rolls through its examples, the selects unroll like Kodza Select, and the result count rolls in the button.
Hero
No dependencies
herosectionsearchformreal estatebookingfiltersselect
Added Oct 2026
With your AI
Just ask.
Say it to your AI. It gets the exact code below, not its best guess, and knows where it goes.
Add the Kodza Hero Search to my page.
Not plugged in yet?
Also in Codex, Cursor and VS Code.
claude mcp add -t http kodza https://kodza.dev/api/mcp
<section class="kodza-hero-search">
<div class="kodza-hero-search__inner">
<div class="kodza-hero-search__copy">
<p class="kodza-hero-search__eyebrow"><span class="kodza-hero-search__rise">Homes to buy and rent · updated hourly</span></p>
<h1 class="kodza-hero-search__title"><span class="kodza-hero-search__line"><span class="kodza-hero-search__rise">Find a home,</span></span> <span class="kodza-hero-search__line"><span class="kodza-hero-search__rise">not a brochure.</span></span></h1>
<p class="kodza-hero-search__lead">Real floor plans, real prices and the street before the visit. When it says cosy, we say small.</p>
<form class="kodza-hero-search__form" action="/search" method="get" role="search">
<fieldset class="kodza-hero-search__modes">
<legend class="kodza-hero-search__sr">Looking to</legend>
<label class="kodza-hero-search__mode"><input class="kodza-hero-search__radio" type="radio" name="mode" value="buy" checked /><span>Buy</span></label>
<label class="kodza-hero-search__mode"><input class="kodza-hero-search__radio" type="radio" name="mode" value="rent" /><span>Rent</span></label>
</fieldset>
<div class="kodza-hero-search__fields">
<label class="kodza-hero-search__field kodza-hero-search__field--where">
<span class="kodza-hero-search__label">Where</span>
<input class="kodza-hero-search__input" type="text" name="where" placeholder="Le Havre" autocomplete="off" data-examples="Le Havre, Lisbon, Nantes, Porto" />
</label>
<label class="kodza-hero-search__field kodza-hero-search__select">
<span class="kodza-hero-search__label">Type</span>
<select class="kodza-hero-search__native" name="type" aria-label="Type">
<option value="" selected>Any type</option>
<option value="house">House</option>
<option value="flat">Flat</option>
<option value="loft">Loft</option>
<option value="studio">Studio</option>
</select>
</label>
<label class="kodza-hero-search__field kodza-hero-search__select">
<span class="kodza-hero-search__label">Budget</span>
<select class="kodza-hero-search__native" name="max_price" data-mode="buy" aria-label="Budget">
<option value="" selected>Any price</option>
<option value="200000">Up to €200k</option>
<option value="350000">Up to €350k</option>
<option value="500000">Up to €500k</option>
<option value="800000">Up to €800k</option>
</select>
<select class="kodza-hero-search__native" name="max_rent" data-mode="rent" aria-label="Budget">
<option value="" selected>Any rent</option>
<option value="800">Up to €800 / mo</option>
<option value="1200">Up to €1,200 / mo</option>
<option value="1800">Up to €1,800 / mo</option>
<option value="2500">Up to €2,500 / mo</option>
</select>
</label>
</div>
<button class="kodza-hero-search__submit" type="submit">Show <span class="kodza-hero-search__count">128</span> homes<svg class="kodza-hero-search__arrow" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.5 13.5 8 9 12.5" /></svg></button>
<p class="kodza-hero-search__note">Free to search. No account, no agent calling you at dinner.</p>
</form>
</div>
<figure class="kodza-hero-search__media">
<div class="kodza-hero-search__frame">
<div class="kodza-hero-search__curtain"><div class="kodza-hero-search__hold"><img src="https://kodza.dev/media/kz-overflow-1400.webp" alt="A two-storey concrete house, its upper floor cantilevered over the ground" width="1400" height="1400" /></div></div>
<p class="kodza-hero-search__tag"><span class="kodza-hero-search__meta">Sainte-Adresse · 4 rooms · 132 m²</span> <span class="kodza-hero-search__price"><span data-mode="buy">€465,000</span><span data-mode="rent">€1,750 / mo</span></span></p>
</div>
<figcaption class="kodza-hero-search__caption">fig. 01 — 132 m², measured, not estimated</figcaption>
</figure>
</div>
</section>/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Hero Search
A hero that searches on arrival: a tight headline, its intro, then a search card, with the
picture of a listing on the right. Buy and Rent are native radios under an ink pill that slides
from one to the other. The place field rolls through its examples (data-examples) while it is
empty; Type and Budget are real selects, dressed up as in Kodza Select (a list that unrolls, a
highlight that slides, a tick, the value that rolls). Each mode has its own budget select
(data-mode): the field shows the chosen mode's one, the other is disabled, so the form only
sends one. A price written per mode (data-mode, in the listing's tag) rolls with it.
The count in the button rolls too: write the new number into .kodza-hero-search__count
(on the form's change event, from your own results). The form sends itself as GET to its
action, with or without the script. On arrival the lines rise out of their masks while the
picture opens from the top edge down, as in Hero Split. Everything is tuned with the
--kz-hero-search-* variables. */
.kodza-hero-search {
--kz-hero-search-ink: #0a0a0a;
--kz-hero-search-paper: #f2f2f0;
--kz-hero-search-dim: rgba(10, 10, 10, 0.62);
--kz-hero-search-faint: rgba(10, 10, 10, 0.6);
--kz-hero-search-surface: #ffffff;
--kz-hero-search-line: rgba(10, 10, 10, 0.1);
--kz-hero-search-field: rgba(10, 10, 10, 0.14);
--kz-hero-search-field-hover: rgba(10, 10, 10, 0.3);
--kz-hero-search-soft: rgba(10, 10, 10, 0.06);
--kz-hero-search-shadow: 0 24px 48px -24px rgba(10, 10, 10, 0.24);
--kz-hero-search-pop: 0 18px 40px -16px rgba(10, 10, 10, 0.3);
--kz-hero-search-bg: transparent;
--kz-hero-search-width: 1240px;
--kz-hero-search-gap: clamp(32px, 5vw, 80px);
--kz-hero-search-pad-y: clamp(72px, 9vw, 140px);
--kz-hero-search-gutter: clamp(16px, 4vw, 40px);
--kz-hero-search-radius: 16px;
--kz-hero-search-ratio: 4 / 5;
--kz-hero-search-height: 56px;
--kz-hero-search-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
--kz-hero-search-ease: cubic-bezier(0.22, 1, 0.36, 1);
container: kodza-hero-search / inline-size;
box-sizing: border-box;
width: 100%;
padding-block: var(--kz-hero-search-pad-y);
padding-left: max(var(--kz-hero-search-gutter), env(safe-area-inset-left, 0px));
padding-right: max(var(--kz-hero-search-gutter), env(safe-area-inset-right, 0px));
background: var(--kz-hero-search-bg);
color: var(--kz-hero-search-ink);
}
.kodza-hero-search__inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--kz-hero-search-gap);
align-items: center;
max-width: var(--kz-hero-search-width);
margin: 0 auto;
}
.kodza-hero-search__copy {
min-width: 0;
}
.kodza-hero-search__eyebrow {
margin: 0 0 22px;
overflow: hidden;
font-family: var(--kz-hero-search-mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--kz-hero-search-faint);
}
.kodza-hero-search__title {
margin: 0 0 24px;
font-size: clamp(40px, 5.6vw, 84px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--kz-hero-search-ink);
}
/* Each line is its own mask: the words rise from behind its bottom edge */
.kodza-hero-search__line {
display: block;
overflow: hidden;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.kodza-hero-search__rise {
display: block;
}
.kodza-hero-search__lead {
max-width: 34ch;
margin: 0 0 clamp(28px, 3vw, 40px);
font-size: clamp(17px, 1.45vw, 19px);
line-height: 1.55;
color: var(--kz-hero-search-dim);
text-wrap: pretty;
}
/* The search card. Open, a list rises above what follows the card, the picture included */
.kodza-hero-search__form {
container: kodza-hero-search-form / inline-size;
position: relative;
z-index: 1;
box-sizing: border-box;
display: grid;
gap: 12px;
max-width: 640px;
margin: 0;
padding: 16px;
border-radius: var(--kz-hero-search-radius);
background: var(--kz-hero-search-surface);
box-shadow: 0 0 0 1px var(--kz-hero-search-line), var(--kz-hero-search-shadow);
}
/* Buy / Rent: the ink pill covers the whole row and is cut down to the chosen mode, with a
paper copy of the labels cut to the same shape on top */
.kodza-hero-search__modes {
position: relative;
justify-self: start;
display: inline-flex;
min-width: 0;
margin: 0;
padding: 4px;
border: 0;
border-radius: 999px;
background: var(--kz-hero-search-surface);
box-shadow: inset 0 0 0 1px var(--kz-hero-search-field);
}
.kodza-hero-search__indicator,
.kodza-hero-search__mirror {
position: absolute;
inset: 0;
border-radius: 999px;
clip-path: inset(4px var(--kz-hero-search-r, 100%) 4px var(--kz-hero-search-l, 0) round 999px);
pointer-events: none;
}
.kodza-hero-search__indicator {
background: var(--kz-hero-search-ink);
}
.kodza-hero-search__mirror {
box-sizing: border-box;
display: flex;
padding: 4px;
color: var(--kz-hero-search-paper);
}
.kodza-hero-search.is-live .kodza-hero-search__indicator,
.kodza-hero-search.is-live .kodza-hero-search__mirror {
transition: clip-path 0.5s var(--kz-hero-search-ease);
}
.kodza-hero-search__mode,
.kodza-hero-search__ghost {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 18px;
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.kodza-hero-search__mode {
position: relative;
border-radius: 999px;
color: var(--kz-hero-search-dim);
cursor: pointer;
transition: color 0.3s var(--kz-hero-search-ease);
}
.kodza-hero-search__mode:hover,
.kodza-hero-search__mode:has(.kodza-hero-search__radio:checked) {
color: var(--kz-hero-search-ink);
}
/* Without the script, the chosen mode is simply filled */
.kodza-hero-search:not(.is-ready) .kodza-hero-search__mode:has(.kodza-hero-search__radio:checked) {
background: var(--kz-hero-search-ink);
color: var(--kz-hero-search-paper);
}
.kodza-hero-search__mode:has(.kodza-hero-search__radio:focus-visible) {
outline: 2px solid var(--kz-hero-search-ink);
outline-offset: 2px;
}
/* The native radio stays, invisible, over its label: clicks and arrow keys are its own */
.kodza-hero-search__radio {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
/* Where, Type and Budget on one row; on a narrower card the place takes its own row */
.kodza-hero-search__fields {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr);
gap: 8px;
}
/* The box of Kodza Text Field: the small label on top, the value below */
.kodza-hero-search__field {
position: relative;
display: block;
min-width: 0;
color: var(--kz-hero-search-ink);
}
.kodza-hero-search__label {
position: absolute;
top: 10px;
left: 16px;
z-index: 1;
color: var(--kz-hero-search-dim);
font-size: 12px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
.kodza-hero-search__input,
.kodza-hero-search__native,
.kodza-hero-search__trigger {
box-sizing: border-box;
display: flex;
align-items: flex-end;
width: 100%;
height: var(--kz-hero-search-height);
margin: 0;
padding: 25px 16px 9px;
border: 0;
border-radius: 12px;
background: var(--kz-hero-search-surface);
box-shadow: inset 0 0 0 1px var(--kz-hero-search-field);
color: inherit;
font: inherit;
font-size: 15px;
font-weight: 400;
line-height: 22px;
text-align: left;
appearance: none;
transition: box-shadow 0.25s ease;
}
.kodza-hero-search__native,
.kodza-hero-search__trigger {
padding-right: 44px;
cursor: pointer;
}
.kodza-hero-search__native {
background: var(--kz-hero-search-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5l4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 16px no-repeat;
}
.kodza-hero-search__trigger {
padding-top: 0;
}
.kodza-hero-search__input:hover,
.kodza-hero-search__native:hover,
.kodza-hero-search__trigger:hover {
box-shadow: inset 0 0 0 1px var(--kz-hero-search-field-hover);
}
.kodza-hero-search__input:focus,
.kodza-hero-search__native:focus-visible,
.kodza-hero-search__trigger:focus-visible,
.kodza-hero-search__select.is-open .kodza-hero-search__trigger {
outline: none;
box-shadow: inset 0 0 0 1.5px var(--kz-hero-search-ink), 0 0 0 4px var(--kz-hero-search-soft);
}
.kodza-hero-search__input::placeholder {
color: var(--kz-hero-search-dim);
opacity: 1;
}
/* The rolling example lies exactly where the placeholder is; the placeholder steps back while it rolls */
.kodza-hero-search__example {
position: absolute;
right: 16px;
bottom: 9px;
left: 16px;
display: grid;
height: 22px;
overflow: clip;
color: var(--kz-hero-search-dim);
font-size: 15px;
line-height: 22px;
visibility: hidden;
pointer-events: none;
}
.kodza-hero-search__field.is-rolling .kodza-hero-search__example {
visibility: visible;
}
.kodza-hero-search__field.is-rolling .kodza-hero-search__input::placeholder {
color: transparent;
}
/* Each mode its own budget: without the script, the radios show the right one */
.kodza-hero-search:not(.is-ready):has(.kodza-hero-search__radio[value="rent"]:checked) [data-mode="buy"],
.kodza-hero-search:not(.is-ready):has(.kodza-hero-search__radio[value="buy"]:checked) [data-mode="rent"] {
display: none;
}
/* A select, dressed up. A number, not auto, so it can wait for its list to roll up before
dropping back; the closed list keeps its size, ready to unroll, but never lengthens the page */
.kodza-hero-search__select {
z-index: 0;
contain: layout;
transition: z-index 0s linear 0.35s;
}
.kodza-hero-search__select.is-open {
z-index: 20;
transition-delay: 0s;
}
/* Enhanced: the native select steps back (still in the form), the button takes its place */
.kodza-hero-search.is-ready .kodza-hero-search__native {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
clip-path: inset(50%);
}
.kodza-hero-search__native[hidden] {
display: none;
}
.kodza-hero-search__value {
display: inline-grid;
min-width: 0;
overflow: hidden;
}
.kodza-hero-search__value > span,
.kodza-hero-search__example > span {
grid-area: 1 / 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kodza-hero-search__chevron {
position: absolute;
top: calc(var(--kz-hero-search-height) / 2 - 8px);
right: 16px;
width: 16px;
height: 16px;
fill: none;
stroke: var(--kz-hero-search-dim);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
transition: transform 0.35s var(--kz-hero-search-ease);
}
.kodza-hero-search__select.is-open .kodza-hero-search__chevron {
transform: rotate(180deg);
}
/* The list unrolls from the field */
.kodza-hero-search__list {
position: absolute;
top: calc(var(--kz-hero-search-height) + 8px);
right: 0;
left: 0;
z-index: 20;
box-sizing: border-box;
min-width: 180px;
max-height: 280px;
margin: 0;
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: 14px;
background: var(--kz-hero-search-surface);
box-shadow: 0 0 0 1px var(--kz-hero-search-field), var(--kz-hero-search-pop);
list-style: none;
visibility: hidden;
opacity: 0;
clip-path: inset(0 0 100% 0 round 14px);
transform: translateY(-4px);
transition:
clip-path 0.35s var(--kz-hero-search-ease),
opacity 0s linear 0.35s,
transform 0.35s var(--kz-hero-search-ease),
visibility 0s linear 0.35s;
}
.kodza-hero-search__select.is-open .kodza-hero-search__list {
visibility: visible;
opacity: 1;
clip-path: inset(-40px -40px -60px -40px round 14px);
transform: none;
transition-delay: 0s;
}
.kodza-hero-search__select.is-above .kodza-hero-search__list {
top: auto;
bottom: calc(var(--kz-hero-search-height) + 8px);
clip-path: inset(100% 0 0 0 round 14px);
transform: translateY(4px);
}
.kodza-hero-search__select.is-above.is-open .kodza-hero-search__list {
clip-path: inset(-60px -40px -40px -40px round 14px);
transform: none;
}
.kodza-hero-search__highlight {
position: absolute;
top: 0;
right: 6px;
left: 6px;
height: var(--kz-hl-h, 36px);
border-radius: 8px;
background: var(--kz-hero-search-soft);
opacity: var(--kz-hl-on, 0);
transform: translateY(var(--kz-hl-y, 0));
pointer-events: none;
}
.kodza-hero-search__select.is-open .kodza-hero-search__highlight {
transition: transform 0.22s var(--kz-hero-search-ease), opacity 0.15s ease;
}
.kodza-hero-search__option {
position: relative;
display: flex;
align-items: center;
height: 36px;
margin: 0;
padding: 0 10px 0 32px;
border-radius: 8px;
color: var(--kz-hero-search-ink);
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.kodza-hero-search__option[aria-disabled="true"] {
color: var(--kz-hero-search-dim);
cursor: not-allowed;
}
/* The tick of the chosen option draws itself */
.kodza-hero-search__option svg {
position: absolute;
left: 10px;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 0.15s ease-in;
}
.kodza-hero-search__option[aria-selected="true"] svg {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.35s var(--kz-hero-search-ease) 0.05s;
}
/* The button says how many homes the search finds; the number rolls when the page changes it */
.kodza-hero-search__submit {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 52px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--kz-hero-search-ink);
color: var(--kz-hero-search-paper);
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.kodza-hero-search__submit:focus-visible {
outline: 2px solid var(--kz-hero-search-ink);
outline-offset: 3px;
}
.kodza-hero-search__count {
position: relative;
display: inline-grid;
justify-items: start;
overflow: clip;
overflow-clip-margin: 2px;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.kodza-hero-search__count > span {
grid-area: 1 / 1;
}
.kodza-hero-search__arrow {
flex: none;
width: 16px;
height: 16px;
margin-left: 4px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s var(--kz-hero-search-ease);
}
@media (hover: hover) {
.kodza-hero-search__submit:hover .kodza-hero-search__arrow {
transform: translateX(4px);
}
}
.kodza-hero-search__note {
margin: 0;
font-family: var(--kz-hero-search-mono);
font-size: 12px;
line-height: 1.5;
color: var(--kz-hero-search-faint);
text-align: center;
text-wrap: balance;
}
.kodza-hero-search__media {
min-width: 0;
margin: 0;
}
/* The curtain: the middle layer slides down from above while the inner one slides up into
place, so the picture is uncovered from the top edge down and never moves itself */
.kodza-hero-search__frame {
position: relative;
max-width: 100%;
aspect-ratio: var(--kz-hero-search-ratio);
overflow: hidden;
border-radius: var(--kz-hero-search-radius);
}
.kodza-hero-search__curtain,
.kodza-hero-search__hold {
height: 100%;
}
.kodza-hero-search__curtain {
overflow: hidden;
}
.kodza-hero-search__frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The listing on the picture: where, how big, and the price of the chosen mode */
.kodza-hero-search__tag {
position: absolute;
bottom: 16px;
left: 16px;
box-sizing: border-box;
display: grid;
justify-items: start;
gap: 6px;
max-width: calc(100% - 32px);
margin: 0;
padding: 12px 16px 13px;
border-radius: 12px;
background: var(--kz-hero-search-surface);
box-shadow: 0 0 0 1px var(--kz-hero-search-line), var(--kz-hero-search-shadow);
color: var(--kz-hero-search-ink);
}
.kodza-hero-search__meta {
font-family: var(--kz-hero-search-mono);
font-size: 12px;
line-height: 1.3;
color: var(--kz-hero-search-dim);
}
.kodza-hero-search__price {
display: inline-grid;
overflow: clip;
font-size: 22px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.kodza-hero-search__price > [data-mode] {
grid-area: 1 / 1;
white-space: nowrap;
}
.kodza-hero-search.is-ready .kodza-hero-search__price > [data-mode]:not(.is-on) {
visibility: hidden;
}
.kodza-hero-search__caption {
margin-top: 12px;
font-family: var(--kz-hero-search-mono);
font-size: 12.5px;
color: var(--kz-hero-search-faint);
text-wrap: pretty;
}
.kodza-hero-search__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Waiting for its entrance: the script sets is-shown and plays the motion in the same frame */
@media (prefers-reduced-motion: no-preference) {
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__rise {
transform: translateY(105%);
}
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__curtain {
transform: translateY(-100%);
}
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__hold {
transform: translateY(100%);
}
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__lead,
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__form,
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__tag,
.kodza-hero-search.is-ready:not(.is-shown) .kodza-hero-search__caption {
opacity: 0;
transform: translateY(20px);
}
}
/* A narrower card: the place takes the whole row, Type and Budget share the next one */
@container kodza-hero-search-form (max-width: 520px) {
.kodza-hero-search__fields {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.kodza-hero-search__field--where {
grid-column: 1 / -1;
}
}
@container kodza-hero-search-form (max-width: 340px) {
.kodza-hero-search__fields {
grid-template-columns: minmax(0, 1fr);
}
}
/* One column: the picture goes under the search, wider than tall */
@container kodza-hero-search (max-width: 700px) {
.kodza-hero-search__inner {
grid-template-columns: minmax(0, 1fr);
}
.kodza-hero-search__frame {
aspect-ratio: 4 / 3;
}
}
@media (prefers-reduced-motion: reduce) {
.kodza-hero-search *,
.kodza-hero-search *::before,
.kodza-hero-search *::after {
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
animation-duration: 0.01ms !important;
}
}
/* Theming example — on a dark background:
.dark-section .kodza-hero-search {
--kz-hero-search-ink: #f2f2f0;
--kz-hero-search-paper: #0a0a0a;
--kz-hero-search-dim: rgba(242, 242, 240, 0.64);
--kz-hero-search-faint: rgba(242, 242, 240, 0.6);
--kz-hero-search-surface: #161616;
--kz-hero-search-line: rgba(255, 255, 255, 0.12);
--kz-hero-search-field: rgba(255, 255, 255, 0.14);
--kz-hero-search-field-hover: rgba(255, 255, 255, 0.3);
--kz-hero-search-soft: rgba(255, 255, 255, 0.08);
--kz-hero-search-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
--kz-hero-search-pop: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}
*/
/* kodza-guard 3f61d7b50cad — generated by Kodza, do not edit.
Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
component. :not(#_) is always true and weighs as much as an id, so these lines win over
theme rules made of classes and tags. Customise the component through its --kz-* variables. */
/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */
:where(.kodza-hero-search__eyebrow):not(#_),
:where(.kodza-hero-search__title):not(#_),
:where(.kodza-hero-search__lead):not(#_),
:where(.kodza-hero-search__modes):not(#_),
:where(.kodza-hero-search__sr):not(#_),
:where(.kodza-hero-search__radio):not(#_),
:where(.kodza-hero-search__option):not(#_),
:where(.kodza-hero-search__note):not(#_),
:where(.kodza-hero-search__media):not(#_),
:where(.kodza-hero-search__tag):not(#_),
:where(.kodza-hero-search__caption):not(#_),
:where(.kodza-hero-search__hold img:where(:not([class*="kodza-"]))):not(#_) {
transition-duration: revert;
transition-delay: revert;
}
:where(.kodza-hero-search__mode):not(#_) {
outline: revert;
background-color: revert;
background-image: revert;
outline-offset: revert;
}
:where(.kodza-hero-search__field):not(#_),
:where(.kodza-hero-search__highlight):not(#_) {
transition: revert;
}
:where(.kodza-hero-search__input):not(#_),
:where(.kodza-hero-search__trigger):not(#_) {
outline: revert;
}
:where(.kodza-hero-search__native):not(#_) {
outline: revert;
position: revert;
}
:where(.kodza-hero-search__submit):not(#_) {
outline: revert;
outline-offset: revert;
transition-duration: revert;
transition-delay: revert;
}
:where(.kodza-hero-search__eyebrow):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__title):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__lead):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__sr):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__radio):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__chevron):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__list):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__highlight):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__arrow):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__note):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__media):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__caption):not(#_):where(:not([hidden])),
:where(.kodza-hero-search__option svg:where(:not([class*="kodza-"]))):not(#_):where(:not([hidden])) {
display: revert;
}
:where(.kodza-hero-search__eyebrow):not(#_):where([hidden]),
:where(.kodza-hero-search__title):not(#_):where([hidden]),
:where(.kodza-hero-search__lead):not(#_):where([hidden]),
:where(.kodza-hero-search__sr):not(#_):where([hidden]),
:where(.kodza-hero-search__radio):not(#_):where([hidden]),
:where(.kodza-hero-search__chevron):not(#_):where([hidden]),
:where(.kodza-hero-search__list):not(#_):where([hidden]),
:where(.kodza-hero-search__highlight):not(#_):where([hidden]),
:where(.kodza-hero-search__arrow):not(#_):where([hidden]),
:where(.kodza-hero-search__note):not(#_):where([hidden]),
:where(.kodza-hero-search__media):not(#_):where([hidden]),
:where(.kodza-hero-search__caption):not(#_):where([hidden]),
:where(.kodza-hero-search__option svg:where(:not([class*="kodza-"]))):not(#_):where([hidden]) {
display: none;
}
/* What the browser gives, on everything the component leaves to it */
.kodza-hero-search__inner:not(#_),
.kodza-hero-search__copy:not(#_),
.kodza-hero-search__rise:not(#_),
.kodza-hero-search__line:not(#_),
.kodza-hero-search__indicator:not(#_),
.kodza-hero-search__ghost:not(#_),
.kodza-hero-search__fields:not(#_),
.kodza-hero-search__label:not(#_),
.kodza-hero-search__example:not(#_),
.kodza-hero-search__value:not(#_),
.kodza-hero-search__count:not(#_),
.kodza-hero-search__frame:not(#_),
.kodza-hero-search__curtain:not(#_),
.kodza-hero-search__hold:not(#_),
.kodza-hero-search__meta:not(#_),
.kodza-hero-search__price:not(#_),
.kodza-hero-search__mode span:where(:not([class*="kodza-"])):not(#_),
.kodza-hero-search__example span:where(:not([class*="kodza-"])):not(#_),
.kodza-hero-search__value span:where(:not([class*="kodza-"])):not(#_),
.kodza-hero-search__count span:where(:not([class*="kodza-"])):not(#_),
.kodza-hero-search__price span:where(:not([class*="kodza-"])):not(#_) {
box-sizing: revert;
}
.kodza-hero-search__eyebrow:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-style: revert;
line-height: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__title:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-style: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__lead:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-height: revert;
font-family: revert;
font-weight: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__modes:not(#_) {
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__sr:not(#_) {
border: revert;
margin: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__mode:not(#_) {
border: revert;
margin: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
box-shadow: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-search__radio:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
white-space: revert;
min-height: revert;
}
.kodza-hero-search__field:not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-search__input:not(#_),
.kodza-hero-search__trigger:not(#_) {
text-decoration: revert;
list-style: revert;
float: revert;
position: revert;
outline-offset: revert;
max-width: revert;
max-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
white-space: revert;
min-height: revert;
}
.kodza-hero-search__native:not(#_) {
text-decoration: revert;
list-style: revert;
float: revert;
outline-offset: revert;
max-width: revert;
max-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
white-space: revert;
min-height: revert;
}
.kodza-hero-search__chevron:not(#_),
.kodza-hero-search__option svg:where(:not([class*="kodza-"])):not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-search__list:not(#_) {
border: revert;
outline: revert;
text-decoration: revert;
float: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-search__highlight:not(#_) {
border: revert;
margin: revert;
padding: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-search__option:not(#_) {
border: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-family: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__submit:not(#_) {
text-decoration: revert;
list-style: revert;
float: revert;
position: revert;
box-shadow: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
min-height: revert;
}
.kodza-hero-search__arrow:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
margin-top: revert;
margin-right: revert;
margin-bottom: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
}
.kodza-hero-search__note:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-weight: revert;
font-style: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__media:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__tag:not(#_) {
border: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
float: revert;
outline-offset: revert;
appearance: revert;
max-height: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__caption:not(#_) {
border: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
margin-right: revert;
margin-bottom: revert;
margin-left: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
.kodza-hero-search__native option:where(:not([class*="kodza-"])):not(#_) {
box-sizing: revert;
color: revert;
}
.kodza-hero-search__hold img:where(:not([class*="kodza-"])):not(#_) {
border: revert;
margin: revert;
padding: revert;
border-radius: revert;
outline: revert;
text-decoration: revert;
list-style: revert;
box-sizing: revert;
float: revert;
position: revert;
background-color: revert;
background-image: revert;
box-shadow: revert;
outline-offset: revert;
appearance: revert;
max-width: revert;
max-height: revert;
color: revert;
font-family: revert;
font-size: revert;
font-weight: revert;
font-style: revert;
line-height: revert;
letter-spacing: revert;
text-transform: revert;
text-underline-offset: revert;
text-align: revert;
text-indent: revert;
text-shadow: revert;
vertical-align: revert;
transition-property: revert;
transition-timing-function: revert;
}
/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */
.kodza-hero-search__eyebrow:not(#_) {
margin: 0 0 22px;
font-family: var(--kz-hero-search-mono);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--kz-hero-search-faint);
}
.kodza-hero-search__title:not(#_) {
margin: 0 0 24px;
font-size: clamp(40px, 5.6vw, 84px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--kz-hero-search-ink);
}
.kodza-hero-search__lead:not(#_) {
max-width: 34ch;
margin: 0 0 clamp(28px, 3vw, 40px);
font-size: clamp(17px, 1.45vw, 19px);
line-height: 1.55;
color: var(--kz-hero-search-dim);
}
.kodza-hero-search__modes:not(#_) {
position: relative;
display: inline-flex;
margin: 0;
padding: 4px;
border: 0;
border-radius: 999px;
background: var(--kz-hero-search-surface);
box-shadow: inset 0 0 0 1px var(--kz-hero-search-field);
}
.kodza-hero-search.is-live .kodza-hero-search__indicator:not(#_),
.kodza-hero-search.is-live .kodza-hero-search__mirror:not(#_) {
transition: clip-path 0.5s var(--kz-hero-search-ease);
}
.kodza-hero-search__mode:not(#_) {
display: inline-flex;
padding: 0 18px;
font-size: 15px;
font-weight: 500;
line-height: 1;
}
.kodza-hero-search__mode:not(#_) {
position: relative;
border-radius: 999px;
color: var(--kz-hero-search-dim);
transition: color 0.3s var(--kz-hero-search-ease);
}
.kodza-hero-search__mode:hover:not(#_),
.kodza-hero-search__mode:has(.kodza-hero-search__radio:checked):not(#_) {
color: var(--kz-hero-search-ink);
}
.kodza-hero-search:not(.is-ready) .kodza-hero-search__mode:has(.kodza-hero-search__radio:checked):not(#_) {
background: var(--kz-hero-search-ink);
color: var(--kz-hero-search-paper);
}
.kodza-hero-search__mode:has(.kodza-hero-search__radio:focus-visible):not(#_) {
outline: 2px solid var(--kz-hero-search-ink);
outline-offset: 2px;
}
.kodza-hero-search__radio:not(#_) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.kodza-hero-search__field:not(#_) {
position: relative;
display: block;
color: var(--kz-hero-search-ink);
}
.kodza-hero-search__input:not(#_),
.kodza-hero-search__native:not(#_),
.kodza-hero-search__trigger:not(#_) {
box-sizing: border-box;
display: flex;
align-items: flex-end;
width: 100%;
height: var(--kz-hero-search-height);
margin: 0;
padding: 25px 16px 9px;
border: 0;
border-radius: 12px;
background: var(--kz-hero-search-surface);
box-shadow: inset 0 0 0 1px var(--kz-hero-search-field);
color: inherit;
font: inherit;
font-size: 15px;
font-weight: 400;
line-height: 22px;
text-align: left;
appearance: none;
transition: box-shadow 0.25s ease;
}
.kodza-hero-search__native:not(#_),
.kodza-hero-search__trigger:not(#_) {
padding-right: 44px;
cursor: pointer;
}
.kodza-hero-search__native:not(#_) {
background: var(--kz-hero-search-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5l4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 16px no-repeat;
}
.kodza-hero-search__trigger:not(#_) {
padding-top: 0;
}
.kodza-hero-search__input:hover:not(#_),
.kodza-hero-search__native:hover:not(#_),
.kodza-hero-search__trigger:hover:not(#_) {
box-shadow: inset 0 0 0 1px var(--kz-hero-search-field-hover);
}
.kodza-hero-search__input:focus:not(#_),
.kodza-hero-search__native:focus-visible:not(#_),
.kodza-hero-search__trigger:focus-visible:not(#_),
.kodza-hero-search__select.is-open .kodza-hero-search__trigger:not(#_) {
outline: none;
box-shadow: inset 0 0 0 1.5px var(--kz-hero-search-ink), 0 0 0 4px var(--kz-hero-search-soft);
}
.kodza-hero-search__input:not(#_)::placeholder {
color: var(--kz-hero-search-dim);
opacity: 1;
}
.kodza-hero-search__field.is-rolling .kodza-hero-search__input:not(#_)::placeholder {
color: transparent;
}
.kodza-hero-search:not(.is-ready):has(.kodza-hero-search__radio[value="rent"]:checked) [data-mode="buy"]:not(#_),
.kodza-hero-search:not(.is-ready):has(.kodza-hero-search__radio[value="buy"]:checked) [data-mode="rent"]:not(#_) {
display: none;
}
.kodza-hero-search__select:not(#_) {
transition: z-index 0s linear 0.35s;
}
.kodza-hero-search__select.is-open:not(#_) {
transition-delay: 0s;
}
.kodza-hero-search.is-ready .kodza-hero-search__native:not(#_) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
clip-path: inset(50%);
}
.kodza-hero-search__native[hidden]:not(#_) {
display: none;
}
.kodza-hero-search__chevron:not(#_) {
position: absolute;
transition: transform 0.35s var(--kz-hero-search-ease);
}
.kodza-hero-search__list:not(#_) {
position: absolute;
box-sizing: border-box;
max-height: 280px;
margin: 0;
padding: 6px;
border-radius: 14px;
background: var(--kz-hero-search-surface);
box-shadow: 0 0 0 1px var(--kz-hero-search-field), var(--kz-hero-search-pop);
list-style: none;
transition: clip-path 0.35s var(--kz-hero-search-ease),
opacity 0s linear 0.35s,
transform 0.35s var(--kz-hero-search-ease),
visibility 0s linear 0.35s;
}
.kodza-hero-search__select.is-open .kodza-hero-search__list:not(#_) {
transition-delay: 0s;
}
.kodza-hero-search__highlight:not(#_) {
position: absolute;
border-radius: 8px;
background: var(--kz-hero-search-soft);
}
.kodza-hero-search__select.is-open .kodza-hero-search__highlight:not(#_) {
transition: transform 0.22s var(--kz-hero-search-ease), opacity 0.15s ease;
}
.kodza-hero-search__option:not(#_) {
position: relative;
display: flex;
margin: 0;
padding: 0 10px 0 32px;
border-radius: 8px;
color: var(--kz-hero-search-ink);
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.kodza-hero-search__option[aria-disabled="true"]:not(#_) {
color: var(--kz-hero-search-dim);
}
.kodza-hero-search__option svg:not(#_) {
position: absolute;
transition: stroke-dashoffset 0.15s ease-in;
}
.kodza-hero-search__option[aria-selected="true"] svg:not(#_) {
transition: stroke-dashoffset 0.35s var(--kz-hero-search-ease) 0.05s;
}
.kodza-hero-search__submit:not(#_) {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 52px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--kz-hero-search-ink);
color: var(--kz-hero-search-paper);
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.kodza-hero-search__submit:focus-visible:not(#_) {
outline: 2px solid var(--kz-hero-search-ink);
outline-offset: 3px;
}
.kodza-hero-search__arrow:not(#_) {
margin-left: 4px;
transition: transform 0.3s var(--kz-hero-search-ease);
}
.kodza-hero-search__note:not(#_) {
margin: 0;
font-family: var(--kz-hero-search-mono);
font-size: 12px;
line-height: 1.5;
color: var(--kz-hero-search-faint);
text-align: center;
}
.kodza-hero-search__media:not(#_) {
margin: 0;
}
.kodza-hero-search__frame img:not(#_) {
display: block;
}
.kodza-hero-search__tag:not(#_) {
position: absolute;
box-sizing: border-box;
display: grid;
max-width: calc(100% - 32px);
margin: 0;
padding: 12px 16px 13px;
border-radius: 12px;
background: var(--kz-hero-search-surface);
box-shadow: 0 0 0 1px var(--kz-hero-search-line), var(--kz-hero-search-shadow);
color: var(--kz-hero-search-ink);
}
.kodza-hero-search__caption:not(#_) {
margin-top: 12px;
font-family: var(--kz-hero-search-mono);
font-size: 12.5px;
color: var(--kz-hero-search-faint);
}
.kodza-hero-search__sr:not(#_) {
position: absolute;
padding: 0;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.kodza-hero-search *:not(#_),
.kodza-hero-search *:not(#_)::before,
.kodza-hero-search *:not(#_)::after {
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
animation-duration: 0.01ms !important;
}
}// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Hero Search
// Buy and Rent stay native radios: an ink pill, with a paper copy of the labels cut to the same
// shape, slides from one to the other. Type and Budget keep their real <select>: the list of Kodza
// Select is built over each one (options read again when the page changes them, "change" fired on
// the real one) and its value rolls. A field may hold one select per mode (data-mode): the chosen
// mode's one is on, the other disabled, so the form only sends one; the listing's price, written
// per mode, rolls with it. While the place is empty and nothing in the form is in use, its
// examples (data-examples) roll one after the other, the placeholder saying the one on screen. A
// number the page writes into the count rolls in, the button easing to its new width. The
// entrance is Hero Split's, played once the section is in view, its picture decoded and the fonts
// in; "kodza:replay" plays it again, from the first example.
(() => {
const SELECTOR = '.kodza-hero-search';
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const GLIDE = 'cubic-bezier(0.6, 0, 0.1, 1)'; // slow start, long settle
const SOFT = 'cubic-bezier(0.25, 1, 0.5, 1)';
const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)';
const EVERY = 2600; // ms between two examples
const FIRST = 3200; // ms from the start of the entrance to the first example
const tick = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" pathLength="1"/></svg>';
const chevron = '<svg class="kodza-hero-search__chevron" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6.5 8 10.5l4-4"/></svg>';
let uid = 0;
const decoded = (root) => Promise.all([...root.querySelectorAll('img')].map((img) => img.decode().catch(() => {})));
const span = (text) => Object.assign(document.createElement('span'), { textContent: text });
const letter = (event) => event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
// One instance, with its own state: two copies on a page never interfere. Everything it
// starts is tied to `signal` (listeners get { signal }, observers and timers stop on its
// 'abort' event), so kodza:destroy stops it all.
function mount(root, signal) {
const q = (s) => root.querySelector(s);
const form = q('.kodza-hero-search__form');
const modes = q('.kodza-hero-search__modes');
const radios = [...root.querySelectorAll('.kodza-hero-search__radio')];
const input = q('.kodza-hero-search__input');
const where = input?.closest('.kodza-hero-search__field');
const count = q('.kodza-hero-search__count');
const prices = [...root.querySelectorAll('.kodza-hero-search__price > [data-mode]')];
const fields = [];
const entrance = [];
const stop = (list) => {
list.forEach((a) => a.cancel());
list.length = 0;
};
const animate = (list, el, keyframes, options) => {
if (!el) return null;
const animation = el.animate(keyframes, { easing: GLIDE, fill: 'backwards', ...options });
list.push(animation);
return animation;
};
// The old text rises out of its window as the new one comes from below. A change that lands
// mid-roll drops the one already leaving, and the old one leaves from where it stands
const roll = (box, text, moving, duration = 700) => {
const old = box.lastElementChild;
if (old?.textContent === text) return;
[...box.children].forEach((el) => el !== old && el.remove());
const next = span(text);
box.append(next);
if (!old) return;
if (!moving || reduceMotion) return old.remove();
const y = new DOMMatrixReadOnly(getComputedStyle(old).transform).m42;
old.getAnimations().forEach((a) => a.cancel());
const timing = { duration, easing: EASE };
old.animate([{ transform: `translateY(${y}px)` }, { transform: 'translateY(-110%)' }], { ...timing, fill: 'forwards' }).finished.then(() => old.remove(), () => {});
next.animate([{ transform: 'translateY(110%)' }, { transform: 'none' }], timing);
};
// Buy / Rent: the pill and its paper copy are cut to the chosen label
const indicator = Object.assign(document.createElement('span'), { className: 'kodza-hero-search__indicator' });
const mirror = Object.assign(document.createElement('span'), { className: 'kodza-hero-search__mirror' });
[indicator, mirror].forEach((el) => el.setAttribute('aria-hidden', 'true'));
radios.forEach((radio) => {
const ghost = span(radio.closest('label')?.textContent.trim() ?? '');
ghost.className = 'kodza-hero-search__ghost';
mirror.append(ghost);
});
modes?.prepend(indicator);
modes?.append(mirror);
const chosen = () => radios.find((radio) => radio.checked) ?? radios[0];
const mode = () => chosen()?.value;
const place = () => {
const label = chosen()?.closest('label');
if (!label || !modes.offsetWidth) return;
modes.style.setProperty('--kz-hero-search-l', `${label.offsetLeft}px`);
modes.style.setProperty('--kz-hero-search-r', `${modes.offsetWidth - label.offsetLeft - label.offsetWidth}px`);
};
place();
// The pill only slides once it stands in place: never on arrival or after a resize
requestAnimationFrame(() => requestAnimationFrame(() => {
if (!signal.aborted) root.classList.add('is-live');
}));
const resize = new ResizeObserver(() => place());
if (modes) resize.observe(modes);
// Where: its examples roll while it is empty, nothing in the form has the focus, no list is
// open, and the section is on screen with the tab in front
const examples = (input?.dataset.examples ?? '').split(',').map((s) => s.trim()).filter(Boolean);
const example = Object.assign(document.createElement('span'), { className: 'kodza-hero-search__example' });
example.setAttribute('aria-hidden', 'true');
let index = 0;
let timer = 0;
let shown = false;
let visible = false;
const rolling = examples.length > 1 && !reduceMotion;
const busy = () => form?.contains(document.activeElement) || fields.some((field) => field.isOpen());
const free = () => rolling && shown && visible && !document.hidden && !input.value && !busy();
const schedule = (delay = EVERY) => {
clearTimeout(timer);
where?.classList.toggle('is-rolling', rolling && !input.value && document.activeElement !== input);
if (free()) timer = setTimeout(next, delay);
};
const next = () => {
if (!free()) return;
index = (index + 1) % examples.length;
input.placeholder = examples[index];
roll(example, examples[index], true);
schedule();
};
if (rolling) {
input.placeholder = examples[0];
example.append(span(examples[0]));
input.after(example);
input.addEventListener('input', () => schedule(), { signal });
['focusin', 'focusout'].forEach((type) => form?.addEventListener(type, () => schedule(), { signal }));
document.addEventListener('visibilitychange', () => schedule(), { signal });
const seen = new IntersectionObserver((entries) => {
visible = entries.some((entry) => entry.isIntersecting);
schedule();
});
seen.observe(input);
signal.addEventListener('abort', () => seen.disconnect());
}
// Type and Budget: the list of Kodza Select over the real select. Keyboard as in the ARIA
// "select-only combobox" pattern: the focus stays on the field, arrows move, letters jump,
// Enter picks, Escape closes
const dress = (field) => {
const natives = [...field.querySelectorAll('.kodza-hero-search__native')];
if (!natives.length) return;
const label = field.querySelector('.kodza-hero-search__label');
const id = `kodza-hero-search-${++uid}`;
const current = () => natives.find((select) => select.dataset.mode === mode()) ?? natives[0];
let native = current();
// The field: a button that says the current value
const trigger = document.createElement('button');
trigger.type = 'button';
trigger.className = 'kodza-hero-search__trigger';
trigger.setAttribute('role', 'combobox');
trigger.setAttribute('aria-haspopup', 'listbox');
trigger.setAttribute('aria-expanded', 'false');
trigger.setAttribute('aria-controls', `${id}-list`);
if (label) {
label.id = `${id}-label`;
trigger.setAttribute('aria-labelledby', `${id}-label`);
}
const value = Object.assign(document.createElement('span'), { className: 'kodza-hero-search__value' });
trigger.append(value);
trigger.insertAdjacentHTML('beforeend', chevron);
// The list, from the real options (built again whenever the page changes them)
const list = document.createElement('ul');
list.className = 'kodza-hero-search__list';
list.id = `${id}-list`;
list.setAttribute('role', 'listbox');
if (label) list.setAttribute('aria-labelledby', `${id}-label`);
const highlight = document.createElement('li');
highlight.className = 'kodza-hero-search__highlight';
highlight.setAttribute('role', 'presentation');
list.append(highlight);
let options = [];
const entries = new Map();
const build = () => {
options = [];
entries.clear();
[...list.children].forEach((child) => child !== highlight && child.remove());
[...native.options].forEach((option) => {
if (option.hidden) return; // a placeholder: "nothing chosen yet" is not a choice
const item = document.createElement('li');
item.className = 'kodza-hero-search__option';
item.id = `${id}-option-${options.length}`;
item.setAttribute('role', 'option');
item.innerHTML = tick;
item.append(option.textContent.trim());
if (option.disabled || option.closest('optgroup')?.disabled) item.setAttribute('aria-disabled', 'true');
list.append(item);
const entry = { option, item };
options.push(entry);
entries.set(item, entry);
});
};
build();
natives.at(-1).after(trigger, list);
natives.forEach((select) => {
select.tabIndex = -1;
select.setAttribute('aria-hidden', 'true');
});
const enabled = () => options.filter(({ item }) => item.getAttribute('aria-disabled') !== 'true');
const isOpen = () => field.classList.contains('is-open');
let active = null;
const sync = (moving) => {
options.forEach(({ option, item }) => item.setAttribute('aria-selected', String(option.selected)));
const picked = native.selectedOptions[0];
roll(value, picked && !picked.hidden ? picked.textContent.trim() : '', moving, 420);
};
const light = (entry, scroll = true) => {
active = entry;
if (!entry) {
trigger.removeAttribute('aria-activedescendant');
return list.style.setProperty('--kz-hl-on', 0);
}
trigger.setAttribute('aria-activedescendant', entry.item.id);
list.style.setProperty('--kz-hl-y', `${entry.item.offsetTop}px`);
list.style.setProperty('--kz-hl-h', `${entry.item.offsetHeight}px`);
list.style.setProperty('--kz-hl-on', 1);
// Scroll the list only (scrollIntoView would also nudge the page), with the list's own
// padding above the very first row
if (scroll) {
const top = entry.item.previousElementSibling === highlight ? 0 : entry.item.offsetTop;
const bottom = entry.item.offsetTop + entry.item.offsetHeight;
if (top < list.scrollTop) list.scrollTop = top;
else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
}
};
const open = () => {
if (isOpen()) return;
// Not enough room below and more above: the list opens upwards. A closed list that changes
// side gets there at once, so it always unrolls from the field
const box = trigger.getBoundingClientRect();
const above = box.bottom + Math.min(280, list.scrollHeight) + 16 > innerHeight && box.top > innerHeight / 2;
if (above !== field.classList.contains('is-above')) {
list.style.transition = 'none';
field.classList.toggle('is-above', above);
void list.offsetWidth;
list.style.transition = '';
}
field.classList.add('is-open');
trigger.setAttribute('aria-expanded', 'true');
light(options.find(({ option }) => option.selected) || enabled()[0]);
schedule();
};
const close = () => {
if (!isOpen()) return;
field.classList.remove('is-open');
trigger.setAttribute('aria-expanded', 'false');
light(null);
schedule();
};
const pick = (entry) => {
if (!entry || entry.item.getAttribute('aria-disabled') === 'true') return;
const changed = !entry.option.selected;
entry.option.selected = true;
sync(true);
close();
if (changed) native.dispatchEvent(new Event('change', { bubbles: true }));
};
// Typing a few letters jumps to the first matching option
let typed = '';
let typedTimer = 0;
const typeAhead = (char) => {
clearTimeout(typedTimer);
typed += char.toLowerCase();
typedTimer = setTimeout(() => (typed = ''), 600);
const pool = enabled();
const start = active ? pool.indexOf(active) + (typed.length === 1 ? 1 : 0) : 0;
const order = [...pool.slice(start), ...pool.slice(0, start)];
const match = order.find(({ item }) => item.textContent.trim().toLowerCase().startsWith(typed));
if (!match) return;
if (isOpen()) light(match);
else pick(match);
};
trigger.addEventListener('click', () => (isOpen() ? close() : open()), { signal });
trigger.addEventListener('keydown', (event) => {
const pool = enabled();
const at = pool.indexOf(active);
if (!isOpen()) {
if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
event.preventDefault();
open();
} else if (letter(event)) {
typeAhead(event.key);
}
return;
}
const moves = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: pool.length - 1, PageDown: at + 5, PageUp: at - 5 };
if (event.key in moves) {
event.preventDefault();
light(pool[Math.max(0, Math.min(pool.length - 1, moves[event.key]))]);
} else if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
pick(active);
} else if (event.key === 'Tab') {
pick(active);
} else if (letter(event)) {
typeAhead(event.key);
}
}, { signal });
const entryAt = (event) => entries.get(event.target.closest?.('.kodza-hero-search__option'));
list.addEventListener('pointermove', (event) => {
const entry = entryAt(event);
if (entry && active !== entry && entry.item.getAttribute('aria-disabled') !== 'true') light(entry, false);
}, { signal });
list.addEventListener('click', (event) => pick(entryAt(event)), { signal });
// Keep the list from stealing the focus from the field, and the wrapping <label> from
// sending clicks to the hidden select: a click on the label text focuses the field
list.addEventListener('mousedown', (event) => event.preventDefault(), { signal });
field.addEventListener('click', (event) => {
if (trigger.contains(event.target)) return;
event.preventDefault();
if (!list.contains(event.target)) trigger.focus();
}, { signal });
document.addEventListener('pointerdown', (event) => !field.contains(event.target) && close(), { signal });
// Escape closes it wherever the focus is: opened with a click, it stays on the field
// (Chrome) or on the page (Safari)
document.addEventListener('keydown', (event) => {
if (event.key !== 'Escape' || !isOpen()) return;
event.preventDefault();
close();
trigger.focus();
}, { signal });
// The real select changed from elsewhere (a form reset, a script): follow it
natives.forEach((select) => select.addEventListener('change', () => select === native && sync(true), { signal }));
native.form?.addEventListener('reset', () => setTimeout(() => sync(true)), { signal });
// The page changed the options (counts, disabled ones, a new list): build the list again,
// keep the highlight on the same option, and show the value without a roll. An attribute
// written again with the value it already had changes nothing
let queued = false;
const changed = (record) => record.type !== 'attributes' || record.oldValue !== record.target.getAttribute(record.attributeName);
const observer = new MutationObserver((records) => {
if (queued || !records.some(changed)) return;
queued = true;
queueMicrotask(() => {
queued = false;
if (signal.aborted) return;
const was = active?.option;
build();
sync(false);
if (isOpen()) light(options.find(({ option }) => option === was) || options.find(({ option }) => option.selected) || enabled()[0], false);
});
});
natives.forEach((select) => observer.observe(select, { childList: true, subtree: true, characterData: true, attributes: true, attributeOldValue: true, attributeFilter: ['disabled', 'hidden', 'label'] }));
signal.addEventListener('abort', () => observer.disconnect());
// The mode changed: its own select comes on, the other one is switched off, and the value rolls
const follow = (moving) => {
const on = current();
natives.forEach((select) => {
select.hidden = select !== on;
select.disabled = select !== on;
});
observer.takeRecords();
if (on === native) return;
native = on;
close();
build();
sync(moving);
};
follow(false);
sync(false);
fields.push({ isOpen, close, follow });
};
root.querySelectorAll('.kodza-hero-search__select').forEach(dress);
// The listing's price: the chosen mode's one, rolling in when the mode changes
const price = (moving) => {
const on = prices.find((el) => el.dataset.mode === mode()) ?? prices[0];
const was = prices.find((el) => el.classList.contains('is-on'));
prices.forEach((el) => el.classList.toggle('is-on', el === on));
if (!moving || reduceMotion || !was || was === on) return;
const y = new DOMMatrixReadOnly(getComputedStyle(was).transform).m42;
prices.forEach((el) => el.getAnimations().forEach((a) => a.cancel()));
const timing = { duration: 700, easing: EASE };
was.animate([{ visibility: 'visible', transform: `translateY(${y}px)` }, { visibility: 'visible', transform: 'translateY(-110%)' }], timing);
on.animate([{ transform: 'translateY(110%)' }, { transform: 'none' }], timing);
};
price(false);
radios.forEach((radio) => radio.addEventListener('change', () => {
place();
fields.forEach((field) => field.follow(true));
price(true);
}, { signal }));
// The count: a number the page writes in rolls, and the button eases to its new width
if (count) {
let current = span(count.textContent.trim());
count.replaceChildren(current);
const counted = new MutationObserver(() => {
const fresh = [...count.childNodes].filter((node) => node.nodeType === Node.TEXT_NODE);
if (!fresh.length) return; // our own spans coming and going
const text = fresh.map((node) => node.textContent).join('').trim();
count.replaceChildren(current);
const from = count.offsetWidth;
roll(count, text, true, 420);
current = count.lastElementChild;
const to = current.offsetWidth;
counted.takeRecords();
if (reduceMotion || from === to) return;
count.getAnimations().forEach((a) => a.cancel());
count.animate([{ width: `${from}px` }, { width: `${to}px` }], { duration: 420, easing: EASE });
});
counted.observe(count, { childList: true });
signal.addEventListener('abort', () => counted.disconnect());
}
signal.addEventListener('abort', () => {
clearTimeout(timer);
resize.disconnect();
stop(entrance);
});
if (reduceMotion) {
root.classList.add('is-shown');
return;
}
const rise = (el, delay, duration) => animate(entrance, el, [{ transform: 'translateY(105%)' }, { transform: 'none' }], { duration, delay });
const play = async () => {
await decoded(root);
if (signal.aborted) return;
stop(entrance);
fields.forEach((field) => field.close());
// The examples start again from the first one, hidden while the form comes in
if (rolling) {
clearTimeout(timer);
index = 0;
input.placeholder = examples[0];
roll(example, examples[0], false);
}
root.classList.add('is-shown');
rise(q('.kodza-hero-search__eyebrow .kodza-hero-search__rise'), 0, 1000);
root.querySelectorAll('.kodza-hero-search__line .kodza-hero-search__rise').forEach((line, i) => rise(line, 110 + i * 125, 1170));
// The curtain: both layers on transforms, the picture settles from a slight zoom
animate(entrance, q('.kodza-hero-search__curtain'), [{ transform: 'translateY(-100%)' }, { transform: 'none' }], { duration: 1350, delay: 200 });
animate(entrance, q('.kodza-hero-search__hold'), [{ transform: 'translateY(100%)' }, { transform: 'none' }], { duration: 1350, delay: 200 });
animate(entrance, q('.kodza-hero-search__frame img'), [{ transform: 'scale(1.2)' }, { transform: 'none' }], { duration: 2000, delay: 200, easing: SOFT });
[q('.kodza-hero-search__lead'), form].forEach((el, i) => {
animate(entrance, el, [{ opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'none' }], { duration: 900, delay: 700 + i * 110, easing: SOFT });
});
// The listing's tag lands once the picture is uncovered
animate(entrance, q('.kodza-hero-search__tag'), [{ opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'none' }], { duration: 900, delay: 1150, easing: SOFT });
// The faint caption is fully there halfway up: never read half-faded
animate(entrance, q('.kodza-hero-search__caption'), [{ opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, offset: 0.5 }, { opacity: 1, transform: 'none' }], { duration: 900, delay: 920, easing: SOFT });
// The examples wait for the card to settle
shown = true;
if (rolling) schedule(FIRST);
};
root.addEventListener('kodza:replay', play, { signal });
const io = new IntersectionObserver((entries) => {
if (!entries.some((entry) => entry.isIntersecting)) return;
io.disconnect();
play();
}, { rootMargin: '0px 0px -15% 0px' });
signal.addEventListener('abort', () => io.disconnect());
Promise.all([document.fonts?.ready, decoded(root)]).then(() => {
if (!signal.aborted) io.observe(root);
});
}
// Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
// event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
// markup back. For themes and apps that swap content without a page load. Each running root
// keeps its markup as written under KODZA, shared by every Kodza script on the page: a Kodza
// component inside another one is saved as written, not half-started, and stopped with it.
const KODZA = Symbol.for('kodza');
const instances = new WeakMap();
const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
const attrsOf = (el) => [...el.attributes].map((a) => [a.name, a.value]);
const put = (el, saved) => {
[...el.attributes].forEach((a) => el.removeAttribute(a.name));
saved.attrs.forEach(([name, value]) => el.setAttribute(name, value));
el.innerHTML = saved.html;
};
// The markup inside a root as written: Kodza components already running in it give back their own
const written = (root) => {
const all = [...root.querySelectorAll('*')];
if (!all.some((el) => el[KODZA])) return root.innerHTML;
const copy = root.cloneNode(true);
const twins = copy.querySelectorAll('*');
let last = null;
all.forEach((el, i) => {
if (!el[KODZA] || last?.contains(el)) return;
last = el;
put(twins[i], el[KODZA]);
});
return copy.innerHTML;
};
const init = (scope) => find(scope).forEach((root) => {
if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
const controller = new AbortController();
const saved = { html: written(root), attrs: attrsOf(root), stop: () => destroy(root) };
instances.set(root, { controller, saved });
root[KODZA] = saved;
mount(root, controller.signal);
root.classList.add('is-ready');
});
const destroy = (scope) => find(scope).forEach((root) => {
const instance = instances.get(root);
if (!instance) return;
instances.delete(root);
// The Kodza components running inside it stop first: once its markup is put back, their own
// script could not find them any more
root.querySelectorAll('*').forEach((el) => el[KODZA]?.stop());
instance.controller.abort();
delete root[KODZA];
put(root, instance.saved);
});
document.addEventListener('kodza:init', (event) => init(event.detail?.root));
document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
init();
// Loaded in <head>, the script runs before the markup exists: once more when it is parsed
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();'use client';
// Kodza — Hero Search, for React. From https://kodza.dev/components/hero-search/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: hero-search.css and hero-search.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './hero-search.css';
export type HeroSearchProps = Omit<ComponentPropsWithoutRef<'section'>, "children" | "vars"> & {
/** Settings, as CSS variables on the root */
vars?: {
/** default: #0a0a0a */
"--kz-hero-search-ink"?: string | number;
/** default: #f2f2f0 */
"--kz-hero-search-paper"?: string | number;
/** default: rgba(10, 10, 10, 0.62) */
"--kz-hero-search-dim"?: string | number;
/** default: rgba(10, 10, 10, 0.6) */
"--kz-hero-search-faint"?: string | number;
/** default: #ffffff */
"--kz-hero-search-surface"?: string | number;
/** default: rgba(10, 10, 10, 0.1) */
"--kz-hero-search-line"?: string | number;
/** default: rgba(10, 10, 10, 0.14) */
"--kz-hero-search-field"?: string | number;
/** default: rgba(10, 10, 10, 0.3) */
"--kz-hero-search-field-hover"?: string | number;
/** default: rgba(10, 10, 10, 0.06) */
"--kz-hero-search-soft"?: string | number;
/** default: 0 24px 48px -24px rgba(10, 10, 10, 0.24) */
"--kz-hero-search-shadow"?: string | number;
/** default: 0 18px 40px -16px rgba(10, 10, 10, 0.3) */
"--kz-hero-search-pop"?: string | number;
/** default: transparent */
"--kz-hero-search-bg"?: string | number;
/** default: 1240px */
"--kz-hero-search-width"?: string | number;
/** default: clamp(32px, 5vw, 80px) */
"--kz-hero-search-gap"?: string | number;
/** default: clamp(72px, 9vw, 140px) */
"--kz-hero-search-pad-y"?: string | number;
/** default: clamp(16px, 4vw, 40px) */
"--kz-hero-search-gutter"?: string | number;
/** default: 16px */
"--kz-hero-search-radius"?: string | number;
/** default: 4 / 5 */
"--kz-hero-search-ratio"?: string | number;
/** default: 56px */
"--kz-hero-search-height"?: string | number;
/** default: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace */
"--kz-hero-search-mono"?: string | number;
/** default: cubic-bezier(0.22, 1, 0.36, 1) */
"--kz-hero-search-ease"?: string | number;
};
className?: string;
};
export function HeroSearch({ vars, className, style, ...rest }: HeroSearchProps) {
const ref = useRef<ComponentRef<'section'>>(null);
const classes = ["kodza-hero-search", className].filter(Boolean).join(' ');
// Everything the markup is made of: when it changes, React gets a fresh element (see the top)
const key = JSON.stringify([classes, vars, style, rest]);
// Starts the script on this element once React has rendered it, stops it when it goes
useEffect(() => {
const root = ref.current;
let live = true;
// @ts-ignore: a plain script, no types to find
import('./hero-search.js').then(() => {
if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
});
return () => {
live = false;
document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
};
}, [key]);
return (
<section key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
<div className="kodza-hero-search__inner">
<div className="kodza-hero-search__copy">
<p className="kodza-hero-search__eyebrow">
<span className="kodza-hero-search__rise">Homes to buy and rent · updated hourly</span>
</p>
<h1 className="kodza-hero-search__title">
<span className="kodza-hero-search__line">
<span className="kodza-hero-search__rise">Find a home,</span>
</span>
{' '}
<span className="kodza-hero-search__line">
<span className="kodza-hero-search__rise">not a brochure.</span>
</span>
</h1>
<p className="kodza-hero-search__lead">Real floor plans, real prices and the street before the visit. When it says cosy, we say small.</p>
<form className="kodza-hero-search__form" action="/search" method="get" role="search">
<fieldset className="kodza-hero-search__modes">
<legend className="kodza-hero-search__sr">Looking to</legend>
{' '}
<label className="kodza-hero-search__mode">
<input className="kodza-hero-search__radio" type="radio" name="mode" defaultValue="buy" defaultChecked />
<span>Buy</span>
</label>
{' '}
<label className="kodza-hero-search__mode">
<input className="kodza-hero-search__radio" type="radio" name="mode" defaultValue="rent" />
<span>Rent</span>
</label>
</fieldset>
<div className="kodza-hero-search__fields">
<label className="kodza-hero-search__field kodza-hero-search__field--where">
<span className="kodza-hero-search__label">Where</span>
{' '}
<input className="kodza-hero-search__input" type="text" name="where" placeholder="Le Havre" autoComplete="off" data-examples="Le Havre, Lisbon, Nantes, Porto" />
</label>
{' '}
<label className="kodza-hero-search__field kodza-hero-search__select">
<span className="kodza-hero-search__label">Type</span>
<select className="kodza-hero-search__native" name="type" aria-label="Type" defaultValue="">
<option value="">Any type</option>
<option value="house">House</option>
<option value="flat">Flat</option>
<option value="loft">Loft</option>
<option value="studio">Studio</option>
</select>
</label>
{' '}
<label className="kodza-hero-search__field kodza-hero-search__select">
<span className="kodza-hero-search__label">Budget</span>
<select className="kodza-hero-search__native" name="max_price" data-mode="buy" aria-label="Budget" defaultValue="">
<option value="">Any price</option>
<option value="200000">Up to €200k</option>
<option value="350000">Up to €350k</option>
<option value="500000">Up to €500k</option>
<option value="800000">Up to €800k</option>
</select>
<select className="kodza-hero-search__native" name="max_rent" data-mode="rent" aria-label="Budget" defaultValue="">
<option value="">Any rent</option>
<option value="800">Up to €800 / mo</option>
<option value="1200">Up to €1,200 / mo</option>
<option value="1800">Up to €1,800 / mo</option>
<option value="2500">Up to €2,500 / mo</option>
</select>
</label>
</div>
<button className="kodza-hero-search__submit" type="submit">Show <span className="kodza-hero-search__count">128</span> homes<svg className="kodza-hero-search__arrow" viewBox="0 0 16 16" aria-hidden="true"> <path d="M2.5 8h10.5M9 3.5 13.5 8 9 12.5" /> </svg></button>
<p className="kodza-hero-search__note">Free to search. No account, no agent calling you at dinner.</p>
</form>
</div>
<figure className="kodza-hero-search__media">
<div className="kodza-hero-search__frame">
<div className="kodza-hero-search__curtain">
<div className="kodza-hero-search__hold">
<img src="https://kodza.dev/media/kz-overflow-1400.webp" alt="A two-storey concrete house, its upper floor cantilevered over the ground" width="1400" height="1400" />
</div>
</div>
<p className="kodza-hero-search__tag">
<span className="kodza-hero-search__meta">Sainte-Adresse · 4 rooms · 132 m²</span>
{' '}
<span className="kodza-hero-search__price">
<span data-mode="buy">€465,000</span>
<span data-mode="rent">€1,750 / mo</span>
</span>
</p>
</div>
<figcaption className="kodza-hero-search__caption">fig. 01 — 132 m², measured, not estimated</figcaption>
</figure>
</div>
</section>
);
}Checked
Checked before you paste.
Robots poked at it before you did. Every component goes through the same checks, and again each time it changes.
What ranLast run
Accessibilityaxe-core 4.10.2: the WCAG 2.1 A and AA rules, plus best practices.
0 issues
KeyboardThe Tab key gets there, and the focus ring shows when it does.
Passed
Reduced motionTurn on reduced motion and what moved just appears. Nothing loops.
Passed
Light and darkThe same checks on both themes, contrast included.
Passed
WordPressPasted into Twenty Twenty-Five, Twenty Twenty-One, Astra, Blocksy, GeneratePress, Hello Elementor, Kadence and OceanWP. Nothing to flag.
8 / 8 themes
Robots checked this. A human with VoiceOver hasn't yet.
KeyboardPress them in the preview
On Buy or Rent
- Switches between Buy and Rent, and the budget list with it←/→
On Type or Budget, while it's open
- Next or previous option, no looping↓/↑
- First or last optionHome/End
- Five options down or upPage Down/Page Up
- Jumps to the option starting with that letterA–Z
- Picks the highlighted option and closesEnter/Space
- Picks the highlighted option and moves onTab
On Type or Budget
- Opens it on the current choiceEnter/Space/↓/↑
- Picks the option starting with that letter, no openingA–Z
Anywhere, while a list is open
- Closes it, focus back on the fieldEsc
In the place field
- Sends the searchEnter
Hero Event
An event hero that counts down to the start date in its markup, each digit dropping out of its window, then gives way to "Live now" at the start and to the replay link at the end.
View code
Hero Open
A hero for a place with opening hours: a status line works out, at the place's own time, if it's open ("Open now · closes 23:00", "Closes in 25 min") and rolls to the new words on the minute.
View code
Hero Paths
A hero that splits visitors in two: a title, then two tall pictures that are links, and the one under the pointer widens while its call to action rises.
View code
Hero Rotate
A studio hero whose headline changes one word at a time: the next word rolls up into place while a matching picture opens over the last one, in the same stroke. A ring around the pause button shows the time left.
View code
Hero Showreel
A showreel hero: a muted loop under the title and a Play reel pill that follows the pointer. A click grows the pill into a player with sound, pause, mute and a seek track.
View code