/* ============================================ GRAND VISION — GLOBAL TYPOGRAPHY OVERRIDES Add to any page's : ============================================ */ /* ───────────────────────────────────────────── TABLET (768px and below) ───────────────────────────────────────────── */ @media (max-width: 768px) { /* Section headings — already good per Mike, keeping stable */ h1 { font-size: 58px !important; line-height: 1.1 !important; } h2 { font-size: 44px !important; line-height: 1.15 !important; } h3 { font-size: 27px !important; line-height: 1.3 !important; } /* Body paragraphs */ p { font-size: 17px !important; line-height: 1.85 !important; } /* ── Small text in cards/grids ── */ /* Eyebrow labels & category tags */ .eyebrow, .category, .read-time, .article-tag, .brand-label, .col-tag, .event-label, .tag, .label, .section-num, .pillar-num { font-size: 13px !important; letter-spacing: 0.14em !important; } /* Card body copy, descriptions, excerpts */ .card-body, .card-desc, .brand-desc, .excerpt, .article-meta, .article-desc, .event-desc, .byline, .sub, .meta, .note, .caption, .pillar-body, .trust-desc, .row, .hdr-right, .body { font-size: 16px !important; line-height: 1.8 !important; } /* List items in feature/comparison lists */ li { font-size: 16px !important; line-height: 1.8 !important; } } /* ───────────────────────────────────────────── PHONE (480px and below) ───────────────────────────────────────────── */ @media (max-width: 480px) { /* Section headings */ h1 { font-size: 50px !important; line-height: 1.12 !important; } h2 { font-size: 36px !important; line-height: 1.18 !important; } h3 { font-size: 24px !important; line-height: 1.3 !important; } /* Body paragraphs */ p { font-size: 18px !important; line-height: 1.85 !important; } /* ── Small text in cards/grids ── */ .eyebrow, .category, .read-time, .article-tag, .brand-label, .col-tag, .event-label, .tag, .label, .section-num, .pillar-num { font-size: 12px !important; letter-spacing: 0.13em !important; } .card-body, .card-desc, .brand-desc, .excerpt, .article-meta, .article-desc, .event-desc, .byline, .sub, .meta, .note, .caption, .pillar-body, .trust-desc, .row, .hdr-right, .body { font-size: 16px !important; line-height: 1.85 !important; } li { font-size: 16px !important; line-height: 1.8 !important; } /* Article card meta line specifically */ .article-meta span, .article-meta .read { font-size: 14px !important; } /* Table cells */ td, th { font-size: 15px !important; } } /* ───────────────────────────────────────────── SMALL PHONE (380px and below) ───────────────────────────────────────────── */ @media (max-width: 380px) { h1 { font-size: 44px !important; } h2 { font-size: 32px !important; } h3 { font-size: 22px !important; } p { font-size: 17px !important; } .card-body, .card-desc, .brand-desc, .excerpt, .pillar-body, .trust-desc, .body { font-size: 15px !important; } }