/* site.css — the ONE stylesheet for remktr.com's comparison and learn pages. * * A themed sibling of drppc.ai's site.css, NOT a fork of its design. The 33 * comparison pages shipped referencing /assets/site.css, which only ever existed * in drppc-site — so they rendered as raw unstyled HTML on the live site while * the HTML itself looked perfectly correct. * * Copying drppc's file would have fixed the styling and broken the brand: * drppc.ai is a dark terminal in green, remktr.com is light in purple with * Poppins. Same structure, same class names, reMKTR's own palette — taken from * assets/blog.css, which is what the rest of this site already uses. */ /* Poppins, self-declared. These pages inherit a font for Archivo, * Inter and JetBrains Mono from the shared renderer — drppc.ai's faces — * so Poppins was named in the tokens but never actually downloaded, and * every page fell back to system-ui. Same @font-face rules the rest of * remktr.com already uses, so there is one source of truth for the face. */ @font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v21/pxiEyp8kv8JHgFVrJJfecg.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v21/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2") format("woff2"); } :root{ --base:#ffffff; --raised:#faf7fd; --fg:#131015; --dim:#5d5766; --line:#e8d5f5; --accent:#7c3aed; --amber:#FCCC00; --display:'Poppins',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--base);color:var(--fg);font-family:var(--body); line-height:1.7;-webkit-font-smoothing:antialiased} .wrap{max-width:820px;margin:0 auto;padding:0 22px} a{color:var(--accent)} h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.12;margin:0} h1{font-size:clamp(30px,4.6vw,46px);font-weight:800;margin:14px 0 0} h2{font-size:clamp(21px,2.6vw,28px);font-weight:700;margin:46px 0 12px} h3{font-size:18px;font-weight:700;margin:28px 0 8px} p{margin:0 0 1.05em} .kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .dim{color:var(--dim)} nav.top{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line); background:rgba(255,255,255,.92);backdrop-filter:blur(10px)} nav.top .bar{max-width:1080px;margin:0 auto;padding:13px 22px;display:flex;gap:20px; align-items:center;justify-content:space-between;flex-wrap:wrap} .logo{font-family:var(--display);font-weight:800;font-size:17px;text-decoration:none;color:var(--fg)} .logo span{color:var(--accent)} nav.top ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap} nav.top ul a{font-family:var(--mono);font-size:12px;color:var(--dim);text-decoration:none; letter-spacing:.04em;text-transform:uppercase} nav.top ul a:hover{color:var(--accent)} .navcta{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--accent); color:var(--base);padding:8px 14px;border-radius:7px;text-decoration:none} .crumbs{font-family:var(--mono);font-size:11.5px;color:#7a7385;padding:22px 0 0; display:flex;flex-wrap:wrap;gap:7px} .crumbs a{color:#7a7385;text-decoration:none} .crumbs a:hover{color:var(--accent)} article{padding:0 0 60px} .meta{font-family:var(--mono);font-size:11.5px;color:#7a7385;margin:16px 0 30px; padding-bottom:18px;border-bottom:1px solid var(--line)} .answer{border-left:3px solid var(--accent);background:rgba(110,25,173,.05); padding:20px 22px;border-radius:0 11px 11px 0;margin:0 0 30px;font-size:18px} .answer .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px} .answer p{margin:0} .receipts{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:26px 0} .rec{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--raised)} .rec .big{font-family:var(--display);font-size:28px;font-weight:800;color:var(--accent); letter-spacing:-.03em;line-height:1.1} .rec .lbl{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:9px;line-height:1.55} .rec .who{font-family:var(--mono);font-size:10.5px;color:#7a7385;margin-top:8px} .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px; background:var(--raised);margin:24px 0} table{width:100%;border-collapse:collapse;font-size:14.5px} th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} thead th{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--dim);font-weight:500} tbody tr:last-child td{border-bottom:none} td:first-child{color:var(--dim);font-family:var(--mono);font-size:12.5px} caption{caption-side:top;text-align:left;padding:14px 15px 0;font-family:var(--mono); font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} ul.body,ol.body{margin:0 0 1.2em;padding-left:22px} ul.body li,ol.body li{margin-bottom:.5em} .steps{counter-reset:s;list-style:none;padding:0;margin:0 0 1.4em} .steps li{counter-increment:s;position:relative;padding:0 0 14px 40px} .steps li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px; border-radius:7px;background:rgba(110,25,173,.1);border:1px solid rgba(110,25,173,.3); color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center} .faq details{border-bottom:1px solid var(--line);padding:18px 0} .faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none; display:flex;justify-content:space-between;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:19px} .faq details[open] summary::after{content:"–"} .faq p{color:var(--dim);font-size:15.4px;margin:12px 0 0} .takeaway{border:1px solid rgba(110,25,173,.3);border-radius:13px;padding:24px; background:linear-gradient(180deg,rgba(110,25,173,.05),rgba(250,247,253,.9));margin:34px 0} .takeaway .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px} .cta{border:1px solid var(--line);border-radius:13px;padding:26px;background:var(--raised);margin:34px 0} .cta p{color:var(--dim);font-size:15px} .btn{display:inline-block;background:var(--accent);color:var(--base);font-weight:800; font-size:15.5px;padding:13px 26px;border-radius:9px;text-decoration:none;margin-top:6px} .links{border-top:1px solid var(--line);margin-top:44px;padding-top:28px} .links h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);font-weight:500;margin:0 0 14px} .links ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px} .links li a{font-size:15.5px;text-decoration:none} .links li a:hover{text-decoration:underline} .links li span{display:block;font-family:var(--mono);font-size:11px;color:#7a7385;margin-top:2px} .spokegrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); list-style:none;padding:0;margin:0} .spokegrid li{border:1px solid var(--line);border-radius:11px;padding:15px 17px;background:var(--raised)} .sourcenote{font-family:var(--mono);font-size:11px;color:#7a7385;line-height:1.7; border-top:1px solid var(--line);margin-top:34px;padding-top:20px} footer{border-top:1px solid var(--line);padding:34px 0 60px} footer .fine{font-family:var(--mono);font-size:11px;color:#7a7385;max-width:62ch;line-height:1.8} @media(max-width:640px){.answer{font-size:16.5px}} /* ── additions ────────────────────────────────────────────────────────── Everything above is the vocabulary the answer/learn/glossary pages already used, lifted verbatim. Everything below is what the comparison pages and the library needed and used to fork their own styles for. */ /* calculator.css and engagement.css read --card; the terminal palette calls the same surface --raised. Alias rather than fork. */ :root{--card:var(--raised);--soft:#151228;color-scheme:dark} /* body copy inside a generated section — the generator emits bare