/* ═══════════════════════════════════════════════════════════════════
WriteAIBook — brand.css (single source of truth)
---------------------------------------------------------------
Usage:
Static pages:
In /tools/:
In /blog/:
In /de|fr|es/:
Include AFTER Tailwind CDN when both are present.
Font preconnect + tags should be in each HTML .
═══════════════════════════════════════════════════════════════════ */
/* ── Design tokens ───────────────────────────────────────────────── */
:root {
/* backgrounds */
--bg: #F6F3EE;
--bg-1: #FFFFFF;
--bg-2: #F0EDE7;
--bg-3: #E8E4DC;
/* text */
--t1: #1C1812;
--t2: #3D3830;
--t3: #6B6459;
--t4: #A09890;
/* accent (amber-rust) */
--ac: #B8601A;
--ac-lt: #D4742A;
--ac-warm: #E8893A;
--ac-dim: #8C4510;
--ac-bg: rgba(184,96,26,.07);
--ac-bg2: rgba(184,96,26,.14);
--ac-bd: rgba(184,96,26,.22);
/* borders */
--br1: rgba(28,24,18,.07);
--br2: rgba(28,24,18,.13);
--br3: rgba(28,24,18,.22);
/* shadows */
--shadow-sm: 0 1px 4px rgba(28,24,18,.08);
--shadow-md: 0 4px 20px rgba(28,24,18,.10);
--shadow-lg: 0 8px 40px rgba(28,24,18,.13);
/* typography */
--ff-lora: 'Lora', Georgia, serif;
--ff-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
/* layout */
--max-w: 1200px;
--r-sm: 8px;
--r: 12px;
--r-lg: 20px;
}
/* ── Base reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
max-width: 100%;
overflow-x: hidden;
}
body { font-family: var(--ff-ui); color: var(--t1); }
/* ── Logo ────────────────────────────────────────────────────────── */
.wab-logo {
font-family: var(--ff-ui);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.02em;
color: #fff;
text-decoration: none;
flex-shrink: 0;
line-height: 1;
}
.wab-logo em {
font-family: var(--ff-lora);
font-style: italic;
font-weight: 600;
color: var(--ac-lt);
font-size: 1.2em;
line-height: .85;
}
/* Light-background variant */
.wab-logo-dark { color: var(--t1); }
.wab-logo-dark em { color: var(--ac); }
/* ── Shared dark header (all non-marketing pages) ────────────────── */
.wab-header {
background: var(--t1);
padding: 0 clamp(1.25rem, 4vw, 3rem);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255,255,255,.05);
max-width: 100vw;
}
.wab-header-inner {
max-width: var(--max-w);
margin: 0 auto;
height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-width: 0;
}
.wab-header-nav {
display: flex;
align-items: center;
gap: 1.25rem;
min-width: 0;
}
.wab-header-nav a {
font-size: .8rem;
font-weight: 600;
color: rgba(255,255,255,.5);
text-decoration: none;
transition: color .15s;
white-space: nowrap;
}
.wab-header-nav a:hover { color: rgba(255,255,255,.9); }
.wab-header-account-slot {
display: none;
align-items: center;
gap: .55rem;
flex-shrink: 0;
}
.wab-header-credits {
display: inline-flex;
align-items: center;
gap: .55rem;
min-height: 34px;
padding: .35rem .8rem .35rem .7rem;
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
color: rgba(255,255,255,.9);
font-size: .76rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.wab-header-credits-label,
.wab-header-credits-value {
display: inline-flex;
align-items: center;
}
.wab-header-credits-label {
font-size: .63rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.52);
}
.wab-header-credits-value {
min-width: 2.2ch;
padding: .18rem .46rem;
border-radius: 9999px;
background: rgba(255,255,255,.12);
color: #fff;
font-size: .8rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
/* Ghost nav button (e.g. "My Account") */
.wab-btn-nav {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.85) !important;
padding: .38rem .85rem;
border-radius: var(--r-sm);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
transition: background .15s;
}
.wab-btn-nav:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
/* Amber CTA nav button (e.g. "Start Generating") */
.wab-btn-nav-ac {
background: var(--ac) !important;
border: none;
color: #fff !important;
padding: .42rem .9rem;
border-radius: var(--r-sm);
font-size: .8rem;
font-weight: 700;
text-decoration: none;
transition: background .15s;
}
.wab-btn-nav-ac:hover { background: var(--ac-lt) !important; }
.wab-header-account-slot .wab-nav-account {
display: inline-flex;
}
/* Light nav (wab-nav) account slot + credits */
.wab-nav .wab-header-account-slot {
align-items: center;
gap: .55rem;
}
.wab-nav .wab-header-credits {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 32px;
padding: .24rem .34rem .24rem .62rem;
border-radius: 99px;
background: rgba(184,96,26,.08);
border: 1px solid var(--ac-bd);
color: var(--ac);
font-family: var(--ff-ui);
font-size: .74rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
letter-spacing: .01em;
box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
}
.wab-nav .wab-header-credits-label {
color: rgba(140,69,16,.82);
}
.wab-nav .wab-header-credits-value {
background: rgba(184,96,26,.12);
color: var(--ac-dim);
}
.wab-nav .wab-header-account-slot .wab-nav-account {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid var(--br2);
color: var(--t2);
background: transparent;
text-decoration: none;
transition: color .2s, border-color .2s, background .2s;
}
.wab-nav .wab-header-account-slot .wab-nav-account:hover {
color: var(--ac);
border-color: var(--ac-bd);
background: var(--ac-bg);
}
.wab-nav {
max-width: 100vw;
}
/* Dark header (tool app pages): collapse at narrow widths */
@media (max-width: 768px) {
/* Hide plain text nav links, keep styled CTA buttons */
.wab-header-nav > a:not(.wab-btn-nav):not(.wab-btn-nav-ac) { display: none; }
/* Hide credits pill — logo + CTA btn + account icon is enough */
.wab-header .wab-header-credits { display: none !important; }
}
@media (max-width: 480px) {
.wab-header,
.wab-nav {
padding-left: .75rem !important;
padding-right: .75rem !important;
}
.wab-header-inner,
.wab-nav-inner {
gap: .5rem !important;
min-width: 0;
}
.wab-header-nav,
.wab-nav-cta,
.wab-header-account-slot,
.wab-nav .wab-header-account-slot {
gap: .35rem !important;
min-width: 0;
}
.wab-header-nav {
gap: .6rem !important;
}
.wab-header-credits,
.wab-nav .wab-header-credits {
display: none !important;
}
.wab-nav .lang-wrap,
.wab-nav .wab-nav-cta .btn-primary,
.wab-nav .wab-nav-cta .wab-cta-auth,
.wab-nav .wab-nav-cta .wab-cta-guest {
display: none !important;
}
.wab-inline-account-chip {
display: none !important;
}
}
/* ── Main content wrapper ────────────────────────────────────────── */
.wab-main {
max-width: var(--max-w);
margin: 0 auto;
padding: 2.5rem clamp(1rem, 4vw, 2.5rem);
}
.wab-main-narrow {
max-width: 860px;
margin: 0 auto;
padding: 2.5rem clamp(1rem, 4vw, 2rem);
}
/* ── Eyebrow label ───────────────────────────────────────────────── */
.wab-eyebrow {
display: inline-block;
font-family: var(--ff-ui);
font-size: .65rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ac);
}
/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
background: var(--ac);
color: #fff;
font-family: var(--ff-ui);
font-weight: 700;
font-size: .875rem;
padding: .72rem 1.4rem;
border-radius: var(--r);
border: none;
text-decoration: none;
cursor: pointer;
transition: background .18s, transform .12s;
line-height: 1.3;
}
.btn-primary:hover { background: var(--ac-lt); color: #fff; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: var(--t4); cursor: not-allowed; transform: none; }
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
background: transparent;
color: var(--t2);
font-family: var(--ff-ui);
font-weight: 600;
font-size: .875rem;
padding: .65rem 1.3rem;
border-radius: var(--r);
border: 1.5px solid var(--br3);
text-decoration: none;
cursor: pointer;
transition: border-color .18s, color .18s, background .18s;
line-height: 1.3;
}
.btn-ghost:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-bg); }
/* ── Cards ───────────────────────────────────────────────────────── */
.wab-card {
background: var(--bg-1);
border: 1px solid var(--br2);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.wab-card-highlight {
background: var(--bg-1);
border: 1.5px solid var(--ac);
border-radius: var(--r-lg);
box-shadow: 0 0 0 4px var(--ac-bg);
}
/* ── Alert / status strips ───────────────────────────────────────── */
.wab-alert {
border-radius: var(--r);
padding: .75rem 1rem;
font-size: .85rem;
line-height: 1.55;
}
.wab-alert-info { background: rgba(28,24,18,.04); border: 1px solid var(--br1); color: var(--t3); }
.wab-alert-amber { background: var(--ac-bg); border: 1px solid rgba(184,96,26,.25); color: #7a3a08; }
.wab-alert-success { background: rgba(22,101,52,.07); border: 1px solid rgba(22,101,52,.25); color: #166534; }
.wab-alert-error { background: rgba(185,28,28,.06); border: 1px solid rgba(185,28,28,.2); color: #991b1b; }
/* ── Form elements ───────────────────────────────────────────────── */
.wab-label {
display: block;
font-size: .8rem;
font-weight: 700;
color: var(--t2);
margin-bottom: .35rem;
}
.wab-input, .wab-select, .wab-textarea {
font-family: var(--ff-ui);
font-size: .875rem;
background: var(--bg);
border: 1.5px solid var(--br2);
border-radius: var(--r-sm);
padding: .65rem .9rem;
color: var(--t1);
width: 100%;
transition: border-color .15s, box-shadow .15s;
outline: none;
}
.wab-input:focus, .wab-select:focus, .wab-textarea:focus {
border-color: var(--ac);
box-shadow: 0 0 0 3px var(--ac-bg);
}
.wab-input::placeholder, .wab-textarea::placeholder { color: var(--t4); }
/* ── Shared footer ───────────────────────────────────────────────── */
.wab-footer {
padding: 3.5rem clamp(1.5rem,5vw,4rem) 2rem;
border-top: 1px solid var(--br1);
background: var(--t1);
color: rgba(255,255,255,.5);
margin-top: 0;
}
.wab-footer-inner {
max-width: var(--max-w); margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem;
}
.wab-footer-logo {
font-family: var(--ff-ui); font-size: 1.05rem; font-weight: 800;
color: #fff; letter-spacing: -.02em; margin-bottom: .75rem;
}
.wab-footer-logo em {
font-family: var(--ff-lora); font-style: italic;
color: var(--ac-warm); font-size: 1.18em; line-height: .85;
}
.wab-footer-desc {
font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.7;
max-width: 28ch;
}
.wab-footer-col-label {
font-size: .6rem; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: .85rem;
}
.wab-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.wab-footer-links a {
font-size: .8rem; color: rgba(255,255,255,.55); text-decoration: none;
transition: color .2s;
}
.wab-footer-links a:hover { color: #fff; }
.wab-footer-bottom {
max-width: var(--max-w); margin: 2.5rem auto 0;
padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08);
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.wab-footer-bottom a { font-size: .73rem; color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; }
.wab-footer-bottom a:hover { color: rgba(255,255,255,.6); }
.wab-footer-copy { font-size: .73rem; color: rgba(255,255,255,.3); }
@media (max-width: 900px) { .wab-footer-inner { grid-template-columns: 1fr; gap: 2rem; } }
/* ── Tailwind green → brand amber overrides ──────────────────────── */
/* These apply !important to override Tailwind utility specificity. */
/* ------------------------------------------------------------------ */
/* Backgrounds */
.bg-green-50 { background-color: var(--ac-bg) !important; }
.bg-green-100 { background-color: var(--ac-bg) !important; }
.bg-green-600 { background-color: var(--ac) !important; }
.bg-green-700 { background-color: var(--ac-dim) !important; }
.bg-green-800 { background-color: var(--ac-dim) !important; }
.bg-emerald-400 { background-color: var(--ac-lt) !important; }
.bg-emerald-500 { background-color: var(--ac) !important; }
.bg-emerald-600 { background-color: var(--ac) !important; }
.bg-teal-700 { background-color: var(--t2) !important; }
/* Text */
.text-green-600 { color: var(--ac) !important; }
.text-green-700 { color: var(--ac-dim) !important; }
.text-green-800 { color: var(--ac-dim) !important; }
.text-green-900 { color: var(--t1) !important; }
.text-emerald-300 { color: var(--ac-warm) !important; }
.text-emerald-400 { color: var(--ac-lt) !important; }
.text-emerald-600 { color: var(--ac) !important; }
.text-teal-700 { color: var(--t2) !important; }
/* Borders */
.border-green-200 { border-color: rgba(184,96,26,.2) !important; }
.border-green-500 { border-color: var(--ac) !important; }
.border-green-600 { border-color: var(--ac) !important; }
.border-green-700 { border-color: var(--ac-dim) !important; }
.border-emerald-500 { border-color: var(--ac) !important; }
.border-emerald-800 { border-color: var(--t1) !important; }
.border-teal-700 { border-color: var(--t2) !important; }
/* Text — additional shades used in blog content boxes */
.text-green-100 { color: rgba(255,255,255,.88) !important; }
.text-green-200 { color: rgba(255,255,255,.72) !important; }
/* Hover states */
.hover\:bg-green-50:hover { background-color: var(--ac-bg) !important; }
.hover\:bg-green-700:hover { background-color: var(--ac-dim) !important; }
.hover\:bg-green-800:hover { background-color: var(--ac-dim) !important; }
.hover\:bg-emerald-400:hover { background-color: var(--ac-lt) !important; }
.hover\:text-green-400:hover { color: var(--ac-lt) !important; }
.hover\:text-green-600:hover { color: var(--ac) !important; }
.hover\:border-green-500:hover { border-color: var(--ac) !important; }
/* Group-hover */
.group:hover .group-hover\:text-green-600 { color: var(--ac) !important; }
.group:hover .group-hover\:text-green-700 { color: var(--ac-dim) !important; }
.group:hover .group-hover\:bg-green-50 { background-color: var(--ac-bg) !important; }
/* Focus ring */
.focus\:ring-green-500:focus { --tw-ring-color: var(--ac-bg) !important; }
.focus\:border-green-500:focus { border-color: var(--ac) !important; }
.ring-green-400 { --tw-ring-color: var(--ac-lt) !important; }
.ring-green-500 { --tw-ring-color: var(--ac) !important; }
/* Gradient overrides */
.from-green-50 { --tw-gradient-from: var(--ac-bg) !important; }
.from-green-600 { --tw-gradient-from: var(--ac) !important; }
.from-emerald-800 { --tw-gradient-from: var(--t1) !important; }
.from-emerald-950 { --tw-gradient-from: var(--t1) !important; }
.to-emerald-100 { --tw-gradient-to: var(--bg) !important; }
.to-emerald-600 { --tw-gradient-to: var(--ac-dim) !important; }
.to-teal-700 { --tw-gradient-to: #2e2618 !important; }
.via-emerald-800 { --tw-gradient-via: var(--t2) !important; }
/* Tailwind default text colors (keep body readable on ivory bg) */
body.bg-white { background-color: var(--bg) !important; }
body.bg-gray-50 { background-color: var(--bg) !important; }
/* Spinner border accent */
.border-green-200 { border-color: rgba(184,96,26,.25) !important; }
.border-t-green-600 { border-top-color: var(--ac) !important; }
/* ── Shared nav — defined inline per-page (after Tailwind) to avoid CSS var conflicts ─ */
/* .wab-nav {
position: sticky; top: 0; z-index: 100;
background: rgba(246,243,238,.92);
border-bottom: 1px solid var(--br1);
backdrop-filter: blur(14px) saturate(1.3);
-webkit-backdrop-filter: blur(14px) saturate(1.3);
padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.wab-nav-inner {
max-width: 1120px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
height: 58px;
}
.wab-nav-logo {
font-family: var(--ff-ui); font-size: 1.05rem; font-weight: 800;
letter-spacing: -.02em; color: var(--t1); text-decoration: none; flex-shrink: 0;
}
.wab-nav-logo em { font-family: var(--ff-lora); font-style: italic; font-weight: 600; color: var(--ac); font-size: 1.22em; line-height: .85; }
.wab-nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.wab-nav-links a { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--t3); transition: color .2s; text-decoration: none; }
.wab-nav-links a:hover { color: var(--t1); }
.wab-nav-cta { display: flex; align-items: center; gap: .75rem; }
.wab-nav-cta .btn-ghost { padding: .5rem 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); background: transparent; border: 1px solid var(--br2); border-radius: 6px; cursor: pointer; transition: color .2s, border-color .2s; text-decoration: none; display: inline-flex; align-items: center; }
.wab-nav-cta .btn-ghost:hover { color: var(--t1); border-color: var(--br3); }
.wab-nav-cta .btn-primary { padding: .55rem 1.2rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(160deg, var(--ac-lt) 0%, var(--ac) 100%); border: none; border-top: 1px solid rgba(232,137,58,.5); border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: transform .18s, box-shadow .2s; box-shadow: 0 3px 14px rgba(184,96,26,.28); }
.wab-nav-cta .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 20px rgba(184,96,26,.38); color: #fff; }
.wab-nav-account {
display: none; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
border: 1.5px solid var(--br2); color: var(--t3);
text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.wab-nav-account:hover { color: var(--ac); border-color: var(--ac-bd); background: var(--ac-bg); }
.wab-nav-account.is-auth { display: inline-flex; color: var(--ac); border-color: var(--ac-bd); background: var(--ac-bg); }
.lang-wrap { position: relative; }
.lang-btn {
font-family: var(--ff-ui); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
color: var(--t3); background: none; border: none; cursor: pointer;
display: flex; align-items: center; gap: .3rem; transition: color .2s;
padding: 0; line-height: 1; vertical-align: baseline;
}
.lang-btn:hover { color: var(--t1); }
.lang-menu {
position: absolute; right: 0; top: calc(100% + 8px);
background: var(--bg-1); border: 1px solid var(--br1); border-radius: 6px;
box-shadow: 0 4px 16px rgba(28,24,18,.09), 0 1px 4px rgba(28,24,18,.05);
min-width: 140px; z-index: 200; display: none;
}
.lang-menu.open { display: block; }
.lang-menu a { display: block; padding: .5rem 1rem; font-size: .8rem; color: var(--t2); text-decoration: none; transition: background .15s; }
.lang-menu a:hover { background: var(--bg-2); }
.lang-menu a.active { font-weight: 700; color: var(--ac); }
.wab-mobile-btn { display: none; background: none; border: none; cursor: pointer; color: var(--t2); padding: .25rem; }
.wab-mobile-menu {
display: none; background: var(--bg-1); border-bottom: 1px solid var(--br1);
padding: 1rem clamp(1.5rem, 5vw, 4rem); position: sticky; top: 58px; z-index: 99;
}
.wab-mobile-menu.open { display: block; }
.wab-mobile-menu a { display: block; padding: .6rem 0; font-size: .875rem; font-weight: 600; color: var(--t2); text-decoration: none; border-bottom: 1px solid var(--br1); }
.wab-mobile-menu a:last-child { border-bottom: none; }
.wab-mobile-menu a:hover { color: var(--ac); }
@media (max-width: 900px) {
.wab-mobile-btn { display: block; }
.wab-nav-links { display: none; }
.wab-nav-cta .btn-ghost { display: none; }
} */
/* ── Blog / content page helpers ─────────────────────────────────── */
.wab-blog-header {
background: var(--t1);
padding: 0 clamp(1.5rem, 5vw, 3rem);
}
.wab-blog-header-inner {
max-width: 900px;
margin: 0 auto;
height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wab-blog-hero {
background: var(--bg);
border-bottom: 1px solid var(--br1);
padding: 3rem clamp(1.5rem, 5vw, 3rem) 2.5rem;
}
.wab-blog-hero-inner { max-width: 900px; margin: 0 auto; }
.wab-article-link h2 { transition: color .15s; }
.wab-article-link:hover h2 { color: var(--ac) !important; }