/* ============================================================ QR Code Harbor — Blog / Tutorial reading experience "Harbor Ink" design system · self-contained layer Load AFTER css/style.css on blog article pages only. REQUIRED FONT (add to , after the Inter link): Fraunces (variable, optical sizing) carries the editorial / calligraphic voice in headings, quotes, drop caps; Inter (already site-wide) remains the reading body for clarity. ============================================================ */ :root { --blog-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --blog-measure: 720px; /* ~68ch at 17px */ --blog-body-size: 1.0625rem; /* 17px */ --blog-leading: 1.75; --blog-para-gap: 1.5em; } /* ------------------------------------------------------------ 1. Article masthead — editorial, monochrome, Fraunces (replaces the legacy dark-gradient .page-hero on blog pages) ------------------------------------------------------------ */ .page-hero { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--hairline); padding: clamp(3rem, 7vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.2rem); text-align: center; } .page-hero .container { max-width: 880px; } /* the small "Guide" kicker (inline-styled p) — reshape around it */ .page-hero p:first-child { font: 600 var(--text-xs)/1 var(--font-ui) !important; letter-spacing: var(--tracking-caps) !important; text-transform: uppercase; color: var(--slate-soft) !important; margin-bottom: 1.1rem !important; } .page-hero h1 { font-family: var(--blog-serif); font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.4rem); font-weight: 560; font-variation-settings: 'opsz' 90; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); max-width: 21ch; margin: 0 auto .9rem; text-wrap: balance; } /* the standfirst / subtitle */ .page-hero h1 + p, .page-hero p:last-of-type:not(:first-child) { font-family: var(--blog-serif); font-style: italic; font-weight: 420; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); line-height: 1.55; color: var(--slate-soft); max-width: 46ch; margin: 0 auto; text-wrap: balance; } /* optional injected byline / meta row */ .article-meta { display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; font: 500 var(--text-sm)/1 var(--font-ui); color: var(--slate-faint); } .article-meta span + span::before { content: '·'; margin-right: .6rem; color: var(--hairline-strong); } /* ------------------------------------------------------------ 2. Reading column — fit-to-screen measure ------------------------------------------------------------ */ .page-content { padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(2.6rem, 6vw, 4rem); } .page-content .container { max-width: min(var(--blog-measure), 100%) !important; /* beats inline 780px */ } /* ------------------------------------------------------------ 3. Body typography ------------------------------------------------------------ */ .page-content p { font-size: var(--blog-body-size); line-height: var(--blog-leading); color: var(--slate); margin: 0 0 var(--blog-para-gap); letter-spacing: .002em; hanging-punctuation: first; } /* lead / intro paragraph (has inline font-size + color in markup) */ .page-content .container > p:first-of-type { font-size: clamp(1.14rem, 1.06rem + .4vw, 1.28rem) !important; line-height: 1.7 !important; color: var(--slate) !important; margin-bottom: 2em; } /* drop cap on the intro — Fraunces, Latin scripts only */ .page-content .container > p:first-of-type:not(.no-drop-cap)::first-letter { font-family: var(--blog-serif); font-weight: 600; font-variation-settings: 'opsz' 144; float: left; font-size: 3.05em; line-height: .82; padding: .07em .12em 0 0; color: var(--ink); } .page-content .container > p:first-of-type:is(:lang(zh), :lang(ja), :lang(ko), :lang(ar), :lang(he), :lang(th), :lang(hi))::first-letter { float: none; font-size: inherit; font-family: inherit; font-weight: inherit; padding: 0; color: inherit; line-height: inherit; } /* headings */ .page-content h2 { font-family: var(--blog-serif); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.95rem); font-weight: 580; font-variation-settings: 'opsz' 60; line-height: 1.22; letter-spacing: -.012em; color: var(--ink); margin: clamp(2.5rem, 6vw, 3.3rem) 0 .9rem !important; /* beats inline 2.2rem */ text-wrap: balance; } .page-content h3 { font-family: var(--blog-serif); font-size: clamp(1.16rem, 1.08rem + .4vw, 1.34rem); font-weight: 600; font-variation-settings: 'opsz' 40; line-height: 1.3; letter-spacing: -.008em; color: var(--ink); margin: 2.1rem 0 .65rem; } /* elegant links */ .page-content a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .page-content a:hover { text-decoration-color: var(--link); } /* strong / emphasis */ .page-content strong { color: var(--ink); font-weight: 600; } .page-content mark { background: color-mix(in srgb, var(--warn) 16%, transparent); color: inherit; border-radius: 3px; padding: .05em .18em; } /* section break — quiet asterism instead of a rule */ .page-content hr { border: 0; margin: 3rem 0; text-align: center; overflow: visible; } .page-content hr::after { content: '\2727 \2004 \2727 \2004 \2727'; /* ✧ ✧ ✧ */ font-size: .8rem; letter-spacing: .3em; color: var(--slate-faint); } /* ------------------------------------------------------------ 4. Lists ------------------------------------------------------------ */ .page-content ul, .page-content ol { margin: 0 0 var(--blog-para-gap); padding-left: 1.35em; color: var(--slate); font-size: var(--blog-body-size); } .page-content li { line-height: 1.65; margin-bottom: .55em; padding-left: .25em; } .page-content li::marker { color: var(--brand-1); } .page-content ul li::marker { content: '\2022\2002'; font-size: 1.05em; } /* • */ .page-content ol li::marker { font-family: var(--blog-serif); font-weight: 600; font-size: .95em; } .page-content li > ul, .page-content li > ol { margin: .55em 0 0; } /* ------------------------------------------------------------ 5. Blockquote & pull-quote ------------------------------------------------------------ */ .page-content blockquote { margin: 2.2rem 0; padding: .35rem 0 .35rem 1.5rem; border-left: 2px solid var(--brand-1); } .page-content blockquote p { font-family: var(--blog-serif); font-style: italic; font-weight: 440; font-size: 1.14rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: .6em; } .page-content blockquote p:last-child { margin-bottom: 0; } .page-content blockquote cite { display: block; margin-top: .5rem; font: 600 var(--text-sm)/1.4 var(--font-ui); font-style: normal; color: var(--slate-soft); } .page-content blockquote cite::before { content: '\2014\2002'; color: var(--slate-faint); } /* centered editorial pull-quote (apply class on blockquote or aside) */ .page-content .pull-quote { border-left: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 2.8rem auto; padding: 1.9rem .5rem 2rem; text-align: center; position: relative; } .page-content .pull-quote::before { content: '\201C'; display: block; font-family: var(--blog-serif); font-weight: 500; font-size: 3rem; line-height: .5; padding-bottom: .35rem; color: var(--brand-1); } .page-content .pull-quote p { font-family: var(--blog-serif); font-style: italic; font-weight: 460; font-size: clamp(1.22rem, 1.1rem + .6vw, 1.45rem); line-height: 1.5; color: var(--ink); max-width: 34ch; margin: 0 auto; text-wrap: balance; } /* ------------------------------------------------------------ 6. Code ------------------------------------------------------------ */ .page-content code { font: 500 .84em/1.5 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--paper-deep); border: 1px solid var(--hairline); border-radius: 6px; padding: .12em .38em; color: var(--ink); word-break: break-word; } .page-content pre { background: #0B1526; /* fixed ink — identical in dark mode */ color: #DCE3EE; border-radius: var(--radius); padding: 1.15rem 1.3rem; margin: 0 0 var(--blog-para-gap); overflow-x: auto; font-size: .875rem; line-height: 1.65; } .page-content pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 1em; } /* ------------------------------------------------------------ 7. Figures & illustrations ------------------------------------------------------------ */ .article-figure { margin: clamp(2rem, 5vw, 2.8rem) 0; } .article-figure img, .article-figure svg { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); } /* framed variant for screenshots / photos (papercut SVGs need no frame) */ .article-figure--framed img, .article-figure--framed svg { border: 1px solid var(--hairline); background: var(--surface); } /* narrower, centered variant for the 4:3 topic illustrations */ .article-figure--illustration { max-width: 480px; margin-inline: auto; } .article-figure figcaption { font-family: var(--blog-serif); font-style: italic; font-size: .92rem; line-height: 1.5; color: var(--slate-soft); text-align: center; margin-top: .8rem; padding: 0 1rem; } /* ------------------------------------------------------------ 8. Shared blog button (gradient — max one visible per section) ------------------------------------------------------------ */ .blog-btn, .qr-card-btn, .article-cta .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 .95rem/1 var(--font-ui); color: #fff !important; /* !important: style.css's site-wide [class*="-card"] wildcard (for .pricing-card/.feature-card/etc.) also matches "qr-card-btn" as a substring and would otherwise overwrite this gradient with a plain white surface background, making the button text invisible. */ background: var(--grad) !important; border: 0; border-radius: 10px; padding: .85rem 1.6rem; cursor: pointer; white-space: nowrap; text-decoration: none !important; box-shadow: var(--brand-shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .blog-btn:hover, .qr-card-btn:hover, .article-cta .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--brand-shadow-hover); } .blog-btn:focus-visible, .qr-card-btn:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; } /* ------------------------------------------------------------ 9. .qr-card — showcase card: QR image + caption + CTA
QR code linking to …

Scan to try it

This code opens our free generator.

Create yours free
------------------------------------------------------------ */ .qr-card { display: flex; align-items: center; gap: clamp(1.3rem, 4vw, 2.2rem); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.4rem, 4vw, 2rem); margin: clamp(2.2rem, 5vw, 3rem) 0; box-shadow: var(--elev); } .qr-card-media { flex: 0 0 auto; background: #FFFFFF; /* QR must stay scannable in dark mode */ border: 1px solid var(--hairline); border-radius: var(--radius); padding: .8rem; line-height: 0; } .qr-card-media img, .qr-card-media svg, .qr-card-media canvas { display: block; width: 132px; height: 132px; } .qr-card-body { min-width: 0; } .qr-card-title { font-family: var(--blog-serif); font-size: 1.28rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .4rem; } .qr-card-caption { font-size: .95rem !important; line-height: 1.6 !important; color: var(--slate-soft) !important; margin: 0 0 1.1rem !important; } .qr-card .qr-card-btn { font-size: .9rem; padding: .72rem 1.35rem; } /* ------------------------------------------------------------ 10. .article-cta — end-of-article conversion band ------------------------------------------------------------ */ .article-cta { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.3rem, 4vw, 2.4rem); margin: clamp(2.4rem, 6vw, 3.4rem) 0 0; text-align: center; box-shadow: var(--elev); } .article-cta-kicker { font: 600 var(--text-xs)/1 var(--font-ui) !important; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--slate-soft) !important; margin: 0 0 .7rem !important; } .article-cta-title, .article-cta h2 { font-family: var(--blog-serif); font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.85rem); font-weight: 580; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); margin: 0 0 .6rem !important; text-wrap: balance; } .article-cta p:not(.article-cta-kicker) { font-size: 1rem !important; color: var(--slate-soft) !important; max-width: 44ch; margin: 0 auto 1.4rem !important; } /* inline internal-link chip, for "→ Related: …" moments mid-article */ .article-link { display: inline-flex; align-items: center; gap: .45em; font: 600 .92rem/1.3 var(--font-ui); color: var(--link) !important; background: color-mix(in srgb, var(--brand-1) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-1) 25%, var(--hairline)); border-radius: var(--radius-pill); padding: .5rem 1rem; text-decoration: none !important; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .article-link:hover { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 12%, var(--surface)); } .article-link::after { content: '\2192'; font-weight: 400; } /* → */ /* ------------------------------------------------------------ 11. Existing article furniture (FAQ + related) refined ------------------------------------------------------------ */ .seo-faq { margin-top: .4rem; } .seo-faq-item { padding: 1.25rem 0; border-bottom: 1px solid var(--hairline); } .seo-faq-item:first-child { border-top: 1px solid var(--hairline); } .seo-faq-item h3 { font-family: var(--blog-serif); font-size: 1.12rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0 0 .45rem; } .seo-faq-item p { font-size: .98rem; line-height: 1.65; color: var(--slate-soft); margin: 0; } .seo-related { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .3rem; } .seo-related a { font: 500 var(--text-sm)/1.35 var(--font-ui); color: var(--slate); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: .5rem 1rem; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .seo-related a:hover { color: var(--ink); border-color: var(--hairline-strong); background: var(--paper-deep); text-decoration: none; } /* ------------------------------------------------------------ 12. Tables (comparison tables in guide articles) ------------------------------------------------------------ */ .page-content table { width: 100%; border-collapse: collapse; margin: 0 0 var(--blog-para-gap); font-size: .95rem; line-height: 1.55; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .page-content th { font: 600 var(--text-sm)/1.4 var(--font-ui); letter-spacing: .02em; text-align: left; color: var(--ink); background: var(--paper-deep); padding: .7rem .9rem; border-bottom: 1px solid var(--hairline); } .page-content td { padding: .7rem .9rem; color: var(--slate); border-bottom: 1px solid var(--hairline); } .page-content tr:last-child td { border-bottom: 0; } /* ------------------------------------------------------------ 13. Responsive ------------------------------------------------------------ */ @media (max-width: 640px) { :root { --blog-body-size: 1.03rem; --blog-leading: 1.72; } .page-content .container > p:first-of-type::first-letter { font-size: 2.7em; } .qr-card { flex-direction: column; text-align: center; } .qr-card-media img, .qr-card-media svg, .qr-card-media canvas { width: 148px; height: 148px; } .qr-card-body { width: 100%; } .page-content blockquote { padding-left: 1.1rem; margin: 1.8rem 0; } .article-figure--illustration { max-width: 100%; } .page-content pre { font-size: .82rem; padding: 1rem; border-radius: var(--radius-sm); } } @media print { .page-hero { border-bottom-color: #000; } .article-cta, .seo-related, .blog-btn, .qr-card-btn { display: none !important; } } /* ================================================================ 14. blog index listing (blog.html) — card grid + thumbnails ================================================================ */ /* the listing page reuses .page-content .container, but its narrow ~720px reading-measure cap (rule 2, above) is meant for article prose, not a card grid — widen it back out whenever it wraps a .blog-grid */ .page-content .container:has(.blog-grid) { max-width: 1240px !important; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 3vw, 1.8rem); } .blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none !important; box-shadow: var(--elev); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .blog-card:hover, .blog-card:focus-visible { transform: translateY(-3px); box-shadow: var(--elev-hover); border-color: var(--brand-1); } .blog-card-thumb { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--brand-1) 6%, var(--paper)); overflow: hidden; } .blog-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .blog-card .blog-cat { display: inline-flex; align-self: flex-start; font: 600 var(--text-xs)/1 var(--font-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 10%, var(--surface)); border-radius: var(--radius-pill); padding: .35rem .75rem; margin: 1.1rem 1.25rem 0; } .blog-card h3 { font-family: var(--blog-serif); font-size: 1.1rem; font-weight: 600; font-variation-settings: 'opsz' 40; line-height: 1.35; letter-spacing: -.008em; color: var(--ink); margin: .7rem 1.25rem 0; } .blog-card p { font-size: .92rem !important; line-height: 1.6 !important; color: var(--slate-soft) !important; margin: .55rem 1.25rem 1.25rem !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }