/* ════════════════════════════════════════════════════════════════════ A Crude Estimate — shared stylesheet for every page. Edit the look & feel HERE (one file), then `git push` to deploy. Pages opt into variants via classes: (none) bulletin / evening (720px page) .landing public landing page .page-mid calculator + weekly (760px page, smaller masthead) .page-wide accuracy report (980px page) .licensed subscriber pages — selection/copy disabled, watermark active ════════════════════════════════════════════════════════════════════ */ /* ── Palette & base ────────────────────────────────────────────────── */ :root { --ink:#1a1612; --ink-soft:#4b463f; --ink-faint:#8a8377; --paper:#f0e9d8; --paper-warm:#e9e1cc; --white:#faf6ec; --oxblood:#8b1a1a; --oxblood-soft:#a83838; --rule:#c9bfa8; --positive:#2a5d2a; --amber:#b56a00; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'Inter',Georgia,serif;line-height:1.55;-webkit-font-smoothing:antialiased} .page{max-width:720px;margin:0 auto;padding:32px 24px 64px} body.page-mid .page{max-width:760px} body.page-wide .page{max-width:980px} /* ── Masthead ──────────────────────────────────────────────────────── */ .masthead{text-align:center;border-bottom:1px solid var(--ink);padding-bottom:18px;margin-bottom:24px} .masthead .strapline{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px} .masthead .title{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:56px;line-height:1;letter-spacing:-.025em;color:var(--ink);margin:0} body.page-mid .masthead .title{font-size:46px} body.page-wide .masthead .title{font-size:48px} .masthead .byline,.masthead .subtitle{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft);margin-top:10px} .masthead .subtitle{font-size:16px} .masthead .byline .author{color:var(--oxblood);font-style:normal;font-weight:600} .masthead .datestrip{margin-top:18px;padding-top:12px;border-top:1px solid var(--ink);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)} .masthead .datestrip .anchor{color:var(--oxblood);font-weight:600} /* ── Tabs ──────────────────────────────────────────────────────────── */ .tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--ink)} .tabs a{flex:1;text-align:center;padding:10px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;background:var(--white);border:1px solid var(--rule);border-bottom:none;font-weight:600} .tabs a.active{background:var(--ink);color:var(--paper);border-color:var(--ink)} .tabs a:hover{background:var(--paper-warm);color:var(--ink)} .tabs a.active:hover{background:var(--ink);color:var(--paper)} /* ── Section rules & shared blocks ─────────────────────────────────── */ .section-rule{border-top:2px solid var(--oxblood);border-bottom:1px solid var(--oxblood);padding:8px 0;margin:32px 0 16px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} .section-rule::before{content:"◆";color:var(--oxblood);margin-right:10px} .headline{padding:20px 24px;background:var(--white);border-left:4px solid var(--oxblood);font-family:'Fraunces',serif;font-style:italic;font-size:19px;line-height:1.45;color:var(--ink);margin-bottom:36px} .fine-print{margin-top:40px;padding:22px 24px;background:var(--ink);color:var(--paper);font-size:12px;line-height:1.65} .fine-print .title{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--oxblood-soft);font-weight:600;margin-bottom:12px} .fine-print b{color:var(--paper)} .fine-print .num{font-family:'IBM Plex Mono',monospace;font-weight:600;color:#e8d7a8} .fine-print a{color:#e8d7a8} .note{margin-top:24px;padding:18px 22px;background:var(--white);border-left:4px solid var(--ink);font-size:13px;line-height:1.6;color:var(--ink)} .note b{color:var(--oxblood)} .signoff{margin-top:36px;text-align:center;padding-top:24px;border-top:1px dotted var(--rule)} .signoff .sig{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--ink);font-weight:600} .signoff .url{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px} .signoff .footnote{font-family:'Fraunces',serif;font-style:italic;font-size:12px;color:var(--ink-faint);margin-top:14px} /* ── Bulletin: upstream strip ──────────────────────────────────────── */ .upstream{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;background:var(--white);padding:16px;margin-bottom:24px} .upstream .cell{padding:6px 8px;border-left:2px solid var(--rule)} .upstream .label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px} .upstream .value{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;color:var(--ink)} .upstream .unit{font-size:11px;color:var(--ink-faint);font-weight:400;margin-left:4px} /* ── Bulletin: city picker ─────────────────────────────────────────── */ .city-picker{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--ink);padding:12px 16px;margin-bottom:18px} .city-picker label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} .city-picker select{flex:1;max-width:280px;padding:9px 12px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;border:1px solid var(--ink);background:var(--paper-warm);color:var(--ink);border-radius:0;cursor:pointer} @media print{.city-picker{display:none}} /* ── Bulletin: city blocks & forecast cards ────────────────────────── */ .city-header{margin:44px 0 8px;border-bottom:2px solid var(--ink);padding-bottom:10px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px} .city-header .city-name{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:36px;line-height:1;letter-spacing:-.02em;color:var(--ink)} .city-header .city-summary{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-soft);text-align:right;line-height:1.4;max-width:60%} .city-summary .move{color:var(--positive);font-weight:600} .city-summary .move.up{color:var(--oxblood)} .card{background:var(--white);border:1px solid var(--ink);padding:18px 22px;margin-bottom:14px} .card .head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:12px} .card .fuel-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} .card .fuel-label .product-name{font-family:'Fraunces',serif;font-style:italic;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-transform:none;margin-right:8px} .badge{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.15em;padding:3px 10px;border:1px solid} .badge.calm{color:var(--positive);border-color:var(--positive)} .badge.medium{color:var(--amber);border-color:var(--amber)} .badge.shock{color:var(--oxblood);border-color:var(--oxblood)} .card .meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px} .card .meta b{color:var(--ink);font-size:17px;font-weight:600} .card .meta .drift-down{color:var(--positive)} .card .meta .drift-up{color:var(--oxblood)} .card .meta .sep{color:var(--ink-faint);margin:0 6px} .fctable{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:13px} .fctable th{text-align:left;background:var(--paper-warm);padding:7px 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--ink)} .fctable th:nth-child(3),.fctable th:nth-child(4){text-align:right} .fctable td{padding:8px 10px;border-bottom:1px dotted var(--rule)} .fctable td:nth-child(1){color:var(--oxblood);font-weight:600} .fctable td:nth-child(2){color:var(--ink-soft)} .fctable td:nth-child(3){color:var(--ink);text-align:right;font-weight:600} .fctable td:nth-child(4){color:var(--ink-faint);text-align:right} .pullquote{margin-top:14px;padding:10px 14px;background:var(--paper);border-left:3px solid var(--ink);font-family:'Fraunces',serif;font-style:italic;font-size:14px;line-height:1.45;color:var(--ink)} .pullquote.warn{border-left-color:var(--oxblood)} /* ── Accuracy report ───────────────────────────────────────────────── */ .hero{background:var(--ink);color:var(--paper);padding:24px;margin-bottom:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px} .hero .stat{padding:12px;border-left:3px solid var(--oxblood-soft)} .hero .stat .label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#d4c896;margin-bottom:4px} .hero .stat .value{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:700} .hero .stat .sub{font-size:11px;color:#aaa294;font-style:italic;margin-top:2px} table.acc{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--white);border:1px solid var(--ink)} table.acc th{text-align:left;background:var(--paper-warm);padding:8px 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--ink)} table.acc th.r,table.acc td.r{text-align:right} table.acc td{padding:6px 10px;border-bottom:1px dotted var(--rule)} .spark{display:flex;align-items:flex-end;height:80px;gap:2px;background:var(--white);padding:12px;border:1px solid var(--ink);margin-top:8px} .spark .bar{flex:1;background:var(--oxblood);min-height:2px;transition:opacity 0.2s;position:relative} .spark .bar.good{background:var(--positive)} .spark .bar.bad{background:var(--oxblood)} .spark .bar:hover{opacity:0.7} .spark .bar .tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:3px 8px;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none;margin-bottom:4px} .spark .bar:hover .tip{opacity:1} .spark-labels{display:flex;gap:2px;margin-top:4px;font-size:9px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace} .spark-label{flex:1;text-align:center} /* ── Weekly report ─────────────────────────────────────────────────── */ table.w{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--white);border:1px solid var(--ink);margin-bottom:16px} table.w th{text-align:left;background:var(--paper-warm);padding:7px 9px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--ink)} table.w th.r,table.w td.r{text-align:right} table.w td{padding:6px 9px;border-bottom:1px dotted var(--rule)} .callout{background:var(--white);border-left:4px solid var(--positive);padding:14px 18px;margin:12px 0;font-size:14px;line-height:1.6} .callout.warn{border-left-color:var(--oxblood)} /* ── ROI calculator ────────────────────────────────────────────────── */ .panel{background:var(--white);border:1px solid var(--ink);padding:24px;margin-bottom:18px} .input-row{margin-bottom:16px} .input-row label{display:flex;justify-content:space-between;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:6px} .input-row label .value{color:var(--oxblood);font-size:14px;font-weight:700} .input-row select,.input-row input{width:100%;padding:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;border:1px solid var(--ink);background:var(--paper-warm);font-weight:600} .input-row input[type="range"]{padding:0;height:6px;background:var(--paper-warm);outline:none;-webkit-appearance:none} .input-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--oxblood);border:2px solid var(--ink);cursor:pointer;border-radius:0} .input-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} @media (max-width:600px){.input-grid{grid-template-columns:1fr}} .results{background:var(--ink);color:var(--paper);padding:24px;margin-bottom:18px} .results h3{font-family:'Fraunces',serif;font-style:italic;color:var(--paper);margin:0 0 14px 0;font-size:20px;border-bottom:1px solid var(--oxblood-soft);padding-bottom:10px} .day-table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:12px} .day-table th{text-align:left;padding:8px;color:#d4c896;font-size:10px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--oxblood-soft);font-weight:600} .day-table th.r,.day-table td.r{text-align:right} .day-table td{padding:8px;border-bottom:1px dotted #4b463f;color:var(--paper)} .day-table tr.best{background:rgba(126,201,126,0.15)} .day-table tr.best td{color:#a8e6a8;font-weight:700} .day-table tr.worst{background:rgba(232,152,152,0.1)} .day-table tr.worst td{color:#e89898} .tag{display:inline-block;padding:2px 8px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-left:6px} .tag.buy{background:#a8e6a8;color:#1a1612} .tag.avoid{background:#e89898;color:#1a1612} .outcome{background:var(--oxblood);color:var(--paper);padding:24px;margin-bottom:18px} .outcome h3{font-family:'Fraunces',serif;font-style:italic;color:var(--paper);margin:0 0 14px 0;font-size:20px} .outcome .big{font-family:'IBM Plex Mono',monospace;font-size:42px;font-weight:700;color:var(--paper);display:block;margin:8px 0} .outcome .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#f5d4d4;font-weight:600} .outcome .small{font-size:13px;color:#fde0e0;margin-top:6px;font-style:italic} /* ── Landing page (scoped — its table.acc differs from the report's) ─ */ body.landing .headline{padding:22px 26px;font-size:21px;margin-bottom:14px} body.landing .sub{font-size:15px;color:var(--ink-soft);margin:0 0 30px 2px} .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:38px} .btn{display:inline-block;padding:13px 26px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;font-weight:600;border:1px solid var(--ink)} .btn.primary{background:var(--oxblood);color:var(--paper);border-color:var(--oxblood)} .btn.primary:hover{background:var(--ink);border-color:var(--ink)} .btn.ghost{background:var(--white);color:var(--ink)} .btn.ghost:hover{background:var(--paper-warm)} body.landing .card h3{font-family:'Fraunces',serif;font-style:italic;font-size:20px;margin:0 0 8px} body.landing .card p{margin:0;font-size:14px;color:var(--ink-soft)} body.landing .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} body.landing .card{padding:20px 24px} body.landing table.acc{font-size:13px;border:none} body.landing table.acc th{padding:8px 12px} body.landing table.acc td{padding:9px 12px} body.landing table.acc td:first-child{color:var(--oxblood);font-weight:600} body.landing table.acc td:nth-child(2),body.landing table.acc td:nth-child(3){text-align:right} body.landing table.acc th:nth-child(2),body.landing table.acc th:nth-child(3){text-align:right} body.landing .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} body.landing .price{background:var(--white);border:1px solid var(--ink);padding:24px} body.landing .price.feature{border:2px solid var(--oxblood)} body.landing .price .tier{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} body.landing .price .amount{font-family:'Fraunces',serif;font-weight:700;font-size:40px;margin:8px 0 2px} body.landing .price .amount span{font-size:15px;font-weight:400;color:var(--ink-faint)} body.landing .price ul{padding-left:18px;margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)} body.landing .price li{margin-bottom:6px} body.landing .flag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--oxblood);font-weight:600;margin-top:6px} body.landing blockquote{margin:0 0 14px;padding:14px 18px;background:var(--paper);border-left:3px solid var(--ink);font-family:'Fraunces',serif;font-style:italic;font-size:15px} /* ── Top bar (public pages: subscriber sign-in link) ───────────────── */ .topbar{text-align:right;margin-bottom:10px} .topbar a{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;font-weight:600;border-bottom:1px dotted var(--rule);padding-bottom:2px} .topbar a:hover{color:var(--oxblood);border-bottom-color:var(--oxblood)} /* ── Lead form (trial page) ────────────────────────────────────────── */ .lead-form{background:var(--white);border:1px solid var(--ink);padding:26px;margin-bottom:28px} .lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:16px} .lf-field{display:flex;flex-direction:column} .lf-field label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:6px} .lf-field input,.lf-field select,.lf-field textarea{padding:10px 12px;font-family:'Inter',Georgia,serif;font-size:14px;border:1px solid var(--ink);background:var(--paper-warm);color:var(--ink);border-radius:0} .lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{outline:2px solid var(--oxblood);outline-offset:-1px} .lf-field textarea{resize:vertical;font-size:13.5px} .lf-submit{width:100%;margin-top:18px;font-size:13px;padding:16px;cursor:pointer} .lf-note{font-size:12px;color:var(--ink-faint);margin:12px 0 0;text-align:center} @media (max-width:540px){.lf-grid{grid-template-columns:1fr}} /* ── Funnel CTA (feeder pages → trial) ─────────────────────────────── */ .funnel-cta{background:var(--ink);color:var(--paper);text-align:center;padding:28px 24px;margin:28px 0 18px} .funnel-cta .fc-line{font-family:'Fraunces',serif;font-style:italic;font-size:22px;margin-bottom:14px} .funnel-cta .btn{border:1px solid var(--oxblood)} .funnel-cta .fc-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#aaa294;margin-top:12px} @media print{.funnel-cta{display:none}} /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width:540px){ .masthead .title{font-size:40px} .headline{font-size:16px;padding:16px 18px} .card{padding:14px 16px} .city-header .city-name{font-size:28px} .city-header .city-summary{font-size:12px;max-width:100%;text-align:left} .upstream{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))} body.landing .grid,body.landing .price-grid{grid-template-columns:1fr} body.landing .headline{font-size:17px} } /* ── Print (also drives the WeasyPrint PDF render) ─────────────────── */ @page{size:A4;margin:14mm} @media print{ body{background:var(--paper) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .page{max-width:none;padding:0} .city-header,.card,.upstream,.fine-print,.headline{page-break-inside:avoid;break-inside:avoid} .city-header{margin-top:22px} .masthead{page-break-after:avoid} .signoff{page-break-inside:avoid} } /* ── Licensed-copy protection (subscriber pages only) ──────────────── */ /* Deters casual copy/share; screenshots cannot be blocked by any website, so the watermark makes a leaked capture traceable instead. */ body.licensed{-webkit-user-select:none;-moz-user-select:none;user-select:none} .wmark{position:fixed;top:-30%;left:-30%;width:160%;height:160%;pointer-events:none;z-index:9000;transform:rotate(-28deg);display:flex;flex-wrap:wrap;gap:70px 50px;align-content:space-between;opacity:.05;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:14px;letter-spacing:.18em;color:var(--ink);overflow:hidden}