/* COPY — do not edit. Canonical: frenikadevon/assets/css/brand.css, copied by tools/sync-brand.php. */
/* ==========================================================================
Frenika Devon — BRAND STYLESHEET (the one design system for every site)
--------------------------------------------------------------------------
CANONICAL COPY: frenikadevon/assets/css/brand.css. Every other site ships a
copy made by `php tools/sync-brand.php` (hello/, Simply-Business-Support,
Simply-Creative-Experiences). Edit THIS file, then run the script. Never
edit a copy.
The full written spec — palette, type, components, voice, image rules — is
"Brand Styling.md" in Dropbox/Frenika Devon. Keep the two in step.
Look: warm paper, deep plum ink, a soft serif display face, one confident
berry call-to-action, marigold highlights, and the logo's rainbow as the
signature accent (stripe rule, tape, stickers). Editorial and grown-up,
still joyful.
Load with (in , before any page styles):
========================================================================== */
:root {
/* ---- Paper (backgrounds) ---- */
--paper: #fdf7ef; /* page ground */
--paper-2: #f7ecdf; /* tinted panels, alternate sections */
--paper-3: #efdfcd; /* deeper panel, table stripes */
--card: #fffdf9; /* cards sitting on paper */
--line: #ead9c6; /* hairlines and card borders */
/* ---- Ink (text) ---- */
--ink: #24112f; /* headings + body — deep plum (16.5:1 on paper) */
--ink-soft: #4a3656; /* secondary text (10:1) */
--muted: #6e5d78; /* captions, fine print (5.6:1) */
/* ---- Action + accent colours (all ≥ 4.5:1 with white text) ---- */
--berry: #b0186c; /* PRIMARY: buttons, eyebrows, checkmarks (6.6:1) */
--berry-dark: #8e1257; /* hover */
--berry-tint: #fbe3ee; /* tag / soft-button background */
--marigold: #b45f06; /* heading accent line, stat numbers (large text only) */
--grape: #6a24d6; /* links (7.4:1) */
--teal-deep: #0f766e; /* secondary tag, success */
/* ---- Bright brand colours — DECORATION and dark-band text only ---- */
--pink: #ff4fb8;
--orange: #ff9f1c;
--yellow: #ffe45e;
--teal: #2ec4b6;
--purple: #7b2ff7;
/* ---- Dark band ---- */
--plum: #24112f;
--plum-2: #341a44;
--on-plum: #f7ecdf;
--on-plum-soft: #cdbdd8;
/* ---- Type ---- */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Mulish', 'Segoe UI', system-ui, sans-serif;
--font-hand: 'Caveat', 'Segoe Print', cursive;
/* ---- Shape + depth ---- */
--r-sm: 10px;
--r-md: 16px; /* buttons, inputs */
--r-lg: 26px; /* cards, bands */
--r-pill: 999px;
--shadow-sm: 0 1px 2px rgba(36, 17, 47, .06), 0 6px 16px rgba(36, 17, 47, .06);
--shadow-md: 0 2px 4px rgba(36, 17, 47, .06), 0 18px 40px rgba(36, 17, 47, .10);
--wrap: 1140px;
--gutter: 20px;
/* The rainbow, as one reusable stripe (the logo's arch colours). */
--rainbow: linear-gradient(90deg, var(--pink) 0 25%, var(--teal) 25% 50%, var(--orange) 50% 75%, var(--yellow) 75% 100%);
/* Paper grain, drawn in SVG so no image file ships. */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.65;
color: var(--ink);
background: var(--paper) var(--grain);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--grape); text-underline-offset: 3px; }
a:hover { color: var(--berry); }
p { margin: 0 0 1em; }
strong, b { font-weight: 800; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--yellow); color: var(--ink); }
h1, h2, h3, h4, .display {
font-family: var(--font-display);
font-variation-settings: 'SOFT' 60, 'opsz' 96;
font-weight: 650;
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 .45em;
text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 60, 'opsz' 36; }
h4 { font-size: 1.15rem; line-height: 1.25; letter-spacing: 0; font-variation-settings: 'SOFT' 60, 'opsz' 24; }
/* The second, coloured line of a headline: Create joy. Live boldly.
*/
.accent { color: var(--marigold); }
.accent-berry { color: var(--berry); }
em.soft, .italic { font-style: italic; font-weight: 500; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); }
.lead strong { color: var(--ink); }
.small, small { font-size: .88rem; }
.muted { color: var(--muted); }
.hand { font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; line-height: 1.1; color: var(--berry); }
/* ==========================================================================
Layout
========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 780px; }
.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.section-tint { background: var(--paper-2) var(--grain); }
.center { text-align: center; }
.center .lead, .center .section-intro { margin-left: auto; margin-right: auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stack > * + * { margin-top: 14px; }
/* Section heading block: eyebrow, h2, intro. */
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-intro { font-size: 1.12rem; color: var(--ink-soft); max-width: 680px; }
/* ==========================================================================
Signature details
========================================================================== */
/* Eyebrow: small caps label above a heading. */
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: .78rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--berry);
margin-bottom: 14px;
}
/* Tag: the eyebrow on a tinted label (hero "kicker"). */
.tag {
display: inline-block;
padding: 8px 14px;
border-radius: var(--r-sm);
background: var(--berry-tint);
color: var(--berry);
font-size: .76rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1.5;
}
.tag-teal { background: #dcf3ef; color: var(--teal-deep); }
.tag-plum { background: var(--plum); color: var(--yellow); }
/* Rainbow rule: the short four-colour stripe under a headline. */
.rule {
display: block;
width: 72px;
height: 4px;
border: 0;
border-radius: 4px;
background: var(--rainbow);
margin: 22px 0 26px;
}
.center .rule, .rule.center { margin-left: auto; margin-right: auto; }
/* Highlighter: a marker swipe behind a word. */
.mark { background: linear-gradient(transparent 58%, rgba(255, 228, 94, .75) 58% 92%, transparent 92%); padding: 0 .08em; }
/* Polaroid photo, tilted, with a strip of tape. */
.polaroid {
position: relative;
display: inline-block;
background: #fff;
padding: 14px 14px 18px;
box-shadow: var(--shadow-md);
transform: rotate(-2deg);
margin: 0;
}
.polaroid img { display: block; width: 100%; }
.polaroid.tilt-right { transform: rotate(2deg); }
.polaroid.no-tilt { transform: none; }
.polaroid::before { /* tape */
content: "";
position: absolute;
top: -14px; left: 50%;
width: 110px; height: 30px;
transform: translateX(-50%) rotate(-3deg);
background: rgba(255, 228, 94, .72);
box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.polaroid.tape-pink::before { background: rgba(255, 79, 184, .45); }
.polaroid.tape-teal::before { background: rgba(46, 196, 182, .5); }
.polaroid figcaption, .polaroid .caption {
font-family: var(--font-hand);
font-size: 1.45rem;
line-height: 1.1;
color: var(--ink-soft);
text-align: center;
padding-top: 12px;
}
/* Sticker: a round badge that sits on a corner. */
.sticker {
display: inline-grid;
place-items: center;
width: 108px; height: 108px;
border-radius: 50%;
background: var(--yellow);
color: var(--ink);
font-family: var(--font-hand);
font-weight: 700;
font-size: 1.35rem;
line-height: 1;
text-align: center;
padding: 12px;
transform: rotate(-10deg);
box-shadow: var(--shadow-sm);
}
.sticker-pink { background: var(--pink); color: #fff; }
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
padding: 0 30px;
border: 2px solid transparent;
border-radius: var(--r-md);
background: var(--berry);
color: #fff;
font-family: var(--font-display);
font-variation-settings: 'SOFT' 60, 'opsz' 24;
font-size: 1.15rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--berry-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn .arrow, .btn-arrow::after { transition: transform .15s ease; }
.btn-arrow::after { content: "→"; font-family: var(--font-body); font-weight: 700; }
.btn:hover .arrow, .btn-arrow:hover::after { transform: translateX(3px); }
.btn-primary { background: var(--berry); color: #fff; }
/* Outline: the quieter second choice beside a primary button. */
.btn-outline, .btn-secondary, .btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-outline:hover, .btn-secondary:hover, .btn-ghost:hover { background: var(--ink); color: var(--paper); }
/* Small: uppercase pill for nav bars and compact rows. */
.btn-sm {
white-space: nowrap;
min-height: 44px;
padding: 0 22px;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: .8rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* On a plum band. */
.btn-light { background: var(--yellow); color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); }
.btn-outline-light { background: transparent; color: var(--on-plum); border-color: var(--on-plum); }
.btn-outline-light:hover { background: var(--on-plum); color: var(--ink); }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.buttons, .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .buttons, .center .btn-row { justify-content: center; }
/* ==========================================================================
Top bar, header, footer
========================================================================== */
.topbar {
background: var(--plum);
color: var(--on-plum);
font-size: .9rem;
text-align: center;
padding: 10px var(--gutter);
}
.topbar a { color: var(--yellow); font-weight: 800; }
.topbar::after { content: ""; display: block; height: 3px; background: var(--rainbow); margin: 10px calc(-1 * var(--gutter)) -10px; }
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(253, 247, 239, .94);
-webkit-backdrop-filter: saturate(1.2) blur(8px);
backdrop-filter: saturate(1.2) blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header .nav {
max-width: var(--wrap);
margin: 0 auto;
padding: 12px var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-mark img { height: 52px; width: auto; }
.brand-mark .name { white-space: nowrap; font-family: var(--font-display); font-variation-settings: 'SOFT' 60; font-weight: 650; font-size: 1.25rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) {
white-space: nowrap;
color: var(--ink);
text-decoration: none;
font-size: .82rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--berry); }
.nav-toggle {
display: none;
background: none;
border: 2px solid var(--ink);
border-radius: var(--r-sm);
width: 46px; height: 42px;
font-size: 1.3rem;
color: var(--ink);
cursor: pointer;
}
.site-footer {
background: var(--plum);
color: var(--on-plum-soft);
padding: 64px 0 28px;
font-size: .95rem;
}
.site-footer::before { content: ""; display: block; height: 4px; background: var(--rainbow); margin-top: -64px; margin-bottom: 60px; }
.site-footer h4, .site-footer .footer-title { color: var(--on-plum); font-size: 1.2rem; margin-bottom: 14px; }
.site-footer a { color: var(--on-plum); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-bottom {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
margin-top: 44px; padding-top: 20px;
border-top: 1px solid rgba(247, 236, 223, .16);
font-size: .85rem;
}
/* A single-line footer (small pages). */
.site-footer.simple { padding: 34px 0; text-align: center; }
.site-footer.simple::before { margin-top: -34px; margin-bottom: 30px; }
/* ==========================================================================
Cards, panels, bands
========================================================================== */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(24px, 3vw, 34px);
box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .4em; }
.card-lift { transition: transform .18s ease, box-shadow .18s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* A coloured bar across the top of a card; set --bar to a bright brand colour. */
.card-bar { border-top: 6px solid var(--bar, var(--pink)); }
.panel { background: var(--paper-2); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); }
/* Callout: a note with a berry rule down its left edge. */
.callout {
background: var(--card);
border-left: 4px solid var(--berry);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: 18px 22px;
color: var(--ink-soft);
}
.callout strong { color: var(--ink); }
/* Dark band: a full-width plum section for emphasis (stats, CTA, promise). */
.band-plum {
background: var(--plum);
color: var(--on-plum);
}
.band-plum h1, .band-plum h2, .band-plum h3, .band-plum h4 { color: var(--on-plum); }
.band-plum .accent { color: var(--yellow); }
.band-plum .eyebrow { color: var(--yellow); }
.band-plum .lead, .band-plum .section-intro, .band-plum p { color: var(--on-plum-soft); }
.band-plum a:not(.btn) { color: var(--yellow); }
.band-plum .rule { opacity: .95; }
/* Stats row: big serif numbers, small caps labels, hairline dividers. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); text-align: center; }
.stat { padding: 10px 18px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .num { font-family: var(--font-display); font-variation-settings: 'SOFT' 60, 'opsz' 96; font-weight: 650; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--marigold); }
.stat .label { margin-top: 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.band-plum .stat .num { color: var(--yellow); }
.band-plum .stat .label { color: var(--on-plum-soft); }
.band-plum .stat + .stat { border-color: rgba(247, 236, 223, .18); }
/* Checklist: berry ticks. */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--berry); font-weight: 900; font-size: 1.15rem; }
.band-plum .checklist li::before { color: var(--yellow); }
/* Numbered steps: big serif numerals. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.steps > li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.steps > li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 650; font-size: 2.2rem; line-height: 1; color: var(--marigold); margin-bottom: 12px; }
/* Link card: a whole-card link with a badge, title, text and arrow (hello page, lists). */
.link-card {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 18px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 20px 24px;
color: var(--ink);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.link-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--berry); }
.link-card h3 { font-size: 1.3rem; margin: 6px 0 4px; }
.link-card p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.link-card .go {
display: grid; place-items: center;
width: 46px; height: 46px; border-radius: 50%;
background: var(--berry); color: #fff; font-weight: 800;
transition: transform .15s ease;
}
.link-card:hover .go { transform: translateX(3px); }
/* ==========================================================================
Forms
========================================================================== */
.field, input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], textarea, select {
width: 100%;
min-height: 54px;
padding: 12px 16px;
border: 1.5px solid #d9c5b1;
border-radius: var(--r-md);
background: #fff;
font: inherit;
font-size: 1rem;
color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--berry); box-shadow: 0 0 0 4px rgba(176, 24, 108, .14); }
label { font-weight: 700; }
::placeholder { color: #9a8aa3; }
/* Signup forms (every .vip-form on every site posts via fetch). */
.vip-form { display: flex; flex-wrap: wrap; gap: 12px; }
.vip-form input[type=text], .vip-form input[type=email] { flex: 1 1 200px; }
.vip-form .btn { flex: 0 0 auto; }
.vip-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vip-message { margin: 12px 0 0; min-height: 1.4em; font-weight: 700; }
.vip-message.is-success { color: var(--teal-deep); }
.vip-message.is-error { color: #b42318; }
.band-plum .vip-message.is-success { color: var(--teal); }
.band-plum .vip-message.is-error { color: #ffb4a8; }
/* ==========================================================================
FAQ
========================================================================== */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 24px; margin-bottom: 12px; }
.faq summary {
list-style: none;
cursor: pointer;
padding: 20px 34px 20px 0;
position: relative;
font-family: var(--font-display);
font-variation-settings: 'SOFT' 60, 'opsz' 24;
font-weight: 600;
font-size: 1.18rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 800; font-size: 1.4rem; color: var(--berry); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); padding-bottom: 20px; margin: 0; }
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 900px) {
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-grid > :first-child { grid-column: 1 / -1; }
.stat + .stat { border-left: 0; }
}
/* The nav folds into the ☰ menu below 980px — early enough for a site with
six or seven links (Simply Business Support) to stay on one line above it. */
@media (max-width: 980px) {
.nav-toggle { display: inline-grid; place-items: center; }
.site-header .nav { flex-wrap: wrap; }
.nav-links {
display: none;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 6px 0 10px;
}
.nav-links.open { display: flex; }
.nav-links a:not(.btn) { padding: 13px 0; border-top: 1px solid var(--line); }
.nav-links .btn { margin-top: 10px; }
}
@media (max-width: 760px) {
body { font-size: 17px; }
/* A long site name wraps rather than pushing the menu button off the row. */
.site-header .nav { flex-wrap: nowrap; }
.site-header .nav:has(.nav-links.open) { flex-wrap: wrap; }
.brand-mark { min-width: 0; }
.brand-mark .name { white-space: normal; font-size: 1.08rem; line-height: 1.15; }
.brand-mark img { height: 44px; }
.btn { min-height: 52px; padding: 0 24px; font-size: 1.05rem; }
.polaroid { transform: rotate(-1deg); }
.link-card { padding: 18px; }
.footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Buttons inside cards run a size down so labels stay on one line. */
.card .btn:not(.btn-sm) { min-height: 50px; padding: 0 22px; font-size: 1.02rem; }
/* Note card: a ruled paper note with tape, tilted — "a note from me to you".
Pair with .sticker inside for the signed corner. */
.note {
position: relative;
background: var(--card) repeating-linear-gradient(transparent 0 35px, rgba(176, 24, 108, .08) 35px 36px);
border: 1px solid var(--line);
border-radius: 6px;
padding: 44px 38px 34px;
box-shadow: var(--shadow-md);
transform: rotate(1.5deg);
max-width: 460px;
}
.note::before {
content: ""; position: absolute; top: -15px; left: 50%;
width: 120px; height: 32px; transform: translateX(-50%) rotate(-2deg);
background: rgba(255, 79, 184, .42);
}
.note h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.note .checklist { margin-top: 18px; }
.note .sticker { position: absolute; right: -6px; bottom: -34px; } /* its tilted footprint stays inside the 20px page gutter */
@media (max-width: 900px) {
.note { margin: 30px auto 0; transform: rotate(1deg); }
.note .sticker { right: -8px; }
}
/* Skip link for keyboard users: hidden until focused. */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 800; }
.skip:focus { left: 8px; }
/* ==========================================================================
Blog cards — posts picked in the blog editor's "Show on homepages" box,
drawn by blog-cards.php. Same anatomy as the blog's featured cards: image
on top (16:10), meta line, serif title, excerpt, "Read the post →".
========================================================================== */
.blog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-cards.count-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.blog-cards.count-2 { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.blog-card {
display: flex; flex-direction: column;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); border-bottom: 4px solid transparent; border-image: var(--rainbow) 1; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; flex: 1; }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.blog-card h3 { font-size: 1.35rem; margin: 2px 0 0; }
.blog-card h3 a { color: var(--ink); text-decoration: none; }
.blog-card h3 a:hover { color: var(--berry); }
.blog-card p { color: var(--ink-soft); font-size: 1rem; margin: 0; flex: 1; }
.blog-card-more { margin-top: 6px; font-family: var(--font-display); font-weight: 600; color: var(--berry); text-decoration: none; }
.blog-card-more:hover span { margin-left: 4px; }
.blog-cards-more { margin-top: 34px; }
@media (max-width: 900px) {
.blog-cards, .blog-cards.count-2 { grid-template-columns: 1fr; }
}
/* In a single narrow column (the hello page), stack regardless of count. */
.links .blog-cards { grid-template-columns: 1fr; }
/* ==========================================================================
Signup form (lib/signup.php) — one list: name + email in a row; several
lists: fields stacked, then a ticked checkbox card per list.
========================================================================== */
.signup-form.has-lists { flex-direction: column; align-items: stretch; }
.signup-form.has-lists input[type=text], .signup-form.has-lists input[type=email] { flex: none; }
.signup-form.has-lists .btn { align-self: flex-start; }
.signup-lists { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 10px; }
.signup-lists legend { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; padding: 0; margin-bottom: 8px; }
.signup-list {
display: flex; gap: 12px; align-items: flex-start;
background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md);
padding: 12px 14px; cursor: pointer; font-weight: 400; color: var(--ink);
}
.signup-list:hover { border-color: var(--berry); }
.signup-list input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--berry); flex: 0 0 auto; }
.signup-list strong { display: block; }
.signup-list small { display: block; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
/* On a plum band the fields and list cards sit on light paper for legibility. */
.band-plum .signup-lists legend { color: var(--on-plum); }
.band-plum .btn:not(.btn-outline-light) { background: var(--yellow); color: var(--ink); }
.band-plum .btn:not(.btn-outline-light):hover { background: #fff; color: var(--ink); }
.signup-band .grid-2 { align-items: start; }
@media (max-width: 560px) {
.vip-form:not(.has-lists) .btn, .signup-form.has-lists .btn { width: 100%; }
}
/* Social icons (lib/social-icons.php) — round outline buttons; on the plum
footer they're cream and turn yellow on hover. */
.social-icons { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; }
.social-icons a {
display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 50%;
border: 1.5px solid var(--line); color: var(--ink);
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.social-icons a:hover { background: var(--berry); border-color: var(--berry); color: #fff; transform: translateY(-2px); }
.site-footer .social-icons a, .band-plum .social-icons a { border-color: rgba(247, 236, 223, .35); color: var(--on-plum); text-decoration: none; }
.site-footer .social-icons a:hover, .band-plum .social-icons a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
/* A header with only a button (no text links): no ☰ menu, the button stays in the bar. */
@media (max-width: 980px) {
.nav-links.solo { display: flex; width: auto; flex-direction: row; padding: 0; }
.nav-links.solo .btn { margin-top: 0; }
}
/* On phones a lone header button goes compact so it never covers the name. */
@media (max-width: 560px) {
.nav-links.solo { flex-shrink: 0; }
.nav-links.solo .btn-sm { min-height: 38px; padding: 0 14px; font-size: .68rem; letter-spacing: .06em; }
}