To make the pattern look bigger or smaller, change --tile.
The pattern slides slowly as you scroll (not for reduced-motion users). */
.band {
--tile: 30rem; /* size of one repeat */
position: relative;
height: clamp(14rem, 55vw, 30rem);
display: flex;
align-items: end;
padding: var(--pad);
overflow: hidden;
}
/* The pattern itself, filling the band edge to edge */
.band__pattern {
position: absolute;
inset: 0;
background-position: center;
background-size: var(--tile) auto;
background-repeat: repeat;
}
@media (min-width: 48rem) { .band { --tile: 36rem; } }
/* The trellis file already holds 2×2 repeats, so it's shown larger to
match the scale of the other patterns */
/* Bands vary in height so they don't feel like a repeating block:
the trellis is tall, the nazar a thin strip, the talavera in between. */
.band--gulf { height: clamp(7rem, 16vw, 11rem); }
.band--trellis { --tile: 44rem; }
@media (min-width: 48rem) { .band--trellis { --tile: 64rem; } }
.band__tag {
position: relative; /* sits above the pattern */
width: fit-content;
background: var(--limewash);
color: var(--basalt);
padding: 0.45em 0.9em;
border-radius: 99px;
font-size: var(--text-s);
font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.band__pattern {
animation: pattern-slide linear both;
animation-timeline: view();
}
}
}
@keyframes pattern-slide {
from { background-position: center 0; }
to { background-position: center calc(var(--tile) * -0.35); }
}
/* ---- ILLUSTRATION: floating collage on basalt ----------------------
Pieces of different sizes overlap like prints on a table.
Normal (no JavaScript / less motion): a strip you swipe sideways.
With JavaScript, main.js adds "art--pinned": the section sticks to
the screen while you scroll down and the collage floats left. */
.art {
background: var(--basalt);
color: var(--sand);
padding-block: var(--gap);
}
.art .section-head { padding-inline: var(--pad); }
.art__intro { max-width: 46ch; padding-inline: var(--pad); margin-top: calc(var(--title-gap) * -0.5); }
/* The window the collage is seen through. Its height sets the size of
everything inside: 1 "unit" = 1% of this height (1cqh). */
.collage {
height: 72svh;
min-height: 22rem;
container-type: size;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.collage__table {
--table-w: 345; /* table width in units; widen if you add pieces */
position: relative;
width: calc(var(--table-w) * 1cqh);
height: 100%;
margin-inline: var(--pad);
}
.collage__piece {
position: absolute;
left: calc(var(--x) * 1cqh);
top: calc(var(--y) * 1cqh);
height: calc(var(--h) * 1cqh);
rotate: var(--r, 0deg);
z-index: var(--z, 1);
}
.collage__piece figure { position: relative; height: 100%; }
.collage__piece img {
height: 100%;
width: auto;
max-width: none;
box-shadow: 0 1.2cqh 3cqh -1cqh rgb(0 0 0 / 0.5);
transition: scale 0.3s var(--ease, ease);
}
.collage__piece--card img { border-radius: 2.2cqh; }
.collage__piece--round { aspect-ratio: 1; }
.collage__piece--round img { width: 100%; object-fit: cover; border-radius: 50%; }
.collage__piece:hover { z-index: 10; }
.collage__piece:hover img { scale: 1.03; }
/* Caption: a small label that appears on hover (always read by screen readers) */
.collage__piece figcaption {
position: absolute;
left: 0.75rem;
bottom: 0.75rem;
padding: 0.35em 0.8em;
border-radius: 99px;
background: var(--limewash);
color: var(--basalt);
font-size: var(--text-xs);
opacity: 0;
transition: opacity 0.2s;
white-space: nowrap;
}
.collage__piece:hover figcaption { opacity: 1; }
/* ---- Pinned version (switched on by main.js) ---- */
.art--pinned { padding-block: 0; } /* main.js sets the section's height */
.art--pinned .art__pin {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
padding-top: clamp(2rem, 1rem + 4vw, 4rem);
overflow: hidden;
}
.art--pinned .collage {
flex: 1;
height: auto;
min-height: 0;
overflow: visible;
margin-block: 1rem clamp(1rem, 4vh, 2.5rem);
}
.art--pinned .collage__table { will-change: transform; }
/* ---- SHOP TEASER (hidden in the HTML until the shop is live) ------- */
.shop-teaser { padding: var(--gap) var(--pad); display: grid; gap: 1rem; justify-items: start; }
/* ---- GUIDEBOOKS (inside the writing section) -------------------------- */
/* Writing page: the guidebooks are their own section on pink cantera */
.books {
background: var(--cantera);
color: var(--basalt);
padding: var(--gap) var(--pad);
}
.books__lede { margin: 0.75rem 0 var(--title-gap); color: var(--tezontle); } /* large text: 4.1:1 on cantera passes */
/* Homepage: the guidebooks sit at the end of the writing section, on
its sand (the story list's bottom line separates them) */
.writing .books {
background: none;
padding: var(--gap) 0 0;
}
.writing .books__lede {
margin: 0.75rem 0 1rem;
font-family: var(--font-display);
font-size: var(--text-l);
line-height: 1.1;
}
.books__sub { max-width: 46ch; margin-bottom: 2rem; }
/* Homepage: the five covers fill the full width of the section */
@media (min-width: 48rem) {
.writing .covers { grid-template-columns: repeat(5, 1fr); gap: 2rem clamp(1.25rem, 2.5vw, 2.5rem); }
}
.books__note { margin-top: 1rem; font-size: var(--text-s); }
.books__list a { text-decoration: none; }
.books__list a:hover { text-decoration: underline; }
.books__list { border-top: var(--rule); }
.books__list li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.25rem 1rem;
padding-block: 0.8rem;
border-bottom: var(--rule);
font-weight: 600;
}
.books__list li span:last-child { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
/* ---- DRIFTING DRAWINGS ------------------------------------------------
Christabel's hand-drawn elements sway slowly back and forth in the
open space of the cream sections (Shop my patterns, Work with me):
along the top right and beside the bottom link, never across text.
--top/--bottom where it sits vertically
--from where its trip starts (from the left edge)
--travel how far it drifts before turning back
--size, --dur how big, and how long one trip takes
Visitors who prefer less motion see them resting at --from. */
.pattern-shops, .services { position: relative; overflow: hidden; }
.pattern-shops > :not(.drifters), .services > :not(.drifters) { position: relative; z-index: 1; }
.drifters { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.drifter { position: absolute; top: var(--top, auto); bottom: var(--bottom, auto); left: var(--from); width: var(--size); }
.drifter img { width: 100%; height: auto; }
.drifter--a { --top: 0.75rem; --from: 58vw; --travel: 22vw; --size: clamp(2.5rem, 7vw, 6.5rem); --dur: 26s; --delay: -6s; }
.drifter--c { --top: 0.75rem; --from: 62vw; --travel: 20vw; --size: clamp(2.5rem, 6.5vw, 6rem); --dur: 24s; --delay: -4s; }
.drifter--d { --bottom: 0.75rem; --from: 50vw; --travel: 26vw; --size: clamp(2.75rem, 7vw, 6.5rem); --dur: 30s; --delay: -15s; }
@media (prefers-reduced-motion: no-preference) {
.drifter { animation: sway var(--dur) ease-in-out var(--delay) infinite alternate; }
}
@keyframes sway {
from { translate: 0 0; rotate: -7deg; }
50% { translate: calc(var(--travel) / 2) -0.6rem; rotate: 4deg; }
to { translate: var(--travel) 0; rotate: -3deg; }
}
/* phones: a little extra room above the heading for the drawings */
@media (max-width: 47.99rem) {
.pattern-shops, .services { padding-top: calc(var(--gap) + 2.5rem); }
}
/* cards sit on solid paper so nothing shows through them */
.service { background: var(--limewash); }
/* ---- WORK WITH ME -------------------------------------------------- */
.services { padding: var(--gap) var(--pad); }
.services .display { color: var(--tezontle); margin-bottom: 1rem; }
.services__intro { max-width: 46ch; margin-bottom: var(--title-gap); }
.service-list { counter-reset: s; display: grid; gap: 1rem; margin-bottom: 2rem; }
.service {
counter-increment: s;
position: relative;
border: var(--rule);
border-radius: 1rem;
padding: 1.25rem;
display: grid;
gap: 0.75rem;
align-content: start;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { border: 1.5px solid currentColor; border-radius: 99px; padding: 0.3em 0.8em; }
@media (min-width: 60rem) {
.service-list { grid-template-columns: repeat(2, 1fr); }
}
/* ---- PRIVACY (and any other plain text page) ------------------------ */
.legal {
padding: 0 var(--pad) var(--gap);
max-width: calc(46rem + 2 * var(--pad));
}
.legal h2 {
margin: 2.5rem 0 0.75rem;
font-family: var(--font-display);
font-size: var(--text-l);
font-weight: 400;
line-height: 1.1;
color: var(--tezontle);
}
.legal p + p { margin-top: 0.9rem; }
.legal__updated { margin-top: 2.5rem !important; font-size: var(--text-s); }
/* ---- 404 ----------------------------------------------------------- */
.notfound { min-height: 60vh; align-content: start; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; }
/* ---- FOOTER: palm green --------------------------------------------- */
.bottom {
background: var(--palm);
color: var(--limewash);
padding: var(--gap) var(--pad) var(--pad);
}
.bottom__cta { max-width: 14em; }
.bottom__cta span { display: block; color: var(--sand); }
.copy-email {
display: block;
width: 100%;
margin-top: 2.5rem;
padding: 1rem 0;
border: 0;
border-block: var(--rule);
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.copy-email__action { display: block; }
.copy-email__address { font-size: var(--text-s); opacity: 0.85; }
.copy-email:hover .copy-email__action { color: var(--sand); }
.copy-email__status { min-height: 1.5em; margin-top: 0.5rem; font-size: var(--text-s); }
.bottom__grid { display: grid; gap: 1.5rem; margin-block: 2.5rem; }
.bottom__grid .label { margin-bottom: 0.4rem; }
@media (min-width: 48rem) {
.bottom__grid { grid-template-columns: 2fr 1fr 1fr; }
}
}
/* ---- Headline font everywhere a heading appears --------------------------
Section headings already use Affigue (.display). These smaller headings
join them: the bylines ribbon, story headlines, card and book titles,
the hero brand line, FAQ questions and "Click to copy my email".
Affigue has one weight, so no bold is faked. Labels, captions, buttons
and body text stay in Archivo. */
@layer components {
.seen__list, .title, .worklist__title, .service h3, .feature__title,
.faq__item summary, .statement, .copy-email__action, .covers__title {
font-family: var(--font-display);
font-weight: 400;
font-synthesis: none;
font-stretch: normal;
letter-spacing: 0;
}
/* Keep the FAQ's open/close "+" in Archivo: Affigue draws it too small */
.faq__item summary::after { font-family: var(--font); }
}
/* ==========================================================================
5. UTILITIES
========================================================================== */
@layer utilities {
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
}