/* =============================================================================
PINK RHINO LAB — DESIGN SYSTEM
Distilled from the Bound to Create feedback survey. Drop-in stylesheet for any
Pink Rhino web material (homepage, coming-soon, forms, dashboards).
Usage:
...
Everything is prefixed `pr-` (or scoped under `.pr`) so it won't collide with
other styles. Pure CSS, no build step. Pair with the Inter webfont:
PRINCIPLES
1. Sharp geometry — zero border-radius, everywhere. Crisp rectangles only.
2. One ink — brand pink (#e5505e) is the text color AND the 1px border on
nearly everything, on a cream field.
3. The heat scale — light → mid → coral is the signature device for any
1→3 / low→high / cool→warm spectrum (ratings, intensity, emphasis).
4. Two-tone headings — soft pink accent word + brand pink main word.
5. Bands — full-bleed brand-pink strips with cream text mark the loud moments.
============================================================================= */
/* ---- Tokens -------------------------------------------------------------- */
:root {
/* Core palette */
--pr-pink: #e5505e; /* brand pink — primary ink, borders, fills */
--pr-soft: #ed9590; /* soft pink — heading accent, secondary */
--pr-cream: #fceae6; /* cream — page background AND text on pink */
--pr-white: #ffffff;
/* Heat scale (low → high) — the signature 3-step ramp */
--pr-heat-1: #f8d8d3; /* lightest — "not so much" / cool */
--pr-heat-2: #f3b6b0; /* mid */
--pr-heat-3: #e97575; /* coral — "absolutely" / warm */
/* Type */
--pr-font: 'Inter', system-ui, -apple-system, sans-serif;
/* Rhythm */
--pr-pad: 30px; /* standard inner padding for bands/panels */
--pr-gap: 22px; /* gap between stacked panels */
--pr-wrap: 800px; /* default content max-width */
--pr-border: 1px solid var(--pr-pink);
}
/* ---- Base --------------------------------------------------------------- */
.pr,
body.pr {
margin: 0;
font-family: var(--pr-font);
color: var(--pr-pink);
background: var(--pr-cream);
line-height: 1.35;
-webkit-font-smoothing: antialiased;
}
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
.pr-wrap { width: 100%; max-width: var(--pr-wrap); margin: 0 auto; }
/* Nothing rounds. Ever. */
.pr [class*="pr-"] { border-radius: 0; }
/* ---- Logo (2-color, reversible) ----------------------------------------
The sprite (pr-logo.svg) draws with two CSS vars:
--pr-lb = body / wordmark --pr-lc = the "lab" badge text
Put `.pr-logo--rev` on a pink field, `.pr-logo--fwd` on a light field. */
.pr-logo { height: 40px; width: auto; aspect-ratio: 439.83 / 152.42; display: block; }
.pr-logo--rev { --pr-lb: var(--pr-white); --pr-lc: var(--pr-pink); } /* white logo, pink "lab" */
.pr-logo--fwd { --pr-lb: var(--pr-pink); --pr-lc: var(--pr-white); } /* pink logo, white "lab" */
/* ---- Typography --------------------------------------------------------- */
.pr-h1 { margin: 0 0 8px; font-weight: 900; font-size: 24px; letter-spacing: .01em; text-transform: uppercase; }
.pr-h2 { margin: 0 0 8px; font-weight: 900; font-size: 18px; letter-spacing: .01em; text-transform: uppercase; }
.pr-accent { color: var(--pr-soft); } /* the soft-pink lead word in a two-tone heading */
.pr-lead { margin: 0; font-weight: 500; font-size: 14px; max-width: 64ch; }
.pr-lead strong, .pr-fine strong { font-weight: 900; }
.pr-fine { font-weight: 500; font-size: 13px; }
.pr-light { font-weight: 300; } /* user-entered / quiet text */
/* ---- Panels ------------------------------------------------------------- */
.pr-panel { background: var(--pr-white); border: var(--pr-border); margin-bottom: var(--pr-gap); }
.pr-panel--clip { overflow: hidden; } /* use when a panel holds the angled strip */
.pr-pad { padding: var(--pr-pad); }
/* ---- Header strip + tabs ------------------------------------------------
The signature header: brand-pink bar with the reversed logo, an angled cut
on the right. `.pr-strip-zone` background shows through the cut. */
.pr-strip-zone { background: var(--pr-heat-1); }
.pr-strip {
background: var(--pr-pink);
display: flex; align-items: stretch; justify-content: space-between;
min-height: 67px;
clip-path: polygon(0 0, 100% 0, 100% 34.5%, 95.7% 56.6%, 92.4% 100%, 0 100%);
}
.pr-strip__logo { display: flex; align-items: center; padding: 8px 0 8px var(--pr-pad); }
.pr-tabs { display: flex; align-items: stretch; margin-right: 60px; } /* clear the angled cut */
.pr-tab {
width: 150px; padding: 8px 10px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; font-weight: 900; font-size: 14px; line-height: 1.04; letter-spacing: .01em;
color: var(--pr-pink); text-decoration: none; cursor: pointer;
background: var(--pr-heat-1);
}
.pr-tab + .pr-tab { background: var(--pr-heat-2); }
.pr-tab .pr-tab__sub { font-weight: 500; font-size: 10px; margin-top: 2px; }
/* ---- Bands -------------------------------------------------------------- */
/* Heading band — a tinted strip introducing a section (two-tone heading lives here). */
.pr-band { padding: 16px var(--pr-pad) 20px; background: var(--pr-heat-1); }
/* Loud band — full brand pink, cream text. For instructions / calls to action. */
.pr-band--loud { background: var(--pr-pink); color: var(--pr-cream); padding: 14px var(--pr-pad); }
.pr-band--loud .pr-band__lead { font-weight: 900; font-size: 14px; }
.pr-band--loud .pr-band__sub { font-weight: 500; font-size: 14px; }
/* ---- Legend / heat strip (flush tri-color) ------------------------------ */
.pr-legend { display: grid; grid-template-columns: repeat(3, 1fr); }
.pr-legend > * { padding: 9px 8px; text-align: center; font-weight: 900; font-size: 14px; letter-spacing: .01em; text-transform: uppercase; }
.pr-legend > :nth-child(1) { background: var(--pr-heat-1); color: var(--pr-pink); }
.pr-legend > :nth-child(2) { background: var(--pr-heat-2); color: var(--pr-pink); }
.pr-legend > :nth-child(3) { background: var(--pr-heat-3); color: var(--pr-white); }
/* ---- Number badge ------------------------------------------------------- */
.pr-num {
width: 30px; height: 30px;
background: var(--pr-pink); color: var(--pr-white); border: var(--pr-border);
font-weight: 900; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center; user-select: none;
}
/* ---- Heat boxes (a 1–3 rating / chooser) -------------------------------- */
.pr-boxes { display: flex; gap: 2px; }
.pr-box {
width: 30px; height: 30px; border: var(--pr-border);
font-weight: 900; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.pr-box--1 { background: var(--pr-heat-1); color: var(--pr-pink); }
.pr-box--2 { background: var(--pr-heat-2); color: var(--pr-pink); }
.pr-box--3 { background: var(--pr-heat-3); color: var(--pr-white); }
.pr-box--sel { background: var(--pr-white); color: var(--pr-pink); box-shadow: 0 0 10px 1px var(--pr-heat-2); }
/* ---- Buttons ------------------------------------------------------------ */
.pr-btn {
display: inline-block; font-family: inherit;
font-weight: 900; font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
color: var(--pr-white); background: var(--pr-pink); border: var(--pr-border);
padding: 13px 40px; cursor: pointer; text-decoration: none;
transition: filter .12s ease, transform .08s ease;
}
.pr-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pr-btn:disabled { opacity: .55; cursor: default; transform: none; }
.pr-btn--ghost { color: var(--pr-pink); background: var(--pr-white); }
/* ---- Inputs / fields (label-inside, bordered) --------------------------- */
.pr-field { display: flex; align-items: center; gap: 8px; border: var(--pr-border); padding: 8px 11px; margin-bottom: 10px; background: var(--pr-white); }
.pr-field__label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.pr-field input,
.pr-field select { flex: 1; border: none; padding: 0; font-family: inherit; font-weight: 500; font-size: 14px; color: var(--pr-pink); background: transparent; }
.pr-field input:focus, .pr-field select:focus { outline: none; }
.pr-field input::placeholder { color: var(--pr-pink); opacity: .6; }
.pr-textarea {
width: 100%; min-height: 88px; resize: vertical;
font-family: inherit; font-weight: 300; font-size: 14px; color: var(--pr-pink);
background: var(--pr-white); border: var(--pr-border); padding: 10px 13px;
}
.pr-textarea:focus { outline: none; box-shadow: 0 0 10px 1px var(--pr-heat-2); }
.pr-textarea::placeholder { color: var(--pr-pink); font-weight: 300; opacity: .6; }
/* ---- Focus (keyboard) --------------------------------------------------- */
.pr :focus-visible { outline: 2px solid var(--pr-pink); outline-offset: 2px; }
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 560px) {
.pr-strip { clip-path: none; flex-wrap: wrap; }
.pr-strip__logo { width: 100%; justify-content: center; padding: 12px 0; }
.pr-tabs { width: 100%; margin-right: 0; }
.pr-tab { flex: 1; width: auto; }
.pr-band, .pr-band--loud, .pr-pad { padding-left: 16px; padding-right: 16px; }
.pr-h1 { font-size: 20px; }
.pr-legend > * { font-size: 11px; padding: 8px 4px; }
}