/* ════════════════════════════════════════════════════════════════ filefriend-brand.css — the shared brand system PALETTE (founder decision 2026-06-29): teal primary · red accent · grey / off-white / black neutrals. (Periwinkle/eggplant set is dead.) teal #03738C primary — brand, links, kickers, labels, table heads red #D92938 accent — action buttons, rules, arrows, emphasis grey #999B9A neutral — borders/decoration (muted TEXT uses #5F6261) white #F2F2F2 surface — light field / section backgrounds black #000000 dark — nav, footer, dark fact boxes, headings Archivo Black (headers) + Inter (body), via Google Fonts. Load in page : ═══════════════════════════════════════════════════════════════════ */ /* ── PALETTE + price signals ──────────────────────────────────── */ :root{ --teal:#03738C; --teal-deep:#055E72; --teal-soft:#DCEAEE; --teal-on-dark:#5BB8CC; --red:#D92938; --red-bright:#EF3B4A; --red-deep:#B81F2C; --red-on-dark:#FF6B73; --grey:#999B9A; --grey-muted:#5F6261; --offwhite:#F2F2F2; --black:#000000; --ink:#141414; --paper:#FFFFFF; --field:#F7F7F7; --hair:#E4E4E4; --hair-soft:#EDEDED; /* price / status signals */ --good-green:#2E9E5B; /* go / good deal */ --alarm-red:#FF3B30; /* THEIR prices — distinct from brand red */ --shadow:0 28px 64px -28px rgba(0,0,0,.30); --shadow-sm:0 8px 24px -10px rgba(0,0,0,.18); /* legacy aliases — so existing per-page + inline styles resolve to the new brand */ --charcoal:#141414; --charcoal-deep:#000000; --brick:#03738C; --brick-bright:#055E72; /* template links → teal */ --terracotta:#D92938; --terracotta-soft:#EF6B76; --eggplant:#03738C; --eggplant-deep:#055E72; --periwinkle:#03738C; --periwinkle-deep:#055E72; --periwinkle-soft:#DCEAEE; --cream:#F2F2F2; } /* ── BASE ─────────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); background:var(--field); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,.display{ font-family:'Archivo Black','Inter',sans-serif; font-weight:400; /* Archivo Black is one heavy weight — never bold it */ letter-spacing:-.02em;line-height:1.05; color:var(--charcoal-deep); } a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} .wrap{max-width:1000px;margin:0 auto;padding:0 28px} /* ── NAV — black, blocky brand ────────────────────────────────── */ .ff-nav{ position:sticky;top:0;z-index:50; background:var(--black); border-bottom:1px solid rgba(255,255,255,.10); } .ff-nav-in{ max-width:1000px;margin:0 auto;padding:0 28px; display:flex;align-items:center;justify-content:space-between; height:62px; } .ff-brand{ font-family:'Archivo Black',sans-serif; font-size:21px;color:#fff;text-decoration:none;letter-spacing:-.02em; } .ff-brand b{color:var(--teal-on-dark);font-weight:400} .ff-brand:hover{text-decoration:none} /* Filo head as the logo mark — one rule, every nav (inline-block so the wordmark stays whole) */ .ff-brand::before,.ed-brand::before{ content:"";display:inline-block;width:26px;height:27px; margin-right:9px;vertical-align:middle;position:relative;top:-2px; background:url('/filo-head.svg') center/contain no-repeat; } .ff-nav-right{display:flex;gap:22px;align-items:center} .ff-nav-right a{ font-size:13.5px;font-weight:600;color:rgba(255,255,255,.7); } .ff-nav-right a:hover{color:#fff;text-decoration:none} .ff-nav-right a.cta{ background:var(--red);color:#fff; padding:8px 15px;border-radius:9px; } .ff-nav-right a.cta:hover{background:var(--red-deep);color:#fff} /* §XXX 320px: text links live in the footer; nav keeps the one action */ @media(max-width:640px){ .ff-nav-right{gap:12px} .ff-nav-right a:not(.cta){display:none} } /* ── KICKER + HEADLINE ────────────────────────────────────────── */ .ff-kicker{ display:inline-block; font-family:'Archivo Black',sans-serif; font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--teal);margin-bottom:14px; } .ff-kicker.on-dark{color:var(--teal-on-dark)} /* ── BUTTONS ──────────────────────────────────────────────────── */ .ff-btn{ font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px; border-radius:11px;font-weight:600;font-size:14px; padding:11px 18px;border:1px solid var(--hair); background:var(--paper);color:var(--charcoal); transition:transform .15s,box-shadow .15s,background .15s; text-decoration:none; } .ff-btn:hover{background:#fff;text-decoration:none} .ff-btn-primary{ background:var(--red);color:#fff;border:none; font-family:'Archivo Black',sans-serif;font-weight:400;letter-spacing:-.01em; box-shadow:0 14px 34px -14px rgba(217,41,56,.55); } .ff-btn-primary:hover{ background:var(--red-deep);color:#fff; transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(217,41,56,.65); } .ff-btn-teal{ background:var(--teal);color:#fff;border:none; font-family:'Archivo Black',sans-serif;font-weight:400;letter-spacing:-.01em; box-shadow:0 14px 34px -14px rgba(3,115,140,.5); } .ff-btn-teal:hover{background:var(--teal-deep);color:#fff;transform:translateY(-2px)} .ff-btn-ghost{ background:transparent;border:1px solid rgba(0,0,0,.22);color:var(--charcoal); } .ff-btn-ghost:hover{background:rgba(0,0,0,.04)} /* ── CARDS ────────────────────────────────────────────────────── */ .ff-card{ background:var(--paper); border:1px solid var(--hair); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); display:flex;flex-direction:column;gap:10px; transition:transform .16s,box-shadow .16s,border-color .16s; min-width:0; } .ff-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--teal); } .ff-card-rule{height:4px;width:44px;border-radius:99px;background:var(--red);margin-bottom:4px} .ff-card-tag{ font-family:'Archivo Black',sans-serif; font-size:11px;letter-spacing:.07em;text-transform:uppercase; color:var(--teal); } .ff-card h3{ font-family:'Archivo Black',sans-serif; font-size:21px;letter-spacing:-.01em;color:var(--charcoal-deep); } .ff-card p{font-size:14px;color:#555;line-height:1.6;flex:1} .ff-card-link{ font-family:'Archivo Black',sans-serif;font-size:13px; color:var(--red);letter-spacing:-.01em;margin-top:4px; } /* ── CALLOUT / HONEST NOTE ────────────────────────────────────── */ .ff-honest{ background:var(--teal-soft); border:1px solid var(--teal); border-radius:12px; padding:16px 20px; font-size:15px;color:var(--charcoal-deep);line-height:1.6; } .ff-honest b{color:var(--red)} .ff-callout{ background:#fff; border:1px solid var(--hair); border-left:4px solid var(--red); border-radius:0 12px 12px 0; padding:18px 22px;margin:28px 0; font-size:15.5px;color:var(--charcoal);line-height:1.6; } .ff-callout strong{color:var(--teal)} /* ── SOURCED RECEIPT (names + facts, never accuse) ────────────── */ .ff-receipt{ background:var(--black);color:var(--offwhite); border-radius:12px; padding:18px 22px;margin:28px 0; font-size:14.5px;line-height:1.6; } .ff-receipt strong{color:var(--red-on-dark)} .ff-receipt a{color:var(--teal-on-dark);text-decoration:underline;text-underline-offset:2px;font-size:13.5px} .ff-receipt a:hover{color:#fff} /* ── DISCLAIMER ───────────────────────────────────────────────── */ .ff-disc{ font-size:13px;color:#6b6b6b;font-style:italic;line-height:1.65; margin-top:32px;padding-top:20px;border-top:1px solid var(--hair); } /* ── FOOTER — black, blocky brand ─────────────────────────────── */ .ff-footer{ background:var(--black); color:rgba(255,255,255,.62); padding:42px 0;font-size:13px;margin-top:40px; } .ff-footer-in{ max-width:1000px;margin:0 auto;padding:0 28px; display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:flex-start; } .ff-footer-brand{ font-family:'Archivo Black',sans-serif; font-size:18px;color:#fff;margin-bottom:12px;letter-spacing:-.02em; } .ff-footer-brand b{color:var(--teal-on-dark);font-weight:400} .ff-footer-disc{max-width:480px;font-size:12px;color:rgba(255,255,255,.52);line-height:1.65} .ff-footer-links{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start} .ff-footer-links a{color:rgba(255,255,255,.78);font-size:13px;font-weight:500} .ff-footer-links a:hover{color:#fff} .ff-sign{ margin-top:16px;font-size:12px;color:rgba(255,255,255,.5);font-style:italic; } .ff-sign a{color:var(--teal-on-dark);text-decoration:underline;text-underline-offset:2px} /* ── shared small print on the action CTA band ────────────────── */ .ff-no-card-note{display:block;font-size:13px;color:rgba(255,255,255,.78);margin-top:13px} /* ════════════════════════════════════════════════════════════════ EDITORIAL — blog index, FAQ, and long-form article pages. Plain content pages (filefriend-blog, filefriend-faq, ff-blog/*). Light field, Archivo Black headers, Inter body — same brand system. ═══════════════════════════════════════════════════════════════════ */ /* ── editorial nav (lighter than the dark .ff-nav) ────────────── */ .ed-nav{ position:sticky;top:0;z-index:50; backdrop-filter:blur(12px); background:rgba(247,247,247,.9); border-bottom:1px solid var(--hair); } .ed-nav-in{ max-width:1000px;margin:0 auto;padding:0 28px; display:flex;align-items:center;justify-content:space-between;height:62px; } .ed-brand{ font-family:'Archivo Black',sans-serif; font-size:19px;color:var(--charcoal-deep);text-decoration:none;letter-spacing:-.02em; } .ed-brand b{color:var(--teal);font-weight:400} .ed-brand:hover{text-decoration:none} .ed-nav-right{display:flex;gap:22px;align-items:center} .ed-nav-right a{font-size:13.5px;font-weight:600;color:#555} .ed-nav-right a:hover{color:var(--teal);text-decoration:none} /* ── kicker / category label ──────────────────────────────────── */ .ed-kicker{ font-family:'Archivo Black',sans-serif; font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--teal);margin-bottom:14px; } /* ── blog index hero ──────────────────────────────────────────── */ .ed-hero{max-width:1000px;margin:0 auto;padding:60px 28px 36px} .ed-hero h1{font-size:clamp(34px,5.4vw,46px);max-width:14ch;line-height:1.04;margin-bottom:18px} .ed-hero p{font-size:clamp(16px,2vw,17.5px);color:#555;max-width:540px;line-height:1.65} /* ── blog index list ──────────────────────────────────────────── */ .ed-posts-wrap{max-width:1000px;margin:0 auto;padding:0 28px 80px} .ed-section-label{ font-family:'Archivo Black',sans-serif; font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#555; margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--hair); } .ed-post-list{display:flex;flex-direction:column;gap:0} .ed-post-item{ display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start; padding:26px 0;border-bottom:1px solid var(--hair); text-decoration:none;color:var(--charcoal);transition:opacity .15s; } .ed-post-item:hover{opacity:.82;text-decoration:none} .ed-post-item:last-child{border-bottom:none} .ed-post-cat{ font-family:'Archivo Black',sans-serif; font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:8px; } .ed-post-title{ font-family:'Archivo Black',sans-serif; font-size:21px;line-height:1.18;margin-bottom:8px;color:var(--charcoal-deep);letter-spacing:-.01em; } .ed-post-summary{font-size:15px;color:#555;line-height:1.65;max-width:580px} .ed-post-arrow{ font-family:'Archivo Black',sans-serif; color:var(--red);font-size:22px;align-self:center; } /* ── article page ─────────────────────────────────────────────── */ .ed-post-wrap{max-width:720px;margin:0 auto;padding:52px 28px 80px} .ed-post-wrap h1{font-size:clamp(30px,5vw,40px);line-height:1.08;margin-bottom:22px;color:var(--charcoal-deep)} .ed-post-meta{ font-size:13px;color:#6b6b6b;margin-bottom:38px; padding-bottom:22px;border-bottom:1px solid var(--hair); } .ed-post-wrap h2{font-size:24px;margin:42px 0 14px;color:var(--charcoal-deep)} .ed-post-wrap h3{font-size:18px;margin:28px 0 10px;color:var(--charcoal-deep)} .ed-post-wrap p{margin-bottom:18px;font-size:16.5px;line-height:1.75;color:var(--charcoal)} .ed-post-wrap ul,.ed-post-wrap ol{margin:0 0 20px 22px} .ed-post-wrap li{font-size:16.5px;line-height:1.75;margin-bottom:8px;color:var(--charcoal)} .ed-post-wrap strong{color:var(--charcoal-deep)} /* ── article components ───────────────────────────────────────── */ .ed-callout{ background:#fff;border:1px solid var(--hair); border-left:4px solid var(--red);border-radius:0 10px 10px 0; padding:18px 22px;margin:30px 0;font-size:15.5px;color:var(--charcoal);line-height:1.65; } .ed-callout strong{color:var(--teal)} .ed-warn{ background:#fff;border:1px solid var(--hair); border-left:4px solid var(--red);border-radius:0 10px 10px 0; padding:18px 22px;margin:30px 0;font-size:15.5px;color:var(--charcoal);line-height:1.65; } .ed-warn strong{color:var(--red)} .ed-subtle{ background:var(--teal-soft);border:1px solid var(--teal);border-radius:10px; padding:18px 22px;margin:30px 0;font-size:15px;color:var(--charcoal-deep);line-height:1.65; } .ed-subtle a{color:var(--red);text-decoration:underline;text-underline-offset:2px} .ed-law-quote{ background:var(--field);border:1px solid var(--hair);border-radius:10px; padding:20px 24px;margin:30px 0;font-size:15px;color:var(--charcoal);font-style:italic;line-height:1.65; } .ed-law-quote cite{display:block;font-style:normal;font-size:13px;color:#6b6b6b;margin-top:10px} /* ── method card (practical guides) ───────────────────────────── */ .ed-method{ background:#fff;border:1px solid var(--hair);border-radius:14px; padding:24px 26px;margin:24px 0;box-shadow:var(--shadow-sm); } .ed-method h3{margin-top:0;color:var(--teal)} .ed-method .ed-verdict, .ed-method .ed-effort{ display:inline-flex;align-items:center;gap:6px;margin-top:13px; font-size:13px;font-weight:700;color:var(--red); background:rgba(217,41,56,.12);padding:4px 11px;border-radius:6px; } /* ── compare grid (nda vs confidentiality) ────────────────────── */ .ed-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0} .ed-compare-box{ background:#fff;border:1px solid var(--hair);border-radius:12px; padding:20px 22px;box-shadow:var(--shadow-sm); } .ed-compare-box h3{margin-top:0;font-size:17px;color:var(--teal)} .ed-compare-box p{font-size:14.5px;margin-bottom:0} @media(max-width:600px){.ed-compare{grid-template-columns:1fr}} /* ── retention table ──────────────────────────────────────────── */ .ed-post-wrap table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px} .ed-post-wrap th{ background:var(--teal);color:#fff;text-align:left;padding:12px 16px; font-family:'Archivo Black',sans-serif;font-weight:400;font-size:13px;letter-spacing:-.01em; } .ed-post-wrap td{padding:11px 16px;border-bottom:1px solid var(--hair);color:var(--charcoal)} .ed-post-wrap tr:nth-child(even) td{background:#fff} .ed-post-wrap tr:nth-child(odd) td{background:var(--field)} /* ── editorial footer (lighter footer-brand accents) ──────────── */ .ed-foot-brand b{color:var(--teal-on-dark);font-weight:400} /* ── FAQ accordion ────────────────────────────────────────────── */ .faq-page-wrap{max-width:800px;margin:0 auto;padding:56px 28px 90px} .faq-page-wrap h1{font-size:clamp(32px,5.4vw,42px);margin-bottom:16px;line-height:1.08;color:var(--charcoal-deep)} .faq-intro{font-size:17px;color:#555;margin-bottom:52px;max-width:560px;line-height:1.65} .faq-section{margin-bottom:52px} .faq-section-label{ font-family:'Archivo Black',sans-serif; font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal); margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--red); } .faq-item{border-bottom:1px solid var(--hair);padding:0} .faq-item summary{ list-style:none;cursor:pointer;padding:22px 0; display:flex;justify-content:space-between;align-items:start;gap:16px; font-family:'Archivo Black',sans-serif;font-size:18px;color:var(--charcoal-deep); line-height:1.3;letter-spacing:-.01em;-webkit-user-select:none;user-select:none; } .faq-item summary::-webkit-details-marker{display:none} .faq-icon{ flex-shrink:0;width:24px;height:24px;border-radius:50%; border:1.5px solid var(--hair);display:flex;align-items:center;justify-content:center; margin-top:3px;color:var(--red);font-family:monospace;font-size:16px; transition:transform .2s,background .2s,color .2s,border-color .2s; } details[open] .faq-icon{background:var(--red);color:#fff;border-color:var(--red);transform:rotate(45deg)} .faq-body{padding:0 0 24px;font-size:16px;color:#555;line-height:1.75;max-width:640px} .faq-body p{margin-bottom:14px} .faq-body p:last-child{margin-bottom:0} .faq-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px} .faq-body strong{color:var(--charcoal-deep)} .faq-body ul{margin:12px 0 12px 20px} .faq-body li{margin-bottom:7px}