/* =============================================================================
fwa.css — French with Ash shared design system ("paper" / neo-brutalist)
One stylesheet for the whole marketing site: homepage, blog, resources.
Brand palette unchanged from the previous editorial design; the visual
language is new (Anton display, hard offset shadows, thick ink borders,
fixed paper-grid background).
Font to place in every (kept out of CSS for performance):
============================================================================= */
/* ---------- Tokens ---------- */
:root{
/* surfaces */
--paper:#F3EEE3; /* page background (grid overlay sits on top) */
--band:#EFE8DA; /* alternating section band */
--surface:#fff;
--ink:#1A2C4E; /* navy — text, borders, shadows */
--hairline:#E7E0D2; /* thin internal rules */
--dashed:#B9B0A0; /* dashed borders / "SOON" placeholders */
/* text */
--muted:#5B6579; /* body copy on paper */
--faint:#8A93A6; /* meta, captions */
/* accents (theme via [data-accent] on any subtree; blue is the site theme) */
--accent:#185FA5; /* blue */
--accent-ink:#134A82; /* darker blue — small text that needs AA on paper */
--accent-coral:#D97757; /* the old coral accent, kept as a palette alternate */
--accent-blue:#185FA5;
--accent-green:#1F9D57;
/* utility */
--wa:#25D366; /* WhatsApp green */
/* type */
--font-display:'Anton',Impact,sans-serif;
--font-body:'Noto Sans',system-ui,-apple-system,sans-serif;
--font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--font-accent:'Lora',Georgia,serif;
/* layout */
--maxw:1180px;
--pad:clamp(18px,4vw,40px);
--ease:cubic-bezier(.16,1,.3,1);
}
[data-accent="blue"]{ --accent:var(--accent-blue); --accent-ink:#134a82; }
[data-accent="green"]{ --accent:var(--accent-green); --accent-ink:#177a43; }
/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;padding:0;
font-family:var(--font-body);
background:var(--paper);
color:var(--ink);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--accent);color:#fff;}
:where(a,button,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}
[hidden]{display:none!important;}
/* ---------- Page frame (fixed paper grid) ---------- */
.fw-page{position:relative;min-height:100vh;overflow:hidden;}
.fw-grid-bg{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(26,44,78,.045) 1.5px,transparent 1.5px),
linear-gradient(90deg,rgba(26,44,78,.045) 1.5px,transparent 1.5px);
background-size:26px 26px;
}
.fw-layer{position:relative;z-index:1;}
.fw-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.fw-section{padding:clamp(48px,6vw,84px) 0;}
.fw-section__head{max-width:620px;margin:0 auto 44px 0;}
.fw-section__head--center{margin-inline:auto;text-align:center;}
/* ---------- Type helpers ---------- */
.fw-display{
font-family:var(--font-display);font-weight:400;
text-transform:uppercase;letter-spacing:.5px;line-height:1;
color:var(--ink);margin:0;
}
.fw-h1{ font-size:clamp(46px,7vw,92px);line-height:.92; }
.fw-h2{ font-size:clamp(32px,4.4vw,52px); }
.fw-h3{ font-size:clamp(26px,3.4vw,40px); }
.fw-accent{color:var(--accent);}
.fw-eyebrow{
font-family:var(--font-mono);font-size:12px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
}
.fw-lede{font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:var(--muted);margin:16px 0 0;}
.fw-quiet{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--faint);}
.fw-fr{font-family:var(--font-accent);font-style:italic;}
/* status pill (nav-adjacent eyebrow with dot) */
.fw-pill{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);background:#fff;border:2px solid var(--ink);border-radius:999px;
padding:7px 14px;box-shadow:3px 3px 0 var(--ink);
}
.fw-pill__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
/* category tag */
.fw-tag{
display:inline-flex;align-self:flex-start;font-family:var(--font-mono);
font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,#fff);
border:2px solid var(--ink);padding:5px 9px;border-radius:7px;
}
/* ---------- Buttons ---------- */
.fw-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-weight:800;font-size:16.5px;cursor:pointer;
color:#fff;background:var(--accent);
border:2.5px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);
height:56px;padding:0 26px;
transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s;
}
.fw-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.fw-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.fw-btn--ghost{background:#fff;color:var(--ink);}
.fw-btn--sm{height:44px;padding:0 18px;border-radius:13px;box-shadow:3px 3px 0 var(--ink);font-size:14.5px;gap:8px;}
.fw-btn--sm:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.fw-btn--sm:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.fw-btn svg{flex:none;}
/* on an ink background (footer / CTA panels) the shadow is a soft dark, border white */
.fw-btn--on-ink{border-color:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.25);}
.fw-btn--on-ink:hover{box-shadow:6px 6px 0 rgba(0,0,0,.25);}
.fw-btn--on-ink:active{box-shadow:2px 2px 0 rgba(0,0,0,.25);}
/* ---------- Cards ---------- */
.fw-card{
background:#fff;border:2.5px solid var(--ink);border-radius:20px;
box-shadow:6px 6px 0 var(--ink);padding:30px 28px;
}
a.fw-card{display:flex;flex-direction:column;color:inherit;}
.fw-card--link,.fw-card--hover{transition:transform .14s var(--ease),box-shadow .14s var(--ease);}
.fw-card--link:hover,.fw-card--hover:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent);}
.fw-card--featured{border-width:3px;box-shadow:7px 7px 0 var(--accent);position:relative;}
.fw-card--featured:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--accent);}
.fw-card--pad-sm{padding:26px 24px;}
.fw-flag{
position:absolute;top:-14px;left:24px;font-family:var(--font-mono);
font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--accent);
border:2.5px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);padding:4px 10px;
}
.fw-numeral{
font-family:var(--font-display);font-size:40px;line-height:1;
color:var(--paper);-webkit-text-stroke:1.5px var(--ink);
}
/* generic grids */
.fw-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.fw-grid--wide{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}
.fw-grid--narrow{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.fw-grid--start{align-items:start;}
/* checklist rows (top-hairline + square bullet) */
.fw-checks{display:flex;flex-direction:column;margin-top:14px;}
.fw-check{display:flex;gap:10px;padding:10px 0;border-top:1.5px solid var(--hairline);font-size:13.8px;color:var(--ink);}
.fw-check::before{content:"";width:8px;height:8px;background:var(--accent);flex:none;margin-top:6px;}
.fw-rows{display:flex;flex-direction:column;}
.fw-rows > *{padding:10px 0;border-top:1.5px solid var(--hairline);font-size:13.8px;color:var(--ink);}
/* dashed note strip */
.fw-note{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
background:#fff;border:2px dashed var(--ink);border-radius:14px;padding:16px 20px;
}
.fw-note__tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--ink);padding:4px 9px;border-radius:6px;flex:none;}
/* ---------- Bands ---------- */
.fw-band{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.fw-band--sand{background:var(--band);}
.fw-band--ink{background:var(--ink);color:#fff;}
.fw-band--ink .fw-display{color:#fff;}
.fw-band--ink .fw-lede{color:rgba(248,244,237,.78);}
/* big ink CTA panel (blog/resources end-cta) */
.fw-cta{
background:var(--ink);border:3px solid var(--ink);border-radius:24px;
box-shadow:8px 8px 0 var(--accent);padding:clamp(30px,4vw,52px);text-align:center;
}
.fw-cta .fw-display{color:#fff;margin-inline:auto;}
.fw-cta .fw-lede{color:rgba(248,244,237,.78);margin-inline:auto;}
/* quote card (Lora italic) */
.fw-quote{
background:#F9FAFB;border:2.5px solid #fff;border-radius:18px;
box-shadow:6px 6px 0 var(--accent);padding:22px 24px;
}
.fw-quote > p:first-child{font-family:var(--font-accent);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink);margin:0;}
/* ---------- Marquee ---------- */
.fw-marquee{background:var(--ink);overflow:hidden;padding:13px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.fw-marquee__track{
display:flex;width:max-content;animation:fwMarquee 30s linear infinite;
font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;color:#fff;
}
.fw-marquee__group{display:inline-flex;gap:34px;padding-right:34px;align-items:center;}
.fw-marquee__group span{color:var(--accent);}
@keyframes fwMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- Nav ---------- */
/* markup hooks kept compatible with blog.js: nav / .nav-toggle / #nav-links / .scrolled / .open */
.fw-nav{
position:sticky;top:0;z-index:40;
background:rgba(243,238,227,.85);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:2px solid var(--ink);transition:box-shadow .2s var(--ease);
}
.fw-nav.scrolled{box-shadow:0 6px 0 -2px rgba(26,44,78,.12);}
.fw-nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.fw-logo{display:flex;align-items:center;gap:12px;}
.fw-logo__mark{
width:42px;height:42px;border-radius:12px;background:var(--accent);
border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
display:flex;align-items:center;justify-content:center;flex:none;
font-family:var(--font-accent);font-style:italic;font-weight:500;font-size:24px;color:#fff;
}
.fw-logo__text{font-family:var(--font-display);font-size:21px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink);line-height:1;}
.fw-nav__links{display:flex;align-items:center;gap:2px;}
.fw-nav__link{padding:9px 13px;font-size:14.5px;font-weight:700;color:var(--ink);border-radius:8px;}
.fw-nav__link:hover{color:var(--accent);}
.fw-nav__link.is-active{color:var(--accent);font-weight:800;}
.fw-nav__cta{margin-left:8px;}
.fw-nav__toggle,.nav-toggle{display:none;}
/* mobile nav */
@media(max-width:860px){
.fw-nav__toggle,.nav-toggle{
display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:46px;height:44px;padding:0 11px;background:#fff;cursor:pointer;
border:2.5px solid var(--ink);border-radius:11px;box-shadow:3px 3px 0 var(--ink);
}
.nav-toggle span{display:block;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
.fw-nav__links{
position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
background:var(--paper);border-bottom:2px solid var(--ink);padding:8px var(--pad) 16px;
display:none;
}
.fw-nav__links.open{display:flex;}
.fw-nav__link{padding:13px 6px;font-size:16px;border-bottom:1.5px solid var(--hairline);border-radius:0;}
.fw-nav__cta{margin:12px 0 0;align-self:flex-start;}
}
/* ---------- Footer ---------- */
.fw-footer{background:var(--ink);color:#9aa3b5;padding:40px 0 34px;}
.fw-footer__top{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid rgba(248,244,237,.14);}
.fw-footer .fw-logo__mark{border-color:#fff;box-shadow:none;width:38px;height:38px;font-size:21px;}
.fw-footer .fw-logo__text{color:#fff;font-size:19px;}
.fw-footer__nav{display:flex;flex-wrap:wrap;gap:8px 22px;}
.fw-footer__nav a{color:#c3c9d6;font-size:14px;font-weight:600;}
.fw-footer__nav a:hover{color:var(--accent);}
.fw-footer__fine{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--faint);margin:20px 0 0;}
/* ---------- Breadcrumb ---------- */
.fw-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint);}
.fw-crumb a{color:var(--faint);}
.fw-crumb a:hover{color:var(--accent);}
/* ---------- WhatsApp widget ---------- */
.fw-wa{position:fixed;right:26px;bottom:26px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.fw-wa__launcher{
position:relative;align-self:flex-end;width:64px;height:64px;border-radius:18px;
border:3px solid var(--ink);cursor:pointer;background:var(--wa);color:#fff;
display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 0 var(--ink);
transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.fw-wa__launcher:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.fw-wa__launcher:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.fw-wa__launcher svg{width:34px;height:34px;}
.fw-wa__badge{
position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:8px;
background:var(--accent);color:#fff;font-family:var(--font-mono);font-size:.72rem;font-weight:700;
display:flex;align-items:center;justify-content:center;border:2.5px solid var(--ink);
}
.fw-wa__ring{position:absolute;inset:-3px;border-radius:18px;animation:fwRing 2.2s ease-out infinite;pointer-events:none;}
.fw-wa__bubble{
position:relative;max-width:258px;background:#fff;border:2.5px solid var(--ink);
border-radius:16px 16px 4px 16px;box-shadow:5px 5px 0 var(--ink);padding:14px 16px;animation:fwBubble .3s ease;
}
.fw-wa__bubble p{font-size:13.5px;color:var(--ink);line-height:1.5;margin:0 10px 0 0;font-weight:600;}
.fw-wa__bubble-x{position:absolute;top:6px;right:9px;background:none;border:none;cursor:pointer;color:var(--faint);font-size:14px;line-height:1;}
.fw-wa__panel{
width:344px;max-width:calc(100vw - 40px);background:#fff;border:3px solid var(--ink);
border-radius:20px;overflow:hidden;box-shadow:8px 8px 0 var(--accent);animation:fwPop .3s ease;
}
.fw-wa__head{background:var(--ink);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;}
.fw-wa__avatar{position:relative;flex:none;}
.fw-wa__avatar img{width:46px;height:46px;border-radius:11px;object-fit:cover;object-position:top;border:2.5px solid #fff;}
.fw-wa__status{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:var(--wa);border:2.5px solid var(--ink);}
.fw-wa__status.is-away{background:var(--faint);}
.fw-wa__name{font-family:var(--font-display);font-size:18px;letter-spacing:.5px;text-transform:uppercase;line-height:1.05;}
.fw-wa__sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:rgba(248,244,237,.8);margin-top:3px;}
.fw-wa__x{background:rgba(248,244,237,.14);border:none;cursor:pointer;color:#fff;width:28px;height:28px;border-radius:8px;font-size:14px;line-height:1;flex:none;margin-left:auto;}
.fw-wa__body{
padding:18px 16px 8px;background:var(--paper);
background-image:linear-gradient(rgba(26,44,78,.04) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(26,44,78,.04) 1.5px,transparent 1.5px);
background-size:22px 22px;
}
.fw-wa__msg{background:#fff;border:2px solid var(--ink);border-radius:4px 14px 14px 14px;box-shadow:3px 3px 0 rgba(26,44,78,.14);padding:11px 13px;max-width:90%;}
.fw-wa__msg p{font-size:13.5px;color:var(--ink);line-height:1.55;margin:0;}
.fw-wa__time{font-family:var(--font-mono);font-size:10px;color:var(--faint);text-align:right;margin-top:5px;}
.fw-wa__compose{padding:12px 16px 18px;background:var(--paper);}
.fw-wa__compose-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;}
.fw-wa__prefill{background:#fff;border:2px solid var(--ink);border-radius:11px;padding:11px 13px;font-size:13.5px;color:var(--ink);line-height:1.5;margin-bottom:13px;}
.fw-wa__send{
display:flex;align-items:center;justify-content:center;gap:10px;background:var(--wa);color:#fff;
font-weight:800;font-size:15px;padding:14px;border:2.5px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);
transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.fw-wa__send:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.fw-wa__send:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.fw-wa__send svg{width:20px;height:20px;flex:none;}
.fw-wa__fine{font-family:var(--font-mono);font-size:10px;color:var(--faint);text-align:center;margin:10px 0 0;letter-spacing:.03em;}
@media(max-width:520px){ .fw-wa{right:16px;bottom:16px;} }
@keyframes fwBubble{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes fwPop{0%{opacity:0;transform:translateY(14px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes fwRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes fwRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation:none!important;transition:none!important;}
}