/* ============================================================
Scrived — Public marketing site
------------------------------------------------------------
Inherits its type and accent system from scrived.css (the
inside) so the outside feels like the same product — same
Playfair display face, same old-gold accent, same ink ramp.
What it does NOT inherit is the canvas. The app is warm cream
paper; the public site is white, because it has to sell on
screenshots and cream tints every screenshot sitting on it.
The overrides below re-declare a handful of :root tokens on
.marketing-body itself, and add the spacing / type / container
scale the old marketing CSS hardcoded as literals.
============================================================ */
/* ---------- Marketing design tokens ----------
Scoped to .marketing-body ONLY. Custom properties inherit down
the element tree, so declaring --bg-page here binds it to this
and its descendants; :root keeps its own value for every
other page. The authenticated app never puts `marketing-body` on
(it uses app-body / admin-body / auth-body / share-*-body
/ maintenance-body), so none of this can leak inside.
No dark variants: layout.php force-sets data-theme="light" on
for marketing-body before first paint, so the dark palette
can never apply out here. */
.marketing-body {
/* canvas — white first, cream demoted to an accent band */
--bg-page: #ffffff;
--bg-card: #ffffff;
--bg-paper: #fbfaf7;
--bg-rail: #f4f2ec;
/* marketing-only surfaces (no :root equivalent) */
--m-band: #f7f5f0; /* alternating cream section */
--m-band-line: #ece7db;
--m-nav-bg: rgba(255, 255, 255, .86);
--m-card-line: #e7e3da; /* hairline on a white card */
--m-card-line-2: #d8d2c5; /* hover / emphasis */
--m-badge-bg: #f4f1e9;
--m-badge-ink: #6a665e;
/* spacing scale — replaces the 90/80/64/28px literals */
--m-s1: 4px; --m-s2: 8px; --m-s3: 12px; --m-s4: 16px; --m-s5: 24px;
--m-s6: 32px; --m-s7: 48px; --m-s8: 64px; --m-s9: 80px; --m-s10: 112px;
--m-section-y: var(--m-s9); /* vertical rhythm between sections */
--m-gutter: 28px; /* horizontal page gutter */
--m-card-pad: 24px;
/* type scale — replaces 56/38/20/19/17.5/15.5/13.5/12.5px */
--m-fs-hero: clamp(38px, 5.2vw, 58px);
--m-fs-h2: clamp(28px, 3.4vw, 40px);
--m-fs-h3: 20px;
--m-fs-h4: 17px;
--m-fs-lead: 19px;
--m-fs-body: 16px;
--m-fs-sm: 14px;
--m-fs-xs: 12.5px;
--m-fs-eyebrow: 11px;
--m-lh-tight: 1.06;
--m-lh-head: 1.2;
--m-lh-body: 1.62;
--m-track-eyebrow: .14em;
/* container / shape / elevation / z */
--m-container: 1200px; /* was 1180px, repeated in five places */
--m-container-n: 760px; /* narrow measure for prose + section subs */
--m-radius: 14px;
--m-radius-sm: 10px;
--m-radius-pill: 999px;
--m-shadow-card: 0 1px 2px rgba(24, 22, 18, .045);
--m-shadow-lift: 0 10px 30px rgba(24, 22, 18, .08);
--m-z-nav: 50;
--m-z-overlay: 1200;
margin: 0;
background: var(--bg-page);
color: var(--ink-1);
font-family: var(--font-sans);
font-size: var(--m-fs-body);
line-height: var(--m-lh-body);
-webkit-font-smoothing: antialiased;
}
@media (max-width: 960px) { .marketing-body { --m-section-y: var(--m-s8); } }
@media (max-width: 760px) {
.marketing-body { --m-section-y: 56px; --m-gutter: 20px; --m-card-pad: 20px; }
}
/* Motion is decoration everywhere on this site — hover lifts, the
hero's rotate, the carousel's smooth scroll. Honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
.marketing-body *,
.marketing-body *::before,
.marketing-body *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* The buttons come from scrived.css, which has no focus-visible ring.
On a page whose primary action is a button, that's a real keyboard
trap-in-the-dark — add one here rather than touching the app's CSS. */
.marketing-body .btn:focus-visible,
.marketing-body a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.marketing-shell { width: 100%; overflow-x: hidden; }
/* ---------- Header / nav ---------- */
.m-nav {
position: sticky;
top: 0;
z-index: var(--m-z-nav);
background: var(--m-nav-bg);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--m-card-line);
}
.m-nav-inner {
max-width: var(--m-container);
margin: 0 auto;
padding: var(--m-s3) var(--m-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.m-brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
color: var(--ink-1);
text-decoration: none;
}
.m-brand .logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--bg-topbar);
color: #f5f1e6;
border-radius: 6px;
font-weight: 700;
letter-spacing: .02em;
}
.m-brand-name { letter-spacing: .01em; }
/* Uploaded brand logo (see scrived.css) — in the marketing nav/footer and
the maintenance card the .logo-mark span is itself the tile, so an ![]()
replacing it must drop that background and sit contained. Context in the
selector keeps it ahead of the base `.m-brand .logo-mark { background }`. */
.m-brand img.logo-mark,
.maint-logo img.logo-mark {
background: transparent;
object-fit: contain;
}
/* ----- Two pricing cards (Free / one-time paid) + launch countdown -----
Free is the actual, only sign-up entry point today (checkout requires an
account); Paid is visually the "recommended" card — bigger shadow, solid
CTA, always carries a ribbon (the launch-offer label when live, else a
generic "Best value" tag) so it stands out even with no active discount. */
.m-onetime {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
max-width: 940px;
margin: 0 auto;
align-items: start;
}
@media (max-width: 760px) {
.m-onetime { grid-template-columns: 1fr; max-width: 460px; }
}
.m-onetime-card {
position: relative;
width: 100%;
background: var(--bg-card, #fff);
border: 1px solid var(--m-card-line, #e2dcd0);
border-radius: var(--m-radius, 16px);
padding: 34px 30px 28px;
box-shadow: var(--m-shadow-card, 0 6px 20px rgba(0, 0, 0, .05));
text-align: center;
}
.m-onetime-card.is-paid {
box-shadow: var(--m-shadow-lift, 0 18px 50px rgba(0, 0, 0, .12));
}
.m-onetime-card.is-paid.has-offer { border-color: var(--accent, #8b6914); }
.m-onetime-ribbon {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: var(--accent, #8b6914);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
}
.m-onetime-ribbon.is-muted {
background: var(--bg-paper, #f5f3ee);
color: var(--ink-3, #6b655c);
border: 1px solid var(--line, #e2dcd0);
}
.m-onetime-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 6px;
}
.m-onetime-was {
font-size: 24px;
color: var(--ink-3, #9a948a);
text-decoration: line-through;
}
.m-onetime-now {
font-size: 56px;
font-weight: 800;
line-height: 1;
color: var(--ink-1, #1c1a17);
}
/* Free card's price is deliberately smaller — the paid card's number stays
the visual "hero" of the section, keeping upgrade as the natural focus. */
.is-free .m-onetime-now { font-size: 40px; }
.m-onetime-period { font-size: 14px; color: var(--ink-3, #6b655c); }
/* Step-up ladder line ("Launch price — goes up to $119 on August 1").
Replaced the JS countdown, which had no script behind it and rendered a
frozen "ends in —" to everyone. Same amber chip look. */
.m-stepup {
display: inline-block;
margin: 16px auto 0;
padding: 8px 14px;
border-radius: 10px;
background: rgba(139, 105, 20, .09);
color: var(--accent, #8b6914);
font-size: 14px;
font-weight: 600;
}
.m-onetime-features {
list-style: none;
margin: 22px 0;
padding: 0;
text-align: left;
display: grid;
gap: 10px;
}
.m-onetime-features li {
position: relative;
padding-left: 28px;
color: var(--ink-2, #33302b);
font-size: 15px;
line-height: 1.4;
}
.m-onetime-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--accent, #8b6914);
font-weight: 800;
}
.m-onetime-fine {
margin: 14px 0 0;
font-size: 12.5px;
color: var(--ink-3, #6b655c);
line-height: 1.5;
}
/* Guarantee line under the buy button — first fine-print line, slightly
more present than the rest; its link inherits the muted tone. */
.m-guarantee { margin-top: 12px; font-weight: 600; }
.m-guarantee a { color: inherit; text-decoration: underline; }
.m-guarantee a:hover { color: var(--accent, #8b6914); }
.m-nav-links {
display: flex;
align-items: center;
gap: 26px;
}
.m-nav-links a {
color: var(--ink-2);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color .15s ease;
}
.m-nav-links a:hover { color: var(--ink-1); }
.m-nav-links .m-nav-signin {
border-left: 1px solid var(--line);
padding-left: 24px;
margin-left: -2px;
}
/* The generic `.m-nav-links a` rule is more specific than `.btn-primary`,
so the nav's "Notify me" pill was inheriting ink-2 — dark text on the
dark ink-1 button. Restore the button's own text colors here. */
.m-nav-links a.btn-primary,
.m-nav-links a.btn-primary:hover {
color: #fff;
}
.m-nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 6px;
padding: 8px 10px;
cursor: pointer;
}
.m-nav-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--ink-1);
margin: 3px 0;
border-radius: 1px;
transition: transform .15s ease, opacity .15s ease;
}
@media (max-width: 760px) {
.m-nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-page);
border-bottom: 1px solid var(--line);
flex-direction: column;
align-items: stretch;
padding: 16px 28px 22px;
gap: 14px;
}
.m-nav-links.is-open { display: flex; }
.m-nav-links .m-nav-signin { border-left: none; padding-left: 0; margin-left: 0; }
.m-nav-toggle { display: inline-flex; }
}
/* ---------- Hero ---------- */
.m-hero {
max-width: var(--m-container);
margin: 0 auto;
padding: var(--m-s9) var(--m-gutter) 88px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--m-s8);
align-items: center;
}
@media (max-width: 960px) {
.m-hero { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: var(--m-s8); gap: var(--m-s7); }
}
.m-eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: var(--m-fs-eyebrow);
font-weight: 600;
letter-spacing: var(--m-track-eyebrow);
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
/* The hero and section headings clamp, so the old fixed-px sizes plus
a 600px override are gone — one declaration now covers every width. */
.m-hero-title {
font-family: var(--font-display);
font-size: var(--m-fs-hero);
line-height: var(--m-lh-tight);
font-weight: 600;
letter-spacing: -.01em;
margin: 0 0 22px;
color: var(--ink-1);
}
.m-hero-sub {
font-family: var(--font-serif);
font-size: var(--m-fs-lead);
line-height: 1.55;
color: var(--ink-2);
max-width: 560px;
margin: 0 0 var(--m-s6);
}
.m-hero-form {
display: flex;
gap: 8px;
max-width: 480px;
margin: 0 0 12px;
flex-wrap: wrap;
}
.m-hero-form input[type="email"] {
flex: 1;
min-width: 200px;
padding: 12px 16px;
border: 1px solid var(--line-strong);
border-radius: 8px;
font: inherit;
font-size: 15px;
background: var(--bg-card);
color: var(--ink-1);
transition: border-color .15s ease, box-shadow .15s ease;
}
.m-hero-form input[type="email"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.m-hero-form .btn-primary,
.m-cta-form .btn-primary {
padding: 12px 22px;
font-size: 15px;
}
.m-hero-fineprint {
margin: 0;
font-size: 12.5px;
color: var(--ink-3);
}
.m-flash {
margin-top: 16px;
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
}
.m-flash-ok { background: #e6f5ea; color: #1e6b35; border: 1px solid #c4e4cf; }
.m-flash-error { background: #fde6e6; color: #8a1f1f; border: 1px solid #f4c4c4; }
/* Decorative editor mockup */
.m-hero-art {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* Variant used when the admin has uploaded a real hero screenshot
(managed at /admin/screenshots). Slightly larger frame than the
CSS mock-window and a subtle paper-shadow for visual lift. */
.m-hero-art-photo img {
width: 100%;
max-width: 560px;
height: auto;
display: block;
border-radius: 10px;
box-shadow: var(--shadow-paper);
border: 1px solid var(--line);
}
.m-mock-window {
width: 100%;
max-width: 480px;
background: var(--bg-paper);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: var(--shadow-paper);
overflow: hidden;
transform: rotate(-1deg);
transition: transform .4s ease;
}
.m-mock-window:hover { transform: rotate(0deg); }
.m-mock-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--bg-topbar);
color: #f5f1e6;
font-size: 12px;
}
.m-mock-chrome span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.18);
}
.m-mock-chrome em {
margin-left: auto;
font-style: normal;
font-size: 11px;
opacity: .8;
}
.m-mock-body {
padding: 36px 44px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 320px;
font-family: var(--font-serif);
}
.m-mock-h {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
color: var(--ink-1);
text-align: center;
letter-spacing: .04em;
}
.m-mock-line {
height: 11px;
background: linear-gradient(90deg, var(--line) 0%, var(--bg-rail) 100%);
border-radius: 2px;
}
.m-mock-line.short { width: 65%; }
.m-mock-line.medium { width: 85%; }
/* ---------- Section base ---------- */
.m-section {
padding: var(--m-section-y) var(--m-gutter);
max-width: var(--m-container);
margin: 0 auto;
}
/* The alternating band. On the white canvas this is the only place
the old cream paper survives — it's what keeps the page from
reading as a generic white SaaS scroll. */
.m-section-alt {
max-width: none;
background: var(--m-band);
border-top: 1px solid var(--m-band-line);
border-bottom: 1px solid var(--m-band-line);
}
.m-section-alt > * { max-width: var(--m-container); margin-left: auto; margin-right: auto; }
/* ---- Screenshots gallery — carousel (admin-managed at /admin/screenshots) ----
3 slides on desktop, 2 on tablet, 1 on mobile (with a peek of
the next slide for affordance). Uses CSS scroll-snap so touch
swipe on mobile snaps naturally; arrow buttons scroll by exactly
one slide width + gap so click-through lands on the same snap
point.
Slide widths use calc() rather than auto so the snap math stays
predictable: each slide is (track - (gaps × visible-count - 1)) /
visible-count, locking adjacent slides into identical positions.
*/
.m-section-gallery { padding-top: 56px; padding-bottom: 56px; }
.m-carousel {
position: relative;
max-width: 1180px;
margin: 32px auto 0;
/* Overflow hidden on the wrapper so arrows can sit at the edges
without showing a horizontal scrollbar on the page. The TRACK
inside still scrolls. */
}
.m-carousel-track {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Hide the WebKit scrollbar without losing scrollability. */
}
.m-carousel-track::-webkit-scrollbar { display: none; }
/* One slide per page on desktop + tablet. flex-basis alone is NOT
enough to freeze the width: a flex item's default min-width:auto
lets an image's intrinsic size push its slide wider (or narrower)
than the track — which is exactly how odd-sized uploads made
neighbors creep into view. Clamping min AND max to 100% makes every
slide exactly track-width no matter what image is inside; the
fixed-aspect frame (.m-gallery-item-trigger) handles the rest. */
.m-carousel-slide {
flex: 0 0 100%;
min-width: 100%;
max-width: 100%;
scroll-snap-align: start;
margin: 0;
}
/* Mobile: one slide visible with a small peek of the next one as
an affordance for swipeability. Track gets horizontal padding so
the first/last slide doesn't bleed past the screen edge when
snap-aligned to start. */
@media (max-width: 640px) {
.m-carousel-track { padding: 0 8%; gap: 16px; }
.m-carousel-slide { flex: 0 0 84vw; min-width: 84vw; max-width: 84vw; }
}
/* Small instructional hint shown under the "See Pendrilo in action."
heading. Tells visitors the gallery is scrollable and that each
image is clickable to open at full size — non-obvious because
the thumbnails are zoomed in and look like they might just be
decorative figures. */
.m-gallery-hint {
text-align: center;
color: var(--ink-3);
font-size: 14px;
line-height: 1.5;
max-width: 560px;
margin: 10px auto 0;
}
.m-gallery-item {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* The image sits INSIDE the fixed-aspect frame (the trigger button,
below), letterboxed and centered via object-fit: contain — so any
upload size/aspect works without changing the slide's geometry.
The card chrome (border, radius, shadow) lives on the frame, not
the img, so every tile looks identical regardless of image shape. */
.m-gallery-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.m-gallery-item:hover .m-gallery-item-trigger {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
.m-gallery-item figcaption {
margin: 0;
font-size: 13.5px;
color: var(--ink-3);
font-family: var(--font-serif);
line-height: 1.5;
font-style: italic;
text-align: center;
}
/* Arrows: floated absolute-positioned circles half-overlapping the
carousel edge. Hidden by default; shown only when the JS detects
the track actually overflows (is-overflowing class). Disabled
state when at the start/end of the scroll. */
.m-carousel-arrow {
position: absolute;
top: calc(50% - 12px); /* tuned slightly above the caption */
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-card);
color: var(--ink-1);
border: 1px solid var(--line);
font-size: 22px;
font-weight: 600;
font-family: var(--font-sans);
line-height: 1;
cursor: pointer;
z-index: 3;
box-shadow: var(--shadow-1);
display: none; /* shown via .is-overflowing below */
align-items: center;
justify-content: center;
transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.m-carousel.is-overflowing .m-carousel-arrow {
display: inline-flex;
}
.m-carousel-arrow:hover {
background: var(--accent-bg);
border-color: var(--accent);
transform: translateY(-50%) scale(1.05);
}
.m-carousel-arrow:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.m-carousel-arrow:disabled {
opacity: .35;
cursor: not-allowed;
transform: translateY(-50%);
background: var(--bg-card);
border-color: var(--line);
}
.m-carousel-arrow-prev { left: -8px; }
.m-carousel-arrow-next { right: -8px; }
/* On very narrow screens hide the arrows entirely — swipe is the
primary interaction, and arrows that close to the screen edge
start to compete with the slides. */
@media (max-width: 480px) {
.m-carousel.is-overflowing .m-carousel-arrow { display: none; }
}
/* The tile frame: a button (whole tile is the lightbox click target,
keyboard-focusable, zoom-in cursor) AND the fixed-aspect box every
image letterboxes into. aspect-ratio reserves the slide's height
before the image even loads, so slides can't shift or drift off
their snap points as differently-sized images arrive. */
.m-gallery-item-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0;
padding: 0;
border: 1px solid var(--line);
background: var(--bg-paper);
cursor: zoom-in;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-1);
font: inherit;
color: inherit;
transition: transform .25s ease, box-shadow .25s ease;
}
.m-gallery-item-trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---- Lightbox (gallery image modal) ---- */
.m-lightbox {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.m-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.m-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 17, 12, .88);
backdrop-filter: blur(4px);
cursor: zoom-out;
}
.m-lightbox-card {
position: relative;
margin: 0;
z-index: 1;
max-width: min(1100px, 92vw);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
transform: translateY(8px);
transition: transform .25s ease;
}
.m-lightbox.is-open .m-lightbox-card {
transform: translateY(0);
}
.m-lightbox-card img {
display: block;
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
border-radius: 8px;
box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
background: var(--bg-paper);
}
.m-lightbox-caption {
margin: 0;
padding: 0 16px;
text-align: center;
font-family: var(--font-serif);
font-size: 15.5px;
font-style: italic;
line-height: 1.55;
color: #e8e3d8;
max-width: 720px;
}
.m-lightbox-caption[hidden] { display: none; }
.m-lightbox-close {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
border: none;
font-size: 26px;
line-height: 1;
cursor: pointer;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, transform .15s ease;
}
.m-lightbox-close:hover {
background: rgba(255, 255, 255, .22);
transform: scale(1.05);
}
.m-lightbox-close:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (max-width: 640px) {
.m-lightbox { padding: 16px; }
.m-lightbox-card img { max-height: 70vh; }
.m-lightbox-close { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 22px; }
}
.m-section-head { text-align: center; margin-bottom: 56px; }
.m-section-title {
font-family: var(--font-display);
font-size: var(--m-fs-h2);
line-height: var(--m-lh-head);
font-weight: 600;
margin: 0 0 12px;
color: var(--ink-1);
letter-spacing: -.01em;
}
.m-section-sub {
font-family: var(--font-serif);
font-size: var(--m-fs-h4);
line-height: 1.55;
color: var(--ink-2);
max-width: var(--m-container-n);
margin: 0 auto;
}
.m-section-empty {
text-align: center;
color: var(--ink-3);
font-style: italic;
padding: 32px;
}
/* ---------- Features grid ---------- */
.m-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--m-s5);
}
.m-feature {
background: var(--bg-card);
border: 1px solid var(--m-card-line);
border-radius: var(--m-radius);
padding: var(--m-card-pad);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.m-feature:hover {
transform: translateY(-2px);
box-shadow: var(--m-shadow-lift);
border-color: var(--m-card-line-2);
}
.m-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--accent-bg);
color: var(--accent);
border-radius: 10px;
font-size: 20px;
margin-bottom: 18px;
}
.m-feature h3 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
margin: 0 0 8px;
color: var(--ink-1);
}
.m-feature p {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
}
/* ---------- Pricing ----------
The monthly/yearly cadence switcher that used to sit here was
removed with its JS handler: the site sells one one-time purchase,
so there was nothing to switch between and no view emitted the
markup. The live pricing UI is `.m-onetime*`, further up. */
.m-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
align-items: stretch;
}
.m-tier {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-page);
border: 1px solid var(--line);
border-radius: 14px;
padding: 32px 28px;
transition: transform .15s ease, box-shadow .15s ease;
}
.m-section-alt .m-tier { background: var(--bg-page); }
.m-tier.is-highlighted {
border-color: var(--accent);
box-shadow: 0 8px 24px rgba(139, 105, 20, 0.10), 0 1px 0 var(--accent-soft);
transform: scale(1.02);
}
.m-tier-ribbon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
padding: 4px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
}
.m-tier-head { margin-bottom: 24px; }
.m-tier-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
margin: 0 0 4px;
color: var(--ink-1);
}
.m-tier-tagline {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink-3);
margin: 0;
}
.m-tier-price {
margin-bottom: 24px;
min-height: 64px;
display: flex;
align-items: baseline;
}
.m-price {
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.m-price[hidden] { display: none; }
.m-price-symbol {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--ink-2);
margin-right: 2px;
}
.m-price-amount {
font-family: var(--font-display);
font-size: 48px;
font-weight: 600;
color: var(--ink-1);
line-height: 1;
}
.m-price-period {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink-3);
margin-left: 8px;
align-self: end;
padding-bottom: 6px;
}
.m-tier-features {
list-style: none;
margin: 0 0 28px;
padding: 0;
flex: 1;
}
.m-tier-features li {
font-family: var(--font-serif);
font-size: 15px;
color: var(--ink-2);
padding: 8px 0 8px 26px;
position: relative;
}
.m-tier-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 8px;
color: var(--accent);
font-weight: 700;
}
.m-tier-cta {
width: 100%;
padding: 12px 20px;
font-size: 15px;
}
/* ---------- FAQ ---------- */
.m-faq {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.m-faq details {
background: var(--bg-card);
border: 1px solid var(--line-soft);
border-radius: 8px;
padding: 0;
transition: border-color .15s ease;
}
.m-faq details:hover { border-color: var(--line); }
.m-faq details[open] { border-color: var(--line); }
.m-faq summary {
cursor: pointer;
list-style: none;
padding: 20px 24px;
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
color: var(--ink-1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after {
content: "+";
font-size: 22px;
font-weight: 300;
color: var(--ink-3);
transition: transform .15s ease;
}
.m-faq details[open] summary::after { content: "−"; }
.m-faq p {
margin: 0;
padding: 0 24px 22px;
font-family: var(--font-serif);
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-2);
}
.m-faq-more {
max-width: 760px;
margin: 20px auto 0;
text-align: center;
font-family: var(--font-serif);
font-size: 15.5px;
color: var(--ink-3);
}
.m-faq-more a { color: var(--accent, #8b6914); }
/* ---------- Closing CTA ---------- */
.m-cta {
background: var(--bg-topbar);
color: #f5f1e6;
padding: 80px 28px;
}
.m-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.m-cta-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 600;
margin: 0 0 14px;
}
.m-cta-sub {
font-family: var(--font-serif);
font-size: 18px;
margin: 0 0 32px;
opacity: .85;
}
/* Guarantee reassurance in the closing band — sits between the sub line
and the newsletter block, quieter than both. */
.m-cta-guarantee {
margin: -18px 0 28px;
font-size: 14px;
letter-spacing: .01em;
opacity: .75;
}
.m-cta-anchor {
display: block;
height: 0;
scroll-margin-top: 140px;
}
.m-cta-form {
display: flex;
gap: 8px;
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
}
.m-cta-form input[type="email"] {
flex: 1;
min-width: 200px;
padding: 14px 18px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
font: inherit;
font-size: 15px;
background: rgba(255,255,255,.06);
color: #f5f1e6;
}
.m-cta-form input::placeholder { color: rgba(245,241,230,.5); }
.m-cta-form input:focus {
outline: none;
border-color: var(--accent-soft);
background: rgba(255,255,255,.1);
}
/* ---------- Footer ----------
Three tiers: brand block, four categorised link columns, bottom bar.
The old single flat row of nine links gave every destination the
same weight, which made the footer useless as navigation.
`.m-foot` stays on the element as a stable hook. */
.m-foot {
background: var(--m-band);
border-top: 1px solid var(--m-band-line);
padding: var(--m-s8) var(--m-gutter) var(--m-s6);
}
.m-foot-inner {
max-width: var(--m-container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: var(--m-s7) var(--m-s5);
align-items: start;
}
@media (max-width: 960px) {
.m-foot-inner { grid-template-columns: 1fr 1fr; gap: var(--m-s6) var(--m-s5); }
.m-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.m-foot-inner { grid-template-columns: 1fr; }
}
.m-foot-brand .m-brand { margin-bottom: var(--m-s3); }
.m-foot-tagline {
margin: 0;
font-family: var(--font-serif);
font-size: var(--m-fs-sm);
line-height: 1.55;
color: var(--ink-3);
max-width: 30ch;
}
.m-foot-col h2 {
margin: 0 0 var(--m-s3);
font-family: var(--font-sans);
font-size: var(--m-fs-eyebrow);
font-weight: 700;
letter-spacing: var(--m-track-eyebrow);
text-transform: uppercase;
color: var(--ink-2);
}
.m-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-foot-col a {
color: var(--ink-3);
text-decoration: none;
font-size: var(--m-fs-sm);
transition: color .15s ease;
}
.m-foot-col a:hover { color: var(--ink-1); }
.m-foot-bottom {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--m-s3);
padding-top: var(--m-s4);
border-top: 1px solid var(--m-band-line);
}
/* ink-4 on white is ~2.9:1 — below AA even for fine print. ink-3 is
the quietest tone that still passes, so fine print stops there. */
.m-foot-fineprint {
margin: 0;
font-size: var(--m-fs-xs);
color: var(--ink-3);
}
/* ============================================================
Contact page — public form with honeypot + anti-spam
============================================================ */
.m-contact-main { padding: 64px 28px 96px; }
.m-contact-wrap {
max-width: 680px;
margin: 0 auto;
}
.m-contact-head {
text-align: center;
margin-bottom: 36px;
}
.m-contact-head .m-eyebrow { margin-bottom: 10px; }
.m-contact-title {
font-family: var(--font-display);
font-size: 42px;
font-weight: 600;
margin: 0 0 12px;
color: var(--ink-1);
letter-spacing: -.01em;
}
.m-contact-sub {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
}
.m-contact-sub a { color: var(--accent); text-decoration: none; }
.m-contact-sub a:hover { text-decoration: underline; }
.m-contact-form {
background: var(--bg-card);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 36px;
margin-top: 24px;
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
gap: 18px;
}
@media (max-width: 520px) { .m-contact-form { padding: 24px; } }
.m-contact-form .field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 520px) { .m-contact-form .field-row { grid-template-columns: 1fr; } }
.m-contact-form input[type="text"],
.m-contact-form input[type="email"],
.m-contact-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: 6px;
font: inherit;
font-size: 15px;
background: var(--bg-card);
color: var(--ink-1);
transition: border-color .15s ease, box-shadow .15s ease;
}
.m-contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.m-contact-form input:focus,
.m-contact-form textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* Honeypot: position off-screen + size 0 so visitors never tab to or
see it; bots fill every input they find. CSS display:none would
also work but some bots filter that — off-screen is sneakier. */
.m-honeypot {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
overflow: hidden;
opacity: 0;
}
.m-contact-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 6px;
}
.m-contact-fineprint {
font-size: 12.5px;
color: var(--ink-3);
flex: 1;
min-width: 200px;
}
.m-contact-fineprint a { color: var(--accent); text-decoration: none; }
.m-contact-fineprint a:hover { text-decoration: underline; }
/* NOTE (2026-07 admin redesign): the admin LAYOUT primitives that used
to live here (tab strips, tab rails, collapsible nav groups, cron/log
viewers, nav badges) moved to the admin section of scrived.css so the
admin chrome has one home and one 900px breakpoint. Page-specific
admin component styles (tier rows, ticket threads, newsletter
audience, announcement list, …) still live further down in this file.
Upload both CSS files together. */
/* ============================================================
Legal pages — Terms of Service + Privacy Policy
Reading-comfort layout: narrow column, generous line-height,
serif body to feel like a real document not a marketing surface.
============================================================ */
.legal-body { background: var(--bg-page); }
.legal-main {
padding: 56px 28px 96px;
}
.legal-doc {
max-width: 760px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 56px 64px;
box-shadow: var(--shadow-1);
}
@media (max-width: 600px) {
.legal-doc { padding: 40px 28px; border-radius: 8px; }
.legal-main { padding: 32px 16px 64px; }
}
.legal-head {
text-align: left;
margin-bottom: 36px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line-soft);
}
.legal-head .m-eyebrow { margin-bottom: 10px; }
.legal-title {
font-family: var(--font-display);
font-size: 38px;
font-weight: 600;
margin: 0 0 8px;
color: var(--ink-1);
letter-spacing: -.01em;
}
.legal-meta {
margin: 0;
font-size: 13px;
color: var(--ink-3);
font-style: italic;
}
.legal-prose {
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.7;
color: var(--ink-2);
}
.legal-prose h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--ink-1);
margin: 36px 0 14px;
padding-top: 8px;
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; }
.legal-prose h3 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--ink-1);
margin: 28px 0 10px;
}
.legal-prose p {
margin: 0 0 16px;
}
.legal-prose ul {
margin: 0 0 18px;
padding-left: 24px;
}
.legal-prose li {
margin-bottom: 8px;
}
.legal-prose strong { color: var(--ink-1); font-weight: 600; }
.legal-prose a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.legal-prose a:hover { color: var(--accent-soft); }
.legal-prose hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.legal-empty {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-3);
text-align: center;
padding: 28px;
}
.legal-empty a { color: var(--accent); text-decoration: none; }
.legal-empty a:hover { text-decoration: underline; }
.legal-foot {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--line-soft);
text-align: right;
}
.legal-partner-link {
color: var(--ink-3);
text-decoration: none;
font-size: 14px;
font-family: var(--font-sans);
}
.legal-partner-link:hover { color: var(--accent); }
/* Admin legal-editor textareas — bigger, monospaced so markdown
structure is easy to scan. */
.admin-legal-textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13px;
line-height: 1.55;
white-space: pre;
}
/* ============================================================
Maintenance page — same token system, accent overridable via
the admin (see