/* ============================================================
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;
/* gold NEW badge (What's-new spotlight, deep-dive cards, gallery) */
--m-badge-new-bg: #f5ead2;
--m-badge-new-ink: #8a6d2f;
--m-badge-new-line: #e8d5a7;
/* 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; }
}
/* ---------- Nav over the cinematic hero ----------
marketing.js adds .is-over-hero while the hero artwork is behind the
bar. Without this the sticky near-white nav reads as a bright strip
pinned across the top of the picture. Nav z-index is 50, well above
the artwork layer's 0, so it stays clickable throughout.
Only the landing page can ever have .mk-hero-cinematic, so the blog,
tools and legal pages are untouched. */
.m-nav.is-over-hero {
/* Not fully transparent: a soft top-down scrim guarantees the links
stay legible no matter which artwork gets uploaded next. */
background: linear-gradient(180deg, rgba(12, 9, 6, .55) 0%, rgba(12, 9, 6, .28) 70%, rgba(12, 9, 6, 0) 100%);
border-bottom-color: transparent;
backdrop-filter: none; /* blurring a fixed image per frame is not free */
}
.m-nav.is-over-hero .m-brand-name,
.m-nav.is-over-hero .m-nav-links a:hover { color: #fdfaf4; }
.m-nav.is-over-hero .m-nav-links a { color: #ece5d8; }
.m-nav.is-over-hero .m-nav-links .m-nav-signin { border-left-color: rgba(255, 255, 255, .28); }
.m-nav.is-over-hero .m-nav-links a.btn-primary,
.m-nav.is-over-hero .m-nav-links a.btn-primary:hover { color: #fff; }
.m-nav.is-over-hero .m-nav-toggle { border-color: rgba(255, 255, 255, .4); }
.m-nav.is-over-hero .m-nav-toggle span { background: #fdfaf4; }
.m-nav.is-over-hero a:focus-visible {
outline-color: #f6e6bd;
box-shadow: 0 0 0 5px rgba(0, 0, 0, .45);
}
/* The letter fallback from View::brandMark() is CSS-coloured, so it can
follow the links. An admin-uploaded logo is a raster image of unknown
colour and CANNOT be recoloured safely — a dark mark will vanish here.
If that happens, either upload a light variant or uncomment the filter
below (correct for a monochrome mark, wrong for a coloured one). */
.m-nav.is-over-hero .logo-mark:not(.logo-mark-img) {
color: #fdfaf4;
border-color: rgba(255, 255, 255, .4);
}
/* .m-nav.is-over-hero .logo-mark-img { filter: brightness(0) invert(1); } */
@media (max-width: 760px) {
/* The open menu panel is an opaque white sheet below the bar, so its
links must stay DARK even while the nav itself is over the artwork —
otherwise the menu is light-on-light and effectively invisible. */
.m-nav.is-over-hero .m-nav-links.is-open a { color: var(--ink-2); }
.m-nav.is-over-hero .m-nav-links.is-open a:hover { color: var(--ink-1); }
.m-nav.is-over-hero .m-nav-links.is-open a.btn-primary,
.m-nav.is-over-hero .m-nav-links.is-open a.btn-primary:hover { color: #fff; }
.m-nav.is-over-hero .m-nav-links.is-open .m-nav-signin { border-left-color: transparent; }
}
/* ---------- 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%; }
/* ============================================================
Cinematic hero — full-bleed artwork held in place while the
page scrolls over it.
============================================================
Applies ONLY under .mk-hero-cinematic, which landing.php adds
when the hero_bg_wide slot is filled. Everything above stays
the fallback: delete the images in /admin/screenshots and the
original white two-column hero returns untouched.
Why a fixed ELEMENT and not `background-attachment: fixed` on
the section: iOS Safari ignores that property outright (it
renders as `scroll`), and where it is honoured it forces a
full repaint on every scroll frame. A position:fixed element
composites on the GPU and behaves identically everywhere.
Stacking contract, and it is a contract — break either half
and the artwork escapes the hero:
.mk-hero-bg z-index 0 (fixed, fills the viewport)
.m-hero-inner z-index 1 (the copy, over the art)
.mk-below-hero z-index 1 (opaque, scrolls up over it)
`.m-section` sets no background of its own, so without the
wrapper every section below would be transparent and the art
would show through the whole page.
============================================================ */
.mk-hero-cinematic {
/* Flip the palette tokens on the section rather than restyling
anything: --ink-* and --accent inherit, so every existing
.m-hero-title / .m-hero-sub / .m-eyebrow declaration resolves
light with no new selectors and no duplicated rules.
Marketing pages are force-set to data-theme="light" before
first paint, so there is no dark variant to keep in sync. */
--ink-1: #fdfaf4;
--ink-2: #ece5d8;
--ink-3: #cfc6b6;
--accent: #e8c882; /* the gold, lifted for contrast on dark */
position: relative;
/* Full-bleed: cancel the container cap the fallback hero uses, and
replace its two-column grid with a centred single column. */
max-width: none;
min-height: clamp(560px, 88vh, 900px);
padding: clamp(96px, 18vh, 180px) var(--m-gutter) clamp(88px, 14vh, 150px);
/* Behind the artwork while it decodes, and the colour a very
wide viewport shows past the edges. Keep this close to the
artwork's dominant tone — it is what prevents a white flash
on a slow connection. */
background: #14100c;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mk-hero-bg {
position: fixed;
inset: 0;
z-index: 0;
background: #14100c;
pointer-events: none; /* never intercept a click meant for the copy */
}
.mk-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Scrim. This is an accessibility requirement, not styling: the
headline and subhead sit directly on the artwork, and whatever
image is uploaded next has to stay legible. Darkest through the
middle band where the copy lives, easing off at top and bottom
so the art still reads. Target >=7:1 for the headline and
>=4.5:1 for the subhead — the higher bar because this site's
owner is dyslexic. If a future image misses it, DEEPEN THIS.
Do not shrink or lighten the type to compensate. */
.mk-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(120% 75% at 50% 42%, rgba(12, 9, 6, .72) 0%, rgba(12, 9, 6, .34) 55%, rgba(12, 9, 6, 0) 100%),
linear-gradient(180deg, rgba(14, 11, 8, .74) 0%, rgba(14, 11, 8, .52) 34%, rgba(14, 11, 8, .58) 72%, rgba(14, 11, 8, .82) 100%);
}
/* The copy column, centred and measure-capped. */
.mk-hero-cinematic .m-hero-inner {
position: relative;
z-index: 1;
max-width: var(--m-container-n);
margin: 0 auto;
}
.mk-hero-cinematic .m-hero-title,
.mk-hero-cinematic .m-hero-sub {
margin-left: auto;
margin-right: auto;
}
.mk-hero-cinematic .m-hero-sub {
max-width: 620px;
/* A hair more leading than the light hero: light-on-dark type
needs the extra air to stop the lines closing up. */
line-height: 1.6;
}
/* Lift the display type off the art so it never dissolves into a
busy patch. Subtle — a heavy shadow reads as amateur at size. */
.mk-hero-cinematic .m-hero-title {
text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.mk-hero-cinematic .m-hero-sub,
.mk-hero-cinematic .m-eyebrow {
text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.mk-hero-cinematic .mk-hero-ctas {
justify-content: center;
}
/* ⚠ The token flip at the top of this block is only safe for things that
use --ink-* as TEXT. Buttons use it as a BACKGROUND:
.btn → background #fff; color var(--ink-1)
.btn-primary → background var(--ink-1); color #fff
so flipping --ink-1 light turned the primary CTA into near-white text on
a near-white pill — an invisible button, which is exactly what shipped
the first time. Pin both back to the real ink values.
Literal hex on purpose: the whole point is to escape the flipped token,
so var(--ink-1) here would just reintroduce the bug. Same class of
mistake as the nav's .btn-primary override further up this file. */
.mk-hero-cinematic .btn {
background: #fff;
color: #1a1a1a;
}
.mk-hero-cinematic .btn-primary {
background: #1a1a1a;
border-color: #1a1a1a;
color: #fff;
/* A hairline and a drop shadow so the standard dark button still reads
as a raised button against dark artwork instead of dissolving into
it. Colour is untouched — this is definition, not a restyle. */
box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 24px rgba(0, 0, 0, .45);
}
.mk-hero-cinematic .btn-primary:hover {
background: #000;
border-color: #000;
color: #fff;
}
/* The secondary "See how it works" link and the trust line are the
two lowest-contrast items in the hero — give them an explicit
colour rather than letting them inherit --ink-3 at small size. */
.mk-hero-cinematic .mk-hero-secondary,
.mk-hero-cinematic .mk-hero-trust a {
color: #e4dccd;
}
.mk-hero-cinematic .mk-hero-secondary:hover,
.mk-hero-cinematic .mk-hero-trust a:hover {
color: #fdfaf4;
}
/* Focus rings must survive on dark: the shared rule uses --accent,
which is now the lifted gold, but add a dark halo so the ring
reads against a light patch of artwork too. */
.mk-hero-cinematic a:focus-visible,
.mk-hero-cinematic .btn:focus-visible {
outline-color: #f6e6bd;
box-shadow: 0 0 0 5px rgba(0, 0, 0, .45);
}
/* Everything below the hero: opaque, and stacked above the fixed
artwork so it slides up and covers it. The footer lives inside
this wrapper too — `.m-foot` has an opaque background but is not
positioned, and a fixed layer paints above static backgrounds
whatever the source order. */
.mk-below-hero {
position: relative;
z-index: 1;
background: var(--bg-page);
}
@media (max-width: 760px) {
.mk-hero-cinematic {
min-height: clamp(480px, 76vh, 700px);
padding-top: clamp(64px, 12vh, 110px);
padding-bottom: clamp(56px, 10vh, 96px);
}
}
/* ---------- 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;
}
/* The old six-pillar "Features grid" CSS (.m-feature-grid / .m-feature /
.m-feature-icon) that lived here was removed in v2.24 — the VES
redesign replaced those cards with the stage grid, and no view had
referenced the classes since. */
/* ---------- 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