/* =========================================================================
Readership — site stylesheet
=========================================================================
Rebuilt from the approved design (Readership.dc.html) value-for-value.
Every number here was lifted from that file, not re-invented.
RULES
- Every visual value is a token declared in :root. Components never
hardcode a colour, radius, shadow or font.
- All sizing in rem/em. px appears ONLY as the html base font-size,
inside media-query conditions, and for hairline borders (1px/1.5px/2px),
which round inconsistently at sub-pixel rem values.
- BEM: .rs-block__element--modifier. No element selectors past the reset.
- This is the ONLY stylesheet the site loads.
CONVERSION NOTE
The design is authored in px at a 16px root. Every value below is that
px value / 16. Where the design used clamp(), the clamp is preserved
with its bounds converted; the vw term is untouched.
========================================================================= */
/* -------------------------------------------------------------------------
1. TOKENS
---------------------------------------------------------------------- */
:root {
/* --- Greens --- */
--rs-green-900: #1b2a20; /* primary hover */
--rs-green-800: #243329; /* primary */
--rs-green-700: #31453a;
--rs-green-650: #33473b; /* creator tile bed */
--rs-green-600: #3c5244;
--rs-green-500: #465049; /* body copy on light green */
--rs-green-400: #5d7a67; /* muted brand text, link hover */
--rs-green-200: #9aa39a;
/* --- Gold --- */
--rs-gold-400: #f0d885; /* accent hover */
--rs-gold-500: #e4c75e; /* accent */
--rs-gold-700: #b08d3a; /* accent on light backgrounds */
/* --- Red --- */
--rs-red-500: #e04146;
/* --- In-stock signal (product page only) --- */
--rs-stock-text: #1f8a5b;
--rs-stock-dot: #58cf80;
/* --- Video thumbnail bed (creator clips) --- */
--rs-video-bed: #222222;
/* --- Neutrals --- */
--rs-paper: #fbfaf9;
--rs-white: #ffffff;
--rs-ink: #1b1918;
--rs-ink-muted: #76716e;
--rs-ink-warm: #56534f; /* collection card description */
/* --- Collection tints (sit beneath the artwork) --- */
--rs-tint-shop: #e7ece8;
--rs-tint-award: #efeade;
--rs-tint-club: #ece7ea;
--rs-tint-crime: #e6eaee;
--rs-ink-soft: #a6a2a0;
--rs-sand: #f1ece0; /* mega menu aside */
--rs-sand-light: #f7f4ef; /* mega menu footer */
--rs-mist: #e9ede8; /* feature band bed */
--rs-cover-bed: #eceae6;
--rs-stripe-a: #e7e4df;
--rs-stripe-b: #efedea;
--rs-border: #ece9e6;
--rs-border-cool: #e6e4e2;
--rs-border-warm: #e6e2da;
--rs-border-ctrl: #d5d3d2; /* select + dashed empty-state border */
--rs-border-chip: #cfd4ce; /* filter chip */
--rs-chip-x: #f1f1f1; /* chip remove disc */
--rs-empty-bed: #faf9f7; /* empty-state panel */
--rs-chip-bed: #f4f2ee; /* category sub-chip */
--rs-mist-line: #d9e0d8; /* reviews band rules */
--rs-mist-card: #e2e7e0; /* review card border */
--rs-track-bed: #d8ddd6; /* free-delivery meter track, format pill */
--rs-gold-deep: #c79a3a; /* seal gradient end */
--rs-gold-light: #efd98a; /* member badge / CTA gradient start */
--rs-gold-mark: #b0975a; /* Readership+ toggle mark */
--rs-parchment: #f6f3ee; /* member page bed */
--rs-parchment-2: #e8e2d8; /* edition toggle track */
--rs-parchment-3: #cbc6bf; /* crumb separator — member page */
--rs-crumb-sep: #c3beb6; /* crumb separator — account */
--rs-field-border: #cfcbc4; /* checkout inputs */
--rs-border-quiet: #d5d3d2; /* secondary button outline */
--rs-hairline: #f4f1ea; /* summary row rules */
--rs-pill-bed: #eef0ec; /* edit-order pill */
--rs-pill-bed-2: #e2e6e0;
--rs-sage: #5d7a67; /* continue CTA */
--rs-sage-dark: #4f6a59;
--rs-paypal-bed: #e4ddd0; /* PayPal panel border, timeline rail */
--rs-success-bed: #e7f4ec; /* confirmation halo */
--rs-success-ring: #cde9d6; /* completed timeline node */
--rs-step-idle: #d8d4cc; /* pending timeline node */
--rs-page-border: #d8d4cc; /* pagination cell edge */
--rs-page-border-off: #e6e2db; /* pagination, disabled arrow */
--rs-page-ink-off: #cdc8c0; /* pagination, disabled glyph */
/* --- Journal ---------------------------------------------------------- */
--rs-jcard-border: #efece5; /* journal card + featured border */
--rs-prose-ink: #2b2a28; /* article body copy */
--rs-tag-bed: #eef2ef; /* inline tag chip */
--rs-tag-border: #e0e8e2; /* inline tag chip border */
--rs-chip-border: #dcd8d3; /* category chip, idle */
/* Hero gradient starts — each post carries one of five */
--rs-jg-slate: #3f5d7a;
--rs-jg-plum: #5d3f4f;
--rs-jg-fern: #3f6d5a;
--rs-jg-bark: #7a5a3f;
/* Decorative comma marks (design px / 16) */
--rs-mark-sm: 9.375rem; /* 150px — card art */
--rs-mark-md: 13.75rem; /* 220px — featured art */
--rs-mark-lg: 21.25rem; /* 340px — article hero */
--rs-mark-xl: 23.75rem; /* 380px — journal hero */
--rs-text-15-5: 0.96875rem; /* 15.5px — featured excerpt */
--rs-text-34: 2.125rem; /* 34px — hero cap, featured title cap */
--rs-text-48: 3rem; /* 48px — article title cap */
/* --- Account area --------------------------------------------------- */
--rs-acct-bg: #efeeea; /* account page bed — cooler than parchment */
--rs-acct-border: #ece8e1; /* account panel border */
--rs-acct-rule: #f1eee8; /* sidebar dividers */
--rs-stat-bed: #f6f4ef; /* stat tile / soft promo card */
--rs-stat-border: #eee9e1;
--rs-nav-active: #e8efe9; /* current account nav item */
--rs-nav-hover: #f4f2ee;
--rs-danger: #a15c5c; /* logout */
--rs-danger-bed: #f9f0ee;
--rs-status-ship: #2f6df6;
--rs-status-ship-bed: rgba(65, 81, 224, 0.1);
--rs-status-done: #1f8a5b;
--rs-status-done-bed: rgba(88, 207, 128, 0.16);
--rs-status-wait: #8a6d1f;
--rs-status-wait-bed: rgba(228, 199, 94, 0.2);
/* --- On-dark text --- */
--rs-on-dark: rgba(251, 250, 249, 0.82);
--rs-on-dark-soft: rgba(251, 250, 249, 0.72);
--rs-on-dark-mute: rgba(251, 250, 249, 0.9);
--rs-on-dark-rule: rgba(251, 250, 249, 0.25);
--rs-on-dark-edge: rgba(251, 250, 249, 0.4);
--rs-on-dark-icon: rgba(251, 250, 249, 0.28);
--rs-on-dark-copy: rgba(251, 250, 249, 0.55);
--rs-on-dark-faint:rgba(251, 250, 249, 0.5);
--rs-on-dark-hair: rgba(251, 250, 249, 0.14);
/* --- Themeable slots (the design exposes these as tweaks) --- */
--rs-accent: var(--rs-gold-500);
--rs-nav-bg: var(--rs-paper);
--rs-nav-fg: var(--rs-green-800);
--rs-nav-border: var(--rs-border-cool);
--rs-hero-bg: var(--rs-mist);
/* --- Type families --- */
--rs-font-display: 'Spectral', Georgia, 'Times New Roman', serif;
--rs-font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* --- Type scale (design px / 16) --- */
--rs-text-7: 0.4375rem; /* 7px — mega promo placeholder */
--rs-text-9: 0.5625rem; /* 9px — cover placeholder caption */
--rs-text-9-5: 0.59375rem; /* 9.5px — card badge, mega promo label */
--rs-text-10: 0.625rem; /* 10px — deal badge, basket count */
--rs-text-10-5: 0.65625rem; /* 10.5px — header action labels */
--rs-text-11: 0.6875rem; /* 11px — mega column heading, save pill */
--rs-text-12: 0.75rem; /* 12px — eyebrows */
--rs-text-12-5: 0.78125rem; /* 12.5px — utility bar, strikethrough price */
--rs-text-13: 0.8125rem; /* 13px — card author, trust sub, view-all */
--rs-text-13-5: 0.84375rem; /* 13.5px — mega "more" links */
--rs-text-14: 0.875rem; /* 14px — nav, mega links, avatar caption */
--rs-text-15: 0.9375rem; /* 15px — buttons, trust headline */
--rs-text-16: 1rem; /* 16px — card title + price, feature byline */
--rs-text-17: 1.0625rem; /* 17px — band body copy, feature blurb */
--rs-text-23: 1.4375rem; /* 23px — mega aside heading */
--rs-text-24: 1.5rem; /* 24px — empty-state heading */
--rs-text-26: 1.625rem; /* 26px — feature price, product h2 */
--rs-text-11-5: 0.71875rem; /* 11.5px — product save pill */
--rs-text-25: 1.5625rem; /* 25px — collection card title */
--rs-text-14-5: 0.90625rem; /* 14.5px — checkout summary rows */
--rs-text-18: 1.125rem; /* 18px — line total */
--rs-text-21: 1.3125rem; /* 21px — member subtitle */
--rs-text-54: 3.375rem; /* 54px — member title cap */
--rs-text-19: 1.1875rem; /* 19px — footer pull-quote, event title */
--rs-text-27: 1.6875rem; /* 27px — event day */
--rs-text-30: 1.875rem; /* 30px — membership price */
--rs-text-36: 2.25rem; /* 36px — rec quote mark */
--rs-text-56: 3.5rem; /* 56px — review score */
--rs-text-20: 1.25rem; /* 20px — product cover placeholder */
--rs-text-22: 1.375rem; /* 22px — product subtitle, qty glyphs */
--rs-text-32: 2rem; /* 32px — product price */
/* Fluid heads, bounds converted, vw term untouched */
--rs-text-section: clamp(1.625rem, 3vw, 2.125rem); /* 26 → 34 */
--rs-text-band: clamp(1.875rem, 3.8vw, 2.875rem); /* 30 → 46 */
--rs-text-feature: clamp(2.125rem, 4.4vw, 3.5rem); /* 34 → 56 */
--rs-text-flourish: 28.75rem; /* 460px comma */
/* --- Weights, tracking, leading --- */
--rs-w-regular: 400;
--rs-w-medium: 500;
--rs-w-semi: 600;
--rs-w-bold: 700;
--rs-track-tight: -0.015em;
--rs-track-head: -0.01em;
--rs-track-feature:-0.012em;
--rs-track-01: 0.01em;
--rs-track-02: 0.02em;
--rs-track-04: 0.04em;
--rs-track-05: 0.05em;
--rs-track-06: 0.06em;
--rs-track-07: 0.07em;
--rs-track-10: 0.1em;
--rs-track-12: 0.12em;
--rs-track-14: 0.14em;
--rs-track-16: 0.16em;
--rs-track-18: 0.18em;
--rs-track-star: 0.09375rem; /* 1.5px — letter-spacing on the star run */
--rs-lh-hero: 1.06;
--rs-lh-feature: 1.05;
--rs-lh-card: 1.25;
--rs-lh-mega: 1.2;
--rs-lh-body: 1.62;
--rs-lh-blurb: 1.65;
--rs-lh-prose: 1.7; /* info-page prose body */
/* --- Spacing (design px / 16) --- */
--rs-space-1: 0.0625rem; /* 1px — mega featured gap */
--rs-space-2: 0.125rem; /* 2px */
--rs-space-3: 0.1875rem; /* 3px */
--rs-space-4: 0.25rem; /* 4px */
--rs-space-5: 0.3125rem; /* 5px */
--rs-space-6: 0.375rem; /* 6px */
--rs-space-7: 0.4375rem; /* 7px */
--rs-space-8: 0.5rem; /* 8px */
--rs-space-9: 0.5625rem; /* 9px */
--rs-space-10: 0.625rem; /* 10px */
--rs-space-11: 0.6875rem; /* 11px */
--rs-space-12: 0.75rem; /* 12px */
--rs-space-13: 0.8125rem; /* 13px */
--rs-space-14: 0.875rem; /* 14px */
--rs-space-15: 0.9375rem; /* 15px */
--rs-space-16: 1rem; /* 16px */
--rs-space-18: 1.125rem; /* 18px */
--rs-space-20: 1.25rem; /* 20px */
--rs-space-22: 1.375rem; /* 22px */
--rs-space-24: 1.5rem; /* 24px */
--rs-space-26: 1.625rem; /* 26px */
--rs-space-28: 1.75rem; /* 28px */
--rs-space-30: 1.875rem; /* 30px */
--rs-space-32: 2rem; /* 32px */
--rs-space-34: 2.125rem; /* 34px — journal layout gutter */
--rs-space-36: 2.25rem; /* 36px */
--rs-space-40: 2.5rem; /* 40px */
--rs-space-44: 2.75rem; /* 44px */
--rs-space-48: 3rem; /* 48px */
--rs-space-50: 3.125rem; /* 50px */
--rs-space-56: 3.5rem; /* 56px */
/* --- Radii --- */
--rs-radius-4: 0.25rem; /* mega promo cover */
--rs-radius-6: 0.375rem; /* book cover */
--rs-radius-9: 0.5625rem; /* mega featured link */
--rs-radius-10: 0.625rem; /* popular-read thumb */
--rs-radius-11: 0.6875rem; /* catalogue pagination cell */
--rs-radius-15: 0.9375rem; /* creator tile */
--rs-radius-16: 1rem; /* journal sidebar panel */
--rs-radius-18: 1.125rem; /* mega panel */
--rs-radius-22: 1.375rem; /* journal featured card */
--rs-radius-24: 1.5rem; /* hero banner, feature band */
--rs-radius-26: 1.625rem; /* creators band */
--rs-radius-pill: 62.4375rem;
/* --- Shadows (design values, unchanged) --- */
--rs-shadow-card: 0 0.0625rem 0.1875rem rgba(36, 51, 41, 0.1);
--rs-shadow-card-hover:0 0.5rem 1.25rem rgba(36, 51, 41, 0.1);
--rs-shadow-banner: 0 0.125rem 0.75rem rgba(36, 51, 41, 0.08);
--rs-shadow-arrow: 0 0.125rem 0.75rem rgba(36, 51, 41, 0.2);
--rs-shadow-fab: 0 0.125rem 0.625rem rgba(36, 51, 41, 0.22);
--rs-shadow-promo: 0 0.125rem 0.5rem rgba(36, 51, 41, 0.22);
--rs-shadow-tile: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.18);
--rs-shadow-mega: 0 1.625rem 3.125rem rgba(36, 51, 41, 0.18);
--rs-shadow-lift: 0 1.375rem 2.75rem -1.625rem rgba(36, 51, 41, 0.5); /* journal card hover */
/* --- Transitions --- */
--rs-t-quick: 0.2s ease;
--rs-t-panel: 0.25s ease;
/* --- Layout --- */
--rs-container: 77.5rem; /* 1240px */
--rs-gutter: 2.5rem; /* 40px */
--rs-cover-ratio: 2 / 3;
--rs-banner-ratio: 1920 / 533;
/* --- Motion --- */
--rs-ease: cubic-bezier(0.4, 0, 0.2, 1);
--rs-dur-card: 0.25s;
--rs-dur-banner: 0.55s;
/* --- The striped "no cover yet" fill ---
The 8px/16px stops are a fixed rendering pattern, not type or layout:
the stripe pitch should stay constant regardless of root font size, so
scaling it with rem would be wrong. This is the third documented px
exception, alongside the rem base and hairline borders. */
--rs-cover-stripes: repeating-linear-gradient(
135deg,
var(--rs-stripe-a), var(--rs-stripe-a) 8px,
var(--rs-stripe-b) 8px, var(--rs-stripe-b) 16px
);
/* --- Info pages (contact, help, legal, about) ------------------------- */
--rs-green-hero-1: #30453a; /* info hero radial, light stop */
--rs-green-hero-2: #1d2921; /* info hero radial, dark stop */
--rs-mist-2: #eef1ec; /* cream info hero, top stop */
--rs-gold-faint: rgba(228, 199, 94, 0.1); /* oversized comma mark */
--rs-info-bed: #f6f3ee; /* info page bed (same paper as member) */
--rs-radius-12: 0.75rem; /* contact icon tile */
--rs-radius-17: 1.0625rem; /* info hero icon tile */
--rs-radius-20: 1.25rem; /* info form card */
--rs-space-64: 4rem; /* info hero icon tile */
--rs-mark-hero: 25rem; /* 400px — info hero comma */
--rs-info-measure: 62.5rem; /* 1000px — info body column */
--rs-shadow-hair: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05);
--rs-shadow-info: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05),
0 1.25rem 2.5rem -1.875rem rgba(36, 51, 41, 0.5);
--rs-shadow-form: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05),
0 1.5rem 2.875rem -2rem rgba(36, 51, 41, 0.5);
--rs-shadow-gold: 0 0.625rem 1.625rem rgba(228, 199, 94, 0.34),
inset 0 0.0625rem 0 rgba(255, 255, 255, 0.5);
/* Fluid values — bounds converted, vw term untouched */
--rs-text-info-title: clamp(2.125rem, 4.6vw, 3.375rem); /* 34 → 54 */
--rs-text-info-sub: clamp(1rem, 1.6vw, 1.1875rem); /* 16 → 19 */
--rs-text-info-h2: clamp(1.4375rem, 2.6vw, 1.875rem); /* 23 → 30 */
--rs-text-info-h2-sm: clamp(1.375rem, 2.5vw, 1.75rem); /* 22 → 28 */
--rs-info-hero-pad: clamp(2.5rem, 5vw, 4.5rem); /* 40 → 72 */
--rs-info-body-pad: clamp(2.125rem, 4vw, 3.375rem); /* 34 → 54 */
--rs-info-gap: clamp(1.625rem, 3.4vw, 2.5rem); /* 26 → 40 */
--rs-info-card-pad: clamp(1.5rem, 3vw, 2.125rem); /* 24 → 34 */
}
/* -------------------------------------------------------------------------
2. RESET
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 16px; /* the one legitimate px: the rem base */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--rs-paper);
color: var(--rs-ink);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
svg { display: block; }
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
input, select, textarea { font: inherit; color: inherit; }
input::placeholder { color: var(--rs-ink-soft); }
a { color: inherit; text-decoration: none; cursor: pointer; }
::selection { background: var(--rs-gold-500); color: var(--rs-green-800); }
:focus-visible {
outline: 2px solid var(--rs-green-400);
outline-offset: 2px;
border-radius: var(--rs-radius-4);
}
.rs-visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* -------------------------------------------------------------------------
3. LAYOUT PRIMITIVES
---------------------------------------------------------------------- */
.rs-page {
min-height: 100vh;
background: var(--rs-paper);
overflow-x: hidden;
}
.rs-container {
width: 100%;
max-width: var(--rs-container);
margin-inline: auto;
padding-inline: var(--rs-gutter);
}
/* Section rhythm, taken band by band from the design. */
.rs-section--banner { padding: var(--rs-space-28) 0 var(--rs-space-6); }
.rs-section--trust { padding: var(--rs-space-30) 0 var(--rs-space-6); }
.rs-section--creators{ padding: var(--rs-space-44) 0 var(--rs-space-56); }
.rs-section--rail { padding: var(--rs-space-50) 0 var(--rs-space-10); }
.rs-section--rail-tight { padding-block: var(--rs-space-50) var(--rs-space-6); }
/* -------------------------------------------------------------------------
4. SHARED ATOMS
---------------------------------------------------------------------- */
/* Eyebrow: small uppercase label, optional leading marker. */
.rs-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-16);
text-transform: uppercase;
color: var(--rs-green-400);
}
.rs-eyebrow--wide { letter-spacing: var(--rs-track-18); gap: var(--rs-space-9); }
.rs-eyebrow--accent { color: var(--rs-accent); gap: var(--rs-space-9); }
.rs-eyebrow--sale { color: var(--rs-red-500); }
.rs-eyebrow--booktok { letter-spacing: var(--rs-track-14); }
/* Round dot marker (deals) */
.rs-eyebrow__dot {
width: var(--rs-space-7);
height: var(--rs-space-7);
border-radius: var(--rs-radius-pill);
background: currentColor;
}
/* Rotated square marker (creators, best sellers) */
.rs-eyebrow__diamond {
width: var(--rs-space-7);
height: var(--rs-space-7);
border-radius: var(--rs-space-2);
background: var(--rs-accent);
transform: rotate(45deg);
}
/* Buttons */
.rs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rs-space-9);
border-radius: var(--rs-radius-pill);
font-size: var(--rs-text-15);
font-weight: var(--rs-w-semi);
transition: background var(--rs-dur-card) var(--rs-ease),
color var(--rs-dur-card) var(--rs-ease),
border-color var(--rs-dur-card) var(--rs-ease);
}
.rs-btn--accent {
padding: var(--rs-space-15) var(--rs-space-28);
background: var(--rs-accent);
color: var(--rs-green-800);
}
.rs-btn--accent:hover { background: var(--rs-gold-400); }
.rs-btn--outline-light {
padding: var(--rs-space-15) var(--rs-space-24);
background: transparent;
color: var(--rs-paper);
border: 1.5px solid var(--rs-on-dark-edge);
}
.rs-btn--outline-light:hover {
background: var(--rs-paper);
color: var(--rs-green-800);
border-color: var(--rs-paper);
}
.rs-btn--primary {
gap: var(--rs-space-10);
padding: var(--rs-space-15) var(--rs-space-28);
background: var(--rs-green-800);
color: var(--rs-paper);
}
.rs-btn--primary:hover { background: var(--rs-green-900); }
.rs-btn--outline-dark {
padding: var(--rs-space-15) var(--rs-space-26);
background: transparent;
color: var(--rs-green-800);
border: 1.5px solid var(--rs-green-800);
}
.rs-btn--outline-dark:hover { background: var(--rs-green-800); color: var(--rs-paper); }
/* Quiet outline: a neutral grey edge rather than forest, for the secondary
action beside a primary (e.g. "Change password"). Does not invert on hover
— it only firms up, so it never competes with the primary. */
.rs-btn--outline-quiet {
padding: var(--rs-space-15) var(--rs-space-24);
background: transparent;
color: var(--rs-ink-warm);
border: 1.5px solid var(--rs-border-quiet);
}
.rs-btn--outline-quiet:hover { border-color: var(--rs-green-800); color: var(--rs-green-800); }
/* Size modifier — combines with any colour modifier above. */
.rs-btn--sm { padding: var(--rs-space-12) var(--rs-space-20); font-size: var(--rs-text-14); }
/* Circular nav arrow, used by the banner and the bestseller band */
.rs-arrow {
width: 2.875rem; /* 46px */
height: 2.875rem;
border-radius: var(--rs-radius-pill);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3125rem; /* 21px */
line-height: 1;
}
.rs-arrow--onImage {
background: rgba(251, 250, 249, 0.92);
color: var(--rs-green-800);
box-shadow: var(--rs-shadow-arrow);
}
.rs-arrow--onImage:hover { background: var(--rs-paper); }
.rs-arrow--outline {
border: 1.5px solid var(--rs-green-800);
background: transparent;
color: var(--rs-green-800);
font-size: 1.25rem; /* 20px */
}
.rs-arrow--outline:hover { background: var(--rs-green-800); color: var(--rs-paper); }
/* Section head — three shapes in the design, one block. */
.rs-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--rs-space-20);
border-bottom: 1.5px solid var(--rs-green-800);
padding-bottom: var(--rs-space-14);
margin-bottom: var(--rs-space-30);
}
.rs-section-head__title {
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-section);
letter-spacing: var(--rs-track-head);
color: var(--rs-green-800);
}
/* When an eyebrow sits above the title, the design adds 6px of separation. */
.rs-section-head__title--stacked { margin-top: var(--rs-space-6); }
.rs-section-head__link {
display: inline-flex;
align-items: center;
gap: var(--rs-space-7);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-04);
color: var(--rs-green-400);
white-space: nowrap;
}
.rs-section-head__link:hover { color: var(--rs-green-800); }
/* -------------------------------------------------------------------------
5. HEADER
---------------------------------------------------------------------- */
.rs-header { position: sticky; top: 0; z-index: 40; }
/* --- 5a. Utility strip (desktop only) --- */
.rs-utility {
background: var(--rs-green-800);
color: var(--rs-on-dark-soft);
}
.rs-utility__inner {
min-height: 2.5rem; /* 40px */
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-16);
flex-wrap: wrap;
font-size: var(--rs-text-12-5);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-01);
padding-block: 0;
}
.rs-utility__links {
display: flex;
align-items: center;
gap: var(--rs-space-22);
flex-wrap: wrap;
}
.rs-utility__link:hover { color: var(--rs-paper); }
.rs-utility__link--accent { color: var(--rs-accent); font-weight: var(--rs-w-semi); }
.rs-utility__meta {
display: flex;
align-items: center;
gap: var(--rs-space-16);
}
.rs-utility__place {
display: inline-flex;
align-items: center;
gap: var(--rs-space-7);
}
.rs-utility__divider {
width: 1px;
height: 0.875rem; /* 14px */
background: var(--rs-on-dark-rule);
}
.rs-utility__promise { color: var(--rs-accent); font-weight: var(--rs-w-semi); }
/* --- 5b. Main bar --- */
.rs-masthead {
background: var(--rs-paper);
border-bottom: 1px solid var(--rs-border);
}
.rs-masthead__inner {
display: flex;
align-items: center;
gap: var(--rs-space-32);
flex-wrap: wrap;
padding-block: var(--rs-space-18);
}
.rs-masthead__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Text fallback when siteSettings.headerLogo has no asset. Matches the
wordmark's weight and colour so a logo-less install still reads correctly. */
.rs-masthead__wordmark {
font-family: var(--rs-font-display);
font-size: var(--rs-text-30);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
letter-spacing: -0.01em;
}
/* Skip link — visually hidden until focused. Not in the design reference;
added so keyboard users can bypass the header and mega nav. */
.rs-skip {
position: absolute;
left: var(--rs-space-8);
top: var(--rs-space-8);
z-index: 100;
padding: var(--rs-space-10) var(--rs-space-16);
border-radius: var(--rs-radius-10);
background: var(--rs-green-800);
color: var(--rs-paper);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
transform: translateY(-200%);
}
.rs-skip:focus { transform: translateY(0); }
.rs-masthead__logo img { height: 2.125rem; width: auto; display: block; } /* 34px */
.rs-masthead__burger {
display: none;
align-items: center;
justify-content: center;
width: var(--rs-space-44);
height: var(--rs-space-44);
color: var(--rs-green-800);
flex: 0 0 auto;
}
/* Search — a single pill with three parts */
.rs-search {
flex: 1 1 21.25rem; /* 340px */
display: flex;
align-items: stretch;
height: 3rem; /* 48px */
border: 1.5px solid var(--rs-green-800);
border-radius: var(--rs-radius-pill);
overflow: hidden;
background: var(--rs-white);
min-width: 15rem; /* 240px */
}
.rs-search__scope {
display: flex;
align-items: center;
gap: var(--rs-space-6);
padding-inline: var(--rs-space-16);
border-right: 1px solid var(--rs-border);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
white-space: nowrap;
}
.rs-search__caret { font-size: var(--rs-text-9); }
.rs-search__input {
flex: 1;
border: 0;
outline: 0;
padding-inline: var(--rs-space-16);
font-size: var(--rs-text-15);
color: var(--rs-ink);
background: transparent;
min-width: 3.75rem;
}
.rs-search__submit {
padding-inline: var(--rs-space-24);
background: var(--rs-green-800);
color: var(--rs-paper);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-02);
}
.rs-search__submit:hover { background: var(--rs-green-900); }
/* Account / social / basket — icon over caps label */
.rs-masthead__actions {
display: flex;
align-items: center;
gap: var(--rs-space-26);
flex: 0 0 auto;
}
.rs-action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rs-space-3);
color: var(--rs-green-800);
}
.rs-action:hover { color: var(--rs-green-400); }
.rs-action__icon { position: relative; display: inline-flex; }
.rs-action__label {
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
}
.rs-action__count {
position: absolute;
top: -0.4375rem; /* -7px */
right: -0.5625rem; /* -9px */
min-width: 1.0625rem;
height: 1.0625rem;
padding-inline: var(--rs-space-4);
border-radius: var(--rs-radius-pill);
background: var(--rs-accent);
color: var(--rs-green-800);
font-size: var(--rs-text-10);
font-weight: var(--rs-w-bold);
display: flex;
align-items: center;
justify-content: center;
}
.rs-action__dot {
position: absolute;
top: -0.25rem;
right: -0.3125rem;
width: var(--rs-space-9);
height: var(--rs-space-9);
border-radius: var(--rs-radius-pill);
background: var(--rs-red-500);
box-shadow: 0 0 0 0.125rem var(--rs-paper);
}
/* The R brandmark, masked so it inherits currentColor */
.rs-brandmark {
display: inline-block;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url('../../media/site/logo-r-social.svg') center / contain no-repeat;
mask: url('../../media/site/logo-r-social.svg') center / contain no-repeat;
}
.rs-brandmark--action { width: 1.5625rem; height: 1.5625rem; } /* 25px */
.rs-brandmark--nav { width: 1.0625rem; height: 1.0625rem; } /* 17px */
/* --- 5c. Primary nav --- */
.rs-nav {
background: var(--rs-nav-bg);
border-bottom: 1px solid var(--rs-nav-border);
position: relative;
z-index: 30;
}
.rs-nav__inner {
min-height: 3.125rem; /* 50px */
display: flex;
align-items: center;
gap: var(--rs-space-26);
flex-wrap: wrap;
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-nav-fg);
}
.rs-nav__link {
padding-block: var(--rs-space-14);
border-bottom: 2px solid transparent;
display: inline-flex;
align-items: center;
gap: var(--rs-space-5);
}
.rs-nav__link:hover { border-bottom-color: var(--rs-accent); }
.rs-nav__caret { font-size: var(--rs-text-9); opacity: 0.55; }
.rs-nav__link--creators { color: var(--rs-gold-700); font-weight: var(--rs-w-semi); }
.rs-nav__link--social { color: var(--rs-green-800); font-weight: var(--rs-w-semi); gap: var(--rs-space-6); }
.rs-nav__link--new {
margin-inline-start: auto;
color: var(--rs-accent);
font-weight: var(--rs-w-semi);
gap: var(--rs-space-6);
}
/* -------------------------------------------------------------------------
6. MEGA MENU
---------------------------------------------------------------------- */
.rs-mega { position: absolute; top: 100%; inset-inline: 0; z-index: 50; }
.rs-mega[hidden] { display: none; }
.rs-mega__panel {
background: var(--rs-paper);
border: 1px solid var(--rs-border-cool);
border-top: 0;
border-radius: 0 0 var(--rs-radius-18) var(--rs-radius-18);
box-shadow: var(--rs-shadow-mega);
overflow: hidden;
display: flex;
flex-direction: column;
}
.rs-mega__body { display: flex; align-items: stretch; }
.rs-mega__aside {
flex: 0 0 15.625rem; /* 250px */
background: var(--rs-sand);
padding: var(--rs-space-26) var(--rs-space-24);
display: flex;
flex-direction: column;
}
.rs-mega__aside-title {
margin-bottom: var(--rs-space-16);
font-family: var(--rs-font-display);
font-size: var(--rs-text-23);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-mega__featured { display: flex; flex-direction: column; gap: var(--rs-space-1); }
.rs-mega__featured-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-8);
padding: var(--rs-space-9) var(--rs-space-12);
margin-inline: calc(var(--rs-space-12) * -1);
border-radius: var(--rs-radius-9);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-mega__featured-link:hover { background: var(--rs-paper); color: var(--rs-green-400); }
.rs-mega__featured-chevron { color: var(--rs-accent); font-size: var(--rs-text-15); }
.rs-mega__promo {
margin-top: auto;
padding-top: var(--rs-space-24);
display: flex;
gap: var(--rs-space-13);
align-items: center;
}
.rs-mega__promo-cover { width: 3.25rem; flex: 0 0 auto; } /* 52px */
.rs-mega__promo-label {
font-size: var(--rs-text-9-5);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
text-transform: uppercase;
color: var(--rs-gold-700);
}
.rs-mega__promo-title {
margin-top: var(--rs-space-3);
font-family: var(--rs-font-display);
font-size: var(--rs-text-14);
line-height: var(--rs-lh-mega);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-mega__promo-author {
margin-top: var(--rs-space-2);
font-size: var(--rs-text-12);
color: var(--rs-ink-muted);
}
.rs-mega__columns {
flex: 1;
padding: var(--rs-space-28) var(--rs-space-32);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11.125rem, 1fr)); /* 178px */
gap: var(--rs-space-24) var(--rs-space-32);
}
.rs-mega__col-title {
margin-bottom: var(--rs-space-8);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
text-transform: uppercase;
color: var(--rs-green-800);
}
.rs-mega__col-rule {
height: 1px;
background: var(--rs-border-warm);
margin-bottom: var(--rs-space-13);
}
.rs-mega__links { display: flex; flex-direction: column; gap: var(--rs-space-10); }
.rs-mega__link {
font-size: var(--rs-text-14);
color: var(--rs-green-500);
width: fit-content;
}
.rs-mega__link:hover { color: var(--rs-green-800); }
.rs-mega__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-20);
flex-wrap: wrap;
padding: var(--rs-space-15) var(--rs-space-32);
background: var(--rs-sand-light);
border-top: 1px solid var(--rs-border);
}
.rs-mega__foot-group {
display: flex;
align-items: center;
gap: var(--rs-space-16);
flex-wrap: wrap;
}
.rs-mega__foot-label {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
text-transform: uppercase;
color: var(--rs-ink-muted);
}
.rs-mega__foot-link {
font-size: var(--rs-text-13-5);
font-weight: var(--rs-w-medium);
color: var(--rs-green-400);
}
.rs-mega__foot-link:hover { color: var(--rs-green-800); }
.rs-mega__explore {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-mega__explore:hover { color: var(--rs-green-400); }
.rs-mega__explore-arrow { color: var(--rs-accent); }
/* -------------------------------------------------------------------------
7. HERO BANNER CAROUSEL
---------------------------------------------------------------------- */
.rs-banner {
position: relative;
overflow: hidden;
border-radius: var(--rs-radius-24);
box-shadow: var(--rs-shadow-banner);
background: var(--rs-mist);
}
.rs-banner__track {
display: flex;
transition: transform var(--rs-dur-banner) var(--rs-ease);
}
.rs-banner__slide {
flex: 0 0 100%;
display: block;
aspect-ratio: var(--rs-banner-ratio);
overflow: hidden;
}
.rs-banner__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.rs-banner__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.rs-banner__arrow--prev { left: var(--rs-space-18); }
.rs-banner__arrow--next { right: var(--rs-space-18); }
.rs-banner__dots {
position: absolute;
inset-inline: 0;
bottom: var(--rs-space-18);
display: flex;
gap: var(--rs-space-9);
align-items: center;
justify-content: center;
}
.rs-banner__dot {
width: var(--rs-space-9);
height: var(--rs-space-9);
border-radius: var(--rs-radius-pill);
background: rgba(251, 250, 249, 0.55);
box-shadow: 0 0.0625rem 0.25rem rgba(251, 250, 249, 0.7);
transition: width var(--rs-dur-card) ease, background var(--rs-dur-card) ease;
}
.rs-banner__dot[aria-current="true"] {
width: 1.5rem; /* 24px */
background: var(--rs-paper);
}
/* -------------------------------------------------------------------------
8. TRUST BAR
---------------------------------------------------------------------- */
.rs-trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); /* 230px */
gap: var(--rs-space-22);
border-top: 1px solid var(--rs-border);
border-bottom: 1px solid var(--rs-border);
padding-block: var(--rs-space-22);
}
.rs-trust__item { display: flex; gap: var(--rs-space-15); align-items: center; }
.rs-trust__icon { flex: 0 0 auto; color: var(--rs-green-800); }
.rs-trust__title {
font-size: var(--rs-text-15);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-trust__sub {
font-size: var(--rs-text-13);
color: var(--rs-ink-muted);
}
/* -------------------------------------------------------------------------
9. CREATORS BAND
---------------------------------------------------------------------- */
.rs-creators {
position: relative;
overflow: hidden;
border-radius: var(--rs-radius-26);
background: linear-gradient(135deg,
var(--rs-green-800) 0%,
var(--rs-green-700) 58%,
var(--rs-green-600) 100%);
color: var(--rs-paper);
padding: clamp(1.875rem, 4vw, 3.5rem); /* 30 → 56 */
}
/* The oversized comma flourish, gold on dark. */
.rs-flourish {
position: absolute;
font-family: var(--rs-font-display);
font-size: var(--rs-text-flourish);
font-weight: var(--rs-w-semi);
line-height: 1;
pointer-events: none;
user-select: none;
}
.rs-flourish--dark {
right: -0.625rem;
top: -8.75rem; /* -140px */
color: rgba(228, 199, 94, 0.09);
}
.rs-flourish--light {
right: 2.25rem; /* 36px */
top: -7.5rem; /* -120px */
color: rgba(36, 51, 41, 0.06);
}
.rs-creators__inner {
position: relative;
display: flex;
flex-wrap: wrap;
gap: clamp(1.75rem, 4vw, 3.25rem); /* 28 → 52 */
align-items: center;
justify-content: space-between;
}
.rs-creators__body { flex: 1 1 25rem; min-width: 17.5rem; } /* 400 / 280 */
.rs-creators__title {
margin-top: var(--rs-space-14);
font-family: var(--rs-font-display);
font-size: var(--rs-text-band);
line-height: var(--rs-lh-hero);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-tight);
}
.rs-creators__text {
margin-top: var(--rs-space-16);
font-size: var(--rs-text-17);
line-height: var(--rs-lh-body);
color: var(--rs-on-dark);
max-width: 32.5rem; /* 520px */
}
.rs-creators__actions {
margin-top: var(--rs-space-26);
display: flex;
gap: var(--rs-space-14);
flex-wrap: wrap;
align-items: center;
}
.rs-creators__aside { flex: 0 1 26.875rem; min-width: 16.25rem; width: 100%; } /* 430 / 260 */
.rs-creators__mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--rs-space-9);
}
.rs-creators__tile {
aspect-ratio: 1;
border-radius: var(--rs-radius-15);
overflow: hidden;
background-color: var(--rs-green-650);
box-shadow: var(--rs-shadow-tile);
}
/* An ![]()
child rather than a background-image, so the CMS never has to
write an inline style onto the tile. */
.rs-creators__tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rs-creators__proof {
margin-top: var(--rs-space-14);
display: flex;
align-items: center;
gap: var(--rs-space-12);
justify-content: center;
flex-wrap: wrap;
}
.rs-creators__stack { display: flex; }
.rs-creators__avatar {
width: 1.875rem; /* 30px */
height: 1.875rem;
border-radius: var(--rs-radius-pill);
border: 2px solid var(--rs-green-700);
object-fit: cover;
}
.rs-creators__avatar + .rs-creators__avatar { margin-inline-start: -0.625rem; }
.rs-creators__proof-text {
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-on-dark-mute);
}
.rs-creators__proof-count { color: var(--rs-accent); }
/* -------------------------------------------------------------------------
10. BOOK CARD + GRID
---------------------------------------------------------------------- */
.rs-book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); /* 168px */
gap: var(--rs-space-28) var(--rs-space-24);
}
.rs-book-card { display: flex; flex-direction: column; gap: var(--rs-space-12); }
.rs-cover {
position: relative;
display: block;
aspect-ratio: var(--rs-cover-ratio);
border-radius: var(--rs-radius-6);
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: var(--rs-shadow-card);
transition: transform var(--rs-dur-card) ease, box-shadow var(--rs-dur-card) ease;
}
.rs-book-card:hover .rs-cover {
transform: translateY(-0.25rem); /* 4px lift */
box-shadow: var(--rs-shadow-card-hover);
}
/* The placeholder face, shown when no cover asset exists. */
.rs-cover__placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rs-space-8);
padding: var(--rs-space-16);
text-align: center;
background: var(--rs-cover-stripes);
}
.rs-cover__placeholder-title {
font-family: var(--rs-font-display);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-muted);
}
.rs-cover__placeholder-label {
font-size: var(--rs-text-9);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-14);
text-transform: uppercase;
color: var(--rs-ink-soft);
}
/* The real cover sits over the placeholder. */
.rs-cover__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-badge {
position: absolute;
top: var(--rs-space-10);
left: var(--rs-space-10);
padding: var(--rs-space-4) var(--rs-space-9);
border-radius: var(--rs-radius-pill);
background: rgba(36, 51, 41, 0.92);
color: var(--rs-paper);
font-size: var(--rs-text-9-5);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-07);
text-transform: uppercase;
}
.rs-badge--deal {
padding: var(--rs-space-5) var(--rs-space-10);
background: var(--rs-red-500);
color: var(--rs-white);
font-size: var(--rs-text-10);
font-weight: var(--rs-w-bold);
letter-spacing: var(--rs-track-04);
text-transform: none;
}
.rs-quick-add {
position: absolute;
bottom: var(--rs-space-10);
right: var(--rs-space-10);
width: 2.375rem; /* 38px */
height: 2.375rem;
border-radius: var(--rs-radius-pill);
background: var(--rs-paper);
color: var(--rs-green-800);
box-shadow: var(--rs-shadow-fab);
display: flex;
align-items: center;
justify-content: center;
}
.rs-quick-add:hover { background: var(--rs-green-800); color: var(--rs-paper); }
.rs-book-card__body { display: flex; flex-direction: column; gap: var(--rs-space-4); }
.rs-book-card__title {
font-family: var(--rs-font-display);
font-size: var(--rs-text-16);
line-height: var(--rs-lh-card);
font-weight: var(--rs-w-medium);
color: var(--rs-ink);
}
.rs-book-card__author {
font-size: var(--rs-text-13);
color: var(--rs-ink-muted);
}
.rs-rating {
margin-top: var(--rs-space-1);
color: var(--rs-accent);
font-size: var(--rs-text-12-5);
letter-spacing: var(--rs-track-star);
}
.rs-price {
display: flex;
align-items: baseline;
gap: var(--rs-space-8);
margin-top: var(--rs-space-3);
}
.rs-price__now {
font-size: var(--rs-text-16);
font-weight: var(--rs-w-bold);
color: var(--rs-green-800);
}
.rs-price__now--deal { color: var(--rs-red-500); }
.rs-price__was {
font-size: var(--rs-text-12-5);
color: var(--rs-ink-soft);
text-decoration: line-through;
}
/* -------------------------------------------------------------------------
11. BEST SELLER FEATURE BAND
---------------------------------------------------------------------- */
.rs-feature {
position: relative;
overflow: hidden;
border-radius: var(--rs-radius-24);
background: var(--rs-hero-bg);
padding: clamp(1.75rem, 4vw, 3.75rem); /* 28 → 60 */
}
.rs-feature__inner {
position: relative;
display: flex;
flex-wrap: wrap;
gap: clamp(1.75rem, 4vw, 3.5rem); /* 28 → 56 */
align-items: center;
}
.rs-feature__body { flex: 1 1 26.25rem; } /* 420px */
.rs-feature__title {
margin-top: var(--rs-space-14);
font-family: var(--rs-font-display);
font-size: var(--rs-text-feature);
line-height: var(--rs-lh-feature);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-feature);
color: var(--rs-green-800);
}
.rs-feature__byline {
margin-top: var(--rs-space-10);
font-size: var(--rs-text-16);
color: var(--rs-green-400);
}
.rs-feature__blurb {
margin-top: var(--rs-space-20);
font-family: var(--rs-font-display);
font-size: var(--rs-text-17);
line-height: var(--rs-lh-blurb);
color: var(--rs-green-500);
max-width: 30rem; /* 480px */
}
.rs-feature__pricing {
margin-top: var(--rs-space-22);
display: flex;
align-items: baseline;
gap: var(--rs-space-12);
flex-wrap: wrap;
}
.rs-feature__price {
font-size: var(--rs-text-26);
font-weight: var(--rs-w-bold);
color: var(--rs-green-800);
}
.rs-feature__rrp {
font-size: var(--rs-text-16);
color: var(--rs-ink-soft);
text-decoration: line-through;
}
.rs-feature__save {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-06);
text-transform: uppercase;
color: var(--rs-red-500);
background: rgba(224, 65, 70, 0.1);
padding: var(--rs-space-5) var(--rs-space-10);
border-radius: var(--rs-radius-pill);
}
.rs-feature__actions {
margin-top: var(--rs-space-26);
display: flex;
gap: var(--rs-space-14);
flex-wrap: wrap;
}
.rs-feature__nav {
margin-top: var(--rs-space-30);
display: flex;
align-items: center;
gap: var(--rs-space-18);
flex-wrap: wrap;
}
.rs-feature__nav-group { display: flex; gap: var(--rs-space-10); }
/* -------------------------------------------------------------------------
13. LISTING PAGE (category browse + search results)
---------------------------------------------------------------------- */
.rs-listing-main { padding: var(--rs-space-24) 0 4.5rem; } /* 24 / 72 */
/* Breadcrumbs */
.rs-crumbs {
display: flex;
align-items: center;
gap: var(--rs-space-8);
flex-wrap: wrap;
margin-bottom: var(--rs-space-18);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-muted);
}
.rs-crumbs__link:hover { color: var(--rs-green-800); }
.rs-crumbs__current { color: var(--rs-green-800); }
.rs-crumbs__sep { color: var(--rs-crumb-sep); }
/* Page head: title + count on the left, sort controls on the right */
.rs-listing-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--rs-space-16);
border-bottom: 1.5px solid var(--rs-green-800);
padding-bottom: var(--rs-space-18);
margin-bottom: var(--rs-space-24);
}
.rs-listing-head__title {
font-family: var(--rs-font-display);
font-size: clamp(1.875rem, 4vw, 2.625rem); /* 30 → 42 */
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-feature);
color: var(--rs-green-800);
}
.rs-listing-head__count {
margin-top: var(--rs-space-7);
font-size: var(--rs-text-14);
color: var(--rs-ink-muted);
}
.rs-listing-head__controls {
display: flex;
gap: var(--rs-space-14);
align-items: center;
flex-wrap: wrap;
}
/* Pill select with its own caret (no native arrow) */
.rs-control {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-muted);
}
.rs-select {
appearance: none;
-webkit-appearance: none;
border: 1.5px solid var(--rs-border-ctrl);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-9) 2.25rem var(--rs-space-9) var(--rs-space-15);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
background-color: var(--rs-white);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.8125rem center; /* 13px */
cursor: pointer;
}
/* Active filter chips */
.rs-chips {
display: flex;
align-items: center;
gap: var(--rs-space-10);
flex-wrap: wrap;
margin-bottom: var(--rs-space-24);
}
.rs-chips__label {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rs-ink-muted);
}
.rs-chip {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
padding: var(--rs-space-6) var(--rs-space-8) var(--rs-space-6) var(--rs-space-13);
border-radius: var(--rs-radius-pill);
border: 1px solid var(--rs-border-chip);
background: var(--rs-white);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-chip:hover { border-color: var(--rs-green-800); }
.rs-chip__x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.0625rem; /* 17px */
height: 1.0625rem;
border-radius: var(--rs-radius-pill);
background: var(--rs-chip-x);
font-size: var(--rs-text-13);
color: var(--rs-ink-muted);
}
.rs-chips__clear {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-red-500);
text-decoration: underline;
padding: var(--rs-space-6) var(--rs-space-4);
}
/* Mobile-only filters toggle */
.rs-filters-toggle {
display: none;
align-items: center;
justify-content: center;
gap: var(--rs-space-9);
width: 100%;
margin-bottom: var(--rs-space-18);
padding: var(--rs-space-13);
border: 1.5px solid var(--rs-green-800);
border-radius: 0.75rem; /* 12px */
background: var(--rs-white);
color: var(--rs-green-800);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
}
/* Two-column shell.
Grid, not flex: with flex-wrap the aside (220px basis) and results (540px
basis) sum to 802px including the gutter, so anything narrower than that
wrapped the sidebar onto its own row and left the books column half empty.
A grid track never wraps. The clamped first column lets the sidebar give
space back to the books as the viewport narrows, instead of holding its
full width and starving them. */
.rs-listing {
display: grid;
grid-template-columns: clamp(13.125rem, 22%, 16.75rem) minmax(0, 1fr);
gap: 2.625rem; /* 42px */
align-items: start;
}
.rs-listing__aside { min-width: 0; }
.rs-listing__results { min-width: 0; }
/* Facets */
.rs-refine {
font-family: var(--rs-font-display);
font-size: 1.1875rem; /* 19px */
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
padding-bottom: var(--rs-space-10);
border-bottom: 1.5px solid var(--rs-green-800);
}
.rs-facet {
border-bottom: 1px solid var(--rs-border);
padding-block: 1.0625rem; /* 17px */
}
.rs-facet__title {
margin-bottom: var(--rs-space-14);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rs-green-800);
}
.rs-facet__options {
display: flex;
flex-direction: column;
gap: 0.6875rem; /* 11px */
overflow: auto;
}
.rs-facet__option {
display: flex;
align-items: center;
gap: 0.6875rem;
font-size: var(--rs-text-14);
color: var(--rs-green-500);
cursor: pointer;
}
.rs-facet__option:hover { color: var(--rs-green-800); }
/* The box is drawn, not a native control, so checkbox and radio can share
one look and differ only by radius. */
.rs-facet__box {
width: 1.125rem; /* 18px */
height: 1.125rem;
flex: 0 0 auto;
border: 1.5px solid var(--rs-border-ctrl);
border-radius: var(--rs-radius-4);
background: var(--rs-white);
display: flex;
align-items: center;
justify-content: center;
color: var(--rs-paper);
font-size: var(--rs-text-11);
line-height: 1;
}
.rs-facet__box--round { border-radius: var(--rs-radius-pill); }
.rs-facet__box--on {
background: var(--rs-green-800);
border-color: var(--rs-green-800);
}
.rs-facet__label { flex: 1; }
.rs-facet__count { color: var(--rs-ink-soft); font-size: var(--rs-text-12-5); }
/* The listing grid is slightly wider-celled than the home rails. */
.rs-book-grid--listing {
grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr)); /* 172px */
gap: var(--rs-space-32) var(--rs-space-24);
}
.rs-book-card__format {
margin-top: var(--rs-space-2);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-06);
text-transform: uppercase;
color: var(--rs-green-400);
}
/* Pagination
Two genuine variants in the design, not one:
catalogue = 42px cell, 11px radius, 1.5px edge, no arrows (source line 1059)
journal = 40px cell, 10px radius, 1px edge, chevron arrows (source line 2505)
Base rule is the catalogue; --journal re-guts the metrics. */
.rs-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--rs-space-9);
margin-top: var(--rs-space-48);
flex-wrap: wrap;
}
.rs-pagination__page {
min-width: 2.625rem; /* 42px */
height: 2.625rem;
padding-inline: var(--rs-space-13);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--rs-border-ctrl);
border-radius: var(--rs-radius-11);
background: var(--rs-white);
color: var(--rs-green-800);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
cursor: pointer;
transition: border-color var(--rs-t-quick), background var(--rs-t-quick), color var(--rs-t-quick);
}
.rs-pagination__page:hover { border-color: var(--rs-green-800); }
.rs-pagination__page--current {
border-color: var(--rs-green-800);
background: var(--rs-green-800);
color: var(--rs-paper);
cursor: default;
}
/* --- Journal variant --- */
.rs-pagination--journal { gap: var(--rs-space-8); margin-top: var(--rs-space-34); }
.rs-pagination--journal .rs-pagination__page {
min-width: 2.5rem; /* 40px */
height: 2.5rem;
padding-inline: var(--rs-space-8);
border-width: 1px;
border-color: var(--rs-page-border);
border-radius: var(--rs-radius-10);
}
.rs-pagination--journal .rs-pagination__page--current { border-color: var(--rs-green-800); }
/* Arrow cells: square, glyph-only, with a real disabled state. */
.rs-pagination__arrow {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--rs-page-border);
border-radius: var(--rs-radius-10);
background: var(--rs-white);
color: var(--rs-green-800);
cursor: pointer;
transition: border-color var(--rs-t-quick), background var(--rs-t-quick), color var(--rs-t-quick);
}
.rs-pagination__arrow:hover {
background: var(--rs-green-800);
border-color: var(--rs-green-800);
color: var(--rs-paper);
}
.rs-pagination__arrow--disabled {
border-color: var(--rs-page-border-off);
color: var(--rs-page-ink-off);
cursor: default;
pointer-events: none;
}
/* Empty state */
.rs-empty {
text-align: center;
padding: 5rem var(--rs-space-24); /* 80px */
border: 1px dashed var(--rs-border-ctrl);
border-radius: 1rem;
background: var(--rs-empty-bed);
}
.rs-empty__title {
margin-bottom: var(--rs-space-8);
font-family: var(--rs-font-display);
font-size: var(--rs-text-24);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-empty__text {
margin-bottom: var(--rs-space-22);
font-size: var(--rs-text-15);
color: var(--rs-ink-muted);
}
.rs-empty__cta {
padding: var(--rs-space-13) var(--rs-space-26);
background: var(--rs-green-800);
color: var(--rs-paper);
border-radius: var(--rs-radius-pill);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
}
.rs-empty__cta:hover { background: var(--rs-green-900); }
/* -------------------------------------------------------------------------
14. PRODUCT DETAIL
---------------------------------------------------------------------- */
.rs-product-main { padding: var(--rs-space-24) 0 4.5rem; } /* 24 / 72 */
/* Crumbs sit further from the content here than on the listing. */
.rs-crumbs--product { margin-bottom: var(--rs-space-28); }
.rs-product {
display: flex;
flex-wrap: wrap;
gap: clamp(2rem, 5vw, 4rem); /* 32 → 64 */
}
/* --- Left: cover and its supporting actions --- */
.rs-product__media { flex: 1 1 18.75rem; max-width: 25rem; } /* 300 / 400 */
.rs-product__cover {
position: relative;
width: 100%;
max-width: 23.75rem; /* 380px */
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.5rem;
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 1.5rem 3.5rem rgba(36, 51, 41, 0.22);
margin-inline: auto;
}
/* Coarser stripe pitch than the card, to suit the larger surface. */
.rs-product__cover .rs-cover__placeholder {
padding: var(--rs-space-22);
background: repeating-linear-gradient(
135deg,
var(--rs-stripe-a), var(--rs-stripe-a) 9px,
var(--rs-stripe-b) 9px, var(--rs-stripe-b) 18px
);
}
.rs-product__cover .rs-cover__placeholder-title { font-size: var(--rs-text-20); }
.rs-product__cover .rs-cover__placeholder-label { letter-spacing: var(--rs-track-16); }
.rs-product__plus {
margin-top: var(--rs-space-20);
width: 100%;
max-width: 23.75rem;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--rs-space-9);
padding: var(--rs-space-14) var(--rs-space-18);
background: var(--rs-green-800);
color: var(--rs-paper);
border-radius: 0.875rem; /* 14px */
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
}
.rs-product__plus:hover { background: var(--rs-green-900); }
.rs-product__plus-mark { color: var(--rs-accent); }
.rs-product__plus-note {
max-width: 23.75rem;
margin: var(--rs-space-9) auto 0;
text-align: center;
font-size: var(--rs-text-12);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-soft);
}
.rs-product__plus-note strong { color: var(--rs-green-400); font-weight: var(--rs-w-semi); }
.rs-product__utils {
display: flex;
gap: var(--rs-space-18);
justify-content: center;
margin-top: var(--rs-space-16);
}
.rs-product__util {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-green-500);
}
.rs-product__util:hover { color: var(--rs-green-800); }
.rs-product__util-heart { font-size: var(--rs-text-17); color: var(--rs-accent); }
/* --- Right: the buy box --- */
.rs-product__info { flex: 2 1 27.5rem; } /* 440px */
.rs-product__badge {
display: inline-block;
padding: var(--rs-space-5) var(--rs-space-11);
border-radius: var(--rs-radius-pill);
background: rgba(36, 51, 41, 0.08);
color: var(--rs-green-800);
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-semi);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.rs-product__title {
margin-top: var(--rs-space-14);
font-family: var(--rs-font-display);
font-size: clamp(2rem, 4vw, 2.875rem); /* 32 → 46 */
line-height: var(--rs-lh-feature);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-feature);
color: var(--rs-green-800);
}
.rs-product__subtitle {
margin-top: var(--rs-space-6);
font-family: var(--rs-font-display);
font-style: italic;
font-size: var(--rs-text-22);
color: var(--rs-ink-muted);
}
.rs-product__byline {
margin-top: var(--rs-space-14);
font-size: var(--rs-text-16);
color: var(--rs-green-500);
}
.rs-product__author {
color: var(--rs-green-800);
font-weight: var(--rs-w-semi);
border-bottom: 1px solid var(--rs-accent);
}
/* Rating: a grey run of stars with a gold run clipped over it, so a
fractional score reads exactly rather than rounding to a whole star. */
.rs-product__rating {
margin-top: var(--rs-space-14);
display: flex;
align-items: center;
gap: var(--rs-space-10);
flex-wrap: wrap;
}
.rs-stars {
position: relative;
display: inline-block;
font-size: var(--rs-text-16);
letter-spacing: 0.125rem; /* 2px */
line-height: 1;
}
.rs-stars__empty { color: var(--rs-border-ctrl); }
.rs-stars__full {
color: var(--rs-accent);
position: absolute;
inset: 0;
overflow: hidden;
white-space: nowrap;
}
/* Star fill in 10% steps. Ratings round to the nearest half star, so a fixed
set of widths covers every case and the template never needs an inline
style for it. */
.rs-stars__full--0 { width: 0; }
.rs-stars__full--10 { width: 10%; }
.rs-stars__full--20 { width: 20%; }
.rs-stars__full--30 { width: 30%; }
.rs-stars__full--40 { width: 40%; }
.rs-stars__full--50 { width: 50%; }
.rs-stars__full--60 { width: 60%; }
.rs-stars__full--70 { width: 70%; }
.rs-stars__full--80 { width: 80%; }
.rs-stars__full--90 { width: 90%; }
.rs-stars__full--100 { width: 100%; }
.rs-product__rating-score { font-size: var(--rs-text-14); font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-product__rating-count { font-size: var(--rs-text-14); color: var(--rs-ink-muted); }
.rs-product__rule { height: 1px; background: var(--rs-border); margin-block: var(--rs-space-26); }
.rs-product__label {
margin-bottom: var(--rs-space-12);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rs-ink-muted);
}
/* Format chooser — one button per Commerce variant. */
.rs-formats { display: flex; gap: var(--rs-space-10); flex-wrap: wrap; }
.rs-format {
flex: 1 1 7.5rem; /* 120px */
min-width: 7.5rem;
text-align: left;
padding: var(--rs-space-12) var(--rs-space-15);
border-radius: 0.6875rem; /* 11px */
border: 1.5px solid var(--rs-border-ctrl);
background: var(--rs-white);
color: var(--rs-green-800);
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rs-format:hover { border-color: var(--rs-green-400); }
.rs-format--on {
border-color: var(--rs-green-800);
background: var(--rs-green-800);
color: var(--rs-paper);
}
.rs-format__name { display: block; font-weight: var(--rs-w-semi); font-size: var(--rs-text-14); }
.rs-format__price { display: block; font-size: var(--rs-text-13); opacity: 0.78; margin-top: var(--rs-space-2); }
.rs-product__pricing {
margin-top: var(--rs-space-26);
display: flex;
align-items: baseline;
gap: var(--rs-space-12);
flex-wrap: wrap;
}
.rs-product__price { font-size: var(--rs-text-32); font-weight: var(--rs-w-bold); color: var(--rs-green-800); }
.rs-product__rrp { font-size: var(--rs-text-17); color: var(--rs-ink-soft); text-decoration: line-through; }
.rs-product__save {
font-size: var(--rs-text-11-5);
font-weight: var(--rs-w-semi);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--rs-red-500);
background: rgba(224, 65, 70, 0.1);
padding: var(--rs-space-5) var(--rs-space-10);
border-radius: var(--rs-radius-pill);
}
.rs-product__stock {
margin-top: var(--rs-space-12);
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-stock-text);
}
.rs-product__stock-dot {
width: var(--rs-space-8);
height: var(--rs-space-8);
border-radius: var(--rs-radius-pill);
background: var(--rs-stock-dot);
}
.rs-product__buy {
margin-top: var(--rs-space-24);
display: flex;
gap: var(--rs-space-14);
flex-wrap: wrap;
align-items: center;
}
.rs-qty {
display: flex;
align-items: center;
border: 1.5px solid var(--rs-border-ctrl);
border-radius: var(--rs-radius-pill);
height: 3.375rem; /* 54px */
overflow: hidden;
}
.rs-qty__btn {
width: 3rem; /* 48px */
height: 100%;
font-size: var(--rs-text-22);
color: var(--rs-green-800);
}
.rs-qty__btn:hover { background: var(--rs-chip-x); }
.rs-qty__value {
min-width: 2.375rem; /* 38px */
text-align: center;
font-size: var(--rs-text-16);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-add-to-basket {
flex: 1 1 15rem; /* 240px */
height: 3.375rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rs-space-10);
padding-inline: var(--rs-space-30);
background: var(--rs-green-800);
color: var(--rs-paper);
border-radius: var(--rs-radius-pill);
font-size: var(--rs-text-16);
font-weight: var(--rs-w-semi);
}
.rs-add-to-basket:hover { background: var(--rs-green-900); }
.rs-product__terms {
margin-top: var(--rs-space-18);
font-size: var(--rs-text-13-5);
color: var(--rs-ink-muted);
}
/* --- Lower half: blurb + spec table --- */
.rs-product__lower {
display: flex;
flex-wrap: wrap;
gap: clamp(2rem, 5vw, 4rem);
margin-top: 4rem; /* 64px */
}
.rs-product__about { flex: 2 1 27.5rem; max-width: 42.5rem; } /* 440 / 680 */
.rs-product__specs { flex: 1 1 17.5rem; max-width: 22.5rem; } /* 280 / 360 */
.rs-product__h2 {
font-family: var(--rs-font-display);
font-size: var(--rs-text-26);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-product__about .rs-product__h2 { margin-bottom: var(--rs-space-18); }
.rs-product__specs .rs-product__h2 { margin-bottom: var(--rs-space-12); }
.rs-product__para {
margin-bottom: var(--rs-space-16);
font-size: var(--rs-text-16);
line-height: 1.75;
color: var(--rs-green-500);
}
.rs-spec {
display: flex;
justify-content: space-between;
gap: var(--rs-space-16);
padding-block: 0.6875rem; /* 11px */
border-bottom: 1px solid var(--rs-border);
}
.rs-spec__key { font-size: var(--rs-text-14); font-weight: var(--rs-w-medium); color: var(--rs-ink-muted); }
.rs-spec__value { font-size: var(--rs-text-14); font-weight: var(--rs-w-medium); color: var(--rs-ink); text-align: right; }
/* --- Creators talking about this book --- */
.rs-book-creators { margin-top: 4.125rem; } /* 66px */
.rs-book-creators__head { padding-bottom: var(--rs-space-14); margin-bottom: var(--rs-space-26); }
.rs-book-creators__title {
margin-top: var(--rs-space-6);
font-family: var(--rs-font-display);
font-size: clamp(1.5rem, 3vw, 2rem); /* 24 → 32 */
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-creator-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15.75rem, 1fr)); /* 252px */
gap: var(--rs-space-16);
}
.rs-creator-card {
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1rem;
padding: var(--rs-space-15);
display: flex;
flex-direction: column;
gap: var(--rs-space-14);
}
.rs-creator-card__head { display: flex; align-items: center; gap: 0.6875rem; }
.rs-creator-card__avatar {
width: var(--rs-space-44);
height: var(--rs-space-44);
flex: 0 0 auto;
border-radius: var(--rs-radius-pill);
overflow: hidden;
background: var(--rs-cover-bed);
/* Double ring: white gap, then a gold band. */
box-shadow: 0 0 0 0.125rem var(--rs-white), 0 0 0 0.21875rem var(--rs-accent);
}
.rs-creator-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rs-creator-card__handle {
display: flex;
align-items: center;
gap: var(--rs-space-5);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-bold);
color: var(--rs-green-800);
}
.rs-creator-card__meta { font-size: var(--rs-text-12); color: var(--rs-ink-muted); }
/* The card's second row: a portrait video thumb with a play badge, the
creator's pull-quote, and its like/view count. This is why the card is a
column with a 14px gap. */
.rs-creator-card__clip { display: flex; gap: var(--rs-space-12); }
.rs-creator-card__thumb {
position: relative;
width: 3.125rem; /* 50px */
flex: 0 0 auto;
aspect-ratio: 9 / 16;
border-radius: 0.5rem;
overflow: hidden;
background: var(--rs-video-bed);
display: flex;
align-items: center;
justify-content: center;
}
.rs-creator-card__thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-creator-card__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.22); }
.rs-creator-card__play {
position: relative;
width: 1.375rem; /* 22px */
height: 1.375rem;
border-radius: var(--rs-radius-pill);
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
}
.rs-creator-card__play svg { fill: var(--rs-green-800); }
.rs-creator-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.rs-creator-card__quote {
font-family: var(--rs-font-display);
font-style: italic;
font-size: var(--rs-text-14);
line-height: 1.42;
color: var(--rs-green-500);
}
.rs-creator-card__stats {
margin-top: var(--rs-space-7);
display: inline-flex;
align-items: center;
gap: var(--rs-space-6);
font-size: var(--rs-text-11-5);
font-weight: var(--rs-w-semi);
color: var(--rs-ink-muted);
}
.rs-creator-card__stats svg { fill: var(--rs-red-500); }
/* -------------------------------------------------------------------------
15. FOOTER
---------------------------------------------------------------------- */
.rs-footer {
background: var(--rs-green-800);
color: var(--rs-on-dark-soft);
}
/* auto-fit rather than a fixed count, so the five columns reflow without
a breakpoint of their own. */
.rs-footer__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); /* 180px */
gap: var(--rs-space-40);
padding-block: 4rem var(--rs-space-30); /* 64 / 30 */
}
.rs-footer__quote {
margin-bottom: var(--rs-space-20);
font-family: var(--rs-font-display);
font-style: italic;
font-size: var(--rs-text-19);
line-height: 1.45;
color: var(--rs-paper);
max-width: 14.375rem; /* 230px */
}
.rs-footer__social { display: flex; gap: var(--rs-space-10); }
.rs-social-link {
width: 2.375rem; /* 38px */
height: 2.375rem;
border-radius: var(--rs-radius-pill);
border: 1px solid var(--rs-on-dark-icon);
display: flex;
align-items: center;
justify-content: center;
color: var(--rs-paper);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
transition: background var(--rs-dur-card) var(--rs-ease),
color var(--rs-dur-card) var(--rs-ease),
border-color var(--rs-dur-card) var(--rs-ease);
}
.rs-social-link:hover {
background: var(--rs-accent);
color: var(--rs-green-800);
border-color: var(--rs-accent);
}
.rs-footer__col-title {
margin-bottom: var(--rs-space-16);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-14);
text-transform: uppercase;
color: var(--rs-accent);
}
.rs-footer__links {
display: flex;
flex-direction: column;
gap: 0.6875rem; /* 11px */
font-size: var(--rs-text-14);
}
.rs-footer__link:hover { color: var(--rs-paper); }
.rs-footer__hours {
color: var(--rs-on-dark-faint);
font-size: var(--rs-text-13);
line-height: 1.5;
}
.rs-footer__bar { border-top: 1px solid var(--rs-on-dark-hair); }
.rs-footer__bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-20);
flex-wrap: wrap;
padding-block: var(--rs-space-22);
}
.rs-footer__logo { height: 2rem; width: auto; display: block; } /* 32px */
.rs-footer__copy { font-size: var(--rs-text-13); color: var(--rs-on-dark-copy); }
.rs-footer__pitch {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-on-dark-soft);
}
.rs-footer__pitch a { color: var(--rs-accent); font-weight: var(--rs-w-semi); }
/* -------------------------------------------------------------------------
16. HOME — REMAINING BANDS
---------------------------------------------------------------------- */
/* Gold-on-light eyebrow, used by Signed & special editions. */
.rs-eyebrow--gold { color: var(--rs-gold-700); }
.rs-section--band { padding-block: var(--rs-space-40); }
.rs-section--cats { padding-block: 3.375rem; } /* 54px */
.rs-section--wide { padding-block: 3.5rem; } /* 56px */
.rs-section--news { padding-block: 4rem; } /* 64px */
/* --- 16a. Readership+ membership band --- */
.rs-plus-band {
position: relative;
overflow: hidden;
border-radius: 1.375rem; /* 22px */
background: var(--rs-green-800);
color: var(--rs-paper);
padding: clamp(2rem, 4vw, 3.25rem); /* 32 → 52 */
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-36);
align-items: center;
justify-content: space-between;
}
.rs-flourish--plus {
left: -1.25rem;
bottom: -8.75rem; /* -140px */
font-size: 22.5rem; /* 360px */
color: rgba(228, 199, 94, 0.08);
}
.rs-plus-band__body { position: relative; flex: 1 1 26.25rem; } /* 420px */
.rs-plus-band__title {
margin-top: var(--rs-space-14);
font-family: var(--rs-font-display);
font-size: clamp(1.75rem, 3.4vw, 2.5rem); /* 28 → 40 */
line-height: 1.08;
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-head);
color: var(--rs-paper);
}
.rs-plus-band__list {
margin-top: var(--rs-space-22);
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-14) var(--rs-space-28);
}
.rs-plus-band__item {
display: flex;
align-items: center;
gap: var(--rs-space-10);
font-size: var(--rs-text-15);
font-weight: var(--rs-w-medium);
color: var(--rs-on-dark-mute);
}
.rs-plus-band__tick { color: var(--rs-accent); }
.rs-plus-band__aside {
position: relative;
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: var(--rs-space-12);
align-items: flex-start;
}
.rs-plus-band__from { font-size: var(--rs-text-15); color: rgba(251, 250, 249, 0.7); }
.rs-plus-band__price {
font-size: var(--rs-text-30);
font-weight: var(--rs-w-semi);
color: var(--rs-paper);
}
.rs-plus-band__link {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: rgba(251, 250, 249, 0.8);
text-decoration: underline;
}
.rs-plus-band__link:hover { color: var(--rs-paper); }
/* --- 16b. Shop by category --- */
.rs-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(32.5rem, 1fr)); /* 520px */
gap: var(--rs-space-18);
}
.rs-cat-group {
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-30);
align-items: flex-start;
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: var(--rs-radius-18);
padding: var(--rs-space-26) var(--rs-space-28);
}
.rs-cat-group__head { flex: 1 1 14.375rem; min-width: 13.125rem; max-width: 20rem; }
.rs-cat-group__title {
font-family: var(--rs-font-display);
font-size: var(--rs-text-26);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-cat-group__title:hover { color: var(--rs-green-400); }
.rs-cat-group__subs {
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-8);
margin-top: var(--rs-space-16);
}
.rs-cat-chip {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-green-500);
background: var(--rs-chip-bed);
border: 1px solid var(--rs-border);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-7) var(--rs-space-13);
}
.rs-cat-chip:hover {
background: var(--rs-green-800);
color: var(--rs-paper);
border-color: var(--rs-green-800);
}
.rs-cat-group__all {
display: inline-flex;
align-items: center;
gap: var(--rs-space-7);
margin-top: var(--rs-space-18);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
}
.rs-cat-group__all:hover { color: var(--rs-green-800); }
.rs-cat-group__books { flex: 2 1 22.5rem; display: flex; flex-wrap: wrap; gap: var(--rs-space-16); }
/* A smaller cover than the card grid uses — its own component, not a
modifier, because the placeholder type and stripe pitch differ too. */
.rs-mini-book { flex: 1 1 5.375rem; max-width: 7.5rem; min-width: 5rem; display: flex; flex-direction: column; gap: var(--rs-space-8); }
.rs-mini-book__cover {
position: relative;
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.3125rem; /* 5px */
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 0.0625rem 0.1875rem rgba(36, 51, 41, 0.12);
transition: transform var(--rs-dur-card) ease, box-shadow var(--rs-dur-card) ease;
}
.rs-mini-book:hover .rs-mini-book__cover {
transform: translateY(-0.3125rem);
box-shadow: 0 0.75rem 1.5rem rgba(36, 51, 41, 0.16);
}
.rs-mini-book__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--rs-space-7);
text-align: center;
font-family: var(--rs-font-display);
font-size: var(--rs-text-9-5);
line-height: 1.2;
font-weight: var(--rs-w-medium);
color: var(--rs-green-200);
background: repeating-linear-gradient(
135deg,
var(--rs-stripe-a), var(--rs-stripe-a) 7px,
var(--rs-stripe-b) 7px, var(--rs-stripe-b) 14px
);
}
/* --- 16b2. Collections grid ("Curated for you")
A photo card, not a book card: the collection image sits under a
left-to-right paper wash so the type stays readable over any artwork. --- */
.rs-collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); /* 250px */
gap: var(--rs-space-20);
}
.rs-collection-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 13rem; /* 208px */
border-radius: 1rem;
padding: var(--rs-space-24);
background-color: var(--rs-mist);
background-size: cover;
background-position: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rs-collection-card:hover {
transform: translateY(-0.3125rem);
box-shadow: 0 1rem 2.25rem rgba(36, 51, 41, 0.14);
}
/* The wash is a gradient layer above the photo, declared here so the only
thing the template supplies is the image itself. */
.rs-collection-card--booksellers { background-color: var(--rs-tint-shop); }
.rs-collection-card--award { background-color: var(--rs-tint-award); }
.rs-collection-card--bookclub { background-color: var(--rs-tint-club); }
.rs-collection-card--crime { background-color: var(--rs-tint-crime); }
.rs-collection-card__art {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.rs-collection-card__art::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg,
rgba(251, 250, 249, 0.94),
rgba(251, 250, 249, 0.55) 46%,
rgba(251, 250, 249, 0.08));
}
.rs-collection-card__art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rs-collection-card__body { position: relative; }
.rs-collection-card__eyebrow {
margin-bottom: var(--rs-space-8);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-14);
text-transform: uppercase;
color: var(--rs-green-400);
}
.rs-collection-card__title {
margin-bottom: var(--rs-space-8);
font-family: var(--rs-font-display);
font-size: var(--rs-text-25);
line-height: 1.15;
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-collection-card__text {
margin-bottom: var(--rs-space-14);
font-size: var(--rs-text-14);
line-height: 1.5;
color: var(--rs-ink-warm);
}
.rs-collection-card__cta {
display: inline-flex;
align-items: center;
gap: var(--rs-space-7);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
/* --- 16c. Journal cards --- */
.rs-journal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); /* 280px */
gap: var(--rs-space-22);
}
.rs-journal-card {
display: flex;
flex-direction: column;
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1rem;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rs-journal-card:hover {
transform: translateY(-0.3125rem);
box-shadow: 0 1rem 2.25rem rgba(36, 51, 41, 0.12);
}
.rs-journal-card__media {
height: 8rem; /* 128px */
background: var(--rs-mist);
overflow: hidden;
}
.rs-journal-card__media img { width: 100%; height: 100%; object-fit: cover; }
.rs-journal-card__body { padding: var(--rs-space-22); }
.rs-journal-card__tag {
margin-bottom: var(--rs-space-10);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
text-transform: uppercase;
color: var(--rs-green-400);
}
.rs-journal-card__title {
margin-bottom: var(--rs-space-14);
font-family: var(--rs-font-display);
font-size: var(--rs-text-20);
line-height: 1.3;
font-weight: var(--rs-w-medium);
color: var(--rs-ink);
}
.rs-journal-card__meta { font-size: var(--rs-text-13); font-weight: var(--rs-w-medium); color: var(--rs-ink-muted); }
/* --- 16d. Bookseller recommendations --- */
.rs-rec-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); /* 300px */
gap: var(--rs-space-22);
}
.rs-rec-card {
display: flex;
gap: var(--rs-space-18);
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1rem;
padding: var(--rs-space-22);
}
.rs-rec-card__cover {
position: relative;
width: 5.25rem; /* 84px */
flex: 0 0 auto;
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.3125rem;
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 0.125rem 0.5rem rgba(36, 51, 41, 0.14);
}
.rs-rec-card__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Oversized opening quote, cropped to an 18px slot so it hangs above the
text rather than pushing it down. */
.rs-rec-card__mark {
font-family: var(--rs-font-display);
font-size: var(--rs-text-36);
font-weight: var(--rs-w-semi);
color: var(--rs-accent);
line-height: 0.6;
height: 1.125rem;
}
.rs-rec-card__quote {
margin-bottom: var(--rs-space-12);
font-family: var(--rs-font-display);
font-style: italic;
font-size: var(--rs-text-15);
line-height: 1.5;
color: var(--rs-green-500);
}
.rs-rec-card__foot { margin-top: auto; }
.rs-rec-card__name { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-rec-card__store { font-size: var(--rs-text-12); color: var(--rs-ink-muted); }
.rs-rec-card__link {
margin-top: var(--rs-space-12);
display: inline-flex;
align-items: center;
gap: var(--rs-space-6);
font-size: var(--rs-text-12-5);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
}
.rs-rec-card__link:hover { color: var(--rs-green-800); }
/* --- 16e. Signed & special edition seal --- */
.rs-badge--seal {
display: inline-flex;
align-items: center;
gap: var(--rs-space-5);
padding: var(--rs-space-5) var(--rs-space-10);
background: linear-gradient(135deg, var(--rs-gold-500), var(--rs-gold-deep));
color: var(--rs-green-800);
font-size: var(--rs-text-9);
font-weight: var(--rs-w-bold);
letter-spacing: var(--rs-track-06);
text-transform: uppercase;
box-shadow: 0 0.125rem 0.4375rem rgba(176, 141, 58, 0.45);
}
/* --- 16f. Reviews band --- */
.rs-reviews {
background: var(--rs-mist);
border-block: 1px solid var(--rs-mist-line);
padding-block: 3.75rem; /* 60px */
}
.rs-reviews__inner { display: flex; flex-wrap: wrap; gap: var(--rs-space-40); align-items: center; }
.rs-reviews__summary { flex: 1 1 17.5rem; }
.rs-reviews__score-row { display: flex; align-items: baseline; gap: var(--rs-space-10); margin-top: var(--rs-space-12); }
.rs-reviews__score {
font-family: var(--rs-font-display);
font-size: var(--rs-text-56);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
line-height: 1;
}
.rs-reviews__out-of { font-size: var(--rs-text-16); font-weight: var(--rs-w-medium); color: var(--rs-ink-muted); }
.rs-reviews__stars {
color: var(--rs-accent);
font-size: var(--rs-text-20);
letter-spacing: 0.25rem; /* 4px */
margin-top: var(--rs-space-8);
}
.rs-reviews__note { margin-top: var(--rs-space-10); font-size: var(--rs-text-14); font-weight: var(--rs-w-medium); color: var(--rs-green-500); }
.rs-reviews__list {
flex: 2 1 30rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); /* 220px */
gap: var(--rs-space-18);
}
.rs-review {
background: var(--rs-white);
border: 1px solid var(--rs-mist-card);
border-radius: 0.875rem;
padding: var(--rs-space-20);
}
.rs-review__stars { color: var(--rs-accent); font-size: var(--rs-text-13); letter-spacing: 0.125rem; }
.rs-review__text {
margin-block: var(--rs-space-12) var(--rs-space-14);
font-size: var(--rs-text-14);
line-height: 1.55;
color: var(--rs-green-500);
}
.rs-review__name { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
/* --- 16g. Author events --- */
.rs-events { display: flex; flex-direction: column; gap: var(--rs-space-14); }
.rs-event {
display: flex;
align-items: center;
gap: var(--rs-space-22);
flex-wrap: wrap;
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 0.875rem;
padding: var(--rs-space-18) var(--rs-space-22);
}
.rs-event__date { flex: 0 0 auto; width: 3.75rem; text-align: center; }
.rs-event__day {
font-family: var(--rs-font-display);
font-size: var(--rs-text-27);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
line-height: 1;
}
.rs-event__month {
margin-top: var(--rs-space-3);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
color: var(--rs-gold-700);
}
.rs-event__rule { width: 1px; align-self: stretch; background: var(--rs-border); }
.rs-event__body { flex: 1 1 15rem; min-width: 0; }
.rs-event__title {
font-family: var(--rs-font-display);
font-size: var(--rs-text-19);
line-height: var(--rs-lh-card);
font-weight: var(--rs-w-medium);
color: var(--rs-ink);
}
.rs-event__meta { margin-top: var(--rs-space-5); font-size: var(--rs-text-13-5); color: var(--rs-ink-muted); }
.rs-event__cta {
flex: 0 0 auto;
padding: 0.6875rem var(--rs-space-22);
border: 1.5px solid var(--rs-green-800);
border-radius: var(--rs-radius-pill);
color: var(--rs-green-800);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
}
.rs-event__cta:hover { background: var(--rs-green-800); color: var(--rs-paper); }
/* --- 16h. Full-bleed testimonial --- */
.rs-testimonial {
background: var(--rs-green-800);
color: var(--rs-paper);
padding-block: clamp(3.5rem, 7vw, 5.25rem); /* 56 → 84 */
position: relative;
overflow: hidden;
}
.rs-flourish--testimonial {
left: 50%;
top: -5.625rem;
transform: translateX(-50%);
font-size: 20rem; /* 320px */
color: rgba(228, 199, 94, 0.1);
}
.rs-testimonial__inner {
max-width: 52.5rem; /* 840px */
margin-inline: auto;
padding-inline: var(--rs-gutter);
text-align: center;
position: relative;
}
.rs-testimonial__quote {
font-family: var(--rs-font-display);
font-style: italic;
font-size: clamp(1.625rem, 3.4vw, 2.375rem); /* 26 → 38 */
line-height: 1.35;
color: var(--rs-paper);
}
.rs-testimonial__by {
margin-top: var(--rs-space-22);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-16);
text-transform: uppercase;
color: var(--rs-accent);
}
.rs-testimonial__cta {
margin: var(--rs-space-30) auto 0;
display: inline-flex;
align-items: center;
gap: var(--rs-space-9);
padding: var(--rs-space-14) var(--rs-space-26);
border: 1.5px solid var(--rs-on-dark-edge);
border-radius: var(--rs-radius-pill);
color: var(--rs-paper);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
}
.rs-testimonial__cta:hover { background: var(--rs-paper); color: var(--rs-green-800); border-color: var(--rs-paper); }
/* --- 16i. Newsletter --- */
.rs-newsletter {
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-40);
align-items: center;
justify-content: space-between;
background: var(--rs-hero-bg);
border-radius: var(--rs-radius-18);
padding: clamp(1.75rem, 4vw, 3rem); /* 28 → 48 */
}
.rs-newsletter__body { flex: 1 1 20rem; }
.rs-newsletter__title {
font-family: var(--rs-font-display);
font-size: clamp(1.5rem, 2.6vw, 2rem); /* 24 → 32 */
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-head);
color: var(--rs-green-800);
}
.rs-newsletter__text {
margin-top: var(--rs-space-10);
font-size: var(--rs-text-16);
line-height: 1.6;
color: var(--rs-green-500);
max-width: 26.25rem;
}
.rs-newsletter__form { flex: 1 1 20rem; max-width: 28.75rem; width: 100%; }
.rs-newsletter__row { display: flex; gap: var(--rs-space-10); flex-wrap: wrap; }
.rs-newsletter__input {
flex: 1 1 12.5rem;
height: 3.125rem; /* 50px */
border: 1.5px solid var(--rs-border-chip);
border-radius: var(--rs-radius-pill);
padding-inline: var(--rs-space-20);
font-size: var(--rs-text-15);
color: var(--rs-ink);
background: var(--rs-white);
outline: none;
}
.rs-newsletter__submit {
height: 3.125rem;
padding-inline: var(--rs-space-28);
background: var(--rs-green-800);
color: var(--rs-paper);
border-radius: var(--rs-radius-pill);
font-size: var(--rs-text-15);
font-weight: var(--rs-w-semi);
}
.rs-newsletter__submit:hover { background: var(--rs-green-900); }
.rs-newsletter__note {
margin: var(--rs-space-12) var(--rs-space-4) 0;
font-size: var(--rs-text-12-5);
color: var(--rs-ink-muted);
}
/* -------------------------------------------------------------------------
17. MOBILE DRAWER
----------------------------------------------------------------------
Slides in from the left under a scrim. Hidden by default and revealed by
[data-open] on the root, so the whole thing is one attribute toggle for
the JS — no class juggling.
---------------------------------------------------------------------- */
.rs-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.rs-drawer[data-open="1"] { visibility: visible; }
.rs-drawer__scrim {
position: absolute;
inset: 0;
background: rgba(27, 25, 24, 0.5);
opacity: 0;
transition: opacity 0.32s var(--rs-ease);
}
.rs-drawer[data-open="1"] .rs-drawer__scrim { opacity: 1; }
.rs-drawer__panel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: min(21.25rem, 86vw); /* 340px */
background: var(--rs-paper);
box-shadow: 0 0 2.5rem rgba(36, 51, 41, 0.3);
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.32s var(--rs-ease);
}
.rs-drawer[data-open="1"] .rs-drawer__panel { transform: translateX(0); }
/* --- Green head strip: basket, account, close --- */
.rs-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-12);
padding: var(--rs-space-15) var(--rs-space-18);
background: var(--rs-green-800);
}
.rs-drawer__actions { display: flex; align-items: center; gap: var(--rs-space-22); }
.rs-drawer__action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--rs-space-3);
color: var(--rs-paper);
}
.rs-drawer__action-label {
font-size: var(--rs-text-9);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-10);
color: rgba(251, 250, 249, 0.85);
}
.rs-drawer__count {
position: absolute;
top: -0.375rem;
right: -0.5rem;
min-width: 1rem;
height: 1rem;
padding-inline: var(--rs-space-4);
border-radius: var(--rs-radius-pill);
background: var(--rs-accent);
color: var(--rs-green-800);
font-size: var(--rs-text-9);
font-weight: var(--rs-w-bold);
display: flex;
align-items: center;
justify-content: center;
}
.rs-drawer__close {
width: var(--rs-space-40);
height: var(--rs-space-40);
color: var(--rs-paper);
display: flex;
align-items: center;
justify-content: center;
}
/* --- Search --- */
.rs-drawer__search { padding: var(--rs-space-16) var(--rs-space-18); display: flex; gap: var(--rs-space-9); }
.rs-drawer__input {
flex: 1;
height: var(--rs-space-44);
border: 1.5px solid var(--rs-border-ctrl);
border-radius: var(--rs-radius-pill);
padding-inline: var(--rs-space-16);
font-size: var(--rs-text-14);
color: var(--rs-ink);
background: var(--rs-white);
outline: none;
min-width: 0;
}
.rs-drawer__search-btn {
width: var(--rs-space-44);
height: var(--rs-space-44);
flex: 0 0 auto;
border-radius: var(--rs-radius-pill);
background: var(--rs-green-800);
color: var(--rs-paper);
display: flex;
align-items: center;
justify-content: center;
}
/* --- Accordion nav --- */
.rs-drawer__nav { padding-block: var(--rs-space-2) var(--rs-space-6); }
.rs-drawer__group { border-top: 1px solid var(--rs-border); }
.rs-drawer__row { display: flex; align-items: stretch; }
.rs-drawer__link {
/* display:block matters for the standalone rows (Education, Journal…).
Inside .rs-drawer__row the anchor is a flex item and lays out either
way, but on its own it would default to inline — where vertical
padding paints without reserving height, so the rows collapse. */
display: block;
flex: 1;
padding: var(--rs-space-15) var(--rs-space-18);
font-size: var(--rs-text-16);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-drawer__toggle {
width: 3.25rem; /* 52px */
border-left: 1px solid var(--rs-border);
color: var(--rs-green-800);
display: flex;
align-items: center;
justify-content: center;
}
.rs-drawer__chevron { display: inline-flex; transition: transform 0.2s ease; }
.rs-drawer__group[data-open="1"] .rs-drawer__chevron { transform: rotate(90deg); }
.rs-drawer__sub {
display: none;
flex-direction: column;
padding-block: var(--rs-space-2) var(--rs-space-12);
background: var(--rs-chip-bed);
}
.rs-drawer__group[data-open="1"] .rs-drawer__sub { display: flex; }
.rs-drawer__sub-all {
padding: var(--rs-space-10) var(--rs-space-18) var(--rs-space-10) var(--rs-space-30);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
}
.rs-drawer__sub-link {
padding: var(--rs-space-9) var(--rs-space-18) var(--rs-space-9) var(--rs-space-30);
font-size: var(--rs-text-14);
color: var(--rs-green-500);
}
/* --- Foot links --- */
.rs-drawer__foot {
margin-top: auto;
padding: var(--rs-space-18);
border-top: 1px solid var(--rs-border);
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-10) var(--rs-space-18);
}
.rs-drawer__foot-link { font-size: var(--rs-text-13); font-weight: var(--rs-w-medium); color: var(--rs-ink-muted); }
/* -------------------------------------------------------------------------
18. PRODUCT — READERSHIP+ EDITION
----------------------------------------------------------------------
The members-only view of a book. Same product, richer presentation: a
parchment page bed, a lit 3D cover, and gold used as a membership signal
rather than decoration.
---------------------------------------------------------------------- */
.rs-member-page { background: var(--rs-parchment); }
.rs-member-page__top { padding: var(--rs-space-20) 0 0; }
.rs-member-page__top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-12);
flex-wrap: wrap;
}
.rs-crumbs__sep--warm { color: var(--rs-parchment-3); }
/* Classic ⇄ Readership+ switch */
.rs-edition-toggle {
display: inline-flex;
align-items: center;
background: var(--rs-parchment-2);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-4);
gap: var(--rs-space-2);
}
.rs-edition-toggle__option {
font-size: var(--rs-text-12-5);
font-weight: var(--rs-w-semi);
color: var(--rs-ink-warm);
padding: var(--rs-space-7) var(--rs-space-15);
border-radius: var(--rs-radius-pill);
}
.rs-edition-toggle__option:hover { color: var(--rs-green-800); }
.rs-edition-toggle__option--on {
color: var(--rs-green-800);
background: var(--rs-white);
box-shadow: 0 0.0625rem 0.1875rem rgba(36, 51, 41, 0.14);
display: inline-flex;
align-items: center;
gap: var(--rs-space-6);
}
.rs-edition-toggle__mark { color: var(--rs-gold-mark); }
/* --- Hero --- */
.rs-member-hero {
position: relative;
overflow: hidden;
background: var(--rs-green-800);
color: var(--rs-paper);
margin-top: var(--rs-space-16);
}
/* Two stacked washes: a per-book mood tint, then a radial that darkens the
lower left so the type stays legible whatever the tint is. */
.rs-member-hero__mood { position: absolute; inset: 0; opacity: 0.55; }
.rs-member-hero__veil {
position: absolute;
inset: 0;
background: radial-gradient(120% 120% at 78% 0%, rgba(36, 51, 41, 0.35), rgba(36, 51, 41, 0.94));
}
.rs-flourish--member { right: 3%; top: -8.125rem; color: rgba(228, 199, 94, 0.09); }
.rs-member-hero__inner { padding-block: clamp(2.375rem, 4.5vw, 4rem); position: relative; }
.rs-member-hero__row { display: flex; flex-wrap: wrap; gap: clamp(1.875rem, 4vw, 3.75rem); }
/* --- The lit, tilted cover --- */
.rs-member-cover { flex: 0 0 auto; display: flex; justify-content: center; }
.rs-member-cover__stage { position: relative; }
/* A blurred ellipse standing in for a cast shadow on the ground. */
.rs-member-cover__shadow {
position: absolute;
left: 0.875rem;
right: 0.875rem;
bottom: -1rem;
height: 2.125rem;
background: rgba(0, 0, 0, 0.4);
filter: blur(1.125rem);
border-radius: 50%;
}
.rs-member-cover__book {
position: relative;
width: 14.375rem; /* 230px */
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.5625rem;
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 2.125rem 4.625rem rgba(0, 0, 0, 0.55);
transform: perspective(68.75rem) rotateY(-11deg) rotateX(2deg);
}
.rs-member-cover__book .rs-cover__placeholder {
padding: var(--rs-space-18);
background: repeating-linear-gradient(
135deg,
var(--rs-stripe-a), var(--rs-stripe-a) 9px,
var(--rs-stripe-b) 9px, var(--rs-stripe-b) 18px
);
}
.rs-member-cover__book .rs-cover__placeholder-title { font-size: var(--rs-text-17); }
.rs-member-cover__book .rs-cover__placeholder-label { letter-spacing: var(--rs-track-16); }
/* Sheen across the jacket, then a darkened spine down the left edge. */
.rs-member-cover__sheen {
position: absolute;
inset: 0;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 44%);
}
.rs-member-cover__spine {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.5625rem;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
}
/* --- Hero body --- */
.rs-member-hero__body { flex: 1 1 23.75rem; min-width: 17.5rem; }
.rs-member-badge {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--rs-green-800);
background: linear-gradient(180deg, var(--rs-gold-light), var(--rs-gold-500));
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-7) var(--rs-space-14);
box-shadow: 0 0.25rem 0.875rem rgba(228, 199, 94, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rs-member-hero__title {
margin-top: var(--rs-space-15);
font-family: var(--rs-font-display);
font-size: clamp(2.125rem, 4.6vw, 3.375rem); /* 34 → 54 */
line-height: 1.02;
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-tight);
}
.rs-member-hero__subtitle {
margin-top: var(--rs-space-6);
font-family: var(--rs-font-display);
font-style: italic;
font-size: var(--rs-text-21);
color: var(--rs-on-dark-soft);
}
.rs-member-hero__meta {
margin-top: var(--rs-space-13);
display: flex;
align-items: center;
gap: var(--rs-space-12);
flex-wrap: wrap;
}
.rs-member-hero__by { font-size: var(--rs-text-15); color: rgba(251, 250, 249, 0.85); }
.rs-member-hero__by strong { color: var(--rs-paper); font-weight: var(--rs-w-semi); }
.rs-member-hero__dot {
width: var(--rs-space-4);
height: var(--rs-space-4);
border-radius: var(--rs-radius-pill);
background: var(--rs-on-dark-edge);
}
.rs-member-hero__rating { display: inline-flex; align-items: center; gap: var(--rs-space-7); }
.rs-stars--onDark { font-size: var(--rs-text-14); }
.rs-stars--onDark .rs-stars__empty { color: rgba(251, 250, 249, 0.28); }
.rs-member-hero__score { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: rgba(251, 250, 249, 0.85); }
.rs-member-hero__genre {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--rs-accent);
border: 1px solid rgba(228, 199, 94, 0.4);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-4) 0.6875rem;
}
/* --- "Why you'll love it" --- */
.rs-hook {
margin-top: var(--rs-space-20);
position: relative;
padding: var(--rs-space-18) var(--rs-space-20) var(--rs-space-18) var(--rs-space-22);
background: rgba(251, 250, 249, 0.07);
border: 1px solid rgba(251, 250, 249, 0.14);
border-radius: 0.875rem;
max-width: 36.25rem; /* 580px */
overflow: hidden;
}
.rs-hook__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0.25rem; background: var(--rs-accent); }
.rs-hook__label {
display: flex;
align-items: center;
gap: var(--rs-space-7);
margin-bottom: var(--rs-space-7);
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-14);
text-transform: uppercase;
color: var(--rs-accent);
}
.rs-hook__text {
font-family: var(--rs-font-display);
font-size: var(--rs-text-17);
line-height: 1.55;
color: var(--rs-paper);
}
/* --- Buy row --- */
.rs-member-hero__buy {
margin-top: var(--rs-space-22);
display: flex;
align-items: center;
gap: var(--rs-space-16);
flex-wrap: wrap;
}
.rs-member-hero__pricing { display: flex; align-items: baseline; gap: var(--rs-space-10); }
.rs-member-hero__price { font-size: var(--rs-text-32); font-weight: var(--rs-w-bold); color: var(--rs-paper); }
.rs-member-hero__rrp {
font-size: var(--rs-text-16);
color: var(--rs-on-dark-faint);
text-decoration: line-through;
}
.rs-btn--gold {
gap: var(--rs-space-9);
padding: var(--rs-space-14) var(--rs-space-28);
background: linear-gradient(180deg, var(--rs-gold-light), var(--rs-gold-500));
color: var(--rs-green-800);
box-shadow: 0 0.5rem 1.375rem rgba(228, 199, 94, 0.32);
}
.rs-btn--gold:hover { filter: brightness(1.05); }
.rs-member-hero__stock {
margin-top: var(--rs-space-14);
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-on-dark-soft);
}
.rs-member-hero__stock-dot {
width: var(--rs-space-8);
height: var(--rs-space-8);
border-radius: var(--rs-radius-pill);
background: var(--rs-stock-dot);
box-shadow: 0 0 0 0.1875rem rgba(88, 207, 128, 0.2);
}
/* --- Body stack below the hero --- */
.rs-member-body {
padding-block: clamp(2.625rem, 5vw, 4.125rem);
display: flex;
flex-direction: column;
gap: clamp(2.125rem, 4.5vw, 3.5rem);
}
/* -------------------------------------------------------------------------
19. BASKET
---------------------------------------------------------------------- */
.rs-basket { display: flex; flex-wrap: wrap; gap: 2.625rem; align-items: flex-start; }
.rs-basket__items { flex: 2 1 28.75rem; min-width: 18.75rem; } /* 460 / 300 */
.rs-basket__aside { flex: 1 1 20rem; min-width: 17.5rem; } /* 320 / 280 */
/* Free-delivery meter: progress toward the threshold, then a confirmation
once it is met. Both states are CMS copy — see freeDeliveryThreshold. */
.rs-freeship {
background: var(--rs-hero-bg);
border-radius: 0.75rem;
padding: var(--rs-space-16) var(--rs-space-20);
margin-bottom: var(--rs-space-22);
}
.rs-freeship__label {
margin-bottom: var(--rs-space-10);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-freeship__track {
height: var(--rs-space-7);
border-radius: var(--rs-radius-pill);
background: var(--rs-track-bed);
overflow: hidden;
}
.rs-freeship__fill { height: 100%; background: var(--rs-accent); border-radius: var(--rs-radius-pill); }
/* Progress in 10% steps, so the template never writes an inline width. */
.rs-freeship__fill--0 { width: 0; }
.rs-freeship__fill--10 { width: 10%; }
.rs-freeship__fill--20 { width: 20%; }
.rs-freeship__fill--30 { width: 30%; }
.rs-freeship__fill--40 { width: 40%; }
.rs-freeship__fill--50 { width: 50%; }
.rs-freeship__fill--60 { width: 60%; }
.rs-freeship__fill--70 { width: 70%; }
.rs-freeship__fill--80 { width: 80%; }
.rs-freeship__fill--90 { width: 90%; }
.rs-freeship__fill--100 { width: 100%; }
.rs-freeship--met {
display: flex;
align-items: center;
gap: var(--rs-space-10);
background: rgba(88, 207, 128, 0.12);
border: 1px solid rgba(88, 207, 128, 0.45);
padding: var(--rs-space-14) var(--rs-space-18);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-medium);
color: var(--rs-stock-text);
}
/* The meter switches to its confirmation state on one attribute. */
.rs-freeship[data-met="1"] {
display: flex;
align-items: center;
gap: var(--rs-space-10);
background: rgba(88, 207, 128, 0.12);
border: 1px solid rgba(88, 207, 128, 0.45);
color: var(--rs-stock-text);
}
.rs-freeship[data-met="1"] .rs-freeship__label { margin-bottom: 0; color: var(--rs-stock-text); }
.rs-freeship[data-met="1"] .rs-freeship__track { display: none; }
.rs-freeship__dot {
width: var(--rs-space-9);
height: var(--rs-space-9);
border-radius: var(--rs-radius-pill);
background: var(--rs-stock-dot);
flex: 0 0 auto;
}
/* --- Line item --- */
.rs-line {
display: flex;
gap: var(--rs-space-20);
padding-block: var(--rs-space-22);
border-bottom: 1px solid var(--rs-border);
}
.rs-line__cover {
position: relative;
width: 5.5rem; /* 88px */
flex: 0 0 auto;
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.3125rem;
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 0.0625rem 0.1875rem rgba(36, 51, 41, 0.12);
}
.rs-line__body { flex: 1; display: flex; flex-direction: column; gap: var(--rs-space-6); min-width: 0; }
.rs-line__title {
font-family: var(--rs-font-display);
font-size: var(--rs-text-19);
line-height: var(--rs-lh-card);
font-weight: var(--rs-w-medium);
color: var(--rs-ink);
}
.rs-line__title:hover { color: var(--rs-green-800); }
.rs-line__author { font-size: var(--rs-text-13); color: var(--rs-ink-muted); }
.rs-line__format {
align-self: flex-start;
margin-top: var(--rs-space-2);
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-06);
text-transform: uppercase;
color: var(--rs-green-400);
border: 1px solid var(--rs-track-bed);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-3) var(--rs-space-10);
}
.rs-line__stock {
display: inline-flex;
align-items: center;
gap: var(--rs-space-7);
margin-top: var(--rs-space-2);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-stock-text);
}
.rs-line__stock-dot {
width: var(--rs-space-7);
height: var(--rs-space-7);
border-radius: var(--rs-radius-pill);
background: var(--rs-stock-dot);
}
.rs-line__side {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
gap: var(--rs-space-14);
}
/* A more compact stepper than the product page's 54px one. */
.rs-qty--sm { height: var(--rs-space-40); }
.rs-qty--sm .rs-qty__btn { width: 2.375rem; font-size: var(--rs-text-19); }
.rs-qty--sm .rs-qty__value { min-width: 1.875rem; font-size: var(--rs-text-15); }
.rs-line__total { font-size: var(--rs-text-18); font-weight: var(--rs-w-bold); color: var(--rs-green-800); }
.rs-line__remove {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-muted);
text-decoration: underline;
}
.rs-line__remove:hover { color: var(--rs-red-500); }
.rs-basket__continue {
margin-top: var(--rs-space-24);
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
}
.rs-basket__continue:hover { color: var(--rs-green-800); }
/* --- Order summary --- */
.rs-summary {
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1rem;
padding: var(--rs-space-26);
position: sticky;
top: 7.5rem; /* clears the sticky header */
}
.rs-summary__title {
margin-bottom: var(--rs-space-18);
font-family: var(--rs-font-display);
font-size: var(--rs-text-22);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-summary__row {
display: flex;
justify-content: space-between;
font-size: var(--rs-text-15);
color: var(--rs-green-500);
padding-block: var(--rs-space-8);
}
.rs-summary__value { font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-promo { display: flex; gap: var(--rs-space-10); margin-block: var(--rs-space-16); }
.rs-promo__input {
flex: 1;
height: var(--rs-space-44);
border: 1.5px solid var(--rs-border-ctrl);
border-radius: 0.625rem;
padding-inline: var(--rs-space-14);
font-size: var(--rs-text-14);
color: var(--rs-ink);
background: var(--rs-paper);
outline: none;
min-width: 0;
}
.rs-promo__apply {
height: var(--rs-space-44);
padding-inline: var(--rs-space-18);
border: 1.5px solid var(--rs-green-800);
border-radius: 0.625rem;
color: var(--rs-green-800);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
}
.rs-promo__apply:hover { background: var(--rs-green-800); color: var(--rs-paper); }
.rs-summary__rule { height: 1px; background: var(--rs-border); margin: var(--rs-space-8) 0 var(--rs-space-16); }
.rs-summary__total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--rs-space-20);
}
.rs-summary__total-label {
font-family: var(--rs-font-display);
font-size: var(--rs-text-17);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-summary__total { font-size: var(--rs-text-26); font-weight: var(--rs-w-bold); color: var(--rs-green-800); }
.rs-summary__cta {
width: 100%;
height: 3.375rem;
background: var(--rs-green-800);
color: var(--rs-paper);
border-radius: var(--rs-radius-pill);
font-size: var(--rs-text-16);
font-weight: var(--rs-w-semi);
display: flex;
align-items: center;
justify-content: center;
gap: var(--rs-space-10);
}
.rs-summary__cta:hover { background: var(--rs-green-900); }
.rs-summary__secure {
display: flex;
align-items: center;
justify-content: center;
gap: var(--rs-space-8);
margin-top: var(--rs-space-14);
font-size: var(--rs-text-12-5);
color: var(--rs-ink-muted);
}
.rs-paycards {
display: flex;
gap: var(--rs-space-7);
justify-content: center;
margin-top: var(--rs-space-16);
flex-wrap: wrap;
}
.rs-paycard {
font-size: var(--rs-text-9-5);
font-weight: var(--rs-w-bold);
letter-spacing: 0.05em;
color: var(--rs-ink-warm);
border: 1px solid var(--rs-border-cool);
border-radius: 0.3125rem;
padding: var(--rs-space-5) var(--rs-space-8);
}
/* -------------------------------------------------------------------------
20. CHECKOUT (delivery + payment)
----------------------------------------------------------------------
A two-card layout on parchment: the form on the left, a sticky order
summary on the right. Both cards carry the same lifted shadow, which is
what separates checkout from the flat storefront pages.
---------------------------------------------------------------------- */
.rs-checkout-main { background: var(--rs-parchment); padding: var(--rs-space-26) 0 var(--rs-space-8); }
.rs-checkout {
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-26);
align-items: flex-start;
}
.rs-checkout__main { flex: 2 1 28.75rem; min-width: 18.75rem; }
.rs-checkout__aside { flex: 1 1 21.25rem; min-width: 18.75rem; }
.rs-card {
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
box-shadow: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05),
0 1.625rem 3.125rem -2.125rem rgba(36, 51, 41, 0.5);
}
.rs-card__title {
margin-bottom: var(--rs-space-8);
font-family: var(--rs-font-display);
font-size: var(--rs-text-section);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
border-bottom: 1.5px solid var(--rs-green-800);
padding-bottom: var(--rs-space-16);
}
/* --- Form controls --- */
.rs-field { margin-top: var(--rs-space-20); }
.rs-field__label {
display: block;
margin-bottom: var(--rs-space-8);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-field__input,
.rs-field__select {
width: 100%;
height: 3.25rem; /* 52px */
border: 1.5px solid var(--rs-field-border);
border-radius: 0.5rem;
padding-inline: var(--rs-space-16);
font-size: var(--rs-text-15);
color: var(--rs-ink);
background: var(--rs-white);
outline: none;
}
.rs-field__input:focus,
.rs-field__select:focus { border-color: var(--rs-green-400); }
.rs-field__select {
appearance: none;
-webkit-appearance: none;
padding-right: 2.625rem;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
}
.rs-field-pair {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--rs-space-18);
margin-top: var(--rs-space-20);
}
.rs-field-pair .rs-field { margin-top: 0; }
/* Validation message under a field. No reference page showed an error state,
so this is derived from the palette rather than transcribed. */
.rs-field__error {
margin-top: var(--rs-space-6);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-13);
color: var(--rs-red-500);
}
.rs-field__input[aria-invalid="true"],
.rs-field__select[aria-invalid="true"] { border-color: var(--rs-red-500); }
/* --- Checkout summary --- */
.rs-cosummary { position: sticky; top: 7.5rem; }
.rs-cosummary__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rs-space-12);
border-bottom: 1.5px solid var(--rs-green-800);
padding-bottom: var(--rs-space-14);
margin-bottom: var(--rs-space-18);
}
.rs-cosummary__title {
font-family: var(--rs-font-display);
font-size: var(--rs-text-24);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-cosummary__edit {
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
color: var(--rs-ink-warm);
background: var(--rs-pill-bed);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-8) var(--rs-space-15);
}
.rs-cosummary__edit:hover { background: var(--rs-pill-bed-2); }
.rs-coline {
display: flex;
gap: var(--rs-space-14);
align-items: flex-start;
padding-block: var(--rs-space-12);
border-bottom: 1px solid var(--rs-hairline);
}
.rs-coline__cover {
width: 2.875rem; /* 46px */
flex: 0 0 auto;
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.3125rem;
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 0.0625rem 0.25rem rgba(36, 51, 41, 0.18);
position: relative;
}
.rs-coline__body { flex: 1; min-width: 0; }
.rs-coline__title { font-size: var(--rs-text-15); font-weight: var(--rs-w-semi); color: var(--rs-ink); }
.rs-coline__author { margin-top: var(--rs-space-2); font-size: var(--rs-text-13); color: var(--rs-ink-muted); }
.rs-coline__qty { margin-top: var(--rs-space-4); font-size: var(--rs-text-13); color: var(--rs-ink-soft); }
.rs-coline__total { font-size: var(--rs-text-15); font-weight: var(--rs-w-bold); color: var(--rs-green-800); white-space: nowrap; }
.rs-cosummary__row {
display: flex;
justify-content: space-between;
font-size: var(--rs-text-14-5);
color: var(--rs-green-500);
padding: var(--rs-space-12) 0 var(--rs-space-4);
}
.rs-cosummary__row--last {
padding: var(--rs-space-4) 0 var(--rs-space-14);
border-bottom: 1px solid var(--rs-border);
}
.rs-cosummary__row-value { font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-cosummary__total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--rs-space-16) 0 var(--rs-space-18);
}
.rs-cosummary__total-label {
font-family: var(--rs-font-display);
font-size: var(--rs-text-18);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-cosummary__total { font-size: var(--rs-text-22); font-weight: var(--rs-w-bold); color: var(--rs-green-800); }
.rs-cosummary__currency {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
color: var(--rs-ink-soft);
letter-spacing: var(--rs-track-06);
vertical-align: middle;
margin-right: var(--rs-space-6);
}
.rs-cosummary__extras {
display: flex;
flex-direction: column;
gap: var(--rs-space-8);
margin-bottom: var(--rs-space-18);
}
.rs-cosummary__extra { font-size: var(--rs-text-14); font-weight: var(--rs-w-semi); color: var(--rs-green-400); }
.rs-cosummary__extra:hover { color: var(--rs-green-800); }
/* Sage rather than forest: the forward action in checkout reads as a step,
not a full-stop. */
.rs-btn--continue {
width: 100%;
height: 3.5rem;
background: var(--rs-sage);
color: var(--rs-paper);
border-radius: 0.75rem;
font-size: var(--rs-text-16);
font-weight: var(--rs-w-semi);
gap: var(--rs-space-10);
}
.rs-btn--continue:hover { background: var(--rs-sage-dark); }
.rs-cosummary__legal {
display: flex;
gap: 0.6875rem;
align-items: flex-start;
margin-top: var(--rs-space-16);
}
.rs-cosummary__legal svg { flex: 0 0 auto; margin-top: 1px; color: var(--rs-ink-soft); }
.rs-cosummary__legal span { font-size: var(--rs-text-12); line-height: 1.5; color: var(--rs-ink-soft); }
/* -------------------------------------------------------------------------
21. PAYMENT
----------------------------------------------------------------------
NOTE ON SCOPE: the card fields below are the DESIGN of a payment form.
In the real build they are replaced by the gateway's own hosted inputs
(gateway.getPaymentFormHtml) — hand-collecting card numbers would pull
the site into PCI scope. Keep the classes, swap the inputs.
---------------------------------------------------------------------- */
/* Segmented control: a white thumb slides between the two halves. */
.rs-paytabs {
position: relative;
height: 3.625rem; /* 58px */
background: var(--rs-pill-bed);
border-radius: 0.875rem;
padding: var(--rs-space-6);
display: flex;
align-items: stretch;
}
.rs-paytabs__thumb {
width: calc(50% - var(--rs-space-6));
flex: 0 0 auto;
background: var(--rs-white);
border-radius: 0.625rem;
box-shadow: 0 0.125rem 0.5rem rgba(36, 51, 41, 0.16);
transition: transform 0.32s var(--rs-ease);
}
.rs-paytabs[data-pay="paypal"] .rs-paytabs__thumb { transform: translateX(100%); }
.rs-paytabs__options { position: absolute; inset: var(--rs-space-6); display: flex; }
.rs-paytabs__option {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--rs-space-9);
font-size: var(--rs-text-14-5);
font-weight: var(--rs-w-semi);
color: var(--rs-ink-warm);
}
.rs-paytabs[data-pay="card"] .rs-paytabs__option--card,
.rs-paytabs[data-pay="paypal"] .rs-paytabs__option--paypal { color: var(--rs-green-800); }
.rs-paypal-mark { font-weight: var(--rs-w-bold); font-style: italic; }
.rs-paypal-mark span { color: var(--rs-sage); }
.rs-paypanel[hidden] { display: none; }
.rs-paypanel { margin-top: var(--rs-space-24); }
/* Card-brand chips sitting inside the number field. */
.rs-field--card { position: relative; }
.rs-field__brands {
position: absolute;
right: var(--rs-space-14);
top: 50%;
margin-top: -0.5rem;
display: flex;
gap: var(--rs-space-5);
}
.rs-field__brand {
font-size: 0.5rem;
font-weight: var(--rs-w-bold);
color: var(--rs-ink-warm);
border: 1px solid var(--rs-border-cool);
border-radius: var(--rs-radius-4);
padding: var(--rs-space-3) var(--rs-space-5);
}
.rs-check {
display: flex;
align-items: center;
gap: var(--rs-space-10);
font-size: var(--rs-text-14);
color: var(--rs-ink-warm);
cursor: pointer;
}
.rs-check input {
width: 1.0625rem;
height: 1.0625rem;
accent-color: var(--rs-sage);
}
.rs-check--strong { font-size: var(--rs-text-14-5); font-weight: var(--rs-w-medium); color: var(--rs-green-800); }
.rs-paypal-panel {
background: var(--rs-parchment);
border: 1px solid var(--rs-paypal-bed);
border-radius: 0.875rem;
padding: var(--rs-space-26);
text-align: center;
}
.rs-paypal-panel__mark { font-size: var(--rs-text-26); font-weight: var(--rs-w-bold); font-style: italic; color: var(--rs-green-800); }
.rs-paypal-panel__mark span { color: var(--rs-sage); }
.rs-paypal-panel__text {
margin: var(--rs-space-12) auto 0;
max-width: 22.5rem;
font-size: var(--rs-text-14-5);
line-height: 1.6;
color: var(--rs-ink-warm);
}
.rs-paypal-panel__badge {
margin-top: var(--rs-space-16);
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-12-5);
font-weight: var(--rs-w-medium);
color: var(--rs-sage);
}
.rs-payment__billing {
margin-top: var(--rs-space-26);
padding-top: var(--rs-space-22);
border-top: 1px solid var(--rs-border);
}
.rs-payment__back {
margin-top: var(--rs-space-22);
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
}
.rs-payment__back:hover { color: var(--rs-green-800); }
/* -------------------------------------------------------------------------
22. ORDER CONFIRMATION
---------------------------------------------------------------------- */
.rs-confirm-main { background: var(--rs-parchment); padding: var(--rs-space-26) 0 4.5rem; }
.rs-confirm-main .rs-container { max-width: 56.25rem; } /* 900px */
.rs-confirm {
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1.25rem;
padding: clamp(2rem, 4vw, 3.25rem);
text-align: center;
box-shadow: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05),
0 1.875rem 3.5rem -2.25rem rgba(36, 51, 41, 0.55);
}
.rs-confirm__halo {
width: 5.25rem; /* 84px */
height: 5.25rem;
margin-inline: auto;
border-radius: var(--rs-radius-pill);
background: var(--rs-success-bed);
display: flex;
align-items: center;
justify-content: center;
}
/* The pulse ring keyframe is declared once, here, because it is the only
animation in the stylesheet. */
@keyframes rs-ring {
0% { box-shadow: 0 0 0 0 rgba(88, 207, 128, 0.45); }
100% { box-shadow: 0 0 0 1.375rem rgba(88, 207, 128, 0); }
}
.rs-confirm__tick {
width: 3.75rem;
height: 3.75rem;
border-radius: var(--rs-radius-pill);
background: var(--rs-stock-dot);
color: var(--rs-white);
display: flex;
align-items: center;
justify-content: center;
animation: rs-ring 1.9s ease-out infinite;
}
.rs-confirm__eyebrow {
margin-top: var(--rs-space-20);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-16);
text-transform: uppercase;
color: var(--rs-green-400);
}
.rs-confirm__title {
margin-top: var(--rs-space-10);
font-family: var(--rs-font-display);
font-size: clamp(1.875rem, 4vw, 2.875rem);
line-height: var(--rs-lh-feature);
font-weight: var(--rs-w-medium);
letter-spacing: var(--rs-track-head);
color: var(--rs-green-800);
}
.rs-confirm__text {
margin: var(--rs-space-14) auto 0;
max-width: 30rem;
font-size: var(--rs-text-16);
line-height: 1.6;
color: var(--rs-ink-warm);
}
.rs-confirm__text strong { color: var(--rs-green-800); }
.rs-confirm__actions {
margin-top: var(--rs-space-26);
display: flex;
gap: var(--rs-space-14);
flex-wrap: wrap;
justify-content: center;
}
.rs-confirm-panels { display: flex; flex-wrap: wrap; gap: var(--rs-space-20); margin-top: var(--rs-space-22); }
.rs-confirm-panels__col { flex: 1 1 17.5rem; display: flex; flex-direction: column; gap: var(--rs-space-20); }
.rs-panel {
background: var(--rs-white);
border: 1px solid var(--rs-border);
border-radius: 1rem;
padding: var(--rs-space-24);
flex: 1 1 18.75rem;
}
.rs-panel__title {
margin-bottom: var(--rs-space-16);
font-family: var(--rs-font-display);
font-size: var(--rs-text-20);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
/* --- Fulfilment timeline --- */
.rs-timeline { display: flex; flex-direction: column; }
.rs-timeline__step { display: flex; gap: var(--rs-space-14); padding-bottom: var(--rs-space-16); }
.rs-timeline__step:last-child { padding-bottom: 0; }
.rs-timeline__rail { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.rs-timeline__node {
width: 0.75rem;
height: 0.75rem;
border-radius: var(--rs-radius-pill);
background: var(--rs-white);
border: 3px solid var(--rs-step-idle);
}
.rs-timeline__step--done .rs-timeline__node {
background: var(--rs-stock-dot);
border-color: var(--rs-success-ring);
}
.rs-timeline__line { flex: 1; width: 2px; background: var(--rs-paypal-bed); margin-top: var(--rs-space-3); }
.rs-timeline__label { font-size: var(--rs-text-14-5); font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-timeline__meta { font-size: var(--rs-text-12-5); color: var(--rs-ink-muted); }
/* --- Order recap --- */
.rs-recap-line {
display: flex;
gap: var(--rs-space-14);
align-items: flex-start;
padding-block: 0.6875rem;
border-bottom: 1px solid var(--rs-hairline);
}
.rs-recap-line__cover {
position: relative;
width: 2.625rem; /* 42px */
flex: 0 0 auto;
aspect-ratio: var(--rs-cover-ratio);
border-radius: 0.3125rem;
overflow: hidden;
background: var(--rs-cover-bed);
box-shadow: 0 0.0625rem 0.25rem rgba(36, 51, 41, 0.18);
}
.rs-recap-line__title { font-size: var(--rs-text-14-5); font-weight: var(--rs-w-semi); color: var(--rs-ink); }
.rs-recap-line__qty { margin-top: var(--rs-space-3); font-size: var(--rs-text-12-5); color: var(--rs-ink-soft); }
.rs-recap-line__total { font-size: var(--rs-text-14-5); font-weight: var(--rs-w-bold); color: var(--rs-green-800); }
.rs-recap__row {
display: flex;
justify-content: space-between;
font-size: var(--rs-text-14);
color: var(--rs-green-500);
padding: 0.6875rem 0 var(--rs-space-4);
}
.rs-recap__row--last { padding: var(--rs-space-4) 0 var(--rs-space-12); border-bottom: 1px solid var(--rs-border); }
.rs-recap__value { font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-recap__total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--rs-space-14); }
.rs-recap__total-label {
font-family: var(--rs-font-display);
font-size: var(--rs-text-17);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-recap__total { font-size: var(--rs-text-20); font-weight: var(--rs-w-bold); color: var(--rs-green-800); }
/* --- Dark cross-sell card --- */
.rs-nudge {
position: relative;
overflow: hidden;
border-radius: 1rem;
padding: var(--rs-space-22) var(--rs-space-24);
background: radial-gradient(130% 130% at 90% 0%, var(--rs-green-700), var(--rs-green-hero-2));
color: var(--rs-paper);
}
.rs-nudge__eyebrow {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-14);
text-transform: uppercase;
color: var(--rs-accent);
}
.rs-nudge__title {
margin-top: var(--rs-space-8);
font-family: var(--rs-font-display);
font-size: var(--rs-text-20);
font-weight: var(--rs-w-medium);
}
.rs-nudge__text { margin-top: var(--rs-space-8); font-size: var(--rs-text-13-5); line-height: 1.55; color: var(--rs-on-dark); }
.rs-nudge__cta {
margin-top: var(--rs-space-16);
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-accent);
}
/* -------------------------------------------------------------------------
23. ACCOUNT
----------------------------------------------------------------------
The account area sits on its own cooler bed (--rs-acct-bg) rather than
parchment, so a signed-in page reads as a different place to the shop.
Every panel is one .rs-acct-panel. The sidebar and the content area are
the same component with different widths.
---------------------------------------------------------------------- */
.rs-acct-main { background: var(--rs-acct-bg); padding: var(--rs-space-24) 0 4rem; }
.rs-acct-layout {
display: grid;
grid-template-columns: clamp(14.375rem, 24%, 18.75rem) minmax(0, 1fr);
gap: var(--rs-space-24);
align-items: start;
}
.rs-acct-panel {
background: var(--rs-white);
border: 1px solid var(--rs-acct-border);
border-radius: 1rem;
box-shadow: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.04),
0 1.5rem 2.875rem -2.125rem rgba(36, 51, 41, 0.5);
}
.rs-acct-panel--nav { padding: var(--rs-space-16); }
.rs-acct-panel--body { min-width: 0; padding: clamp(1.375rem, 3vw, 2.125rem); }
/* --- Signed-in identity --- */
.rs-acct-user {
display: flex;
align-items: center;
gap: var(--rs-space-12);
padding: var(--rs-space-8) var(--rs-space-8) var(--rs-space-16);
border-bottom: 1px solid var(--rs-acct-rule);
margin-bottom: var(--rs-space-12);
}
.rs-acct-user__avatar {
width: 2.875rem;
height: 2.875rem;
flex: 0 0 auto;
border-radius: var(--rs-radius-pill);
overflow: hidden;
background: var(--rs-cover-bed);
/* Double ring: white gap, then gold — the member marker used sitewide. */
box-shadow: 0 0 0 2px var(--rs-white), 0 0 0 4px var(--rs-accent);
}
.rs-acct-user__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-acct-user__meta { min-width: 0; }
.rs-acct-user__name {
font-size: var(--rs-text-15);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rs-acct-user__tier {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-04);
color: var(--rs-green-400);
}
/* --- Sidebar navigation --- */
.rs-acct-nav { display: flex; flex-direction: column; gap: var(--rs-space-3); }
/* Nav items for tabs that aren't built yet — inert, and visibly so. */
.rs-acct-nav__item--soon,
.rs-acct-nav__item--soon:hover {
background: transparent;
color: var(--rs-ink-soft);
cursor: default;
}
.rs-acct-nav__soon {
margin-left: auto;
flex: 0 0 auto;
padding: 0.125rem 0.4375rem;
border-radius: var(--rs-radius-pill);
background: var(--rs-sand);
color: var(--rs-ink-soft);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-9-5);
font-weight: var(--rs-w-bold);
letter-spacing: var(--rs-track-07);
text-transform: uppercase;
}
.rs-acct-nav__item {
display: flex;
align-items: center;
gap: var(--rs-space-12);
padding: var(--rs-space-12) var(--rs-space-14);
border-radius: 0.6875rem;
font-size: var(--rs-text-15);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-warm);
}
.rs-acct-nav__item svg { flex: 0 0 auto; stroke: var(--rs-ink-soft); }
.rs-acct-nav__item:hover { background: var(--rs-nav-hover); color: var(--rs-green-800); }
.rs-acct-nav__item[aria-current="page"] {
background: var(--rs-nav-active);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-acct-nav__item[aria-current="page"] svg { stroke: var(--rs-green-400); }
.rs-acct-nav__heading {
margin: var(--rs-space-14) 0 var(--rs-space-10);
padding-inline: var(--rs-space-6);
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-14);
text-transform: uppercase;
color: var(--rs-gold-mark);
}
.rs-acct-nav__foot { margin-top: var(--rs-space-12); padding-top: var(--rs-space-12); border-top: 1px solid var(--rs-acct-rule); }
.rs-acct-nav__item--logout { color: var(--rs-danger); }
.rs-acct-nav__item--logout:hover { background: var(--rs-danger-bed); color: var(--rs-danger); }
.rs-acct-nav__item--logout svg { stroke: currentColor; }
/* --- Panel head --- */
.rs-acct-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--rs-space-12);
flex-wrap: wrap;
border-bottom: 1.5px solid var(--rs-green-800);
padding-bottom: var(--rs-space-16);
margin-bottom: var(--rs-space-22);
}
.rs-acct-head__eyebrow {
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-06);
text-transform: uppercase;
color: var(--rs-green-400);
}
.rs-acct-head__title {
margin-top: var(--rs-space-5);
font-family: var(--rs-font-display);
font-size: clamp(1.625rem, 3vw, 2.125rem);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
/* Used where the page has no eyebrow above it. */
.rs-acct-head__title--solo { margin-top: 0; }
.rs-tier-badge {
display: inline-flex;
align-items: center;
gap: var(--rs-space-8);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
background: linear-gradient(180deg, var(--rs-gold-light), var(--rs-accent));
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-8) var(--rs-space-15);
box-shadow: 0 0.25rem 0.75rem rgba(228, 199, 94, 0.3);
}
/* --- Stat tiles --- */
.rs-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: var(--rs-space-14); }
.rs-stat {
background: var(--rs-stat-bed);
border: 1px solid var(--rs-stat-border);
border-radius: 0.875rem;
padding: var(--rs-space-18);
}
.rs-stat__value { font-family: var(--rs-font-display); font-size: var(--rs-text-30); font-weight: var(--rs-w-medium); color: var(--rs-green-800); }
.rs-stat__label {
margin-top: var(--rs-space-3);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-05);
text-transform: uppercase;
color: var(--rs-ink-soft);
}
.rs-stat--sage .rs-stat__value { color: var(--rs-green-400); }
.rs-stat--gold .rs-stat__value { color: var(--rs-gold-700); }
.rs-stat--dark { background: var(--rs-green-800); border-color: transparent; }
.rs-stat--dark .rs-stat__value { color: var(--rs-accent); }
.rs-stat--dark .rs-stat__label { color: var(--rs-on-dark-soft); }
/* --- Sub-section head inside a panel --- */
.rs-acct-sub {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--rs-space-12);
margin: var(--rs-space-28) 0 var(--rs-space-14);
}
.rs-acct-sub__title { font-family: var(--rs-font-display); font-size: var(--rs-text-21); font-weight: var(--rs-w-medium); color: var(--rs-green-800); }
.rs-acct-sub__link { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: var(--rs-green-400); }
.rs-acct-sub__link:hover { color: var(--rs-green-800); }
/* --- Order rows --- */
.rs-orderlist { border: 1px solid var(--rs-stat-border); border-radius: 0.875rem; overflow: hidden; }
.rs-orderrow {
display: flex;
align-items: center;
gap: var(--rs-space-14);
padding: var(--rs-space-13) var(--rs-space-16);
border-bottom: 1px solid var(--rs-hairline);
flex-wrap: wrap;
}
.rs-orderrow:last-child { border-bottom: 0; }
.rs-orderrow__no { font-size: var(--rs-text-14); font-weight: var(--rs-w-semi); color: var(--rs-green-800); min-width: 3.5rem; }
.rs-orderrow__date { font-size: var(--rs-text-13-5); color: var(--rs-ink-muted); flex: 1; min-width: 6.875rem; }
.rs-orderrow__total { font-size: var(--rs-text-14); font-weight: var(--rs-w-bold); color: var(--rs-green-800); min-width: 4.375rem; text-align: right; }
.rs-status {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-4) var(--rs-space-11);
white-space: nowrap;
}
.rs-status--shipped { color: var(--rs-status-ship); background: var(--rs-status-ship-bed); }
.rs-status--delivered { color: var(--rs-status-done); background: var(--rs-status-done-bed); }
.rs-status--processing { color: var(--rs-status-wait); background: var(--rs-status-wait-bed); }
/* --- Promo pair at the foot of the dashboard --- */
.rs-acct-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--rs-space-16); margin-top: var(--rs-space-24); }
.rs-nudge--flush { padding: var(--rs-space-22); }
.rs-softcard {
border: 1px solid var(--rs-stat-border);
border-radius: 1rem;
padding: var(--rs-space-22);
background: var(--rs-stat-bed);
}
.rs-softcard__eyebrow {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-12);
text-transform: uppercase;
color: var(--rs-green-400);
}
.rs-softcard__title {
margin: var(--rs-space-8) 0 var(--rs-space-12);
font-family: var(--rs-font-display);
font-size: var(--rs-text-18);
line-height: 1.3;
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-softcard__cta { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: var(--rs-green-400); }
.rs-nudge--flush .rs-nudge__title { margin: var(--rs-space-8) 0 var(--rs-space-12); font-size: var(--rs-text-18); line-height: 1.3; }
/* --- Account forms (details) --- */
.rs-acct-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rs-space-18); }
.rs-acct-form__grid .rs-field--wide { grid-column: 1 / -1; }
.rs-acct-form__label {
display: block;
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
margin-bottom: 0.4375rem;
}
.rs-acct-form__input {
border: 1.5px solid var(--rs-field-border);
border-radius: 0.5625rem;
height: 3.125rem;
padding-inline: var(--rs-space-15);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-15);
color: var(--rs-ink);
background: var(--rs-white);
width: 100%;
}
.rs-acct-form__input:focus-visible { outline: 2px solid var(--rs-green-400); outline-offset: 1px; }
.rs-acct-h2 {
margin: var(--rs-space-26) 0 var(--rs-space-6);
font-family: var(--rs-font-display);
font-size: var(--rs-text-20);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
}
.rs-acct-h2--tight { margin-bottom: var(--rs-space-12); }
.rs-acct-note { margin-bottom: var(--rs-space-12); font-size: var(--rs-text-13-5); color: var(--rs-ink-muted); }
.rs-genres { display: flex; flex-wrap: wrap; gap: var(--rs-space-8); }
.rs-genre {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
background: var(--rs-nav-active);
border: 1px solid #d6e2d9;
border-radius: var(--rs-radius-pill);
padding: 0.4375rem var(--rs-space-14);
}
.rs-genre--add {
color: var(--rs-green-400);
background: transparent;
border: 1.5px dashed #c2cabf;
cursor: pointer;
}
.rs-genre--add:hover { border-color: var(--rs-green-400); color: var(--rs-green-800); }
.rs-optin {
display: flex;
align-items: center;
gap: 0.6875rem;
padding-block: var(--rs-space-12);
font-size: var(--rs-text-14-5);
font-weight: var(--rs-w-medium);
color: var(--rs-green-800);
cursor: pointer;
}
.rs-optin--ruled { border-bottom: 1px solid var(--rs-hairline); }
.rs-optin input { width: 1.0625rem; height: 1.0625rem; accent-color: var(--rs-sage); }
.rs-acct-actions { display: flex; gap: var(--rs-space-12); flex-wrap: wrap; margin-top: var(--rs-space-24); }
/* --- Address book --- */
.rs-addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: var(--rs-space-16); }
.rs-addr {
border: 1px solid var(--rs-stat-border);
border-radius: 0.875rem;
padding: var(--rs-space-20);
position: relative;
}
.rs-addr__head { display: flex; align-items: center; gap: var(--rs-space-8); margin-bottom: var(--rs-space-10); }
.rs-addr__label { font-size: var(--rs-text-15); font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-addr__default {
font-size: var(--rs-text-10);
font-weight: var(--rs-w-semi);
letter-spacing: var(--rs-track-05);
text-transform: uppercase;
color: var(--rs-status-done);
background: var(--rs-status-done-bed);
border-radius: var(--rs-radius-pill);
padding: var(--rs-space-3) var(--rs-space-9);
}
.rs-addr__body { font-size: var(--rs-text-14); line-height: 1.6; color: var(--rs-ink-warm); }
.rs-addr__kinds { font-size: var(--rs-text-12); font-weight: var(--rs-w-medium); color: var(--rs-ink-soft); margin-top: var(--rs-space-10); }
.rs-addr__actions {
display: flex;
gap: var(--rs-space-14);
margin-top: var(--rs-space-14);
padding-top: var(--rs-space-14);
border-top: 1px solid var(--rs-hairline);
}
.rs-addr__edit { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: var(--rs-green-400); }
.rs-addr__edit:hover { color: var(--rs-green-800); }
.rs-addr__remove { font-size: var(--rs-text-13); font-weight: var(--rs-w-semi); color: var(--rs-danger); }
.rs-addr__remove:hover { color: #7d3f3f; }
.rs-addr--new {
border: 1.5px dashed #c8cabf;
border-radius: 0.875rem;
padding: var(--rs-space-20);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--rs-space-8);
color: var(--rs-green-400);
min-height: 9.375rem;
font-size: var(--rs-text-14);
font-weight: var(--rs-w-semi);
}
.rs-addr--new:hover { border-color: var(--rs-green-400); background: #f8faf8; }
/* --- Order history table ---
The 6-column track is held on a min-width wrapper so the table scrolls
sideways on small screens rather than crushing. */
.rs-otable-scroll { overflow-x: auto; }
.rs-otable { min-width: 38.75rem; }
.rs-otable__head,
.rs-otable__row {
display: grid;
grid-template-columns: 1fr 1.3fr 1fr 1fr 0.8fr 0.8fr;
gap: var(--rs-space-10);
}
.rs-otable__head {
padding: 0 var(--rs-space-16) var(--rs-space-12);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: 0.03em;
color: var(--rs-ink-soft);
}
.rs-otable__row {
align-items: center;
padding: var(--rs-space-15) var(--rs-space-16);
border-top: 1px solid var(--rs-acct-rule);
font-size: var(--rs-text-14);
color: var(--rs-green-800);
}
.rs-otable__no { font-weight: var(--rs-w-semi); }
.rs-otable__date { color: var(--rs-ink-warm); }
.rs-otable__total { font-weight: var(--rs-w-semi); }
.rs-otable__icon { display: inline-flex; color: var(--rs-green-400); }
.rs-otable__icon:hover { color: var(--rs-green-800); }
.rs-opager { display: flex; flex-direction: column; align-items: center; gap: var(--rs-space-10); margin-top: var(--rs-space-24); }
.rs-opager__row { display: flex; align-items: center; gap: var(--rs-space-6); color: var(--rs-ink-soft); }
.rs-opager__step { padding: var(--rs-space-6); }
.rs-opager__step:hover { color: var(--rs-green-800); }
.rs-opager__count { font-size: var(--rs-text-13); font-weight: var(--rs-w-medium); color: var(--rs-ink-muted); }
/* -------------------------------------------------------------------------
24. RESPONSIVE (px only inside the query conditions)
---------------------------------------------------------------------- */
/* The design's own desk/mob switch. */
.rs-desk { display: flex; }
.rs-mob { display: none; }
@media (max-width: 960px) {
.rs-desk { display: none !important; }
.rs-mob { display: flex !important; }
.rs-masthead__burger { display: inline-flex; }
/* Redefining the token re-guts every consumer at once, rather than
overriding .rs-container and leaving other users on the desktop value. */
:root { --rs-gutter: 1.5rem; } /* 24px */
.rs-masthead__inner { gap: var(--rs-space-14); }
}
/* The listing sidebar is NOT tied to the header's 960px switch. It survives
down to 620px. From 860px the books column is too narrow to auto-fit two
full-width cells, so it is pinned to two-up and the gutter tightens to buy
the room back. Below 620px the sidebar collapses behind the Filters
toggle. */
@media (max-width: 860px) {
.rs-listing { gap: var(--rs-space-24); }
.rs-book-grid--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.rs-acct-form__grid { grid-template-columns: 1fr; }
.rs-filters-toggle { display: flex; }
.rs-listing { grid-template-columns: minmax(0, 1fr); }
.rs-listing__aside { display: none; }
.rs-listing__aside[data-open="1"] { display: block; }
/* Full width now the sidebar has gone, so the pinned two-up above would
leave the cards oversized. Back to auto-fill, same as the home rails. */
.rs-book-grid--listing { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}
@media (max-width: 900px) {
.rs-banner__slide { aspect-ratio: auto; height: 15rem; } /* 240px */
}
/* Below 836px the product columns stack. The media column is capped at
400px on desktop, which would leave the cover marooned against the left
edge once it is the full width of the page — so the cap comes off and the
cover fills the column.
The column then adds a second gutter of its own inset. The container
already supplies one, so the cover sits twice as far from the page edge as
the rest of the content — which stops a full-width jacket dominating the
screen at the widest stacked sizes.
The Readership+ button and its note keep their 380px measure and stay
centred underneath; a full-bleed button would read as a banner rather
than an action. */
@media (max-width: 836px) {
.rs-product__media {
flex: 1 1 100%;
max-width: none;
padding-inline: var(--rs-gutter);
}
.rs-product__cover { max-width: none; }
.rs-product__utils { justify-content: center; }
}
@media (max-width: 760px) {
.rs-field-pair { grid-template-columns: minmax(0, 1fr); }
.rs-cosummary { position: static; }
.rs-line { flex-wrap: wrap; }
.rs-line__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
.rs-summary { position: static; }
}
@media (max-width: 700px) {
.rs-cat-grid { grid-template-columns: minmax(0, 1fr); }
.rs-reviews__inner { gap: var(--rs-space-28); }
}
@media (max-width: 600px) {
:root { --rs-gutter: 1.25rem; } /* 20px */
.rs-banner__slide { height: 10.625rem; } /* 170px */
.rs-creators__mosaic { grid-template-columns: repeat(3, 1fr); gap: var(--rs-space-6); }
.rs-book-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* =============================================================================
ACCOUNT SIDEBAR — collapsible below 860px
The identity strip doubles as the disclosure control: on desktop it is inert
and the nav is always open; below 860px it becomes a full-width accordion
header showing who is signed in, with the nav closed by default.
State lives in one attribute: data-open on .rs-acct-panel--nav.
============================================================================= */
.rs-acct-user {
width: 100%;
background: none;
border-left: 0;
border-right: 0;
border-top: 0;
text-align: left;
font-family: inherit;
cursor: default;
-webkit-appearance: none;
appearance: none;
}
.rs-acct-user__burger {
display: none;
margin-left: auto;
color: var(--rs-ink-soft);
flex: 0 0 auto;
}
.rs-acct-user__burger svg { display: block; }
/* The nav body collapses on a grid track (0fr -> 1fr) rather than display:none,
because display cannot be transitioned. .rs-acct-nav-inner is the row: it
carries overflow:hidden so the content clips as the track closes. Above the
breakpoint the track is simply open and nothing animates. */
.rs-acct-nav-inner { min-height: 0; }
.rs-acct-user__burger-top,
.rs-acct-user__burger-mid,
.rs-acct-user__burger-bot {
transition: transform var(--rs-dur-card) var(--rs-ease), opacity var(--rs-dur-card) var(--rs-ease);
transform-origin: center;
}
@media (max-width: 53.75rem) {
.rs-acct-layout { grid-template-columns: minmax(0, 1fr); }
.rs-acct-user {
cursor: pointer;
margin-bottom: 0;
padding-bottom: var(--rs-space-8);
border-bottom: 0;
transition: padding-bottom var(--rs-dur-card) var(--rs-ease),
margin-bottom var(--rs-dur-card) var(--rs-ease);
}
.rs-acct-user:hover .rs-acct-user__burger { color: var(--rs-green-900); }
.rs-acct-user__burger { display: block; }
/* Collapsed by max-height rather than display, so it can transition.
26rem is a ceiling comfortably above the tallest nav (~33rem of content
would be an unusual number of items); it is not a layout measurement and
nothing depends on it being exact. */
.rs-acct-nav-body {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height var(--rs-dur-card) var(--rs-ease),
opacity calc(var(--rs-dur-card) * 0.7) var(--rs-ease);
}
.rs-acct-panel--nav[data-open] .rs-acct-user {
padding-bottom: var(--rs-space-16);
border-bottom: 1px solid var(--rs-hairline);
margin-bottom: var(--rs-space-12);
}
.rs-acct-panel--nav[data-open] .rs-acct-nav-body {
max-height: 26rem;
opacity: 1;
}
/* burger folds into a cross while open */
.rs-acct-panel--nav[data-open] .rs-acct-user__burger-top { transform: translateY(5px) rotate(45deg); }
.rs-acct-panel--nav[data-open] .rs-acct-user__burger-mid { opacity: 0; }
.rs-acct-panel--nav[data-open] .rs-acct-user__burger-bot { transform: translateY(-5px) rotate(-45deg); }
}
/* Users who ask for less motion get the same states, instantly. */
@media (prefers-reduced-motion: reduce) {
.rs-acct-nav-body,
.rs-acct-user,
.rs-acct-user__burger-top,
.rs-acct-user__burger-mid,
.rs-acct-user__burger-bot { transition: none; }
}
/* ========================================================================
14. JOURNAL — index + article
======================================================================== */
/* Post gradients. Each post carries one of five; the class is the only
thing that varies, so no template ever writes an inline gradient. */
.rs-jg--slate { background-image: linear-gradient(135deg, var(--rs-jg-slate), var(--rs-green-800)); }
.rs-jg--forest{ background-image: linear-gradient(135deg, var(--rs-green-800), var(--rs-green-400)); }
.rs-jg--plum { background-image: linear-gradient(135deg, var(--rs-jg-plum), var(--rs-green-800)); }
.rs-jg--fern { background-image: linear-gradient(135deg, var(--rs-jg-fern), var(--rs-green-800)); }
.rs-jg--bark { background-image: linear-gradient(135deg, var(--rs-jg-bark), var(--rs-gold-700)); }
/* --- Hero --- */
.rs-journal-hero {
position: relative;
overflow: hidden;
background-image: radial-gradient(120% 130% at 80% 0%, var(--rs-green-700), var(--rs-green-hero-2));
}
.rs-journal-hero__mark {
position: absolute;
right: 4%;
top: -6.875rem; /* -110px */
font-family: var(--rs-font-display);
font-weight: var(--rs-w-semi);
font-size: var(--rs-mark-xl);
line-height: 1;
color: rgba(228, 199, 94, 0.1);
pointer-events: none;
user-select: none;
}
.rs-journal-hero__inner {
position: relative;
padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
}
.rs-journal-hero__eyebrow {
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rs-gold-500);
}
.rs-journal-hero__title {
margin-top: var(--rs-space-10);
max-width: 45rem; /* 720px */
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: clamp(var(--rs-text-34), 4.6vw, var(--rs-text-54));
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--rs-paper);
}
.rs-journal-hero__sub {
margin-top: var(--rs-space-14);
max-width: 35rem; /* 560px */
font-size: var(--rs-text-17);
line-height: 1.6;
color: rgba(251, 250, 249, 0.8);
}
.rs-journal-search {
display: flex;
align-items: center;
gap: var(--rs-space-10);
margin-top: var(--rs-space-26);
max-width: 32.5rem; /* 520px */
height: 3.375rem; /* 54px */
padding-inline: var(--rs-space-8) var(--rs-space-18);
padding-inline-start: var(--rs-space-18);
padding-inline-end: var(--rs-space-8);
background: var(--rs-paper);
border-radius: var(--rs-radius-pill);
box-shadow: 0 0.875rem 2.125rem -1.125rem rgba(0, 0, 0, 0.5);
}
.rs-journal-search__icon { flex: 0 0 auto; color: var(--rs-green-400); }
.rs-journal-search__input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-family: var(--rs-font-ui);
font-size: var(--rs-text-15);
color: var(--rs-ink);
}
/* --- Category chips --- */
.rs-jcats {
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-9);
margin-bottom: var(--rs-space-26);
}
.rs-jcat {
display: inline-flex;
align-items: center;
gap: var(--rs-space-7);
padding: var(--rs-space-8) var(--rs-space-15);
border: 1px solid var(--rs-chip-border);
border-radius: var(--rs-radius-pill);
background: var(--rs-white);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--rs-t-quick);
}
.rs-jcat:hover { border-color: var(--rs-green-800); }
.rs-jcat__count { font-size: var(--rs-text-11); color: #b3ada6; }
.rs-jcat[aria-current="true"] {
background: var(--rs-green-800);
border-color: var(--rs-green-800);
color: var(--rs-paper);
}
.rs-jcat[aria-current="true"] .rs-jcat__count { color: rgba(251, 250, 249, 0.6); }
/* --- Featured --- */
.rs-jfeatured {
display: grid;
grid-template-columns: 1.15fr 1fr;
margin-bottom: var(--rs-space-34);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-22);
overflow: hidden;
background: var(--rs-white);
box-shadow: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05),
0 1.875rem 3.5rem -2.25rem rgba(36, 51, 41, 0.55);
text-decoration: none;
}
.rs-jfeatured__art { position: relative; min-height: 18.75rem; }
.rs-jfeatured__mark {
position: absolute;
right: var(--rs-space-16);
bottom: -1.875rem;
font-family: var(--rs-font-display);
font-weight: var(--rs-w-semi);
font-size: var(--rs-mark-md);
line-height: 1;
color: rgba(251, 250, 249, 0.12);
user-select: none;
}
.rs-jfeatured__badge {
position: absolute;
top: var(--rs-space-18);
left: var(--rs-space-18);
padding: var(--rs-space-6) var(--rs-space-13);
border-radius: var(--rs-radius-pill);
background: var(--rs-gold-500);
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-semi);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rs-green-800);
}
.rs-jfeatured__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.rs-jfeatured__title {
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: clamp(var(--rs-text-24), 2.8vw, var(--rs-text-34));
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--rs-green-800);
}
.rs-jfeatured__excerpt {
margin-top: var(--rs-space-14);
font-size: var(--rs-text-15-5);
line-height: 1.65;
color: var(--rs-ink-warm);
}
/* --- Byline (shared: featured, card foot, article) --- */
.rs-byline {
display: flex;
align-items: center;
gap: var(--rs-space-11);
margin-top: var(--rs-space-20);
}
.rs-byline__photo {
flex: 0 0 auto;
width: 2.375rem;
height: 2.375rem;
border-radius: var(--rs-radius-pill);
background: var(--rs-cover-bed);
object-fit: cover;
}
.rs-byline__name {
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-byline__meta {
font-size: var(--rs-text-12);
color: var(--rs-ink-soft);
}
/* --- Filter meta row --- */
.rs-jmeta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--rs-space-14);
margin-bottom: var(--rs-space-18);
font-size: var(--rs-text-15);
color: var(--rs-ink-warm);
}
.rs-jmeta__count { font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-jmeta__clear {
display: inline-flex;
align-items: center;
gap: var(--rs-space-6);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
text-decoration: none;
}
.rs-jmeta__clear:hover { color: var(--rs-green-800); }
/* --- Layout: main + sidebar (grid, so it cannot wrap mid-range) --- */
.rs-jlayout {
display: grid;
grid-template-columns: minmax(0, 3fr) clamp(13.75rem, 24%, 20rem);
gap: var(--rs-space-34);
align-items: start;
}
/* --- Card grid --- */
.rs-jgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16.125rem, 1fr)); /* 258px */
gap: var(--rs-space-22);
}
.rs-jcard {
display: flex;
flex-direction: column;
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-18);
overflow: hidden;
background: var(--rs-white);
box-shadow: 0 0.0625rem 0.125rem rgba(36, 51, 41, 0.05);
text-decoration: none;
transition: transform var(--rs-t-quick), box-shadow var(--rs-t-quick);
}
.rs-jcard:hover {
transform: translateY(-0.25rem);
box-shadow: var(--rs-shadow-lift);
}
.rs-jcard__art { position: relative; height: 9.875rem; } /* 158px */
.rs-jcard__mark {
position: absolute;
right: var(--rs-space-12);
bottom: -1.5rem;
font-family: var(--rs-font-display);
font-weight: var(--rs-w-semi);
font-size: var(--rs-mark-sm);
line-height: 1;
color: rgba(251, 250, 249, 0.12);
user-select: none;
}
.rs-jcard__cat {
position: absolute;
top: var(--rs-space-14);
left: var(--rs-space-14);
padding: var(--rs-space-5) var(--rs-space-11);
border-radius: var(--rs-radius-pill);
background: rgba(36, 51, 41, 0.55);
font-size: var(--rs-text-10);
font-weight: var(--rs-w-semi);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rs-paper);
}
.rs-jcard__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--rs-space-20);
}
.rs-jcard__title {
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-19);
line-height: 1.25;
color: var(--rs-green-800);
}
.rs-jcard__excerpt {
flex: 1;
margin-top: var(--rs-space-9);
font-size: var(--rs-text-13-5);
line-height: 1.55;
color: var(--rs-ink-muted);
}
.rs-jcard__foot {
display: flex;
align-items: center;
gap: var(--rs-space-9);
margin-top: var(--rs-space-14);
padding-top: var(--rs-space-13);
border-top: 1px solid var(--rs-hairline);
}
.rs-jcard__foot .rs-byline__photo { width: 1.875rem; height: 1.875rem; }
.rs-jcard__foot-name {
font-size: var(--rs-text-12);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-muted);
}
/* --- Tag chips --- */
.rs-jtags {
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-6);
margin-top: var(--rs-space-13);
}
.rs-jtag {
padding: var(--rs-space-3) var(--rs-space-9);
border-radius: var(--rs-radius-6);
background: var(--rs-tag-bed);
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
text-decoration: none;
}
.rs-jtag:hover { background: var(--rs-tag-border); }
/* --- Sidebar --- */
.rs-jside {
display: flex;
flex-direction: column;
gap: var(--rs-space-20);
}
.rs-jside__panel {
padding: var(--rs-space-22);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-16);
background: var(--rs-white);
}
.rs-jside__title {
margin-bottom: var(--rs-space-14);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-18);
color: var(--rs-green-800);
}
.rs-jside__tags { display: flex; flex-wrap: wrap; gap: var(--rs-space-8); }
.rs-jside__tag {
padding: var(--rs-space-6) var(--rs-space-12);
border: 1px solid var(--rs-border-warm);
border-radius: var(--rs-radius-pill);
background: var(--rs-chip-bed);
font-size: var(--rs-text-12-5);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
text-decoration: none;
transition: background var(--rs-t-quick), border-color var(--rs-t-quick), color var(--rs-t-quick);
}
.rs-jside__tag:hover {
background: var(--rs-mist);
border-color: var(--rs-green-400);
color: var(--rs-green-400);
}
.rs-jpop { display: flex; flex-direction: column; gap: var(--rs-space-14); }
.rs-jpop__item {
display: flex;
align-items: center;
gap: var(--rs-space-12);
text-decoration: none;
transition: opacity var(--rs-t-quick);
}
.rs-jpop__item:hover { opacity: 0.75; }
.rs-jpop__art {
flex: 0 0 auto;
width: 3.25rem;
height: 3.25rem;
border-radius: var(--rs-radius-10);
}
.rs-jpop__title {
display: block;
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-14);
line-height: 1.3;
color: var(--rs-green-800);
}
.rs-jpop__meta {
display: block;
margin-top: var(--rs-space-3);
font-size: var(--rs-text-11-5);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-soft);
}
.rs-jsub {
position: relative;
overflow: hidden;
padding: var(--rs-space-22);
border-radius: var(--rs-radius-16);
background-image: radial-gradient(130% 130% at 88% 0%, var(--rs-green-700), var(--rs-green-hero-2));
color: var(--rs-paper);
}
.rs-jsub__eyebrow {
font-size: var(--rs-text-11);
font-weight: var(--rs-w-semi);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rs-gold-500);
}
.rs-jsub__text {
margin: var(--rs-space-8) 0 var(--rs-space-12);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-17);
line-height: 1.35;
}
/* --- Article --- */
.rs-article-hero { position: relative; overflow: hidden; }
.rs-article-hero__mark {
position: absolute;
right: 5%;
top: -5.625rem;
font-family: var(--rs-font-display);
font-weight: var(--rs-w-semi);
font-size: var(--rs-mark-lg);
line-height: 1;
color: rgba(251, 250, 249, 0.12);
pointer-events: none;
user-select: none;
}
.rs-article-hero__inner {
position: relative;
max-width: 51.25rem; /* 820px */
margin-inline: auto;
padding-block: clamp(2.125rem, 4.5vw, 3.75rem);
padding-inline: var(--rs-gutter);
}
.rs-article-hero__crumbs {
display: flex;
align-items: center;
gap: var(--rs-space-8);
margin-bottom: var(--rs-space-20);
font-size: var(--rs-text-13);
font-weight: var(--rs-w-medium);
color: rgba(251, 250, 249, 0.8);
}
.rs-article-hero__crumbs a { color: inherit; text-decoration: none; }
.rs-article-hero__crumbs a:hover { color: var(--rs-paper); }
.rs-article-hero__crumbs [aria-current] { color: var(--rs-paper); }
.rs-article-hero__cat {
display: inline-block;
padding: var(--rs-space-6) var(--rs-space-13);
border-radius: var(--rs-radius-pill);
background: var(--rs-gold-500);
font-size: var(--rs-text-10-5);
font-weight: var(--rs-w-semi);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rs-green-800);
}
.rs-article-hero__title {
margin-top: var(--rs-space-16);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: clamp(var(--rs-text-30), 4vw, var(--rs-text-48));
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--rs-paper);
}
.rs-article-hero .rs-byline__photo {
width: 2.75rem;
height: 2.75rem;
border: 1.5px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.2);
}
.rs-article-hero .rs-byline__name { color: var(--rs-paper); font-size: var(--rs-text-14); }
.rs-article-hero .rs-byline__meta { color: rgba(251, 250, 249, 0.72); font-size: var(--rs-text-12-5); }
.rs-article {
max-width: 45rem; /* 720px */
margin-inline: auto;
padding-block: clamp(2.125rem, 4.5vw, 3.5rem);
padding-inline: var(--rs-gutter);
}
.rs-article__p {
margin-bottom: var(--rs-space-22);
font-family: var(--rs-font-display);
font-size: var(--rs-text-18);
line-height: 1.75;
color: var(--rs-prose-ink);
text-wrap: pretty;
}
.rs-article__h {
margin: var(--rs-space-36) 0 var(--rs-space-14);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-26);
letter-spacing: -0.01em;
color: var(--rs-green-800);
}
.rs-article__quote {
margin: var(--rs-space-28) 0;
padding: var(--rs-space-8) 0 var(--rs-space-8) var(--rs-space-24);
border-left: 3px solid var(--rs-gold-500);
font-family: var(--rs-font-display);
font-style: italic;
font-size: var(--rs-text-23);
line-height: 1.4;
color: var(--rs-green-800);
}
.rs-article__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rs-space-8);
margin-top: var(--rs-space-30);
}
.rs-article__tags-label {
margin-right: var(--rs-space-2);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-semi);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rs-ink-soft);
}
.rs-article__tag {
padding: var(--rs-space-6) var(--rs-space-13);
border: 1px solid var(--rs-tag-border);
border-radius: var(--rs-radius-pill);
background: var(--rs-tag-bed);
font-size: var(--rs-text-12-5);
font-weight: var(--rs-w-semi);
color: var(--rs-green-400);
text-decoration: none;
}
.rs-article__tag:hover { background: var(--rs-tag-border); border-color: var(--rs-green-400); }
.rs-article__author {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--rs-space-14);
margin-top: var(--rs-space-34);
padding-top: var(--rs-space-24);
border-top: 1px solid var(--rs-border);
}
.rs-article__author .rs-byline__photo { width: 3.25rem; height: 3.25rem; }
.rs-article__author-text { flex: 1 1 12.5rem; }
.rs-article__author-name {
font-size: var(--rs-text-15);
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
.rs-article__author-sub { font-size: var(--rs-text-13); color: var(--rs-ink-muted); }
.rs-article__share {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--rs-border-quiet);
border-radius: var(--rs-radius-pill);
color: var(--rs-green-400);
transition: background var(--rs-t-quick), color var(--rs-t-quick), border-color var(--rs-t-quick);
}
.rs-article__share:hover {
background: var(--rs-green-800);
border-color: var(--rs-green-800);
color: var(--rs-paper);
}
/* --- Keep reading --- */
.rs-keepreading {
background: var(--rs-parchment);
border-top: 1px solid var(--rs-border);
}
.rs-keepreading__inner { padding-block: clamp(2.5rem, 5vw, 4rem); }
.rs-jrelated {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
gap: var(--rs-space-22);
}
.rs-jrelated .rs-jcard__art { height: 9.375rem; }
.rs-jrelated .rs-jcard__body { padding: var(--rs-space-18); }
.rs-jrelated .rs-jcard__title { font-size: var(--rs-text-17); line-height: 1.28; }
.rs-jrelated__meta {
margin-top: var(--rs-space-10);
font-size: var(--rs-text-12);
font-weight: var(--rs-w-medium);
color: var(--rs-ink-muted);
}
@media (max-width: 61.25rem) { /* 980px — sidebar drops below */
.rs-jlayout { grid-template-columns: minmax(0, 1fr); }
.rs-jside { flex-direction: row; flex-wrap: wrap; align-items: start; }
.rs-jside__panel, .rs-jsub { flex: 1 1 17.5rem; }
}
@media (max-width: 46.25rem) { /* 740px — featured stacks */
.rs-jfeatured { grid-template-columns: minmax(0, 1fr); }
.rs-jfeatured__art { min-height: 12.5rem; }
}
/* -------------------------------------------------------------------------
INFO PAGES — shared shell for contact / help / legal / about
A hero (green or cream) plus a stack of content blocks. Every block type
is self-contained so a template composes a page by listing blocks.
---------------------------------------------------------------------- */
.rs-info { background: var(--rs-info-bed); }
/* --- Hero --- */
.rs-info-hero { position: relative; overflow: hidden; }
.rs-info-hero--green { background: radial-gradient(120% 130% at 82% 0%, var(--rs-green-hero-1), var(--rs-green-hero-2)); }
.rs-info-hero--cream { background: linear-gradient(180deg, var(--rs-mist-2), var(--rs-info-bed)); }
.rs-info-hero__mark {
position: absolute;
right: 3%;
top: -7.5rem;
font-family: var(--rs-font-display);
font-weight: var(--rs-w-semi);
font-size: var(--rs-mark-hero);
line-height: 1;
color: var(--rs-gold-faint);
pointer-events: none;
user-select: none;
}
.rs-info-hero__inner { position: relative; padding-block: var(--rs-info-hero-pad); }
.rs-info-hero__crumb {
margin-bottom: var(--rs-space-22);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-13);
}
.rs-info-hero--green .rs-info-hero__crumb a { color: var(--rs-on-dark-soft); }
.rs-info-hero--green .rs-info-hero__crumb a:hover { color: var(--rs-paper); }
.rs-info-hero--cream .rs-info-hero__crumb a { color: var(--rs-ink-muted); }
.rs-info-hero--cream .rs-info-hero__crumb a:hover { color: var(--rs-green-800); }
.rs-info-hero__row { display: flex; align-items: flex-start; gap: var(--rs-space-22); flex-wrap: wrap; }
.rs-info-hero__icon {
flex: 0 0 auto;
width: var(--rs-space-64);
height: var(--rs-space-64);
border-radius: var(--rs-radius-17);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, var(--rs-gold-light), var(--rs-gold-500));
box-shadow: var(--rs-shadow-gold);
}
.rs-info-hero__text { flex: 1 1 20rem; min-width: 16.25rem; }
.rs-info-hero__eyebrow {
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-12);
letter-spacing: var(--rs-track-16);
text-transform: uppercase;
}
.rs-info-hero--green .rs-info-hero__eyebrow { color: var(--rs-accent); }
.rs-info-hero--cream .rs-info-hero__eyebrow { color: var(--rs-green-400); }
.rs-info-hero__title {
margin-top: var(--rs-space-9);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-info-title);
line-height: 1.03;
letter-spacing: var(--rs-track-tight);
}
.rs-info-hero--green .rs-info-hero__title { color: var(--rs-paper); }
.rs-info-hero--cream .rs-info-hero__title { color: var(--rs-green-800); }
.rs-info-hero__sub {
margin-top: var(--rs-space-14);
max-width: 37.5rem;
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-info-sub);
line-height: 1.6;
}
.rs-info-hero--green .rs-info-hero__sub { color: var(--rs-on-dark); }
.rs-info-hero--cream .rs-info-hero__sub { color: var(--rs-ink-warm); }
/* --- Body column --- */
.rs-info__body {
max-width: var(--rs-info-measure);
margin-inline: auto;
padding-block: var(--rs-info-body-pad);
padding-inline: var(--rs-gutter);
display: flex;
flex-direction: column;
gap: var(--rs-info-gap);
}
.rs-info-block__heading {
margin-bottom: var(--rs-space-18);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-info-h2);
color: var(--rs-green-800);
}
/* --- Block: contact methods --- */
.rs-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: var(--rs-space-16); }
.rs-contact-card {
padding: var(--rs-space-22);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-16);
background: var(--rs-white);
box-shadow: var(--rs-shadow-info);
}
.rs-contact-card__icon {
display: inline-flex;
width: 2.75rem;
height: 2.75rem;
margin-bottom: var(--rs-space-13);
border-radius: var(--rs-radius-12);
background: var(--rs-green-800);
align-items: center;
justify-content: center;
}
.rs-contact-card__title {
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-15);
color: var(--rs-green-800);
}
.rs-contact-card__text {
margin-top: var(--rs-space-4);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-13);
line-height: 1.5;
color: var(--rs-ink-muted);
}
.rs-contact-card__detail {
display: block;
margin-top: var(--rs-space-9);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-14);
color: var(--rs-green-400);
}
a.rs-contact-card__detail:hover { color: var(--rs-green-800); }
/* --- Block: form --- */
.rs-info-form {
padding: var(--rs-info-card-pad);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-20);
background: var(--rs-white);
box-shadow: var(--rs-shadow-form);
}
.rs-info-form__heading {
margin-bottom: var(--rs-space-4);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: var(--rs-text-info-h2-sm);
color: var(--rs-green-800);
}
.rs-info-form__sub {
margin-bottom: var(--rs-space-18);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-14-5);
color: var(--rs-ink-muted);
}
.rs-info-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-14); }
.rs-info-form__field { min-width: 0; }
.rs-info-form__field--wide { grid-column: 1 / -1; }
.rs-info-form__label {
display: block;
margin-bottom: var(--rs-space-6);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-11-5);
letter-spacing: var(--rs-track-04);
text-transform: uppercase;
color: var(--rs-ink-muted);
}
.rs-info-form__input,
.rs-info-form__textarea {
width: 100%;
border: 1.5px solid var(--rs-border-ctrl);
border-radius: var(--rs-radius-11);
background: var(--rs-paper);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-15);
color: var(--rs-ink);
outline: none;
transition: border-color var(--rs-t-quick), box-shadow var(--rs-t-quick);
}
.rs-info-form__input { height: 3rem; padding-inline: var(--rs-space-15); }
.rs-info-form__textarea { min-height: 6.5rem; padding: var(--rs-space-12) var(--rs-space-15); line-height: 1.5; resize: vertical; }
.rs-info-form__input:focus,
.rs-info-form__textarea:focus { border-color: var(--rs-green-400); box-shadow: 0 0 0 0.1875rem var(--rs-nav-active); }
.rs-info-form__actions { grid-column: 1 / -1; margin-top: var(--rs-space-4); }
/* --- Block: features (icon card grid) --- */
.rs-info-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--rs-space-16); }
.rs-info-feature {
padding: var(--rs-space-22);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-16);
background: var(--rs-white);
box-shadow: var(--rs-shadow-info);
}
.rs-info-feature__icon {
display: inline-flex;
width: 2.75rem;
height: 2.75rem;
margin-bottom: var(--rs-space-13);
border-radius: var(--rs-radius-12);
background: var(--rs-tag-bed);
align-items: center;
justify-content: center;
}
.rs-info-feature__title {
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-16);
color: var(--rs-green-800);
}
.rs-info-feature__text {
margin-top: var(--rs-space-5);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-13-5);
line-height: 1.55;
color: var(--rs-ink-muted);
}
/* --- Block: closing CTA --- */
.rs-info-cta {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
gap: var(--rs-space-20);
align-items: center;
justify-content: space-between;
padding: var(--rs-info-card-pad);
border-radius: var(--rs-radius-20);
background-image: radial-gradient(130% 130% at 88% 0%, var(--rs-green-hero-1), var(--rs-green-hero-2));
}
.rs-info-cta__text { flex: 1 1 18.75rem; }
.rs-info-cta__heading {
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
font-size: clamp(1.375rem, 2.6vw, 1.875rem);
color: var(--rs-paper);
}
.rs-info-cta__sub {
margin-top: var(--rs-space-8);
max-width: 28.75rem;
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-15);
line-height: 1.55;
color: var(--rs-on-dark);
}
.rs-info-cta__btn { flex: 0 0 auto; }
/* --- Block: FAQ --- */
.rs-faq {
padding-inline: var(--rs-space-24);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-18);
background: var(--rs-white);
box-shadow: var(--rs-shadow-hair);
}
.rs-faq__item { border-bottom: 1px solid var(--rs-hairline); }
.rs-faq__item:last-child { border-bottom: 0; }
/* The question is the toggle: a reset button filling the row, so the whole
line is a hit target rather than just the text. */
.rs-faq__h { margin: 0; font: inherit; }
.rs-faq__q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--rs-space-16);
width: 100%;
padding: var(--rs-space-18) 0;
border: 0;
background: none;
text-align: left;
cursor: pointer;
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-15-5);
line-height: 1.45;
color: var(--rs-green-800);
transition: color var(--rs-t-quick), padding-bottom var(--rs-t-panel);
}
.rs-faq__q:hover { color: var(--rs-green-500); }
.rs-faq__q:focus-visible {
outline: 2px solid var(--rs-green-500);
outline-offset: 3px;
border-radius: var(--rs-radius-6);
}
.rs-faq__item[data-open] .rs-faq__q { padding-bottom: var(--rs-space-7); }
.rs-faq__chev {
flex: none;
margin-top: var(--rs-space-2);
color: var(--rs-green-400);
transition: transform var(--rs-t-panel), color var(--rs-t-quick);
}
.rs-faq__q:hover .rs-faq__chev { color: var(--rs-green-500); }
.rs-faq__item[data-open] .rs-faq__chev { transform: rotate(180deg); }
/* Collapsed by ceiling rather than display:none, so the open/close can ease.
The max-height is a bound, not a measurement — long answers still fit. */
.rs-faq__panel {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height var(--rs-t-panel), opacity var(--rs-t-quick);
}
.rs-faq__item[data-open] .rs-faq__panel {
max-height: 30rem;
opacity: 1;
}
.rs-faq__a {
padding-bottom: var(--rs-space-18);
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-14);
line-height: 1.6;
color: var(--rs-ink-warm);
}
@media (prefers-reduced-motion: reduce) {
.rs-faq__q, .rs-faq__chev, .rs-faq__panel { transition: none; }
}
@media (max-width: 37.5rem) { /* 600px — form goes single column */
.rs-info-form__grid { grid-template-columns: minmax(0, 1fr); }
.rs-info-hero__mark { display: none; }
}
/* -------------------------------------------------------------------------
STEPS BLOCK — numbered process cards. Used by track-order, returns,
education, gift-cards, affiliate. Source: Readership.dc.html 2338-2347.
------------------------------------------------------------------------- */
.rs-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
gap: var(--rs-space-16);
margin: 0;
padding: 0;
list-style: none;
}
.rs-steps__item {
padding: var(--rs-space-22);
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-16);
background: var(--rs-white);
}
.rs-steps__num {
display: flex;
align-items: center;
justify-content: center;
width: var(--rs-space-34);
height: var(--rs-space-34);
margin-bottom: var(--rs-space-12);
border-radius: var(--rs-radius-pill);
background: var(--rs-green-800);
color: var(--rs-gold-500);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-15);
}
.rs-steps__heading {
margin: 0;
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-semi);
font-size: var(--rs-text-15-5);
color: var(--rs-green-800);
}
.rs-steps__text {
margin: var(--rs-space-5) 0 0;
font-family: var(--rs-font-ui);
font-weight: var(--rs-w-regular);
font-size: var(--rs-text-13-5);
line-height: 1.55;
color: var(--rs-ink-muted);
}
/* ==========================================================================
GENERIC SINGLE PAGE — one white card, body supplied by CKEditor
--------------------------------------------------------------------------
.rs-prose styles raw rich-text output by element, because CKEditor emits no
classes. Anything an editor can insert has a rule here; nothing inside the
card needs a class in Twig.
========================================================================== */
.rs-single {
padding-block: var(--rs-space-30) var(--rs-space-56);
}
.rs-single__card {
padding: clamp(var(--rs-space-22), 3vw, var(--rs-space-34));
border: 1px solid var(--rs-jcard-border);
border-radius: var(--rs-radius-18);
background: var(--rs-white);
box-shadow: var(--rs-shadow-hair);
}
.rs-single__updated {
margin-top: var(--rs-space-22);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-13);
color: var(--rs-ink-soft);
text-align: center;
}
/* ==========================================================================
AUTH — login, register, password reset.
NOT IN THE APPROVED DESIGN. The client never reviewed an auth screen, so
these compose the existing form card (rs-info-form) inside a narrow centred
column rather than introducing a new visual language. Four classes only.
========================================================================== */
.rs-auth {
max-width: 30rem; /* 480px — one column of the info-form grid plus gutters */
margin-inline: auto;
padding-block: var(--rs-space-44) var(--rs-space-56);
}
.rs-auth__foot {
margin-top: var(--rs-space-20);
text-align: center;
font-family: var(--rs-font-ui);
font-size: var(--rs-text-14);
color: var(--rs-ink-muted);
}
/* Flash / validation banner. Also has no design reference — derived from the
palette, matching the field error colour. */
.rs-notice {
margin-bottom: var(--rs-space-18);
padding: var(--rs-space-12) var(--rs-space-15);
border-radius: var(--rs-radius-10);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-14);
background: var(--rs-nav-active);
color: var(--rs-green-800);
}
.rs-notice--error { background: var(--rs-status-wait-bed); color: var(--rs-red-500); }
/* --- Rich text ----------------------------------------------------------- */
.rs-prose {
font-family: var(--rs-font-ui);
font-size: var(--rs-text-15-5);
line-height: var(--rs-lh-prose);
color: var(--rs-green-500);
}
.rs-prose > :first-child { margin-top: 0; }
.rs-prose > :last-child { margin-bottom: 0; }
.rs-prose h2, .rs-prose h3, .rs-prose h4 {
margin: 0 0 var(--rs-space-12);
font-family: var(--rs-font-display);
font-weight: var(--rs-w-medium);
line-height: var(--rs-lh-card);
color: var(--rs-green-800);
}
.rs-prose h2 { font-size: var(--rs-text-22); }
.rs-prose h3 { font-size: var(--rs-text-19); }
.rs-prose h4 { font-size: var(--rs-text-17); }
.rs-prose > * + h2 { margin-top: var(--rs-space-30); }
.rs-prose > * + h3 { margin-top: var(--rs-space-26); }
.rs-prose > * + h4 { margin-top: var(--rs-space-22); }
.rs-prose p { margin: 0 0 var(--rs-space-12); }
.rs-prose ul, .rs-prose ol { margin: 0 0 var(--rs-space-12); padding-left: var(--rs-space-22); }
.rs-prose li { margin-bottom: var(--rs-space-6); }
.rs-prose li::marker { color: var(--rs-green-400); }
.rs-prose ul ul, .rs-prose ol ol, .rs-prose ul ol, .rs-prose ol ul {
margin-top: var(--rs-space-6);
margin-bottom: 0;
}
.rs-prose strong { font-weight: var(--rs-w-semi); color: var(--rs-green-800); }
.rs-prose em { font-style: italic; }
.rs-prose a {
color: var(--rs-green-800);
text-decoration: underline;
text-decoration-color: var(--rs-gold-500);
text-underline-offset: 0.1875rem;
text-decoration-thickness: 0.09375rem;
transition: color var(--rs-t-quick);
}
.rs-prose a:hover { color: var(--rs-gold-700); }
.rs-prose blockquote {
margin: var(--rs-space-22) 0;
padding-left: var(--rs-space-20);
border-left: 0.1875rem solid var(--rs-gold-500);
font-family: var(--rs-font-display);
font-size: var(--rs-text-17);
font-style: italic;
color: var(--rs-green-800);
}
.rs-prose blockquote p:last-child { margin-bottom: 0; }
.rs-prose hr {
margin: var(--rs-space-30) 0;
border: 0;
border-top: 1px solid var(--rs-border-warm);
}
.rs-prose img { max-width: 100%; height: auto; border-radius: var(--rs-radius-10); display: block; }
.rs-prose figure { margin: var(--rs-space-22) 0; }
.rs-prose figcaption {
margin-top: var(--rs-space-8);
font-size: var(--rs-text-13);
color: var(--rs-ink-soft);
}
.rs-prose table {
width: 100%;
margin: 0 0 var(--rs-space-22);
border-collapse: collapse;
font-size: var(--rs-text-14);
}
.rs-prose th, .rs-prose td {
padding: var(--rs-space-10) var(--rs-space-12);
border-bottom: 1px solid var(--rs-border-warm);
text-align: left;
vertical-align: top;
}
.rs-prose th {
font-weight: var(--rs-w-semi);
color: var(--rs-green-800);
}
/* ---------------------------------------------------------------------------
Journal artwork
---------------------------------------------------------------------------
The design gives every journal card and article hero a flat gradient tint.
Articles now carry a real image, so the picture layers over that tint and the
tint stays as the bed underneath — an article with no image still looks
deliberate rather than broken, the same way .rs-cover keeps its placeholder.
Stacking is DOM order, not z-index: the image is the first child of the art
block, so the comma mark, the category pill and the featured badge all still
paint over it. The cards clip it with the overflow:hidden they already carry.
--------------------------------------------------------------------------- */
.rs-jcard__img,
.rs-jfeatured__img,
.rs-article-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The hero sets display type over the picture, so it needs a scrim the cards
do not — the tint alone will not hold white text over a photograph. */
.rs-article-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(36, 51, 41, 0.52) 0%, rgba(36, 51, 41, 0.80) 100%);
}
/* ---------------------------------------------------------------------------
Home banner carousel — position steps
---------------------------------------------------------------------------
.rs-banner__track is a horizontal flex strip with a transform transition
already declared, so moving between slides is a translate, not a show/hide.
The offset lives here rather than in a style attribute, following the same
rule as .rs-meter--60 and .rs-jg--slate: JavaScript writes an index onto the
track and the stylesheet owns every pixel. Eight steps is well past the two
the design ships and the three the CMS holds.
--------------------------------------------------------------------------- */
.rs-banner__track[data-index="0"] { transform: translateX(0); }
.rs-banner__track[data-index="1"] { transform: translateX(-100%); }
.rs-banner__track[data-index="2"] { transform: translateX(-200%); }
.rs-banner__track[data-index="3"] { transform: translateX(-300%); }
.rs-banner__track[data-index="4"] { transform: translateX(-400%); }
.rs-banner__track[data-index="5"] { transform: translateX(-500%); }
.rs-banner__track[data-index="6"] { transform: translateX(-600%); }
.rs-banner__track[data-index="7"] { transform: translateX(-700%); }
/* ---------------------------------------------------------------------------
Out-of-stock buy box
---------------------------------------------------------------------------
.rs-product__stock is styled green because the design only ever drew the
in-stock case. The unavailable case needs to not look like good news, and a
disabled Add to basket needs to read as disabled rather than merely inert.
--------------------------------------------------------------------------- */
.rs-product__stock--out { color: var(--rs-ink-muted); }
.rs-product__stock--out .rs-product__stock-dot { background: var(--rs-ink-soft); }
.rs-add-to-basket:disabled {
cursor: not-allowed;
opacity: 0.45;
box-shadow: none;
}
/* ---------------------------------------------------------------------------
Shop by category — real covers over the placeholder
---------------------------------------------------------------------------
Same arrangement as .rs-cover and the journal cards: the design's placeholder
stays as the bed and the real cover layers over it, so a book with no artwork
still renders as designed rather than as a gap.
--------------------------------------------------------------------------- */
.rs-mini-book__cover { position: relative; overflow: hidden; }
.rs-mini-book__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The recommendation cover uses the same placeholder-plus-image arrangement as
the mini books, so it needs the same containing block. */
.rs-rec-card__cover { position: relative; overflow: hidden; display: block; }
/* ---------------------------------------------------------------------------
Quick add feedback
---------------------------------------------------------------------------
The card's basket button posts in the background, so it has to say something
for itself — otherwise a click looks like nothing happened at all.
--------------------------------------------------------------------------- */
.rs-quick-add.is-busy { opacity: 0.55; cursor: progress; }
.rs-quick-add.is-added { background: var(--rs-stock-dot); color: var(--rs-white); }
/* ---------------------------------------------------------------------------
Make the hidden attribute actually hide
---------------------------------------------------------------------------
The browser's own stylesheet gives [hidden] display:none, but that is the
weakest possible rule and any author `display` beats it. .rs-feature__inner
is display:flex, so the Best Sellers band rendered all five slides stacked
down the page instead of one at a time.
carousel.js hides slides with the attribute, and the mega panels use it too,
so this belongs at the top level rather than against one component.
--------------------------------------------------------------------------- */
[hidden] { display: none !important; }
/* The basket badge is always in the DOM so the quick-add button can update it
without re-rendering the header. With nothing in the basket it has no
content, and an empty badge should not be drawn. */
.rs-action__count:empty { display: none; }
/* A quiet note under a field — used on the delivery step to explain why the
delivery options are short until an address has been entered. Same metrics as
.rs-field__error, in the muted ink rather than the error red. */
.rs-field__hint {
margin-top: var(--rs-space-6);
font-family: var(--rs-font-ui);
font-size: var(--rs-text-13);
color: var(--rs-ink-muted);
}
/* The search scope is a real