/* ========================================================================== jv16powertools.com - typography layer Fonts: Schibsted Grotesk (headings), Inter (text), JetBrains Mono (code). All three are SIL Open Font License 1.1. Load order in : fonts.css -> bootstrap -> all.min.css ... home.min.css -> typography.css ========================================================================== */ :root { --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-head: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Fluid scale: first value at ~390px viewport, last value from ~1150px up */ --fs-small: 0.875rem; /* 14px: floor for readable text */ --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); /* 16 -> 17px */ --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); /* 18 -> 22px */ --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem); /* 20 -> 26px */ --fs-h2: clamp(1.875rem, 1.4rem + 1.95vw, 2.75rem); /* 30 -> 44px */ --fs-h1: clamp(2.25rem, 1.6rem + 2.65vw, 3.5rem); /* 36 -> 56px */ --measure: 36em; /* ~75 characters per line in Inter */ --text-muted: #55606b; /* 6.4:1 on #fff */ --link-blue: #1d6fa5; /* was rgb(66,170,213) = 2.6:1 on #fff; now 5.4:1 */ } /* ---- Base ---------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; font-optical-sizing: auto; /* Inter's opsz axis: tighter, crisper at large sizes */ font-kerning: normal; text-rendering: auto; /* replaces optimizeLegibility (slow on long pages) */ font-variant-numeric: lining-nums; } /* ---- Headings ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-head); text-wrap: balance; /* no one-word last lines in titles */ } h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; } h2 { font-size: var(--fs-h2); font-weight: 650; line-height: 1.12; letter-spacing: -0.02em; } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } /* ---- Running text -------------------------------------------------------- */ p, li, figcaption, blockquote { text-wrap: pretty; /* avoids orphans; ignored by older browsers */ } .subtitle { font-size: var(--fs-lead); line-height: 1.5; } .blue-focus-section p, .normal-focus-section p, .blog-post-section p { max-width: var(--measure); } /* Narrow cards (~270-300px text width) stay at 16px so lines don't get too short */ .blog-card .d-flex > p, .trust-pilot-card p { font-size: 1rem; line-height: 1.55; } /* Links in content sections (colour comes from --link-blue above) */ .blog-post-card a, .blog-post-section a, .main-feature-column a, .normal-focus-section a, .main-feature-section a, .blue-focus-section a { text-decoration-thickness: from-font; text-underline-offset: 0.2em; } /* ---- Small text: nothing below 14px -------------------------------------- */ figcaption { font-size: var(--fs-small); font-style: normal; /* no italic file needed; muted colour does the job */ line-height: 1.5; color: var(--text-muted); } .blue-focus-section .learn-more-btn, .normal-focus-section .learn-more-btn { font-size: 0.9375rem; /* was 12px bold */ font-weight: 600; } .bottom-footer { font-size: var(--fs-small); } /* Footer column labels (RECOMMENDED / IMPORTANT / COMPANY) */ footer p.font-weight-bold { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ---- Numbers ------------------------------------------------------------- */ /* Version / size / price / benchmark figures line up and don't jitter */ .hero-section p.mb-0, .pricing-card-price, .year-price, table { font-variant-numeric: tabular-nums lining-nums; } .pricing-card-price { letter-spacing: -0.02em; } /* Keep the arrow icons in the intro list from shrinking on narrow screens */ .intro-links li > svg { flex-shrink: 0; margin-top: 0.15em; } /* Hero stats row: below ~1400px let the three items wrap instead of breaking "Latest Version:" / "23.6 MB" across lines */ @media (max-width: 1399.98px) { .hero-section .d-flex.mt-4 { flex-wrap: wrap; row-gap: 0.25rem; } .hero-section .d-flex.mt-4 > div { padding-left: 0 !important; /* Bootstrap .pl-3 / .border-right use !important */ padding-right: 1.25rem !important; border-right: 0 !important; } .hero-section .d-flex.mt-4 > div > p { white-space: nowrap; } } @media (max-width: 576px) { .hero-section .d-flex.mt-4 > div { font-size: var(--fs-small); } } /* ---- Code / changelog (replaces commercial 'Comic Code') ----------------- */ .changelog, .changelog p, .changelog b, .changelog ol li, .changelog ul li, .changelog li, code, kbd, pre, samp { font-family: var(--font-mono); } .changelog { font-size: 0.9375rem; line-height: 1.65; } /* ---- Dark mode ----------------------------------------------------------- */ /* Links use --link-blue in both themes; keep the light, high-contrast blue here */ body.night-mode, html[data-theme="dark"] { --link-blue: rgb(96, 200, 243); /* 7.6:1 on #292a2a */ } body.night-mode figcaption, html[data-theme="dark"] figcaption { color: #b4b8bd; /* 7.2:1 on #292a2a */ } /* ---- Optional: white text on the blue sections is 3.5-3.9:1 today -------- */ /* Uncomment to darken the gradient so 16-17px white text passes WCAG AA */ /* (white on #4868ad = 5.4:1, on #52709e = 5.0:1). */ /* :root { --blue-gradient: linear-gradient(45deg, #4868ad 0%, #52709e 100%); } */