/* Willem's Trash Can Cleaning — "Annotated Notebook" theme.
Desk (kraft/tan) -> ruled paper pad -> white sticker fields.
Handwriting (Caveat, blue ink) is DECORATIVE only; functional text stays
in legible Nunito. Vanilla CSS. One screen. Phone-first. No build step.
Class names match the existing markup + app.js hooks:
.wrap .site-header .mark .eyebrow .site-title .site-tagline
.tray > .core (desk pad -> ruled sheet)
.price-badge .steps .num .txt .btn .field .field-label .hint
.consent-note .checkbox .total-line .alert .field-error .hp
.confirm .check .summary .next-steps .site-footer .view[hidden]
*/
:root {
/* earthy desk (tan/kraft) */
--bg: #d9c7a8;
--bg-2: #cdb894;
/* paper pad + ruled sheet */
--tray: #efe4cf; /* pad rim */
--tray-2: #e3d3b3;
--card: #fcfaf4; /* the paper sheet */
--paper-line: #dbe6ec; /* faint ruled line */
--paper-margin: #eab9b1; /* red margin rule */
/* ink + nature */
--ink: #22324a; /* legible near-navy body */
--ink-blue: #2f52b0; /* ballpoint blue — handwriting */
--ink-blue-deep: #24408c;
--muted: #6f7787;
--brand: #2f7d4f; /* forest — the action color */
--brand-dark: #215c3a;
--brand-bright: #37a866;
--green-soft: #e7f2ea;
--green-soft-line: #c8e0d0;
/* kraft/tan accent */
--kraft: #efe0c6;
--kraft-line: #d8c19a;
--kraft-ink: #8a6d3b;
--error-bg: #fbe9e5;
--error-ink: #a5342a;
--error-line: #f0c6bd;
--hair: rgba(70, 52, 20, 0.14);
--hair-2: rgba(70, 52, 20, 0.08);
--tape: rgba(212, 196, 160, 0.65);
--r-lg: 24px;
--r-md: 15px;
--r-sm: 11px;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--shadow-pad: 0 22px 44px -20px rgba(70, 52, 20, 0.45), 0 4px 10px -4px rgba(70, 52, 20, 0.25);
--shadow-field: 0 2px 0 rgba(70, 52, 20, 0.06), 0 8px 18px -12px rgba(70, 52, 20, 0.35);
--inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Dark mode via system preference. A JS toggle (.force-dark / .force-light on
) overrides it for the on-page switch. */
@media (prefers-color-scheme: dark) {
:root {
--bg: #20242a; --bg-2: #171a1f;
--tray: #2c333b; --tray-2: #20262d; --card: #242a31;
--paper-line: #2f3b47; --paper-margin: #6e453f;
--ink: #e9edf2; --ink-blue: #8fb4ff; --ink-blue-deep: #a9c6ff; --muted: #9aa4b2;
--brand: #57c98a; --brand-dark: #45b075; --brand-bright: #6ad79a;
--green-soft: #1e352a; --green-soft-line: #315442;
--kraft: #2f2a22; --kraft-line: #443b2b; --kraft-ink: #cdb88c;
--error-bg: #3a2320; --error-ink: #f3b5ad; --error-line: #5c332d;
--hair: rgba(255, 255, 255, 0.12); --hair-2: rgba(255, 255, 255, 0.06);
--tape: rgba(255, 255, 255, 0.06);
--shadow-pad: 0 24px 50px -20px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
--shadow-field: 0 2px 0 rgba(0, 0, 0, 0.2), 0 8px 18px -12px rgba(0, 0, 0, 0.5);
--inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
}
/* Manual overrides from the toggle (win over the media query) */
html.force-light { color-scheme: light; }
html.force-dark {
color-scheme: dark;
--bg: #20242a; --bg-2: #171a1f;
--tray: #2c333b; --tray-2: #20262d; --card: #242a31;
--paper-line: #2f3b47; --paper-margin: #6e453f;
--ink: #e9edf2; --ink-blue: #8fb4ff; --ink-blue-deep: #a9c6ff; --muted: #9aa4b2;
--brand: #57c98a; --brand-dark: #45b075; --brand-bright: #6ad79a;
--green-soft: #1e352a; --green-soft-line: #315442;
--kraft: #2f2a22; --kraft-line: #443b2b; --kraft-ink: #cdb88c;
--error-bg: #3a2320; --error-ink: #f3b5ad; --error-line: #5c332d;
--hair: rgba(255, 255, 255, 0.12); --hair-2: rgba(255, 255, 255, 0.06);
--tape: rgba(255, 255, 255, 0.06);
--shadow-pad: 0 24px 50px -20px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
--shadow-field: 0 2px 0 rgba(0, 0, 0, 0.2), 0 8px 18px -12px rgba(0, 0, 0, 0.5);
--inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100dvh;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
line-height: 1.5;
font-size: 16.5px;
background: radial-gradient(130% 100% at 50% -10%, var(--bg) 0%, var(--bg-2) 70%) fixed;
-webkit-font-smoothing: antialiased;
}
/* paper-grain on the desk — fixed + non-interactive */
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
opacity: 0.06;
background-image: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) { body::before { opacity: 0.03; } }
html.force-dark body::before { opacity: 0.03; }
html.force-light body::before { opacity: 0.06; }
.wrap { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; padding: 22px 16px 40px; }
/* Header — handwritten -------------------------------------------------------*/
.site-header { text-align: center; padding: 10px 4px 16px; }
.mark {
width: 60px; height: 60px; margin: 0 auto 12px;
display: grid; place-items: center; border-radius: 18px;
background: linear-gradient(160deg, var(--brand-bright), var(--brand-dark));
box-shadow: 0 10px 20px -8px rgba(28, 90, 55, 0.55), var(--inset-hi);
transform: rotate(-4deg);
}
.mark svg { width: 32px; height: 32px; }
.eyebrow {
display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--kraft-ink); background: var(--kraft);
border: 1px solid var(--kraft-line); padding: 5px 11px; border-radius: 999px; margin-bottom: 10px;
box-shadow: var(--inset-hi);
}
.site-title {
font-family: "Caveat", cursive; font-weight: 700; color: var(--ink-blue);
font-size: 3.1rem; line-height: 0.95; margin: 0 0 4px; letter-spacing: 0.5px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.site-tagline {
font-family: "Caveat", cursive; color: var(--ink-blue-deep); font-size: 1.12rem;
margin: 0 auto; font-weight: 600; max-width: 30ch; line-height: 1.2; text-wrap: balance;
}
.site-tagline .wink { font-style: italic; opacity: 0.85; }
/* The paper pad (double-bezel: desk -> pad rim -> ruled sheet) ---------------*/
.tray {
background: linear-gradient(180deg, var(--tray), var(--tray-2));
border-radius: var(--r-lg); padding: 8px; box-shadow: var(--shadow-pad);
position: relative;
opacity: 0; transform: translateY(20px);
animation: rise 0.8s var(--ease) forwards;
}
@media (prefers-reduced-motion: reduce) { .tray { animation: none; opacity: 1; transform: none; } }
/* a piece of tape at the top of the pad */
.tray::before {
content: ""; position: absolute; top: -9px; left: 50%;
transform: translateX(-50%) rotate(-1.5deg);
width: 104px; height: 22px; background: var(--tape);
border: 1px solid rgba(120, 96, 50, 0.25); border-radius: 3px;
box-shadow: 0 2px 5px rgba(70, 52, 20, 0.18); opacity: 0.9;
}
.core {
position: relative; background: var(--card); border-radius: calc(var(--r-lg) - 8px);
padding: 22px 20px 24px 30px; box-shadow: var(--inset-hi); overflow: hidden;
/* ruled lines live ONLY on the sheet — faint so baseline drift never reads as a bug */
background-image: repeating-linear-gradient(
to bottom, transparent 0, transparent 33px, var(--paper-line) 33px, var(--paper-line) 33.6px);
background-position: 0 6px;
}
/* red margin rule down the left */
.core::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 1.5px;
background: var(--paper-margin); opacity: 0.45;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
/* Price scribble — hand-circled note ---------------------------------------*/
.price-badge {
font-family: "Caveat", cursive; font-weight: 700; color: var(--brand-dark);
font-size: 1.5rem; line-height: 1; display: inline-flex; align-items: center;
margin: 0 0 10px; transform: rotate(-1.5deg); background: none;
border: 2px solid var(--brand); border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
padding: 2px 14px;
}
.price-badge .dot { display: none; }
h2 { font-family: "Caveat", cursive; font-weight: 700; color: var(--ink-blue); font-size: 2rem; line-height: 1; margin: 2px 0 2px; }
.muted { color: var(--muted); margin: 0 0 14px; font-size: 0.92rem; }
/* Steps — handwritten checklist (restyle the counter into a checkbox) ---*/
.steps { list-style: none; margin: 0 0 20px; padding: 0; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; min-height: 34px; border: 0; }
.steps .num {
flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
border: 2px solid var(--brand); border-radius: 6px 5px 5px 6px;
display: grid; place-items: center; color: var(--brand-dark); background: #fff;
}
html.force-dark .steps .num { background: transparent; }
@media (prefers-color-scheme: dark) { .steps .num { background: transparent; } }
html.force-light .steps .num { background: #fff; }
.steps .num::before {
content: "";
width: 12px; height: 12px;
background: no-repeat center/contain
url("data:image/svg+xml;utf8,");
}
/* brighter checkmark stroke in dark mode */
html.force-dark .steps .num::before {
background-image: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) {
.steps .num::before {
background-image: url("data:image/svg+xml;utf8,");
}
}
html.force-light .steps .num::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* jitter each checkbox so they look hand-placed, not stamped */
.steps li:nth-child(1) .num { transform: rotate(-4deg); }
.steps li:nth-child(2) .num { transform: rotate(2deg); }
.steps li:nth-child(3) .num { transform: rotate(-1.5deg); }
.steps li:nth-child(4) .num { transform: rotate(3deg); }
.steps li:nth-child(5) .num { transform: rotate(-2.5deg); }
.steps span.txt { font-size: 0.98rem; padding-top: 3px; }
/* Buttons -------------------------------------------------------------------*/
.btn {
font-family: "Nunito", sans-serif; font-size: 1.05rem; font-weight: 800; border: none; border-radius: 999px;
padding: 15px 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
transition: transform 0.5s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn-block { width: 100%; }
.btn-primary {
color: #fff; background: linear-gradient(165deg, var(--brand-bright), var(--brand-dark));
box-shadow: 0 12px 24px -12px rgba(30, 90, 55, 0.7), var(--inset-hi);
}
.btn-primary:hover { box-shadow: 0 16px 30px -12px rgba(30, 90, 55, 0.8); }
.btn-primary:active { transform: scale(0.975); }
.btn-primary:disabled { opacity: 0.7; cursor: default; transform: none; }
.btn-primary .ico {
width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.2);
display: grid; place-items: center; transition: transform 0.5s var(--ease);
}
.btn-primary:hover .ico { transform: translateX(3px); }
.btn-primary .ico svg { width: 15px; height: 15px; }
.btn-link {
background: transparent; color: var(--ink-blue);
font-family: "Caveat", cursive; font-size: 1.3rem; font-weight: 700; margin-top: 6px;
}
.btn-link:hover { color: var(--ink-blue-deep); }
@media (prefers-reduced-motion: reduce) { .btn, .btn-primary .ico { transition: none; } }
/* Form — white "sticker" fields resting on the paper ------------------------*/
.field { display: block; margin-bottom: 14px; }
.field-label {
display: block; font-family: "Caveat", cursive; font-size: 1.35rem; font-weight: 700;
color: var(--ink-blue); margin-bottom: 3px; line-height: 1;
}
.hint { font-family: "Nunito", sans-serif; font-weight: 400; color: var(--muted); font-size: 0.8rem; }
input, select {
width: 100%; padding: 13px 15px; font-size: 1rem; font-family: "Nunito", sans-serif; font-weight: 600;
color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r-sm);
background: #fff; box-shadow: var(--shadow-field); -webkit-appearance: none; appearance: none;
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
html.force-dark input, html.force-dark select { background: #2b323a; }
@media (prefers-color-scheme: dark) { input, select { background: #2b323a; } }
html.force-light input, html.force-light select { background: #fff; }
input[type="number"] { -moz-appearance: textfield; }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 125, 79, 0.16), var(--shadow-field); }
select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}
.consent-note {
font-family: "Nunito", sans-serif; font-size: 0.78rem; color: var(--muted);
background: #fff; border: 1px dashed var(--hair); border-radius: var(--r-sm);
padding: 10px 12px; margin: 0 0 14px; box-shadow: var(--shadow-field);
}
html.force-dark .consent-note { background: #2b323a; }
@media (prefers-color-scheme: dark) { .consent-note { background: #2b323a; } }
html.force-light .consent-note { background: #fff; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 18px; font-size: 0.78rem; color: var(--muted); }
.checkbox input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; box-shadow: none; }
.total-line {
display: flex; align-items: center; justify-content: space-between;
font-family: "Caveat", cursive; font-size: 1.6rem; font-weight: 700; color: var(--ink-blue);
padding: 10px 16px; margin: 2px 0 16px;
background: var(--green-soft); border: 1px solid var(--green-soft-line);
border-radius: var(--r-md); transform: rotate(-0.4deg);
}
.total-line strong { font-family: "Caveat", cursive; font-size: 2rem; color: var(--brand-dark); transition: color 0.3s var(--ease); }
/* Alerts / errors -----------------------------------------------------------*/
.alert { border-radius: var(--r-sm); padding: 11px 14px; margin: 0 0 14px; font-size: 0.9rem; font-weight: 600; }
.alert-error { background: var(--error-bg); color: var(--error-ink); border: 1px solid var(--error-line); }
.field-error { display: block; color: var(--error-ink); font-size: 0.82rem; margin-top: 6px; font-weight: 600; }
/* Honeypot: keep visually + physically hidden from humans */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Confirmation --------------------------------------------------------------*/
.confirm { text-align: center; }
.check {
width: 66px; height: 66px; border-radius: 50%; margin: 2px auto 12px;
background: linear-gradient(160deg, var(--brand-bright), var(--brand-dark));
display: grid; place-items: center;
box-shadow: 0 12px 26px -10px rgba(30, 90, 55, 0.6), var(--inset-hi);
animation: pop 0.6s var(--ease) both;
}
.check svg { width: 30px; height: 30px; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .check { animation: none; } }
.summary { text-align: left; margin: 16px 0; }
.summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--hair); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { font-family: "Caveat", cursive; font-size: 1.25rem; font-weight: 700; color: var(--ink-blue); margin: 0; }
.summary dd { margin: 0; font-weight: 800; text-align: right; color: var(--ink); }
.next-steps {
text-align: left; background: var(--kraft); border: 1px solid var(--kraft-line);
border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--inset-hi); transform: rotate(-0.4deg);
}
.next-steps h3 { font-family: "Caveat", cursive; font-size: 1.4rem; color: var(--ink-blue); margin: 0 0 4px; font-weight: 700; }
.next-steps p { margin: 0; font-size: 0.88rem; color: var(--muted); }
/* Footer --------------------------------------------------------------------*/
.site-footer { text-align: center; color: var(--ink-blue-deep); padding: 22px 0 6px; }
.site-footer p { margin: 0; font-family: "Caveat", cursive; font-size: 1.15rem; font-weight: 600; }
.site-footer .heart { color: var(--brand-bright); }
.view[hidden] { display: none; }
/* Theme toggle — permanent, floating pill (kept per request) ----------------*/
.theme-toggle {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60;
display: flex; gap: 4px; padding: 5px; border-radius: 999px;
background: rgba(34, 50, 74, 0.92); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.force-dark .theme-toggle { background: rgba(20, 24, 30, 0.92); }
.theme-toggle button {
font-family: "Nunito", sans-serif; border: none; background: transparent; color: #cdd6e4;
font-weight: 700; font-size: 0.8rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.theme-toggle button.on { background: var(--brand-bright); color: #fff; }
@media (prefers-reduced-motion: reduce) { .theme-toggle button { transition: none; } }