/* Chonky Corgo blog chrome. Loads after assets/style.css and reuses its tokens (--gold, --parchment, --pixel, .frame, .pill) so the blog and the marketing pages are visibly one site. Two rules this file is built around: 1. The sticky CTA reserves its own height on in CSS, from first paint, so it can never shift the article. No JS measures anything. 2. Nothing here needs JavaScript. The blog ships zero script tags, which keeps it fast and keeps it inside the site's script-src 'self' CSP. */ /* ---------- layout ---------- */ .blog-body { /* Height of the sticky bar plus the phone's home indicator. Reserved up front, which is what makes CLS zero. */ --sticky-h: 76px; padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(98, 63, 152, 0.28), transparent 62%), var(--navy); } .blog-wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; } .blog-wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 22px; } .blog-main { padding: 34px 0 72px; } /* ---------- top bar ---------- */ .topbar .topnav a[aria-current="page"] { color: var(--gold-light); } /* ---------- breadcrumbs ---------- */ .crumbs { font-family: var(--pixel); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--parchment-muted); margin-bottom: 22px; line-height: 2; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .crumbs a { color: var(--parchment-muted); } .crumbs a:hover { color: var(--gold-light); } .crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: rgba(164, 144, 107, 0.6); } .crumbs [aria-current="page"] { color: var(--parchment); } /* ---------- article head ---------- */ .post-kicker { font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 12px; } .post-title { font-size: clamp(1.75rem, 5.2vw, 2.9rem); margin-bottom: 16px; } .post-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; color: var(--parchment-muted); font-size: 0.8rem; margin-bottom: 26px; } .post-meta .dot { color: rgba(164, 144, 107, 0.55); } .post-hero { display: block; width: 100%; border: 2px solid rgba(218, 143, 37, 0.45); margin: 0 0 30px; } /* the straight answer, first thing under the H1 */ .answer-box { background: var(--brown-deep); border-left: 5px solid var(--gold); padding: 20px 22px; margin: 0 0 30px; } .answer-box .answer-label { display: block; font-family: var(--pixel); font-size: 0.64rem; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 8px; } .answer-box p { color: var(--text); font-size: 1.05rem; line-height: 1.7; } /* ---------- prose ---------- */ .prose { color: var(--muted); } .prose > * + * { margin-top: 20px; } .prose p { font-size: 1rem; line-height: 1.8; } .prose strong { color: var(--parchment); } .prose a { border-bottom: 1px solid rgba(218, 143, 37, 0.5); } .prose a:hover { border-bottom-color: var(--gold-light); } .prose h2 { font-size: clamp(1.25rem, 3.4vw, 1.7rem); color: var(--text); margin-top: 52px; margin-bottom: 14px; padding-top: 14px; border-top: 2px solid rgba(218, 143, 37, 0.25); } .prose h3 { font-size: 1.02rem; color: var(--gold-light); margin-top: 34px; margin-bottom: 10px; } .prose ul, .prose ol { padding-left: 24px; } .prose li { margin-bottom: 10px; line-height: 1.75; } .prose li::marker { color: var(--gold); } .prose code { font-family: var(--mono); font-size: 0.9em; background: var(--brown-deep); border: 1px solid rgba(218, 143, 37, 0.3); padding: 1px 5px; } .prose figure { margin: 30px 0; } .prose figure img { display: block; width: 100%; height: auto; border: 2px solid rgba(218, 143, 37, 0.4); } /* Portrait phone shots. width/height stay on the tag, so the aspect ratio is known before the bytes land and nothing reflows. */ .prose figure.shot img { width: auto; max-width: min(100%, 288px); margin: 0 auto; border: 6px solid #241a16; border-radius: 28px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(218, 143, 37, 0.35); image-rendering: auto; } .prose figcaption { font-size: 0.82rem; color: var(--parchment-muted); margin-top: 10px; text-align: center; } .prose blockquote { border-left: 4px solid var(--gold); padding: 4px 0 4px 18px; color: var(--parchment); font-size: 1.02rem; } .prose blockquote cite { display: block; margin-top: 10px; font-size: 0.82rem; color: var(--parchment-muted); font-style: normal; } .callout { background: var(--surface); border: 2px solid rgba(218, 143, 37, 0.45); padding: 18px 20px; } .callout.warn { border-color: rgba(214, 46, 87, 0.6); } .callout.answer { border-color: var(--gold); background: var(--brown-deep); } .callout .callout-title { display: block; font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--gold-light); margin-bottom: 8px; } .steps { list-style: none; counter-reset: step; padding-left: 0; } .steps li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 18px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--gold); color: var(--brown-deep); font: 700 0.78rem/1 var(--pixel); } .steps strong { display: block; color: var(--parchment); margin-bottom: 4px; } /* tables scroll sideways rather than squeezing the page */ .table-scroll { overflow-x: auto; border: 2px solid rgba(218, 143, 37, 0.4); } .table-scroll table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.88rem; } .table-scroll caption { caption-side: top; text-align: left; padding: 14px 16px 12px; font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--gold); background: var(--brown-deep); } .table-scroll th, .table-scroll td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid rgba(218, 143, 37, 0.22); } .table-scroll thead th { background: var(--brown-deep); color: var(--parchment); font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.1em; border-top: none; } .table-scroll tbody th { color: var(--parchment); font-weight: 700; } .table-scroll tr.ours { background: rgba(218, 143, 37, 0.1); } .table-scroll tr.ours th { color: var(--gold-light); } /* ---------- calls to action ---------- */ .cta-block { background: radial-gradient(ellipse 80% 120% at 0% 100%, rgba(218, 143, 37, 0.16), transparent 70%), var(--surface); border: 2px solid rgba(218, 143, 37, 0.55); padding: 24px; display: flex; gap: 20px; align-items: center; margin: 40px 0; } .cta-block img.cta-icon { flex: none; border-radius: 12px; } .cta-block h2, .cta-block h3, .cta-block .cta-head { font-family: var(--pixel); font-weight: 700; font-size: 1.05rem; color: var(--text); margin: 0 0 8px; border: none; padding: 0; line-height: 1.3; } .cta-block p { color: var(--muted); font-size: 0.92rem; margin: 0 0 16px; line-height: 1.65; } /* Badge sizing only. The badge itself is defined once in style.css. */ .cta-block .store-badge img { height: 56px; } .store-note { display: block; margin-top: 10px; font-size: 0.76rem; color: var(--parchment-muted); } /* ---------- sticky CTA ---------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; min-height: var(--sticky-h); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 7, 9, 0.96); border-top: 2px solid var(--gold); backdrop-filter: blur(8px); } .sticky-cta .sticky-icon { flex: none; border-radius: 8px; } .sticky-cta .sticky-text { /* Allowed to shrink and wrap; the badge next to it is not. Apple's badge must never be squashed to make room for copy. */ min-width: 0; font-family: var(--pixel); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--text); max-width: 26rem; } .sticky-cta .store-badge img { height: 44px; } @media (max-width: 640px) { .blog-body { --sticky-h: 70px; } .sticky-cta { gap: 12px; justify-content: space-between; } .sticky-cta .sticky-text { font-size: 0.66rem; } .sticky-cta .store-badge img { height: 39px; } .sticky-cta .sticky-icon { display: none; } } /* ---------- keep reading / related ---------- */ .postfoot { border-top: 2px solid rgba(218, 143, 37, 0.3); margin-top: 56px; padding-top: 34px; } .postfoot h2 { font-family: var(--pixel); font-size: 0.95rem; color: var(--gold-light); margin-bottom: 16px; letter-spacing: 0.06em; } .linklist { list-style: none; } .linklist li { margin-bottom: 14px; } .linklist a { font-weight: 700; border-bottom: 1px solid rgba(218, 143, 37, 0.45); } .linklist .note { display: block; color: var(--muted); font-size: 0.88rem; margin-top: 4px; line-height: 1.6; } .sources { list-style: decimal; padding-left: 24px; } .sources li { margin-bottom: 12px; color: var(--muted); font-size: 0.86rem; line-height: 1.65; } .sources li::marker { color: var(--gold); } .faq-list dt { font-family: var(--pixel); font-size: 0.92rem; color: var(--text); margin-top: 24px; line-height: 1.45; } .faq-list dd { color: var(--muted); margin: 8px 0 0; line-height: 1.75; font-size: 0.95rem; } .tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .tag { font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--parchment-muted); border: 1px solid rgba(218, 143, 37, 0.35); padding: 6px 10px; } /* ---------- index + cards ---------- */ .section-label { font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--gold); margin: 46px 0 0; padding: 0; border: none; } .blog-hero { padding: 52px 0 6px; text-align: center; } .blog-hero h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); margin-bottom: 14px; } .blog-hero .lead { margin: 0 auto; } .cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; margin: 40px 0 0; } .postcard { display: flex; flex-direction: column; background: var(--surface); border: 2px solid rgba(218, 143, 37, 0.4); padding: 22px; } .postcard:hover { border-color: var(--gold); } .postcard .postcard-kicker { font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 10px; } .postcard h2, .postcard h3 { font-family: var(--pixel); font-size: 1rem; line-height: 1.4; color: var(--text); margin: 0 0 10px; border: none; padding: 0; } .postcard a { color: inherit; } .postcard a:hover { color: var(--gold-light); } .postcard p { color: var(--muted); font-size: 0.89rem; line-height: 1.65; margin: 0; } .postcard .postcard-meta { margin-top: auto; padding-top: 16px; color: var(--parchment-muted); font-size: 0.74rem; } .postcard.is-pillar { border-color: var(--gold); background: var(--brown-deep); } .pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 46px; flex-wrap: wrap; } .pager .pager-status { font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--parchment-muted); } /* pillar page */ .pillar-toc { background: var(--brown-deep); border: 2px solid rgba(218, 143, 37, 0.4); padding: 22px; margin: 0 0 30px; } .pillar-toc .toc-head { font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 12px; } .pillar-toc ol { list-style: decimal; padding-left: 22px; } .pillar-toc li { margin-bottom: 8px; color: var(--muted); font-size: 0.9rem; } .pillar-toc li::marker { color: var(--gold); } @media (max-width: 640px) { .cta-block { flex-direction: column; align-items: flex-start; } .cta-block img.cta-icon { display: none; } .post-meta { font-size: 0.76rem; } } @media (prefers-reduced-motion: reduce) { .postcard, .store-badge { transition: none; } } /* The related-reading and sources block sits in its own