/* ===================================================================
WriteForge marketing site — brand design system
These tokens are the web half of one cross-platform design system. They
mirror the desktop app's Resources/Styles/Brand.xaml and the admin panel's
admin.css value for value, so the site, the writing app and the desktop app
read as the same product rather than three products sharing a logo:
navy #0C2340 chrome (header, footer, app title bars)
blue #1E8FFF the single accent — solid, never a gradient
canvas #F4F8FD page background behind cards
sunken #EFF6FF tinted panels and callouts
ink #0C2340 / muted #51617A / line #DBE7F5
radius 14px cards, 10px controls
The palette used to carry lavender-tinted neutrals left over from an earlier
purple identity, which made the site read cooler and greyer than the app.
Every neutral is now mixed toward the brand blue instead.
=================================================================== */
:root {
--navy: #0C2340;
--navy-2: #14396B;
--navy-3: #1C3357;
--navy-deep: #07182F;
--blue: #1E8FFF;
--blue-light: #58B0FF;
--blue-deep: #0F5FBF;
--lilac: #E4F1FF; /* pale blue wash behind icons and badges */
--mist: #EFF6FF; /* Brand.xaml SunkenLight */
--canvas: #F4F8FD; /* Brand.xaml CanvasLight — the page behind cards */
--paper: #FFFFFF;
--ink: #0C2340;
--muted: #51617A;
--line: #DBE7F5;
/* Ink for use on navy surfaces. Blue-tinted, matching the app's flyout. */
--on-navy: #D7E6F7;
--on-navy-muted: #9EC1EA;
--on-navy-faint: #7E97B8;
--on-navy-line: rgba(255,255,255,.12);
--ok: #1B9E62;
--warn: #B7791F;
--danger: #C5303B;
/* Kept only for the navy hero/footer washes. Buttons and accents are solid. */
--grad-navy: linear-gradient(160deg, #14396B 0%, #0C2340 60%, #07182F 100%);
--serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Shadows are navy-tinted, never neutral grey or purple. */
--shadow-sm: 0 2px 8px rgba(12,35,64,.06);
--shadow-md: 0 10px 30px rgba(12,35,64,.10);
--shadow-lg: 0 24px 60px rgba(12,35,64,.16);
--shadow-blue: 0 8px 22px rgba(30,143,255,.28);
--radius: 14px; /* Brand.xaml Card */
--radius-sm: 10px; /* Brand.xaml CardTight / buttons / fields */
--wrap: 1180px;
/* Legacy aliases. The purple-era names are still referenced by a few pages and
by app.css; they now resolve to the blue palette so nothing renders purple. */
--purple: var(--blue);
--purple-light: var(--blue-light);
--purple-deep: var(--blue-deep);
--grad-purple: var(--blue);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--paper);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.5px; }
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
img, svg { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.lead { font-size: 1.22rem; color: var(--muted); max-width: 46ch; }
.center .lead { margin-left: auto; margin-right: auto; }
/* Matches the app's Eyebrow style: small, bold, wide-tracked, all caps. */
.eyebrow {
display: inline-block; font-family: var(--sans); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; font-size: .78rem;
color: var(--blue); margin-bottom: 1rem;
}
/* Solid accent. The gradient version is gone; the app has one flat accent colour. */
.grad-text { color: var(--blue); }
section { padding: 92px 0; }
.section-tight { padding: 64px 0; }
.section-mist { background: var(--canvas); }
.section-navy { background: var(--grad-navy); color: var(--on-navy); }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .muted, .section-navy .lead { color: var(--on-navy-muted); }
/* ---------- Buttons ----------
Rounded rectangles, not pills, and a solid accent fill — the same shape and
weight as the desktop app's PrimaryButton / SecondaryButton / GhostButton. */
.btn {
display: inline-flex; align-items: center; gap: .5em;
font-family: var(--sans); font-weight: 600; font-size: 1rem;
padding: .8em 1.5em; border-radius: var(--radius-sm); border: 1px solid transparent;
cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { color:#fff; background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30,143,255,.38); }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-deep); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { color: var(--blue); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color:#fff; border-color: rgba(255,255,255,.38); }
.btn-outline-light:hover { color:#fff; border-color:#fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-lg { font-size: 1.06rem; padding: .95em 1.9em; }
/* ---------- Header ----------
Navy, like the desktop app's shell chrome and flyout. The site used to open on
a white translucent bar, which read as a different product from the app it was
selling. Active links carry the app's accent underline. */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--navy);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 40px; height: 40px; }
.brand .wordmark { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; letter-spacing: -1px; line-height: 1; }
.brand .wordmark .os { color: var(--blue-light); }
.brand .wordmark .au { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
color: var(--on-navy-muted); font-weight: 600; font-size: .98rem;
padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; border-bottom-color: var(--blue-light); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
/* On navy the ghost button needs light chrome, not the light-page border. */
.site-header .btn-ghost { color: var(--on-navy-muted); border-color: rgba(255,255,255,.28); }
.site-header .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .2s; }
/* ---------- Hero ---------- */
.hero { background: var(--grad-navy); color: #fff; position: relative; overflow: hidden; padding: 120px 0 110px; }
.hero::before, .hero::after {
content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0;
}
.hero::before { width: 520px; height: 520px; background: #1E8FFF; top: -180px; right: -120px; }
.hero::after { width: 420px; height: 420px; background: #58B0FF; bottom: -220px; left: -140px; opacity:.35; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; }
.hero .lead { color: var(--on-navy-muted); max-width: 40ch; font-size: 1.3rem; }
.hero-badge {
display:inline-flex; align-items:center; gap:8px; background: rgba(30,143,255,.18);
border:1px solid rgba(88,176,255,.45); color:#BEDCFB; font-weight:600; font-size:.85rem;
padding:.4em 1em; border-radius:999px; margin-bottom:1.4rem;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-note { margin-top: 1.2rem; color: var(--on-navy-faint); font-size:.92rem; }
/* ---------- App mockup in hero ----------
A faithful miniature of the real redesigned workspace rather than an abstract
dark panel: navy title bar, white project rail with the accent bar marking the
active section, and the manuscript on the app's light canvas. Someone who
installs WriteForge should recognise this picture immediately. */
.mockup {
background: var(--canvas); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
box-shadow: var(--shadow-lg); overflow: hidden;
}
.mockup-bar { display:flex; align-items:center; gap:7px; padding: 11px 15px; background: var(--navy); border-bottom:1px solid rgba(255,255,255,.08); }
.mockup-bar i { width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.mockup-bar i:nth-child(1){ background:#ff5f57; } .mockup-bar i:nth-child(2){ background:#febc2e; } .mockup-bar i:nth-child(3){ background:#28c840; }
.mockup-bar span { margin-left:10px; font-size:.78rem; color: var(--on-navy-muted); font-family: var(--serif); }
.mockup-body { display:grid; grid-template-columns: 112px 1fr; min-height: 320px; }
/* Project rail */
.mockup-side { background:#fff; border-right:1px solid var(--line); padding:14px 10px; display:flex; flex-direction:column; gap:9px; }
.mockup-side .m-logo { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.mockup-side .m-logo b { width:18px; height:18px; border-radius:5px; background: var(--blue); display:block; flex:none; }
.mockup-side .m-logo u { width:44px; height:6px; border-radius:3px; background: var(--line); display:block; }
.mockup-side .m-nav { display:flex; align-items:center; gap:7px; padding:6px 4px; border-radius:5px; }
.mockup-side .m-nav u { height:7px; border-radius:4px; background: var(--line); display:block; flex:1; }
.mockup-side .m-nav i { width:3px; align-self:stretch; border-radius:2px; background:transparent; display:block; flex:none; }
.mockup-side .m-nav.on { background: var(--mist); }
.mockup-side .m-nav.on i { background: var(--blue); }
.mockup-side .m-nav.on u { background: var(--blue); opacity:.7; }
.mockup-side .m-rule { height:1px; background: var(--line); margin:5px 2px; }
/* Manuscript */
.mockup-main { padding: 18px 20px; background: var(--canvas); }
.mockup-main .m-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding:14px 16px; box-shadow: var(--shadow-sm); }
.mockup-main .t { height: 10px; border-radius:5px; background: #E4EDF8; margin-bottom: 11px; }
.mockup-main .t.h { height: 13px; background: var(--navy); opacity:.82; width:52%; margin-bottom:15px; }
.mockup-main .t.w1{ width:60%; } .mockup-main .t.w2{ width:92%; } .mockup-main .t.w3{ width:82%; } .mockup-main .t.w4{ width:70%; }
.mockup-main .t:last-child { margin-bottom:0; }
.mockup-main .chip { display:inline-block; margin-top:12px; font-size:.72rem; font-weight:600; color: var(--blue-deep); background: var(--mist); border:1px solid #C9E1FB; padding:.3em .8em; border-radius:999px; }
/* Trust bar */
.trust { border-top:1px solid rgba(255,255,255,.1); margin-top: 60px; padding-top: 34px; display:flex; gap: 40px; flex-wrap:wrap; justify-content:center; }
.trust div { text-align:center; }
.trust .n { font-family:var(--serif); font-size:2rem; color:#fff; font-weight:700; }
.trust .l { color: var(--on-navy-faint); font-size:.85rem; }
/* ---------- Feature grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
background:#fff; border:1px solid var(--line); border-radius: var(--radius);
padding: 30px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-light); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); margin: 0; font-size: .98rem; }
.ficon {
width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
background: var(--lilac); margin-bottom: 18px;
}
.ficon svg { width: 26px; height: 26px; stroke: var(--blue); fill:none; stroke-width:1.9; }
/* Feature block (alternating) */
.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; margin-bottom: 90px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.rev .fr-media { order: 2; }
.feature-list { list-style:none; padding:0; margin: 1.2rem 0 0; }
.feature-list li { position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--ink); }
.feature-list li::before {
content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%;
background: var(--blue);
-webkit-mask: url("data:image/svg+xml;utf8,") center/13px no-repeat;
mask: url("data:image/svg+xml;utf8,") center/13px no-repeat;
}
.fr-media { background: var(--grad-navy); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-md); color:#fff; min-height: 260px; display:flex; align-items:center; justify-content:center; }
/* Panel visuals inside media */
.panel { width:100%; }
.panel .line { height:12px; border-radius:6px; background:rgba(255,255,255,.12); margin-bottom:12px; }
.panel .line.s{ width:45%; background: var(--blue);} .panel .line.a{width:92%;} .panel .line.b{width:78%;} .panel .line.c{width:85%;} .panel .line.d{width:60%;}
.panel .tags { margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.panel .tags span{ font-size:.74rem; color:#BEDCFB; background:rgba(30,143,255,.18); border:1px solid rgba(88,176,255,.4); padding:.3em .8em; border-radius:999px;}
/* ---------- How it works ---------- */
.steps { display:grid; grid-template-columns: repeat(5,1fr); gap: 20px; counter-reset: step; }
.step { text-align:center; position:relative; }
.step .num {
width: 54px; height:54px; border-radius:50%; background: var(--blue); color:#fff;
font-family:var(--serif); font-size:1.5rem; font-weight:700; display:flex; align-items:center; justify-content:center;
margin: 0 auto 16px; box-shadow: var(--shadow-blue);
}
.step h4 { font-size:1.05rem; margin-bottom:.3rem; }
.step p { font-size:.9rem; color: var(--muted); margin:0; }
/* ---------- Pricing ---------- */
.pricing-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; align-items:stretch; }
.plan {
background:#fff; border:1px solid var(--line); border-radius: var(--radius);
padding: 34px 30px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; position:relative;
}
.plan.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-lg); transform: scale(1.02); }
.plan .tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background: var(--blue); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.4em 1em; border-radius:999px; }
.plan .pname { font-family:var(--serif); font-size:1.5rem; color:var(--navy); margin-bottom:.2rem; }
.plan .pdesc { color:var(--muted); font-size:.92rem; min-height: 42px; }
.plan .price { font-family:var(--serif); font-size:3rem; color:var(--navy); font-weight:700; line-height:1; margin: 14px 0 2px; }
.plan .price small { font-size:1rem; color:var(--muted); font-weight:400; font-family:var(--sans); }
.plan .billed { color:var(--muted); font-size:.85rem; min-height: 20px; }
.plan .plan-features { list-style:none; padding:0; margin: 22px 0; flex:1; }
.plan .plan-features li { position:relative; padding-left:28px; margin-bottom:11px; font-size:.94rem; }
.plan .plan-features li::before { content:""; position:absolute; left:0; top:3px; width:16px;height:16px;border-radius:50%; background:var(--lilac);
-webkit-mask:url("data:image/svg+xml;utf8,") center/11px no-repeat; mask:url("data:image/svg+xml;utf8,") center/11px no-repeat; }
.plan .plan-features li::after { content:""; position:absolute; left:0; top:3px; width:16px;height:16px; }
.plan .plan-features li b { color: var(--navy); }
.billing-toggle { display:flex; align-items:center; justify-content:center; gap:14px; margin: 8px 0 44px; }
.billing-toggle span { font-weight:600; color:var(--muted); }
.billing-toggle span.on { color: var(--navy); }
.switch { position:relative; width:56px; height:30px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:var(--line); border-radius:999px; cursor:pointer; transition:.2s; }
.slider::before { content:""; position:absolute; width:24px;height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow: var(--shadow-sm);}
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider::before { transform: translateX(26px); }
.save-badge { background: var(--lilac); color: var(--blue-deep); font-weight:700; font-size:.78rem; padding:.25em .7em; border-radius:999px; }
.standalone-band { margin-top: 30px; background:#fff; border:1px dashed var(--blue-light); border-radius: var(--radius); padding: 28px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.standalone-band .price { font-family:var(--serif); font-size:2rem; color:var(--navy); font-weight:700; }
/* Comparison table */
.compare { width:100%; border-collapse: collapse; margin-top: 10px; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line); }
.compare th, .compare td { padding: 15px 18px; text-align:center; border-bottom:1px solid var(--line); font-size:.94rem; }
.compare th { background: var(--navy); color:#fff; font-family:var(--sans); font-weight:600; }
.compare th:first-child, .compare td:first-child { text-align:left; }
.compare thead th:first-child { background: var(--navy); }
.compare tbody tr:nth-child(even) { background: var(--canvas); }
.compare td:first-child { font-weight:600; color:var(--navy); }
.compare .yes { color: var(--blue); font-weight:700; }
.compare .no { color:#B9C7D8; }
.compare-scroll { overflow-x:auto; }
/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-cat { font-family:var(--serif); color:var(--blue); font-size:1.1rem; margin: 30px 0 10px; }
details.qa { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow:hidden; }
details.qa summary { cursor:pointer; padding: 20px 54px 20px 24px; font-weight:600; color:var(--navy); position:relative; list-style:none; font-size:1.03rem; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--blue); font-weight:300; transition:.2s; }
details.qa[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.qa .qa-body { padding: 0 24px 22px; color:var(--muted); }
details.qa .qa-body p:last-child { margin-bottom:0; }
/* ---------- CTA band ---------- */
.cta-band { background: var(--blue); border-radius: var(--radius); padding: 60px; text-align:center; color:#fff; box-shadow: var(--shadow-lg); }
.cta-band h2 { color:#fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 48ch; margin: 0 auto 1.6rem; font-size:1.15rem; }
/* ---------- Testimonials ---------- */
.quote { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.quote p { font-size:1.02rem; color:var(--ink); font-style:italic; }
.quote .who { display:flex; align-items:center; gap:12px; margin-top:16px; }
.quote .av { width:44px; height:44px; border-radius:50%; background: var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--serif); }
.quote .who b { color:var(--navy); display:block; font-size:.95rem; }
.quote .who span { color:var(--muted); font-size:.85rem; }
.stars { color:#F5A623; letter-spacing:2px; margin-bottom:10px; }
/* ---------- Logos / integrations ---------- */
.pill-row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.pill { background:#fff; border:1px solid var(--line); border-radius:999px; padding:.6em 1.3em; font-weight:600; color:var(--navy); font-size:.92rem; box-shadow: var(--shadow-sm); }
/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-muted); padding: 64px 0 30px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h5 { color:#fff; font-family:var(--sans); font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--on-navy-muted); font-size:.94rem; }
.site-footer a:hover { color:#fff; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand .wordmark { font-family:var(--serif); font-weight:700; font-size:1.4rem; color:#fff; }
.footer-brand .wordmark .os { color: var(--blue-light); }
.footer-bottom { border-top:1px solid var(--on-navy-line); margin-top: 44px; padding-top: 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.86rem; color: var(--on-navy-faint); }
/* Newsletter / email capture band (site-wide footer signup) */
.footer-newsletter { display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding-bottom: 40px; margin-bottom: 8px; border-bottom:1px solid var(--on-navy-line); }
.footer-newsletter .fn-copy { flex:1 1 300px; }
.footer-newsletter .fn-copy p { margin:6px 0 0; max-width:46ch; font-size:.94rem; }
.fn-form { display:flex; gap:10px; flex:1 1 340px; flex-wrap:wrap; }
.fn-form input { flex:1 1 220px; padding:.8em 1em; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-sm); font:inherit; color:#fff; background:rgba(255,255,255,.06); }
.fn-form input::placeholder { color: var(--on-navy-faint); }
.fn-form input:focus { outline:none; border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(30,143,255,.28); }
.fn-form .btn { white-space:nowrap; }
.fn-msg { flex-basis:100%; margin:4px 0 0; font-size:.9rem; font-weight:600; }
.fn-msg.ok { color:#8FE3B0; }
.fn-msg.err { color:#F3A2A2; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--grad-navy); color:#fff; padding: 84px 0 72px; text-align:center; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:400px;height:400px;border-radius:50%; background:#1E8FFF; filter:blur(80px); opacity:.4; top:-160px; right:-80px; }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero h1 { color:#fff; }
.page-hero p { color: var(--on-navy-muted); max-width: 60ch; margin: 0 auto; font-size:1.2rem; }
/* ---------- misc ---------- */
.badge-soft { display:inline-block; background:var(--lilac); color:var(--blue-deep); font-weight:700; font-size:.8rem; padding:.35em .9em; border-radius:999px; }
.hr { height:1px; background:var(--line); border:0; margin: 0; }
.mt-s{margin-top:12px;} .mt-m{margin-top:24px;} .mt-l{margin-top:44px;}
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:44px; align-items:start; }
.form-field { margin-bottom:18px; }
.form-field label { display:block; font-weight:600; color:var(--navy); margin-bottom:6px; font-size:.92rem; }
.form-field input, .form-field select, .form-field textarea {
width:100%; padding:.8em 1em; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; color:var(--ink); background:#fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,143,255,.18); }
.note-box { background:var(--mist); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:var(--radius-sm); padding:20px 24px; }
.hc-error { color:var(--danger); font-size:.88rem; font-weight:600; margin:8px 0 0; }
/* Contact-form honeypot. Hidden from people without display:none, which some bots check for
and skip; anything typed in it is treated as a bot submission (see ContactController). */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.footnote { font-size:.82rem; color:var(--muted); line-height:1.6; margin: 18px auto 0; max-width: 70ch; }
.fn-mark { color: var(--blue); font-weight:700; }
/* ---------- Shared manuscripts (/shared/{token}) ----------
Pages an invited reader or editor sees. Reading a manuscript wants a measure and a serif face
the marketing pages don't have, so these are the only additions; everything else on those
pages is .card / .btn / .note-box / .form-field as elsewhere. */
.ms-page { max-width: 840px; }
.ms-body { font-family: var(--serif); font-size: 1.12rem; line-height: 1.85; color: var(--ink); }
.ms-body p { margin: 0 0 1.15rem; }
.ms-body h1, .ms-body h2, .ms-body h3 { margin: 1.8rem 0 .6rem; }
.ms-body blockquote { margin: 0 0 1.15rem; padding-left: 18px; border-left: 3px solid var(--line); color: var(--muted); }
.ms-chapters { list-style:none; margin:0; padding:0; }
.ms-chapters li { border-top: 1px solid var(--line); }
.ms-chapters li:last-child { border-bottom: 1px solid var(--line); }
.ms-chapters a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 13px 4px; color: var(--navy); font-weight:600; }
.ms-chapters a:hover { color: var(--blue); background: var(--mist); }
.ms-status { font-size:.76rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:.3em .8em; border-radius:999px; white-space:nowrap; }
.ms-status.draft { background: var(--lilac); color: var(--blue-deep); }
.ms-status.done { background: #E4F5EC; color: var(--ok); }
.ms-status.quiet { background: var(--canvas); color: var(--muted); }
.ms-note { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.ms-note + .ms-note { margin-top: 12px; }
.ms-note-meta { font-size:.84rem; color: var(--muted); margin: 0 0 8px; }
.ms-kind { display:inline-block; background: var(--canvas); border:1px solid var(--line); border-radius:999px; padding:.1em .6em; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color: var(--muted); }
.ms-note-quote { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 3px solid var(--blue-light); font-family: var(--serif); font-style: italic; color: var(--muted); }
.ms-note-text { margin: 0; white-space: pre-wrap; }
.ms-pager { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top: 34px; }
.ms-editor textarea { min-height: 460px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92rem; line-height:1.65; }
.ms-alert { border-radius: var(--radius-sm); padding: 14px 18px; margin: 0 0 4px; font-weight:600; }
.ms-alert.ok { background:#E4F5EC; border:1px solid #B6E3CE; color: var(--ok); }
.ms-alert.err { background:#FDECEE; border:1px solid #F3C6CA; color: var(--danger); }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; }
.hero .fr-media, .hero-visual { max-width: 520px; }
.grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
.feature-row { grid-template-columns: 1fr; gap: 30px; margin-bottom: 60px; }
.feature-row.rev .fr-media { order: 0; }
.steps { grid-template-columns: repeat(2,1fr); gap: 28px; }
.pricing-grid { grid-template-columns: 1fr; }
.plan.featured { transform: none; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
.contact-grid { grid-template-columns: 1fr; }
section { padding: 64px 0; }
}
@media (max-width: 720px) {
.nav-links, .nav-cta .btn-ghost { display: none; }
.nav-toggle { display: block; }
/* The drawer hangs off a navy header, so it stays navy rather than dropping a
white panel below a dark bar. */
.nav.open .nav-links {
display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column;
background: var(--navy); padding: 18px 24px; gap: 18px;
border-bottom:1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-md);
}
.nav.open .nav-links a { border-bottom: 0; }
.grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
.cta-band { padding: 40px 24px; }
.standalone-band { flex-direction: column; text-align:center; }
.footer-grid { grid-template-columns: 1fr; }
.trust { gap: 26px; }
}
/* Impersonation banner for the writing app (Blazor MainLayout). Deliberately loud — an admin
inside a customer's account should never be in any doubt about it. */
.impersonation-bar-app {
background: linear-gradient(90deg, #B7791F, #D69E2E);
color: #fff; padding: .5rem 1rem; font-size: .87rem;
display: flex; align-items: center; gap: .8rem; justify-content: center; flex-wrap: wrap;
}
.impersonation-bar-app form { display: inline; margin: 0; }
.impersonation-bar-app button {
background: rgba(0,0,0,.22); color: #fff; border: 1px solid rgba(255,255,255,.35);
border-radius: 8px; padding: .28rem .6rem; font-size: .82rem; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.impersonation-bar-app button:hover { background: rgba(0,0,0,.34); }
/* ===================== The public shelf, by genre ===================== */
.genre-shelf { margin-top: 34px; }
.genre-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 1.15rem; }
.genre-count {
font-size: .78rem; font-weight: 700; color: var(--muted);
background: var(--mist); border-radius: 999px; padding: 2px 9px;
}
/* A row that scrolls sideways rather than wrapping: a genre reads as a shelf. */
.shelf-row { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; }
.shelf-book {
flex: 0 0 150px; width: 150px; background: none; border: none; padding: 0;
cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.shelf-cover {
display: flex; align-items: center; justify-content: center;
width: 150px; height: 150px; background: var(--mist);
border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.shelf-book:hover .shelf-cover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.shelf-cover img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shelf-cover .cover-placeholder { max-width: 100%; max-height: 100%; object-fit: contain; }
.shelf-title { display: block; margin-top: 8px; font-weight: 600; font-size: .92rem; }
.shelf-author { display: block; color: var(--muted); font-size: .82rem; }
/* ---- the detail dialog ---- */
.book-dialog {
border: none; border-radius: var(--radius); padding: 0; max-width: 620px; width: calc(100% - 32px);
box-shadow: var(--shadow-lg); color: var(--ink);
}
.book-dialog::backdrop { background: rgba(12, 35, 64, .55); }
.book-dialog-close { display: flex; justify-content: flex-end; padding: 10px 10px 0; }
.book-dialog-body { display: flex; gap: 22px; padding: 4px 26px 26px; }
.book-dialog-cover {
flex: 0 0 180px; height: 240px; display: flex; align-items: center; justify-content: center;
background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.book-dialog-cover img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* No special-casing any more: the stand-in is cover art and fills the panel exactly as
a real cover does. */
.book-dialog-cover img.is-placeholder { max-width: 100%; max-height: 100%; object-fit: contain; }
.book-dialog-text h2 { margin: 0 0 4px; }
.dlg-author { color: var(--muted); margin: 0 0 8px; }
.dlg-meta { display: flex; gap: 10px; color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.dlg-blurb { margin: 0 0 18px; }
.dlg-blurb.is-missing { font-style: italic; color: var(--muted); }
.icon-button {
background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1;
color: var(--muted); padding: 4px 8px; border-radius: 6px;
}
.icon-button:hover { color: var(--blue); background: var(--mist); }
/* ===================== The reader ===================== */
/* Sized against the space the site layout actually leaves, not the whole viewport: the
reader sits below the site header, so a flat 100vh made it taller than its slot and put a
scrollbar on the body — which then let a reader scroll the page box out of view. */
.reader {
display: flex; flex-direction: column;
height: calc(100vh - var(--reader-chrome, 120px));
min-height: 520px;
background: var(--paper, #fff);
}
.reader-bar {
display: flex; align-items: center; gap: 14px; padding: 10px 18px;
border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.reader-back { font-size: 1.3rem; text-decoration: none; color: var(--muted); }
.reader-titles { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
.reader-titles span { color: var(--muted); font-size: .82rem; }
.reader-tools { display: flex; gap: 4px; }
.reader-resume {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 18px; background: var(--mist); border-bottom: 1px solid var(--line);
}
.reader-stage { display: flex; align-items: stretch; gap: 8px; flex: 1 1 auto; min-height: 0; padding: 8px; }
/* The page is a fixed box that never scrolls: if text overflowed it, a reader could scroll
to text the server did not intend to be on this screen. The server sizes the page to fit. */
.reader-page {
flex: 1 1 auto; overflow: hidden; padding: 26px clamp(16px, 5vw, 56px);
font-family: var(--serif, Georgia), serif; font-size: 19px; line-height: 1.6;
max-width: 42rem; margin: 0 auto;
/* Selection off on the text itself. Not a real barrier — see reader.js — but it removes the
one-gesture path to the whole screen's worth of prose. */
user-select: none; -webkit-user-select: none;
}
.reader-page p { margin: 0 0 1.1em; }
.reader-loading { color: var(--muted); font-style: italic; }
.page-arrow {
flex: 0 0 52px; background: none; border: none; cursor: pointer;
font-size: 2.2rem; color: var(--muted); border-radius: var(--radius-sm);
}
.page-arrow:hover:not(:disabled) { background: var(--mist); color: var(--blue); }
.page-arrow:disabled { opacity: .25; cursor: default; }
.reader-foot { display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-top: 1px solid var(--line); }
.reader-progress { flex: 1 1 auto; height: 4px; background: var(--mist); border-radius: 999px; overflow: hidden; }
.reader-progress-fill { height: 100%; background: var(--blue); width: 0; transition: width .2s; }
.reader-percent { color: var(--muted); font-size: .8rem; min-width: 3em; text-align: right; }
/* ---- bookmarks ---- */
.marks-body { padding: 4px 26px 26px; }
.marks-list { list-style: none; margin: 14px 0 0; padding: 0; }
.mark { border-top: 1px solid var(--line); padding: 14px 0; }
.mark-note { margin: 0 0 4px; font-weight: 600; }
.mark-note.is-missing { font-weight: 400; font-style: italic; color: var(--muted); }
.mark-quote { margin: 0 0 10px; color: var(--muted); font-size: .9rem; font-style: italic; }
.mark-actions { display: flex; gap: 10px; align-items: center; }
.note-label { display: block; font-weight: 600; margin: 14px 0 6px; }
#noteText { width: 100%; padding: .7em 1em; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.note-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.btn-link { background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; text-decoration: underline; }
.btn-link:hover { color: var(--blue); }
/* Printing the reader gives you a notice, not the book. */
@media print {
.reader-page { display: none !important; }
.reader::after { content: "WriteForge books are read on the site."; display: block; padding: 40px; }
}
@media (max-width: 640px) {
/* Arrows shrink on a phone, where swiping is the natural gesture anyway. */
.page-arrow { flex-basis: 34px; font-size: 1.6rem; }
.book-dialog-body { flex-direction: column; }
.book-dialog-cover { flex: 0 0 auto; height: 200px; }
}