/* ============================================================ niche.css — shared styles for the fable_06 niche landing pages. One stylesheet for every /for/ page; the per-niche HTML files stay slim (unique + a window.NICHE config only). Palette matches the homepage (fable_04 tokens). ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink:#1a1814; --ink-2:#4a4844; --ink-3:#8a8784; --paper:#f5f2ec; --paper-2:#ede9e0; --paper-3:#e5e0d4; --accent:#c84b2f; --green:#3a6b18; --green-bg:#e8f0de; --serif:'Instrument Serif',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; } body { font-family:var(--sans); background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6; } nav { display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:60px; background:var(--paper); border-bottom:1px solid var(--paper-3); } .nav-logo { font-family:var(--serif); font-size:22px; color:var(--ink); text-decoration:none; } .nav-logo strong { color:var(--accent); font-weight:inherit; } .nav-links { display:flex; align-items:center; gap:28px; list-style:none; } .nav-links a { font-size:14px; color:var(--ink-2); text-decoration:none; } .nav-cta { background:var(--ink); color:var(--paper) !important; padding:8px 18px; border-radius:6px; font-weight:500; font-size:13px !important; } .wrap { max-width:720px; margin:0 auto; padding:0 24px; } .hero { padding:84px 0 44px; text-align:center; } .eyebrow { font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } h1 { font-family:var(--serif); font-size:46px; line-height:1.12; letter-spacing:-0.02em; margin-bottom:20px; } h1 em { font-style:italic; color:var(--accent); } .sub { font-size:17px; color:var(--ink-2); line-height:1.7; font-weight:300; max-width:600px; margin:0 auto 32px; } .signup { display:flex; gap:8px; max-width:440px; margin:0 auto 12px; } .signup input { flex:1; padding:12px 16px; border:1.5px solid var(--paper-3); border-radius:8px; font:inherit; font-size:14px; background:#fff; outline:none; } .signup input:focus { border-color:var(--ink-2); } .signup button { padding:12px 24px; background:var(--accent); color:#fff; border:none; border-radius:8px; font:inherit; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; } .signup button:hover { opacity:.85; } .fine { font-size:12px; color:var(--ink-3); text-align:center; } .form-msg { font-size:13px; margin-top:10px; text-align:center; min-height:18px; } section { padding:40px 0; } h2 { font-family:var(--serif); font-size:28px; margin-bottom:22px; text-align:center; } .pains { display:grid; gap:14px; max-width:560px; margin:0 auto; } .pain { background:#fff; border:1px solid var(--paper-3); border-radius:10px; padding:16px 20px; font-size:15px; color:var(--ink-2); } .steps { display:grid; gap:18px; max-width:600px; margin:0 auto; } .step { display:flex; gap:16px; align-items:flex-start; } .step-n { flex:none; width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; } .step h3 { font-size:16px; font-weight:500; margin-bottom:2px; } .step p { font-size:14px; color:var(--ink-2); } .assist { text-align:center; background:var(--paper-2); border-radius:12px; padding:26px; max-width:600px; margin:0 auto; } .assist .t { font-family:var(--serif); font-size:20px; color:var(--ink); margin-bottom:8px; } .assist p { font-size:14px; color:var(--ink-2); } .pricing-line { text-align:center; max-width:560px; margin:0 auto; } .price-big { font-family:var(--serif); font-size:40px; } .price-note { font-size:13px; color:var(--ink-3); } footer { border-top:1px solid var(--paper-3); padding:28px 48px; display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3); } footer a { color:var(--ink-3); } @media (max-width:640px){ nav{padding:0 20px;} h1{font-size:34px;} .nav-links li:not(:last-child){display:none;} footer{flex-direction:column;gap:8px;} } /* ── QUIZ FUNNEL (quiz.js pages) ───────────────────────────── */ .qz-start { padding:14px 34px; background:var(--accent); color:#fff; border:none; border-radius:8px; font:inherit; font-size:16px; font-weight:500; cursor:pointer; margin-bottom:14px; } .qz-start:hover { opacity:.85; } .qz-q { max-width:560px; margin:0 auto; padding:64px 0 40px; } .qz-progress { height:4px; background:var(--paper-3); border-radius:2px; overflow:hidden; margin-bottom:10px; } .qz-progress-bar { height:100%; background:var(--accent); border-radius:2px; transition:width .3s; } .qz-count { font-size:12px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; } .qz-question { font-family:var(--serif); font-size:30px; line-height:1.2; margin-bottom:6px; } .qz-hint { font-size:13px; color:var(--ink-3); margin-bottom:10px; } .qz-opts { display:grid; gap:10px; margin:18px 0 22px; } .qz-opt { display:flex; align-items:center; gap:10px; text-align:left; padding:14px 18px; background:#fff; border:1.5px solid var(--paper-3); border-radius:10px; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; transition:border-color .15s; } .qz-opt:hover { border-color:var(--ink-2); } .qz-opt.on { border-color:var(--accent); background:#fdf6f3; } .qz-check { flex:none; width:20px; height:20px; border:1.5px solid var(--paper-3); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--accent); background:#fff; } .qz-opt.on .qz-check { border-color:var(--accent); } .qz-nav { display:flex; justify-content:space-between; align-items:center; } .qz-back { background:none; border:none; font:inherit; font-size:14px; color:var(--ink-3); cursor:pointer; padding:8px 0; } .qz-back:hover { color:var(--ink); } .qz-next { padding:11px 24px; background:var(--accent); color:#fff; border:none; border-radius:8px; font:inherit; font-size:14px; font-weight:500; cursor:pointer; } .qz-next:disabled { opacity:.4; cursor:default; } .qz-building { max-width:560px; margin:0 auto; padding:110px 0; } .qz-shimmer { height:34px; border-radius:8px; margin-bottom:12px; background:linear-gradient(90deg,var(--paper-2) 25%,var(--paper-3) 50%,var(--paper-2) 75%); background-size:200% 100%; animation:qzsh 1.1s infinite; } @keyframes qzsh { from { background-position:200% 0; } to { background-position:-200% 0; } } .qz-building-note { text-align:center; font-size:14px; color:var(--ink-3); margin-top:18px; } .qz-result { max-width:600px; margin:0 auto; padding:56px 0 40px; text-align:center; } .qz-result-title { font-family:var(--serif); font-size:38px; line-height:1.15; margin-bottom:10px; } .qz-timeline { text-align:left; background:#fff; border:1px solid var(--paper-3); border-radius:12px; overflow:hidden; margin:26px 0 8px; } .qz-row { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--paper-2); font-size:14px; } .qz-row:last-child { border-bottom:none; } .qz-row.hl { background:#fdf6f3; } .qz-when { flex:none; width:64px; font-size:12px; font-weight:500; color:var(--accent); letter-spacing:.04em; } .qz-label { color:var(--ink); } .qz-soon { margin-left:auto; font-size:11px; color:var(--green); background:var(--green-bg); border-radius:99px; padding:2px 10px; } .qz-row.locked .qz-label { filter:blur(4px); user-select:none; } .qz-lock { margin-left:auto; font-size:11px; color:var(--ink-3); white-space:nowrap; } .qz-note { font-size:13px; color:var(--ink-2); margin:10px 0 0; } .qz-gate { margin-top:30px; } .qz-gate-title { font-size:15px; margin-bottom:12px; } .qz-intent { margin-top:26px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .qz-intent-q { font-size:13px; color:var(--ink-2); margin-right:4px; } .qz-intent-btn { padding:6px 16px; background:#fff; border:1.5px solid var(--paper-3); border-radius:99px; font:inherit; font-size:13px; color:var(--ink-2); cursor:pointer; } .qz-intent-btn:hover { border-color:var(--ink-2); color:var(--ink); } .qz-redo { margin-top:22px; font-size:12px; } .qz-redo a { color:var(--ink-3); } @media (max-width:640px){ .qz-question{font-size:24px;} .qz-result-title{font-size:30px;} } .quiz-link { font-size:13px; margin-top:14px; text-align:center; } .quiz-link a { color:var(--accent); } /* ── /guides/ pages (generated — scripts/generate-seo-guides.js) ── */ body.gd{background:var(--paper,#f5f2ec);color:var(--ink,#1a1814);font-family:'DM Sans',system-ui,sans-serif;font-size:15px;line-height:1.6;margin:0} .gd-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--paper-3,#e5e0d4);background:var(--paper,#f5f2ec)} .gd-logo{font-family:'Instrument Serif',Georgia,serif;font-size:20px;color:var(--ink,#1a1814);text-decoration:none} .gd-logo strong{color:var(--accent,#c84b2f);font-weight:inherit} .gd-navlinks{display:flex;gap:18px;align-items:center;font-size:13px} .gd-navlinks a{color:var(--ink-2,#4a4844);text-decoration:none} .gd-cta-sm{background:var(--ink,#1a1814);color:#fff!important;border-radius:99px;padding:7px 15px} .gd-main{max-width:680px;margin:0 auto;padding:52px 22px 70px} .gd-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#c84b2f);margin-bottom:10px} .gd-main h1{font-family:'Instrument Serif',Georgia,serif;font-size:36px;line-height:1.15;letter-spacing:-.01em;margin-bottom:16px;font-weight:400} .gd-answer{font-size:16.5px;color:var(--ink,#1a1814);line-height:1.65} .gd-window{background:#fff;border:1px solid var(--paper-3,#e5e0d4);border-left:4px solid var(--accent,#c84b2f);border-radius:10px;padding:14px 18px;margin:22px 0;font-size:14px;color:var(--ink-2,#4a4844)} .gd-window-lead{font-size:14.5px;color:var(--ink,#1a1814);margin-bottom:4px} .gd-tl{margin:30px 0} .gd-main h2{font-family:'Instrument Serif',Georgia,serif;font-size:23px;font-weight:400;margin-bottom:4px} .gd-tl-sub{font-size:12.5px;color:var(--ink-3,#8a8784);margin-bottom:12px} .gd-tl-list{background:#fff;border:1px solid var(--paper-3,#e5e0d4);border-radius:12px;overflow:hidden} .gd-tl-row{display:flex;gap:14px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--paper-2,#ede9e0);font-size:14px} .gd-tl-row:last-child{border-bottom:none} .gd-tl-m{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#c84b2f);width:34px;flex:none} .gd-faq{margin:30px 0} .gd-faq-item{background:#fff;border:1px solid var(--paper-3,#e5e0d4);border-radius:10px;margin-bottom:8px;padding:0 16px} .gd-faq-item summary{font-size:14.5px;font-weight:500;padding:13px 0;cursor:pointer;list-style-position:inside} .gd-faq-item p{font-size:13.5px;color:var(--ink-2,#4a4844);padding:0 0 14px} .gd-close{margin-top:36px;text-align:center;background:#fff;border:1px solid var(--paper-3,#e5e0d4);border-radius:14px;padding:26px 24px} .gd-close p{font-size:14px;color:var(--ink-2,#4a4844);max-width:44em;margin:8px auto 16px} .gd-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .gd-btn{background:var(--accent,#c84b2f);color:#fff;text-decoration:none;border-radius:10px;padding:12px 22px;font-size:14.5px;font-weight:500;display:inline-block} .gd-btn-ghost{background:transparent;color:var(--accent,#c84b2f);border:1.5px solid var(--paper-3,#e5e0d4)} .gd-foot{display:flex;justify-content:space-between;padding:18px 28px;border-top:1px solid var(--paper-3,#e5e0d4);font-size:12px;color:var(--ink-3,#8a8784)} .gd-foot a{color:inherit} @media(max-width:560px){.gd-main h1{font-size:29px}.gd-main{padding-top:36px}} .gd-vs{font-size:12px;color:var(--ink-3,#8a8784);margin-top:14px} .gd-vs a{color:var(--accent,#c84b2f);text-decoration:none}