/* ============================================================================ post-kit — reading components for the long blog guides. Why this exists: the three pages that actually earn impressions (local-seo-calgary-complete-guide, business-automation-calgary-guide, best-web-designers-calgary-2026) are 3,000+ words of unbroken prose with no table, no image, no summary and nothing to do. They were written for a crawler and it shows. Everything below is for the person reading. Opt in with two lines in /before : Colours follow the blog template's own tokens (#EA580C orange, #1C1917 ink) rather than the homepage's, so a component never looks pasted into the page it sits in. ========================================================================== */ .pk{--pk-o:#EA580C;--pk-ink:#1C1917;--pk-body:#44403C;--pk-mute:#78716C; --pk-line:#E7E5E4;--pk-soft:#FAFAF9;--pk-warm:#FFF7ED; --pk-ok:#15795C;--pk-okbg:#ECFDF5;--pk-no:#B91C1C;--pk-nobg:#FEF2F2; --pk-serif:'Fraunces',Georgia,serif;--pk-sans:'Outfit',system-ui,sans-serif} /* --- the answer. First thing under a question heading, finished inside about sixty words, because that is what a skimming reader takes and what an answer engine lifts. --- */ .pk-answer{position:relative;font-size:19px;line-height:1.6;color:var(--pk-ink); padding-left:20px;margin:0 0 22px;max-width:62ch} .pk-answer::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:3px; background:linear-gradient(180deg,var(--pk-o),rgba(234,88,12,.22))} /* --- contents. Eleven H2s with no way to see them at once is the main reason these pages read as a wall. Built from the headings by post-kit.js, so it can never go stale against the article. --- */ .pk-toc{border:1px solid var(--pk-line);border-radius:14px;background:var(--pk-soft); padding:22px 24px;margin:0 0 34px} .pk-toc-head{font-family:var(--pk-sans);font-size:11px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--pk-mute);margin:0 0 12px} .pk-toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:32px} @media(max-width:700px){.pk-toc ol{columns:1}} .pk-toc li{break-inside:avoid;margin:0 0 7px} .pk-toc a{display:block;font-size:14.5px;line-height:1.45;color:var(--pk-body);text-decoration:none; padding:3px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s} .pk-toc a:hover{color:var(--pk-o);border-bottom-color:rgba(234,88,12,.3)} .pk-toc .pk-n{font-family:var(--pk-serif);font-weight:700;color:var(--pk-o);margin-right:8px;font-size:13px} /* --- a real table, where the article was describing one in sentences --- */ .pk-tablewrap{overflow-x:auto;margin:26px 0;-webkit-overflow-scrolling:touch} .pk-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px} .pk-table th,.pk-table td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--pk-line)} .pk-table thead th{font-family:var(--pk-sans);font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--pk-mute);border-bottom:1px solid #D6D3D1;padding-bottom:9px} .pk-table tbody th{font-weight:600;color:var(--pk-ink);width:30%} .pk-table td{color:var(--pk-body);line-height:1.6} .pk-table tr:last-child th,.pk-table tr:last-child td{border-bottom:0} /* --- key fact, for the one number in a section worth remembering --- */ .pk-key{display:flex;gap:18px;align-items:flex-start;background:var(--pk-warm); border-radius:14px;padding:20px 22px;margin:26px 0} .pk-key-n{font-family:var(--pk-serif);font-size:38px;font-weight:700;line-height:.95;color:var(--pk-o);flex:none} .pk-key-t{font-size:15px;line-height:1.6;color:#7C2D12;margin:0} /* ================================================================== quiz ==== */ /* The questions and the right answers are real DOM, not JSON built by script: without JavaScript a reader still gets every question with its answer marked, and a crawler reads the same thing a person does. post-kit.js only adds the picking, the scoring and the hiding. */ .pk-quiz{border:1px solid var(--pk-line);border-radius:18px;background:#fff; padding:clamp(24px,4vw,36px);margin:0 0 40px;box-shadow:0 8px 30px rgba(28,25,23,.05)} .pk-quiz-eyebrow{display:inline-block;font-family:var(--pk-sans);font-size:11px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--pk-o);margin-bottom:10px} .pk-quiz h2.pk-quiz-title{font-family:var(--pk-serif);font-size:clamp(24px,3.2vw,32px);font-weight:700; line-height:1.15;letter-spacing:-.02em;color:var(--pk-ink);margin:0 0 10px} .pk-quiz-sub{font-size:15.5px;line-height:1.6;color:var(--pk-mute);margin:0 0 8px;max-width:56ch} .pk-bar{display:flex;align-items:center;gap:12px;margin:22px 0 0} .pk-bar-track{flex:1;height:4px;border-radius:4px;background:var(--pk-line);overflow:hidden} .pk-bar-fill{height:100%;width:0;background:var(--pk-o);border-radius:4px;transition:width .45s cubic-bezier(.32,.72,0,1)} .pk-bar-txt{font-size:12.5px;font-weight:600;color:var(--pk-mute);white-space:nowrap;font-variant-numeric:tabular-nums} .pk-qs{list-style:none;margin:24px 0 0;padding:0} .pk-q{border-top:1px solid var(--pk-line);padding:24px 0 4px} .pk-q:first-child{border-top:0;padding-top:6px} .pk-q-text{font-family:var(--pk-serif);font-size:19px;font-weight:600;line-height:1.35; color:var(--pk-ink);margin:0 0 16px;letter-spacing:-.01em} .pk-q-text .pk-qn{color:var(--pk-o);margin-right:9px} .pk-opts{list-style:none;margin:0;padding:0;display:grid;gap:9px} .pk-opt{width:100%;display:block;text-align:left;font-family:var(--pk-sans);font-size:15.5px;line-height:1.5; color:var(--pk-body);background:#fff;border:1px solid var(--pk-line);border-radius:11px; padding:13px 16px;cursor:pointer;transition:border-color .18s,background .18s,color .18s} .pk-opt:hover:not([disabled]){border-color:#C9C5C1;background:#FCFCFB} .pk-opt:focus-visible{outline:2px solid var(--pk-o);outline-offset:2px} .pk-opt[disabled]{cursor:default} .pk-opt .pk-mark{float:right;margin-left:12px;font-weight:700;font-size:14px;opacity:0} .pk-opt.is-right{border-color:#A7D9C6;background:var(--pk-okbg);color:#0F5C46} .pk-opt.is-right .pk-mark{opacity:1;color:var(--pk-ok)} .pk-opt.is-wrong{border-color:#F0B4B4;background:var(--pk-nobg);color:#8C1A1A} .pk-opt.is-wrong .pk-mark{opacity:1;color:var(--pk-no)} .pk-opt.is-dim{opacity:.5} .pk-why{font-size:15px;line-height:1.65;color:var(--pk-body);background:var(--pk-soft); border-left:3px solid var(--pk-o);border-radius:0 10px 10px 0;padding:14px 18px;margin:14px 0 4px;max-width:64ch} .pk-why b{color:var(--pk-ink)} /* score */ .pk-score{border-top:1px solid var(--pk-line);margin-top:26px;padding-top:26px} .pk-score-n{font-family:var(--pk-serif);font-size:44px;font-weight:700;line-height:1;color:var(--pk-ink);margin:0 0 8px} .pk-score-n span{color:var(--pk-mute);font-size:24px} .pk-score-t{font-family:var(--pk-serif);font-size:22px;font-weight:600;line-height:1.25;color:var(--pk-ink);margin:0 0 8px;letter-spacing:-.01em} .pk-score-p{font-size:15.5px;line-height:1.65;color:var(--pk-body);margin:0 0 18px;max-width:58ch} .pk-score-cta{display:inline-block;background:var(--pk-o);color:#fff;font-family:var(--pk-sans);font-weight:600; font-size:15px;padding:13px 26px;border-radius:9px;text-decoration:none} .pk-score-cta:hover{background:#C2410C;color:#fff;text-decoration:none} .pk-score-alt{display:inline-block;margin-left:14px;font-size:14.5px;color:var(--pk-mute);text-decoration:underline;text-underline-offset:3px} .pk-score-alt:hover{color:var(--pk-o)} /* Without JavaScript the answers stay visible and marked — the page is still the whole article, it just is not a quiz. */ .pk-nojs-note{font-size:13px;color:var(--pk-mute);margin:16px 0 0} .pk-js .pk-nojs-note{display:none} .pk-js .pk-why{display:none} .pk-js .pk-why.is-shown{display:block} .pk-js .pk-score{display:none} .pk-js .pk-score.is-shown{display:block}