/* Fonts */ /* Fonts */ :root { --font-default: "Poppins", serif; --font-secondary: "Poppins", serif; /* Colors */ --color-default: #f02c00; --color-primary: #c02806; --color-body: #f6f6f6; --color-secondary: #FFF5DB; --color-cornsilk: #F3FBFE; --color-white: #fff; --color-transparent: #00000014; --color-black: #444444; --color-title: #212529; --color-yellow: #ffc222; --color-menu: #7e7e7e; --footer-bg: #010f1c; --color-black-bg: #000000; /* Smooth scroll behavior */ scroll-behavior: smooth; } /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ body {font-family: var(--font-default);color: var(--color-black);background-color: var(--color-body);} a {color:var(--color-default);text-decoration: none;} a:hover {color: var(--color-primary);text-decoration: none;} h1, h2, h3, h4, h5, h6 {font-family: var(--font-default);color:var(--color-title);} /* Heading scale (2026-10-14). WHY THIS EXISTS Every heading on a storefront carried a Bootstrap size class that overrode its semantic level, so the outline and the visual hierarchy had come apart completely. Measured on the live homepage at 1440px, 263 of 263 headings were overridden: h1 -> .h3 29.4px h3 -> .h5 20.0px (52 of them) h2 -> .h4 24.7px h3 -> .h6 16.0px (99 of them) h4 -> .h6 16.0px Three consequences, all real: 1. The SAME level rendered at two sizes: h3 was 20.0px in 52 places and 16.0px in 99. No rule explained which. 2. h3 and h4 were IDENTICAL at 16.0px, so a size variant ("9\" BBQ Pizza") looked exactly like its parent dish ("BBQ Pizza"). 3. The h1 was shrunk to .h3, no larger than a section heading. Google lists "no dominant heading" among its title-rewrite triggers. The same pattern was confirmed on a second shop, so it is template-driven and platform-wide, not per-shop data. WHY THESE NUMBERS Chosen to CHANGE AS LITTLE AS POSSIBLE while making the hierarchy real, because this renders on 97 live storefronts: h2 24.7 -> 25px visually unchanged h4 16.0 -> 16px unchanged h3 20.0/16.0 -> 19px one size instead of two h1 29.4 -> 34px now dominant, but well short of Bootstrap's own 43.6px, which would dwarf the existing layout Font family, colour and weight were already consistent and are untouched. NOTE: the per-element .h1-.h6 classes in the markup still win over these element rules (same specificity, but a class beats an element selector), so removing those classes from the templates is what actually applies this scale. The variables are defined here so there is one place to tune it. */ :root { --h1-size: 34px; --h2-size: 25px; --h3-size: 19px; --h4-size: 16px; --h5-size: 15px; --h6-size: 14px; } h1 {font-size: var(--h1-size);} h2 {font-size: var(--h2-size);} h3 {font-size: var(--h3-size);} h4 {font-size: var(--h4-size);} h5 {font-size: var(--h5-size);} h6 {font-size: var(--h6-size);} /* Small screens: the same scale, compressed. Bootstrap's own headings are fluid (calc with vw); these are fixed, so the step down is explicit. */ @media (max-width: 575.98px) { :root { --h1-size: 26px; --h2-size: 21px; --h3-size: 17px; --h4-size: 15px; } } /* The page's own H1, on every indexable page (2026-10-15). WHY IT EXISTS The eight indexable pages each dressed their H1 differently - five patterns for one role (.fw-normal .mb-1 / .mb-3 / .fw-bold / bare / a $titleTag variable) - so there was no single hook, and changing how a page title looks meant editing eight views and re-picking utilities. That is how five patterns appeared in the first place. Measured at 1440px before the change: weight 400 / 500 / 700, margin 4 / 8 / 16 / 0, and three pages centred while the rest were left. WHAT IT OWNS, AND WHAT IT DELIBERATELY DOES NOT font-size: NOT here. A class beats an element selector, so a size would override --h1-size and re-create the defect the scale above exists to fix. Size stays with the element rule. font-weight + margin-bottom: here, so one role renders one way. The per-page utilities were removed from the markup. text-align: here. Reviews and Loyalty Program sit inside a parent .text-center whose siblings (.stars, .lead) must STAY centred, so the parent could not simply lose the class. Inherited alignment is beaten on the heading itself. margin inside a card header: NOT here. `.custom-card .card-header > h1` below already zeroes it, because a heading IS the bar's content there. ONE CASE THIS RULE CANNOT REACH About Us centres its H1 as a FLEX ITEM (.abtUs is a column flex with align-items: center), so the box is centred while the text inside it is left-aligned. text-align cannot move a flex item; .abtUs h1 carries align-self: flex-start in that view for exactly this reason. WHERE IT DOES NOT GO Only on a page's single H1. Modal titles (.modal-title), form legends (.form-title) and the order-confirmation status line (.glow-text) are not page titles and keep their own classes. */ .page-heading {font-weight: 500;margin-bottom: 0.5rem;text-align: left;} /* Text styled like a heading but not part of the page's heading outline (SEO) */ .heading-text {font-family: var(--font-default);color:var(--color-title);} /* The content-card shell, defined ONCE (2026-10-15). It used to be duplicated in two inline