/* Yard Plotted
Warm paper, a lot of color, and the layout of a recipe you'd actually cook
from: what you need, how long it takes, then the steps, big and numbered. */
/* ---------------------------------------------------------------------------
About the mid-tones below.
Five of these used to be a step lighter and every one of them failed WCAG AA
as text. They are darker now, and the amounts are not taste: each is the
least darkening that clears 4.5:1 against every ground the site actually
puts it on, checked pair by pair rather than eyeballed.
--muted #8A7965 -> #6E6050 was 3.11-4.10 (.dim, table heads, plot text)
--tomato #D2603A -> #AB4E2F was 3.60 (cream text on the header and
every button, the slot discs, .pill--warn)
--tomato-dk #B24A27 -> #8F3D22 was 4.13 for links inside a blush callout
--pine #3C7A5A -> #37704F was 4.32 for butter links in the footer
The binding constraint is usually not the obvious one. --muted is set by
plot label text on --plot-house, not by .dim on paper; --tomato is set by
butter on the buy pill, not by cream in the nav.
--plum and --sky are unchanged: plum already cleared 4.89 carrying cream on
its slot disc, and sky is only ever a decorative box-shadow. --mustard is
also unchanged, because ink-on-mustard was never the problem: the only
failure was the star glyph, which now has its own --star below.
If you restyle, re-run the pair check rather than trusting a swatch. Two of
these look almost identical to what they replaced and still moved a real
ratio across the line.
--------------------------------------------------------------------------- */
:root {
/* Paper and ink */
--cream: #FDF7EC;
--cream-2: #F7EEDD;
--paper: #FFFCF6;
--ink: #33261B;
--ink-soft: #5C4A3A;
--muted: #6E6050;
--line: #E3D5BF;
--line-dark: #CDB99B;
/* The crayon box */
--tomato: #AB4E2F;
--tomato-dk: #8F3D22;
--pine: #37704F;
--pine-dk: #2A5C3F;
--mustard: #E2A32B;
/* Mustard is bright enough to be a background but too light to be a glyph:
as a star on paper it came out at 2.16:1. Only the filled star uses this. */
--star: #BA8623;
--plum: #8B5E83;
--sky: #5B8CA8;
--blush: #F7DCD0;
--mint: #DCEBDF;
--butter: #FBEBC8;
--lilac: #EADDE8;
/* The site plan */
--plot-grid: #EFE4D2;
--plot-lawn: #EFF3E6;
--plot-house: #EADCC6;
--plot-porch: #DCC9AC;
--plot-walk: #F8F2E6;
--plot-line: #A08A6C;
--plot-dim: #6E6050;
--plot-slot-fill: rgba(171,78,47,.16);
--plot-slot-line: #AB4E2F;
--cut-stock: #F3EADB;
--cut-line: #33261B;
--cut-grid: #D8CBB4;
--cut-piece-1: #F7DCD0;
--cut-piece-2: #DCEBDF;
--cut-piece-3: #FBEBC8;
--cut-piece-4: #EADDE8;
--plot-street: #DED4C2;
--plot-drive: #E6DCCB;
--plot-wall: #A8724A;
--plot-fence: #8A7965;
--display: 'Fraunces', Georgia, serif;
--body: 'Karla', system-ui, sans-serif;
--hand: 'Caveat', 'Comic Sans MS', cursive;
--measure: 66ch;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 2px 0 var(--line-dark);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--body);
font-size: 1.0625rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* --- Type ---------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--display);
font-variation-settings: 'SOFT' 40, 'WONK' 1;
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.015em;
margin: 0 0 .5em;
color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.05em; max-width: var(--measure); }
a { color: var(--tomato-dk); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* Hover thickens the rule as well as lifting the colour, so the state change
does not rest on hue alone. That matters for the two cases below and for
anyone who cannot separate the two oranges in the first place. */
a:hover { color: var(--tomato); text-decoration-thickness: 3px; }
/* The tinted panels. Against mint, blush and lilac the lighter hover tone lands
at 4.40, 4.17 and 4.14, all under the 4.5:1 body text needs; butter is the one
tint it clears, at 4.61. On the three that fail, a link keeps the darker
colour and lets the thicker underline carry the hover by itself. */
.callout--tip a:hover,
.callout--oops a:hover,
.callout--heads a:hover,
.notice--frost a:hover,
.lock a:hover { color: var(--tomato-dk); }
:focus-visible { outline: 2.5px solid var(--tomato); outline-offset: 3px; border-radius: 3px; }
strong { font-weight: 700; }
.eyebrow {
font-family: var(--hand);
font-size: 1.45rem;
line-height: 1;
color: var(--tomato);
margin: 0 0 .5rem;
transform: rotate(-1.2deg);
transform-origin: left center;
}
.lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); }
.dim { font-size: .88rem; color: var(--muted); }
.script { font-family: var(--hand); font-size: 1.35em; line-height: 1; color: var(--pine); }
/* --- Layout -------------------------------------------------------------- */
.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.wrap--narrow { width: min(720px, 100% - 2.5rem); }
section { padding-block: clamp(2.75rem, 6vw, 4.75rem); }
/* Alternating warm bands instead of one flat colour all the way down. */
section:nth-of-type(even) { background: var(--cream-2); }
section.band-mint { background: var(--mint); }
section.band-butter { background: var(--butter); }
section.band-blush { background: var(--blush); }
/* --- Preview bar --------------------------------------------------------- */
/* Only shown to somebody holding a preview code while the holding page is up.
It has to be loud: the whole point is that this view is not what the public
is getting. */
.preview-bar {
background: var(--ink);
color: var(--butter);
border-bottom: 3px solid var(--mustard);
font-size: .9rem;
}
.preview-bar__inner {
display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
align-items: center; justify-content: space-between;
padding-block: .6rem;
}
.preview-bar__inner > span { display: inline-flex; align-items: center; gap: .45rem; }
.preview-bar strong { color: var(--mustard); }
.preview-bar .icon { color: var(--mustard); flex: none; }
.preview-bar a { color: var(--cream); text-underline-offset: 3px; white-space: nowrap; }
.preview-bar a:hover { color: var(--mustard); }
/* --- Header -------------------------------------------------------------- */
.site-head {
background: var(--tomato);
color: var(--cream);
border-bottom: 3px solid var(--ink);
}
.site-head__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem; padding-block: .85rem; flex-wrap: wrap;
}
.brand {
font-family: var(--display);
font-variation-settings: 'SOFT' 60, 'WONK' 1;
font-weight: 900; font-size: 1.35rem; letter-spacing: -.02em;
color: var(--cream); text-decoration: none;
display: flex; align-items: baseline; gap: .5rem;
}
.brand:hover { color: var(--butter); }
.brand__mark { font-family: var(--hand); font-size: 1.5rem; color: var(--butter); }
.site-nav { display: flex; gap: 1.4rem; font-weight: 700; font-size: .92rem; flex-wrap: wrap; }
.site-nav a { color: var(--cream); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--butter); border-bottom-color: var(--butter); }
/* The one nav item that sells something, so it reads as a control rather than
another link. Border rather than fill keeps it from shouting over the six
navigation links it sits beside. */
.site-nav__buy {
padding: .18rem .8rem 0.28rem;
border: 2px solid var(--butter) !important;
border-radius: 999px;
color: var(--butter) !important;
margin-top: -.2rem;
}
.site-nav__buy:hover { background: var(--butter); color: var(--ink) !important; }
/* --- Hero ---------------------------------------------------------------- */
.hero { background: var(--butter); border-bottom: 3px solid var(--ink); }
.hero__grid {
display: grid; gap: clamp(2rem, 4vw, 3.5rem);
grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
.hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); }
}
.hero h1 span { color: var(--tomato); }
.hero__plan {
background: var(--paper);
border: 2.5px solid var(--ink);
border-radius: var(--radius);
box-shadow: 8px 8px 0 var(--tomato);
padding: 1rem;
transform: rotate(-.6deg);
}
.hero__plan-caption {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
font-family: var(--hand); font-size: 1.15rem; line-height: 1.2; color: var(--pine);
padding: 0 .3rem .55rem; border-bottom: 2px dashed var(--line-dark); margin-bottom: .8rem;
}
/* --- Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: .45rem;
font-family: var(--body); font-weight: 700; font-size: .96rem;
text-decoration: none; cursor: pointer;
padding: .7rem 1.3rem; border-radius: 999px;
border: 2.5px solid var(--ink); background: var(--tomato); color: var(--cream);
box-shadow: 3px 3px 0 var(--ink);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--tomato-dk); color: var(--cream); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ghost { background: var(--paper); color: var(--ink); }
.btn--ghost:hover { background: var(--blush); color: var(--ink); }
.btn--pine { background: var(--pine); color: var(--cream); }
.btn--pine:hover { background: var(--pine-dk); color: var(--cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
/* --- The plot (SVG) ------------------------------------------------------ */
.plot { width: 100%; height: auto; display: block; }
.plot__label,
.plot__slot-id { font-family: var(--body); font-size: 10px; font-weight: 700; fill: var(--muted); }
.plot__slot-id { fill: var(--tomato-dk); font-size: 11.5px; }
.plot__dim-text { font-family: var(--body); font-size: 9px; fill: var(--plot-dim); }
.plot__cap { font-family: var(--body); font-size: 8px; fill: var(--muted); }
.plot__street-label {
font-family: var(--body); font-size: 8px; font-weight: 700;
letter-spacing: .18em; fill: var(--muted);
}
.plot__slot.is-filled circle { fill: var(--tomato); }
.plot__slot.is-filled .plot__slot-id { fill: var(--cream); }
.plot--draw .plot__lot,
.plot--draw .plot__house,
.plot--draw .plot__porch { stroke-dasharray: 900; stroke-dashoffset: 900; animation: plot-draw 1.4s ease forwards; }
.plot--draw .plot__house { animation-delay: .3s; }
.plot--draw .plot__porch { animation-delay: .55s; }
.plot--draw .plot__slot { opacity: 0; animation: plot-fade .45s ease forwards; }
.plot--draw .plot__slot:nth-of-type(1) { animation-delay: .95s; }
.plot--draw .plot__slot:nth-of-type(2) { animation-delay: 1.05s; }
.plot--draw .plot__slot:nth-of-type(3) { animation-delay: 1.15s; }
.plot--draw .plot__slot:nth-of-type(4) { animation-delay: 1.25s; }
.plot--draw .plot__slot:nth-of-type(5) { animation-delay: 1.35s; }
.plot--draw .plot__slot:nth-of-type(6) { animation-delay: 1.45s; }
.plot--draw .plot__slot:nth-of-type(7) { animation-delay: 1.55s; }
@keyframes plot-draw { to { stroke-dashoffset: 0; } }
@keyframes plot-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.plot--draw .plot__lot,
.plot--draw .plot__house,
.plot--draw .plot__porch { stroke-dashoffset: 0; animation: none; }
.plot--draw .plot__slot { opacity: 1; animation: none; }
}
/* --- Cards --------------------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
/* The min() is not decoration. A bare minmax(310px, 1fr) track stays 310px
even when its container is narrower, so on a 320px handset, where .wrap
comes out at 280px, the cards push the whole document sideways. Wrapping the
floor in min(..., 100%) lets the track collapse to the container instead. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); }
.card {
background: var(--paper);
border: 2.5px solid var(--ink);
border-radius: var(--radius);
padding: 1.5rem;
display: flex; flex-direction: column;
box-shadow: 5px 5px 0 var(--line-dark);
transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--line-dark); }
/* A card title is sized by its job in the card, never by its heading level.
Index pages list their cards straight under the page h1, so those titles are
h2 and would otherwise inflate to the 2.5rem section-heading size; pages that
put cards under a section heading keep h3. Both look the same, which is the
point: the level tracks the document outline, the size tracks the design. */
.card h2, .card h3 { font-size: 1.25rem; margin-bottom: .4rem; }
/* Used where a section's name is the hand-written kicker rather than a display
heading. Restates the two properties the base heading rule would otherwise
impose, so an is pixel-identical to a
sitting above it. */
h2.eyebrow { font-weight: 600; letter-spacing: 0; }
.card p { font-size: .98rem; color: var(--ink-soft); margin-bottom: .9rem; }
.card__link { margin-top: auto; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--tomato); align-self: flex-start; }
.card--link { text-decoration: none; color: inherit; }
/* Each card in a row gets its own colour, so a grid is never one grey block. */
.grid .card:nth-child(4n+1) { box-shadow: 5px 5px 0 var(--tomato); }
.grid .card:nth-child(4n+2) { box-shadow: 5px 5px 0 var(--pine); }
.grid .card:nth-child(4n+3) { box-shadow: 5px 5px 0 var(--mustard); }
.grid .card:nth-child(4n+4) { box-shadow: 5px 5px 0 var(--plum); }
.grid .card:nth-child(4n+1):hover { box-shadow: 8px 8px 0 var(--tomato); }
.grid .card:nth-child(4n+2):hover { box-shadow: 8px 8px 0 var(--pine); }
.grid .card:nth-child(4n+3):hover { box-shadow: 8px 8px 0 var(--mustard); }
.grid .card:nth-child(4n+4):hover { box-shadow: 8px 8px 0 var(--plum); }
.card__plot { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: .6rem; margin-bottom: 1rem; }
.card__num {
font-family: var(--display); font-variation-settings: 'SOFT' 60, 'WONK' 1;
font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--tomato);
margin-bottom: .3rem;
}
/* --- At a glance bar ----------------------------------------------------- */
.glance {
display: flex; flex-wrap: wrap; gap: .6rem;
margin: 1.6rem 0 0; padding: 0; list-style: none;
}
.glance li {
background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
padding: .38rem 1rem; font-size: .9rem; font-weight: 700;
}
.glance li span { font-weight: 400; color: var(--muted); }
.glance li:nth-child(3n+1) { background: var(--butter); }
.glance li:nth-child(3n+2) { background: var(--mint); }
.glance li:nth-child(3n+3) { background: var(--blush); }
/* --- Slot list ----------------------------------------------------------- */
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.slots li {
display: grid; grid-template-columns: 2.9rem 1fr; gap: 1rem; align-items: start;
background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-sm);
padding: 1rem 1.15rem;
}
.slot__id {
display: grid; place-items: center;
width: 2.4rem; height: 2.4rem; border-radius: 50%;
background: var(--tomato); color: var(--cream);
font-family: var(--display); font-weight: 900; font-size: 1rem;
}
.slots li:nth-child(3n+2) .slot__id { background: var(--pine); }
.slots li:nth-child(3n+3) .slot__id { background: var(--plum); }
.slot__label { font-family: var(--display); font-weight: 700; font-size: 1.1rem; display: block; margin-bottom: .15rem; }
a.slot__label { text-decoration: none; border-bottom: 2px solid var(--tomato); }
.slot__note { font-size: .96rem; color: var(--ink-soft); display: block; }
.slot__cap {
font-family: var(--hand); font-size: 1.15rem; color: var(--tomato);
margin-left: .5rem; white-space: nowrap;
}
/* --- Tiers --------------------------------------------------------------- */
.tier {
background: var(--paper);
border: 2.5px solid var(--ink); border-radius: var(--radius);
margin-bottom: 1.6rem; overflow: hidden;
box-shadow: 5px 5px 0 var(--line-dark);
}
.tier__head {
display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
padding: 1.05rem 1.4rem; border-bottom: 2.5px solid var(--ink); background: var(--butter);
}
.tier:nth-of-type(2) .tier__head { background: var(--mint); }
.tier:nth-of-type(3) .tier__head { background: var(--blush); }
.tier:nth-of-type(4) .tier__head { background: var(--lilac); }
/* margin:0 because this is an h3 now and the base heading rule gives it a
bottom margin that would push it off the flex row it shares with the price. */
.tier__name { font-family: var(--display); font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; line-height: 1.15; }
.tier__range { font-family: var(--hand); font-size: 1.2rem; color: var(--ink-soft); }
.tier__total { font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tier__body { padding: .3rem 1.4rem 1.4rem; }
.tier--locked { border-style: dashed; box-shadow: none; }
table.items { width: 100%; border-collapse: collapse; font-size: .96rem; }
/* Scoped to thead now that the spot letter in each row is a
too. Unscoped, the letters would inherit the column-head treatment and come
out as tiny uppercase muted type in the middle of the data. */
table.items thead th {
text-align: left; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); padding: 1rem .6rem .5rem 0; border-bottom: 2px solid var(--line-dark);
}
table.items td,
table.items tbody th { padding: .85rem .6rem; border-bottom: 1.5px dashed var(--line); vertical-align: top; }
table.items tbody th { text-align: left; }
table.items tr:last-child td,
table.items tr:last-child th { border-bottom: 0; }
table.items tr:nth-child(even) { background: rgba(247,238,221,.5); }
table.items .num { font-weight: 700; white-space: nowrap; }
.items--teaser td { color: var(--muted); }
.pill {
display: inline-block; font-size: .7rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
padding: .18rem .6rem; border-radius: 999px;
border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
white-space: nowrap;
}
.pill--diy { background: var(--mint); }
.pill--warn { background: var(--tomato); color: var(--cream); }
.pill--lock { background: var(--lilac); }
.pill--free { background: var(--butter); }
/* --- Callouts ------------------------------------------------------------ */
.callout {
border: 2.5px solid var(--ink); border-radius: var(--radius);
background: var(--butter);
padding: 1.05rem 1.25rem; margin: 1.4rem 0;
font-size: .98rem;
}
.callout p { margin-bottom: .5rem; max-width: none; }
.callout p:last-child { margin-bottom: 0; }
.callout__tag {
display: inline-block; font-family: var(--hand); font-size: 1.35rem; line-height: 1;
color: var(--tomato-dk); margin-bottom: .3rem;
}
.callout--oops { background: var(--blush); }
.callout--oops .callout__tag { color: var(--tomato-dk); }
.callout--tip { background: var(--mint); }
.callout--tip .callout__tag { color: var(--pine); }
.callout--heads { background: var(--lilac); }
.callout--heads .callout__tag { color: var(--plum); }
/* Kept for older markup. */
.notice { border: 2.5px solid var(--ink); border-radius: var(--radius); background: var(--butter); padding: 1rem 1.25rem; margin: 1.3rem 0; font-size: .96rem; }
.notice p:last-child { margin-bottom: 0; }
.notice--frost { background: var(--mint); }
/* --- Prompts ------------------------------------------------------------- */
.prompt {
background: var(--paper); border: 2px dashed var(--line-dark); border-radius: var(--radius-sm);
padding: 1.1rem 1.25rem;
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: .84rem; line-height: 1.65; color: var(--ink-soft);
white-space: pre-wrap; overflow-x: auto; max-width: none;
}
.prompt--locked {
max-height: 6.5rem; overflow: hidden; user-select: none;
-webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
mask-image: linear-gradient(180deg, #000 35%, transparent 100%);
}
.copy-btn {
font-family: var(--body); font-weight: 700; font-size: .82rem;
background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
padding: .35rem .9rem; cursor: pointer; margin-bottom: .6rem;
box-shadow: 2px 2px 0 var(--ink);
}
.copy-btn:hover { background: var(--butter); }
.copy-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 1rem; }
.faq__item {
background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius);
padding: 1.3rem 1.5rem;
}
.faq__item:nth-child(3n+1) { box-shadow: 4px 4px 0 var(--mustard); }
.faq__item:nth-child(3n+2) { box-shadow: 4px 4px 0 var(--sky); }
.faq__item:nth-child(3n+3) { box-shadow: 4px 4px 0 var(--pine); }
.faq__q { font-size: 1.15rem; margin: 0 0 .45rem; }
.faq__a { color: var(--ink-soft); margin: 0; max-width: none; }
/* --- Recipe-style steps -------------------------------------------------- */
.ingredients { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .1rem; }
.ingredients li {
display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
padding: .7rem .2rem; border-bottom: 1.5px dashed var(--line);
}
.ingredients li:last-child { border-bottom: 0; }
.ingredients .amount { font-weight: 700; white-space: nowrap; }
.ingredients .free { color: var(--pine); font-family: var(--hand); font-size: 1.15rem; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.5rem; }
.steps > li {
counter-increment: step; position: relative;
padding-left: 4.2rem; min-height: 3rem;
}
.steps > li::before {
content: counter(step);
position: absolute; left: 0; top: -.2rem;
width: 3rem; height: 3rem; border-radius: 50%;
background: var(--tomato); color: var(--cream);
border: 2.5px solid var(--ink);
display: grid; place-items: center;
font-family: var(--display); font-weight: 900; font-size: 1.4rem;
}
.steps > li:nth-child(3n+2)::before { background: var(--pine); }
.steps > li:nth-child(3n+3)::before { background: var(--mustard); color: var(--ink); }
.steps h3 { margin-bottom: .3rem; }
.steps .callout { margin: .8rem 0 0; }
/* --- Icons --------------------------------------------------------------- */
.icon {
width: 1.15em; height: 1.15em;
flex: none; vertical-align: -0.18em;
display: inline-block;
}
.icon--title { width: .9em; height: .9em; vertical-align: -0.02em; color: var(--tomato); }
.eyebrow .icon { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .1em; }
.btn .icon { width: 1.1em; height: 1.1em; }
/* --- Holiday picker ------------------------------------------------------ */
.holiday-picker {
list-style: none; margin: 2rem 0 0; padding: 0;
display: grid; gap: .8rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.holiday-pick {
display: flex; flex-direction: column; align-items: center; gap: .35rem;
text-align: center; text-decoration: none; color: inherit;
background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius);
padding: 1.1rem .7rem;
box-shadow: 3px 3px 0 var(--line-dark);
transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.holiday-pick:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--tomato); color: inherit; background: var(--blush); }
.holiday-pick__icon .icon { width: 2rem; height: 2rem; color: var(--tomato); }
.holiday-picker li:nth-child(3n+2) .holiday-pick__icon .icon { color: var(--pine); }
.holiday-picker li:nth-child(3n+3) .holiday-pick__icon .icon { color: var(--plum); }
.holiday-pick__name { font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.holiday-pick__meta { font-size: .78rem; color: var(--muted); }
.holiday-pick.is-now { background: var(--butter); border-color: var(--tomato); }
.holiday-card__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.holiday-card__icon .icon { width: 2.4rem; height: 2.4rem; color: var(--tomato); }
.holiday-card__head h3 { margin: 0; }
.palette { display: flex; gap: .3rem; margin: 0 0 1rem; }
.palette__chip {
width: 1.6rem; height: 1.6rem; border-radius: 50%;
border: 2px solid var(--ink); display: block;
}
.glance--now { background: var(--tomato) !important; color: var(--cream); }
.glance .icon { width: 1em; height: 1em; margin-right: .25rem; }
/* --- Chip nav ------------------------------------------------------------ */
.chip-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.chip {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--ink);
background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
padding: .35rem .85rem;
}
.chip:hover { background: var(--butter); color: var(--ink); }
.chip.is-on { background: var(--tomato); color: var(--cream); border-color: var(--ink); }
.chip.is-on:hover { background: var(--tomato-dk); color: var(--cream); }
/* --- Per-tier footer ----------------------------------------------------- */
.tier__foot {
display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px dashed var(--line-dark);
}
.tier__foot .dim { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.tier__prompt { margin-top: 1rem; }
.tier__prompt summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .4rem;
font-weight: 700; font-size: .95rem;
}
.tier__prompt summary::-webkit-details-marker { display: none; }
.tier__prompt summary .icon { color: var(--tomato); }
.tier__prompt[open] .tier__prompt-cue { transform: rotate(180deg); }
.tier__prompt .copy-btn { margin-top: .9rem; }
/* --- Build drawings ------------------------------------------------------ */
.cut-wrap, .stencil-preview__art {
background: var(--paper);
border: 2.5px solid var(--ink); border-radius: var(--radius);
padding: 1rem; margin-top: 1.5rem;
}
.cut { width: 100%; height: auto; display: block; }
.cut__label { font-family: var(--body); font-size: 10px; font-weight: 700; fill: var(--ink); }
.cut__dim { font-family: var(--body); font-size: 9px; fill: var(--muted); }
.stencil-previews {
display: grid; gap: 1.2rem; margin-top: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stencil-preview { margin: 0; }
.stencil-preview__art { margin-top: 0; display: grid; place-items: center; min-height: 9rem; }
.stencil-preview__art .stencil { width: auto; max-width: 100%; height: auto; max-height: 8rem; }
.stencil-preview figcaption { margin-top: .6rem; display: grid; gap: .1rem; font-size: .92rem; }
/* --- Switchers ----------------------------------------------------------- */
.switcher { padding-block: 1.6rem; background: var(--cream-2); border-block: 2.5px solid var(--ink); }
.switcher__group + .switcher__group { margin-top: 1.1rem; }
.switcher__label {
font-family: var(--display); font-weight: 700; font-size: 1rem;
margin: 0 0 .55rem; display: flex; align-items: center; gap: .4rem;
}
.switcher__label .icon { color: var(--tomato); }
.switcher__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.yard-switch {
border: 2.5px solid var(--ink); border-radius: var(--radius);
background: var(--paper); padding: .9rem 1.1rem; margin-top: 1.6rem;
}
.yard-switch summary {
cursor: pointer; list-style: none;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
}
.yard-switch summary::-webkit-details-marker { display: none; }
.yard-switch__now { display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.yard-switch__now .icon { color: var(--tomato); }
.yard-switch__cue {
font-family: var(--hand); font-size: 1.2rem; line-height: 1; color: var(--pine);
display: inline-flex; align-items: center; gap: .2rem;
}
.yard-switch[open] .yard-switch__cue .icon { transform: rotate(180deg); }
.yard-switch[open] .switcher__chips { margin-top: .9rem; }
.yard-switch .dim { margin: .7rem 0 0; }
/* --- FAQ accordion ------------------------------------------------------- */
.faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chevron { flex: none; margin-top: .25rem; transition: transform .15s ease; color: var(--tomato); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__item[open] .faq__a { margin-top: .7rem; }
/* --- Gallery ------------------------------------------------------------- */
.gallery { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.gallery__item { margin: 0; background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 5px 5px 0 var(--line-dark); }
.gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2.5px solid var(--ink); }
.gallery__item figcaption { padding: .9rem 1.1rem; }
.gallery__note { font-size: .95rem; margin-bottom: .4rem; }
.gallery--strip { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
/* --- Reviews ------------------------------------------------------------- */
.review {
margin: 0; background: var(--paper);
border: 2.5px solid var(--ink); border-radius: var(--radius);
padding: 1.4rem 1.5rem; box-shadow: 5px 5px 0 var(--mustard);
display: flex; flex-direction: column; gap: .6rem;
}
.review__title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0; }
.review__body { margin: 0; color: var(--ink-soft); }
.review__foot { margin-top: auto; padding-top: .5rem; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stars { display: inline-flex; gap: .1rem; }
.stars__star .icon { width: 1.1rem; height: 1.1rem; color: var(--line-dark); }
/* --star, not --mustard: a filled star sat at 2.16:1 against paper, which is
under the 3:1 a graphic needs to be made out. The empty star stays light on
purpose, because it is the absence of a star rather than a thing to read,
and the rating itself is spoken from the aria-label on .stars. */
.stars__star.is-on .icon { color: var(--star); fill: var(--star); }
/* --- Notify form on the holding page ------------------------------------- */
.notify { margin-top: 1.8rem; max-width: 30rem; }
.notify__row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.notify__row .form__input { flex: 1 1 14rem; }
.notify .dim { margin-top: .5rem; }
/* --- Forms --------------------------------------------------------------- */
.form { margin-top: 2rem; display: grid; gap: 1.2rem; }
.form__row { display: grid; gap: .35rem; }
.form__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form__label { font-family: var(--display); font-weight: 700; font-size: .98rem; }
.form__input {
font-family: var(--body); font-size: 1rem; color: var(--ink);
background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--radius-sm);
padding: .65rem .85rem; width: 100%;
}
/* The border change is a nicety on top of the ring, never instead of it. This
rule used to add `outline: none`, and because `.form__input:focus` outranks
the bare `:focus-visible` above it, that silently took the focus ring off
every text field, select and file input on the site. Tabbing through the
photo form landed on nothing you could see. */
.form__input:focus { border-color: var(--tomato); }
.form__input--file { padding: .55rem .6rem; background: var(--cream-2); }
.form__check { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; }
.form__check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--tomato); }
.form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .dim { margin: 0; }
/* --- The gate ------------------------------------------------------------ */
.redacted {
display: inline-block; vertical-align: middle;
width: clamp(6rem, 22vw, 11rem); height: .85em; border-radius: 3px;
background: repeating-linear-gradient(-45deg, var(--line-dark) 0 5px, var(--line) 5px 10px);
}
.lock {
border: 2.5px solid var(--ink); border-radius: var(--radius);
background: var(--lilac);
padding: 1.4rem 1.5rem; margin-top: 1.4rem;
}
.lock__head { font-family: var(--display); font-weight: 900; font-size: 1.15rem; margin-bottom: .4rem; }
.lock p { color: var(--ink-soft); }
.lock .btn-row { margin-top: 1.1rem; }
.unlock-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.8rem; }
.unlock-form label { width: 100%; }
.unlock-form__input {
flex: 1 1 15rem;
font-family: var(--body); font-size: 1.1rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
background: var(--paper); color: var(--ink);
border: 2.5px solid var(--ink); border-radius: 999px;
padding: .68rem 1.2rem;
}
.unlock-form__input::placeholder { color: var(--line-dark); }
/* --- Footer -------------------------------------------------------------- */
.site-foot {
background: var(--pine); color: var(--cream);
border-top: 3px solid var(--ink);
padding-block: 3rem 2.25rem;
font-size: .95rem;
}
.site-foot a { color: var(--butter); }
.site-foot h2 { font-family: var(--hand); font-weight: 600; font-size: 1.5rem; color: var(--butter); margin-bottom: .5rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 2.25rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; }
.disclosure { border-top: 2px solid rgba(253,247,236,.28); padding-top: 1.4rem; font-size: .86rem; }
.disclosure p { max-width: 74ch; opacity: .92; }
.skip {
position: absolute; left: -9999px;
background: var(--mustard); color: var(--ink); padding: .7rem 1.1rem;
font-weight: 700; border: 2px solid var(--ink); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }
/* Read by a screen reader, never drawn. clip-path rather than display:none or
visibility:hidden, both of which would take the text out of the accessibility
tree along with the pixels, which is the opposite of the point. */
.vh,
.nav-button__text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The menu button's label.
These are two real spans with real words in them, and only one is in the
document at a time. They replace a single empty span whose text came from
CSS `content` on ::after.
That mattered because the span IS the label element's text, and the label is
where the checkbox gets its accessible name. Generated content is not
reliably folded into a name computation: the browsers that do it are doing
more than the spec obliges them to, and where it is skipped the control
announces as "checkbox, not checked" with no indication it is the way into
the navigation. Swapping display between two real spans says Menu and Close
out of the markup, where a name is guaranteed to be found. */
.nav-button__text--shut { display: none; }
.nav-switch:checked ~ .nav-button .nav-button__text--open { display: none; }
.nav-switch:checked ~ .nav-button .nav-button__text--shut { display: block; }
/* ---------------------------------------------------------------------------
"You will also need"
The hardware a plan needs but nobody puts on a wish list. Styled as a
checklist rather than a shopping table, because that is how it gets used:
stood in a garage working out what you already own.
--------------------------------------------------------------------------- */
.supplies {
border: 2.5px dashed var(--line-dark); border-radius: var(--radius);
background: var(--paper);
padding: 1.05rem 1.25rem; margin: 1.4rem 0;
}
.supplies h4 {
display: flex; align-items: center; gap: .45rem;
font-family: var(--hand); font-size: 1.5rem; line-height: 1;
color: var(--ink); margin: 0 0 .35rem;
}
.supplies h4 svg { width: 1.15rem; height: 1.15rem; }
.supplies > p.dim { font-size: .92rem; margin: 0 0 .8rem; max-width: none; }
.supplies__list { list-style: none; margin: 0; padding: 0; }
.supplies__list li {
display: grid;
grid-template-columns: 2.2rem 1fr auto;
gap: .15rem .5rem;
align-items: baseline;
padding: .5rem 0;
border-top: 1px solid var(--line);
}
.supplies__list li:first-child { border-top: 0; }
.supplies__qty { font-weight: 700; color: var(--ink-soft); }
.supplies__why {
grid-column: 2 / 3; font-size: .86rem; color: var(--muted);
}
.supplies__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.supplies__total {
margin: .8rem 0 0; padding-top: .7rem;
border-top: 2px solid var(--line-dark);
font-size: .93rem; max-width: none;
}
@media (max-width: 40rem) {
.supplies__list li { grid-template-columns: 2rem 1fr; }
.supplies__price { grid-column: 2 / 3; }
}
/* Wide tables on narrow phones. Used by the privacy page and anywhere else a
table has more columns than a handset has room for. */
.table-wrap { overflow-x: auto; margin: 1.2rem 0 1.4rem; }
.table-wrap table { min-width: 26rem; }
/* --- Phones ---------------------------------------------------------------
The plan drawing is the product, and on a handset it was the thing that
broke. Lots are drawn in a 668-unit viewBox, so inside a card on a 390px
screen the whole thing scales to about 0.46, and the numbers land like this:
.plot__dim-text authored 9px -> 4.2px on glass
.plot__cap authored 8px -> 3.7px
.plot__slot-id authored 11.5 -> 5.3px
Four pixels. The site's entire promise is that those measurements are real
and readable, and on a phone they were neither. Scaling the type up cannot
fix it either: reaching a legible 10px at 0.46 needs the dimension text at
22 units, and the slot letters sit inside an r=11 circle they would burst.
So the drawing gets a floor width and scrolls sideways instead, which is
exactly what .table-wrap already does for wide tables. At 600px the scale
comes back to 0.90 and a modest bump on the free-standing labels does the
rest. The slot letters keep their authored size because of that circle. */
@media (max-width: 40rem) {
.hero__plan,
.card__plot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hero__plan .plot,
.card__plot .plot { min-width: 600px; }
/* Rides along at the left edge while the drawing scrolls under it, so you
never lose track of which lot you are looking at. */
.hero__plan-caption { position: sticky; left: 0; }
.plot__dim-text { font-size: 11px; }
.plot__cap { font-size: 10px; }
.plot__label { font-size: 12px; }
/* --- Plan tables become cards --------------------------------------------
The unlocked table is five columns wide and one of them carries a product
name, two or three pills and a placement note of two or three sentences.
At 350px that cell gets about 140 and the note comes out as a ribbon four
words wide. Columns are the wrong shape for this on a phone.
So each row becomes a card: the slot letter as the same orange disc that
marks it on the drawing, the name and note full width beneath it, and the
three numbers as labelled rows. The head row is hidden and every cell
names itself from data-label. */
table.items,
table.items tbody,
table.items tr,
table.items th,
table.items td { display: block; width: auto; }
table.items thead { display: none; }
table.items tr,
table.items tr:nth-child(even) {
background: var(--paper);
border: 2.5px solid var(--ink);
border-radius: var(--radius);
box-shadow: 4px 4px 0 var(--line-dark);
padding: .9rem 1rem 1rem;
margin-bottom: 1.1rem;
}
table.items td,
table.items tbody th { padding: 0; border-bottom: 0; }
table.items tr:last-child td,
table.items tr:last-child th { border-bottom: 0; }
/* The slot letter, drawn as the disc it is on the plan, so the card and the
drawing are obviously the same object. A | rather than a | since it
became the row's header. */
table.items th.num {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem; margin-bottom: .55rem;
border-radius: 50%; background: var(--tomato); color: var(--cream);
font-weight: 800; font-size: .9rem; line-height: 1;
}
.items__title { font-size: 1.02rem; }
/* Height, count and cost. Label left, value right, on their own dashed
rules so the numbers stay scannable down the right edge. */
table.items td[data-label] {
display: flex; align-items: baseline;
justify-content: space-between; gap: 1rem;
margin-top: .55rem; padding-top: .55rem;
border-top: 1.5px dashed var(--line);
}
table.items td[data-label]::before {
content: attr(data-label);
font-weight: 700; font-size: .86rem; color: var(--ink-soft);
white-space: nowrap;
}
table.items td[data-label] { text-align: right; }
/* --- The menu ------------------------------------------------------------
Six links used to wrap into two rows of 18px-tall taps, about 110px of
orange before the page even started, and a miss landed on the neighbouring
link rather than on nothing. Now it is one button that opens a panel of
full-width rows.
Each row is 3rem tall and spans the full width, so the target is the whole
strip rather than the word. */
/* Button first, then the wordmark, sharing one line at the left. It used to
sit on its own row under the brand, which cost a whole band of orange and
read as an afterthought rather than as the way in.
It has to be an icon to sit there at all. The wordmark plus its "to scale,
promise" tagline runs about 276px and a button with the word Menu on it
another 100, which together will not fit a 350px line: the flex row wraps
and puts the button back on its own line, which is the thing being fixed.
A 44px disc leaves the brand intact and is a better tap target than the
labelled pill was. The word is still there for screen readers. */
.site-head__inner { justify-content: flex-start; gap: .75rem; }
.brand { flex-wrap: wrap; min-width: 0; }
.nav-button {
order: -1; flex: none;
display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; padding: 0;
color: var(--cream); background: transparent;
border: 2.5px solid var(--cream); border-radius: 50%;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-switch:checked ~ .nav-button { background: var(--cream); color: var(--tomato); }
/* Three bars drawn in one element, so there is no icon dependency and
nothing extra to load. They become an X when the panel is open. */
.nav-button__bars {
position: relative; width: 1.05rem; height: 2px;
background: currentColor; border-radius: 2px;
transition: background .12s ease;
}
.nav-button__bars::before,
.nav-button__bars::after {
content: ''; position: absolute; left: 0;
width: 100%; height: 2px; background: currentColor; border-radius: 2px;
transition: transform .16s ease;
}
.nav-button__bars::before { top: -6px; }
.nav-button__bars::after { top: 6px; }
.nav-switch:checked ~ .nav-button .nav-button__bars { background: transparent; }
.nav-switch:checked ~ .nav-button .nav-button__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-switch:checked ~ .nav-button .nav-button__bars::after { transform: translateY(-6px) rotate(-45deg); }
nav.site-nav { display: none; }
.nav-switch:checked ~ nav.site-nav {
display: flex; flex-direction: column; gap: 0;
width: 100%; order: 3; margin-top: .85rem;
border-top: 2.5px solid rgba(255,255,255,.35);
}
.nav-switch:checked ~ nav.site-nav a {
display: flex; align-items: center; min-height: 3rem;
padding: .15rem 0; font-size: 1.05rem;
border-bottom: 2px dashed rgba(255,255,255,.35);
}
.nav-switch:checked ~ nav.site-nav a:last-child { border-bottom: 0; }
.nav-switch:checked ~ nav.site-nav a:hover { border-bottom-color: var(--butter); }
}
/* The switch itself is never seen at any width. Kept in the layout rather than
display:none so it stays focusable and keyboard operable: space toggles the
panel exactly as it would a button. */
.nav-switch {
position: absolute; width: 1px; height: 1px;
opacity: 0; margin: 0; pointer-events: none;
}
.nav-switch:focus-visible ~ .nav-button {
outline: 3px solid var(--butter); outline-offset: 3px;
}
/* Above the phone breakpoint the button is irrelevant and the nav is the plain
inline row it always was.
The switch goes with it. Opacity and pointer-events hide a checkbox from the
eye and the mouse but leave it in the tab order, so at desktop width every
keyboard user's first Tab after the skip link landed on an invisible control
that toggled a menu which does not exist at that width, with no focus ring to
explain where they were. It is only display:none up here, so on a phone it is
still a real focusable checkbox and the panel still works without script. */
@media (min-width: 40.0625rem) {
.nav-button { display: none; }
.nav-switch { display: none; }
}
/* Motion, all of it.
This block used to cover the three bars of the menu icon and nothing else,
which left the parts that actually move: cards and buttons lift on hover,
chevrons spin, the plan draws itself in. Transitions go to 0.01ms rather than
`none` so anything listening for transitionend still hears it. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* The hover lift is pure decoration, so it goes entirely rather than just
becoming instant.
Note what is deliberately NOT in this list: the chevrons that rotate when a
opens. Those are not decoration, they are how an open panel is
told apart from a shut one, and reduced motion asks for less movement, not
less information. The rule above already makes them turn instantly. */
.card:hover,
.holiday-pick:hover { transform: none; }
} |