/* ============================================================================
P·DOUBLE LEARNING — "Editorial Field Notes" design tokens & base components
Drop into any product:
Fonts (add to ):
============================================================================ */
:root {
/* Ink (near-black, warm) */
--ink: #1b1712;
--ink-soft: #4f463c;
--ink-faint: #8a7d6c;
/* Paper (warm light field) */
--paper: #f1e9da;
--paper-2: #faf5ea;
--paper-3: #fffdf8;
/* Signal — use sparingly, ONE accent */
--persimmon: #d8431f;
--persimmon-deep: #b53314;
/* Support */
--sage: #4f6b4d; /* success / positive */
--amber: #b07314; /* caution */
/* Lines */
--line: #ddd1bd;
--line-strong: #c4b69e;
/* Type */
--font-display: 'Fraunces', Georgia, serif; /* headings, numerals, the "voice" */
--font-ui: 'Inter', system-ui, sans-serif; /* body & controls */
--font-mono: 'JetBrains Mono', monospace; /* figures, labels, kickers, data */
/* Signature hard offset shadow */
--shadow-hard: 5px 5px 0 var(--ink);
--radius: 3px;
}
/* ---------- Page atmosphere (ledger dot grid + soft glows) ---------- */
body.pd {
font-family: var(--font-ui);
color: var(--ink);
background-color: var(--paper);
background-image:
radial-gradient(circle at 1px 1px, rgba(27,23,18,0.07) 1px, transparent 0),
radial-gradient(900px 600px at 100% -10%, rgba(216,67,31,0.10), transparent 60%),
radial-gradient(700px 500px at -10% 110%, rgba(79,107,77,0.08), transparent 60%);
background-size: 22px 22px, 100% 100%, 100% 100%;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--persimmon); color: var(--paper-3); }
/* ---------- Typographic voice ---------- */
.pd-kicker {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--persimmon); display: flex; align-items: center; gap: 10px;
}
.pd-kicker::before { content: ''; width: 28px; height: 2px; background: var(--persimmon); }
.pd-display { /* big editorial heading */
font-family: var(--font-display); font-weight: 600;
font-size: clamp(38px, 4.4vw, 56px); line-height: 0.98;
letter-spacing: -0.02em; color: var(--ink);
}
.pd-display em { font-style: italic; font-weight: 500; color: var(--persimmon); }
.pd-index { /* oversized margin numeral, e.g. "01" */
font-family: var(--font-display); font-weight: 600; font-size: 40px;
line-height: 1; color: var(--persimmon); letter-spacing: -0.02em;
}
label, .pd-label {
display: block; margin-bottom: 9px;
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-soft);
}
/* ---------- Inputs ---------- */
input[type="text"], input[type="number"], input[type="date"],
select, textarea, .pd-input {
width: 100%; padding: 13px 15px;
border: 1.5px solid var(--line-strong); border-radius: var(--radius);
font-family: var(--font-ui); font-size: 15px;
background: var(--paper-3); color: var(--ink);
transition: border-color .16s, box-shadow .16s, background .16s;
}
input:focus, select:focus, textarea:focus, .pd-input:focus {
outline: none; border-color: var(--ink); background: #fff;
box-shadow: 4px 4px 0 rgba(216,67,31,0.18);
}
input[type="number"], input[type="date"] { font-family: var(--font-mono); font-size: 14px; }
/* ---------- Buttons ---------- */
.pd-btn {
padding: 16px 22px; border: none; border-radius: var(--radius);
font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .02em;
cursor: pointer; transition: transform .14s, box-shadow .14s, background .16s;
}
.pd-btn-primary { background: var(--persimmon); color: var(--paper-3); box-shadow: var(--shadow-hard); }
.pd-btn-primary:hover { background: var(--persimmon-deep); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
.pd-btn-primary:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.pd-btn-secondary { background: var(--paper-3); color: var(--ink); border: 1.5px solid var(--ink); }
.pd-btn-secondary:hover { background: var(--ink); color: var(--paper-3); }
/* ---------- Selectable chip (radio/checkbox) ---------- */
.pd-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pd-chip label {
display: flex; align-items: center; gap: 12px; cursor: pointer;
padding: 14px 15px; font-size: 14px; font-weight: 500; color: var(--ink-soft);
background: var(--paper-3); border: 1.5px solid var(--line-strong);
border-radius: var(--radius); transition: all .16s ease;
}
.pd-chip label::before {
content: ''; width: 18px; height: 18px; flex-shrink: 0;
border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--paper);
transition: all .16s ease;
}
.pd-chip label:hover { border-color: var(--ink-soft); color: var(--ink); transform: translateY(-1px); }
.pd-chip input:checked + label {
background: var(--ink); border-color: var(--ink); color: var(--paper-3);
box-shadow: 4px 4px 0 var(--persimmon);
}
.pd-chip input:checked + label::before {
background: var(--persimmon); border-color: var(--persimmon); box-shadow: inset 0 0 0 3px var(--ink);
}
/* ---------- "Filed" output / callout card ---------- */
.pd-card {
padding: 30px; background: var(--paper-3);
border: 1.5px solid var(--ink); border-radius: 4px;
box-shadow: 9px 9px 0 rgba(216,67,31,0.16); position: relative;
}
/* ---------- Entrance motion ---------- */
@keyframes pd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.pd-rise { animation: pd-rise .6s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* For PWA manifest.json: "theme_color": "#1b1712", "background_color": "#f1e9da" */