/* The theme, laid over Karli's OTHER app.
*
* /links is served by a different program — the one that also runs her admin
* panel — whose source is not in this workspace. Karli asked three times for it
* to look like the rest of her site; the third time, on 2026-08-10: "So at this
* page https://karliyarber.com/links the theme has not been updated. I want it
* to match the rest of the website."
*
* This file is how that is done without forking a live site. The proxy in
* router.ts adds one to this stylesheet at the end of the of her
* HTML pages (applyLinksTheme in pages.ts) and changes nothing else. Her markup
* is hers, her /style.css is hers, and the five theme colors her admin panel
* writes into her document head are hers — this only paints the cloth, floats
* her blocks onto white cards and puts the wildflowers under her name.
*
* FOUR RULES FOR EDITING THIS FILE, and every one of them is a way it breaks:
*
* 1. NEVER declare a custom property her app already uses. --button-bg,
* --button-text, --page-bg, --accent and --text are written into her
* document head from HER database, and redeclaring one here would silently
* override a color she set in her own admin panel. Everything invented here
* is prefixed --ky- for exactly that reason, and hers are only ever READ.
* 2. Selectors here belong to another project. Anything targeted by class name
* is a class HER app writes, so a rename over there costs this page part of
* its theme — and nothing here throws, 404s or fails a test when that
* happens. It degrades to her own perfectly good design, which is why this
* is a safe thing to do at all. Never make a layout DEPEND on one of them.
* 3. Add nothing that changes what the page DOES. No display:none on one of
* her cards, no reordering, no hiding a disclosure the FTC wants visible.
* This is paint.
* 4. Her admin panel is never served this file. See router.ts.
*
* The palette is site.css's, and site.css is the one place it is declared; the
* values below are copied because this sheet loads into a document that does
* not have site.css. `pages.test.ts` fails if a color used here is not in
* site.css's :root, which is the drift that would otherwise creep in unseen.
*/
:root {
/* The gingham cloth: two bands of ONE translucent tint crossing, because the
overlap is what makes the dark square. Three colors gives graph paper. */
--ky-gingham: rgba(100, 125, 94, 0.14);
--ky-gingham-cell: 21px;
--ky-card: #ffffff;
--ky-line: rgba(0, 0, 0, 0.09);
--ky-muted: rgba(0, 0, 0, 0.58);
--ky-radius-lg: 16px;
/* What floats a white card off the cloth. Without it the pattern runs edge to
edge behind everything and the page reads as one busy sheet. */
--ky-lift: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.06);
}
/* ---- the cloth ----
background-image and background-color as LONGHANDS, never the `background:`
shorthand. Safari drops a shorthand whose custom property expands to a
multi-layer value, so the cloth would be missing on exactly the phone Karli
reviews her site on. Her own rule is `background: var(--page-bg)`, which this
overrides for the image only — the color underneath stays whatever she set. */
body {
background-image:
repeating-linear-gradient(
90deg,
var(--ky-gingham) 0 var(--ky-gingham-cell),
transparent var(--ky-gingham-cell) calc(var(--ky-gingham-cell) * 2)
),
repeating-linear-gradient(
0deg,
var(--ky-gingham) 0 var(--ky-gingham-cell),
transparent var(--ky-gingham-cell) calc(var(--ky-gingham-cell) * 2)
);
background-attachment: fixed;
}
/* ---- every word sits on white ----
The same rule as site.css, and for the same reason: Karli, 2026-08-10, "I
like the gingham you used but it seems like some of the words are hard to
read. Maybe all the text should have white boxes behind it." Her green
discount cards are already solid, so what needs a card here is everything
AROUND them — her name and bio, the section headings, the disclosure, the
contact block and the sign-off, plus the blocks on a brand's own page. */
.profile,
.disclosure,
.section,
.contactblock,
.footer,
.brandhead,
.story,
.brandposts,
.worksection {
border-radius: var(--ky-radius-lg);
border: 1px solid var(--ky-line);
background: var(--ky-card);
box-shadow: var(--ky-lift);
}
.profile {
padding: 26px 18px 22px;
/* Room under the card for the flowers, which hang off it below. */
margin-bottom: 78px;
}
.section {
padding: 18px 16px 6px;
}
/* Her cards keep their own 12px gap; the last one would otherwise leave a strip
of white under it inside the card. */
.section .card:last-child,
.section .card--shot:last-child {
margin-bottom: 12px;
}
.disclosure {
/* Hers is a terracotta tint. Terracotta is the alarm color on the rest of the
site and nothing else, and this is small print rather than an alarm —
Karli reported the leftover orange twice, so it does not get a third
hiding place. */
background: var(--ky-card);
color: var(--ky-muted);
padding: 12px 16px;
}
.contactblock {
padding: 20px 16px;
}
/* Her "Contact me" button carries its own top margin for a page where it sat
straight on the background. Inside a card, that is the card's padding twice. */
.contactblock .cta {
margin-top: 0;
}
.footer {
padding: 18px 16px;
}
.brandhead,
.story,
.brandposts,
.worksection {
padding: 18px 16px;
}
/* ---- one color draws the site ----
Karli, 2026-08-10, twice: "I'm also not loving the mostly orange theme with a
random green button or something thrown in", then "The line under my name is
still orange and so is the circle around my photo." She fixed the first page
she looked at and this one still had all three, because her app paints them
from --accent. Green is what you tap, everywhere. */
.squiggle {
color: var(--button-bg);
}
.profile__avatar {
box-shadow: 0 0 0 3px var(--page-bg), 0 0 0 4.5px var(--button-bg);
}
.social {
color: var(--button-bg);
}
.social:active {
background: var(--button-bg);
}
.backlink:active,
.sample__body:active .sample__where {
color: var(--button-bg);
}
/* Her footer paints every link inside it with `.footer a { color: inherit }`,
which beats a bare `.social` on specificity — so the two social buttons at the
bottom of a brand page came out gray while the identical pair at the top of
/links came out green. Same object, same color. */
.footer .social {
color: var(--button-bg);
}
/* The discount pill on a brand's page: a terracotta tint in her sheet. It takes
the cloth's own tint rather than a new one, so there is still exactly one
translucent green on this site. */
.brandhead__discount {
background: var(--ky-gingham);
color: var(--button-bg);
}
.services li::before {
background: var(--button-bg);
}
/* The one-second "copied!" flash on a discount stub. It was terracotta on a
green card; white reads as "this just lit up" without putting the orange
back on a page she has already twice asked to be one color. */
.chip.is-copied {
background: rgba(255, 255, 255, 0.34);
}
/* ---- the wildflowers ----
Markup is impossible here — the proxy adds one and no elements — so
this is /_home/meadow.svg, which the server draws from the same row of sprigs
MEADOW uses on our own pages (see meadowSvg in pages.ts). It hangs off the
bottom of the header card, out to the column's padding edges rather than
inside them, so it reads as a border running off the page. */
.profile,
.brandhead {
position: relative;
}
.profile::after,
.brandhead::after {
content: "";
position: absolute;
left: -16px;
right: -16px;
top: 100%;
height: 44px;
margin-top: 20px;
background-image: url("/_home/meadow.svg");
background-repeat: repeat-x;
background-position: center bottom;
pointer-events: none;
}
.brandhead {
margin-bottom: 78px;
}