/* ========================================================================== Children of Islam — Shared Design System Used by: Books Home, Bookstore, For Mothers, For Schools Load this FIRST on every page, then the page-specific stylesheet. ========================================================================== */ /* -------------------------------------------------------------------------- PARENT-THEME RESET The parent theme wraps page content in a constrained container (and may override font sizes). This block lets the COI page break out to full width and re-asserts its own base typography so sections render at full scale. These target the common wrappers themes use for page content. If your theme uses a different wrapper class and the page still looks narrow, add that selector to the list below. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- PARENT-THEME RESET These four templates add the body class `coi-fullwidth` (see functions.php), which lets us neutralise the parent theme's constrained content container so the COI sections render full-width. We target the wrappers common themes use. If the page still looks narrow, add your theme's content wrapper selector to the list below. -------------------------------------------------------------------------- */ body.coi-fullwidth #content, body.coi-fullwidth .site-content, body.coi-fullwidth .content-area, body.coi-fullwidth #primary, body.coi-fullwidth .entry-content, body.coi-fullwidth .site-main, body.coi-fullwidth main, body.coi-fullwidth .ast-container, body.coi-fullwidth .container, body.coi-fullwidth .wrap, body.coi-fullwidth article { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Some themes add inner padding on the entry wrapper — zero it for our pages. */ body.coi-fullwidth .entry-content > .coi-page { margin: 0; } /* -------------------------------------------------------------------------- ROOT FONT-SIZE PIN (the real fix for "everything looks zoomed out") The parent theme / a plugin sets a very small root font-size AND `-webkit-text-size-adjust: none`, which shrinks every rem-based size on the page. Because the four COI templates add the `coi-fullwidth` body class, we can safely restore a normal 16px root and normal text-size-adjust *only* while a COI page is showing — this makes every rem on these pages resolve correctly in one stroke, without touching the rest of the site. -------------------------------------------------------------------------- */ html:has(body.coi-fullwidth) { font-size: 16px !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* Fallback for the rare browser without :has() — scope to the body instead. rem still keys off , so we also keep the px overrides at the bottom. */ body.coi-fullwidth { font-size: 16px !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* Establish a known font-size context on the COI page itself as well. */ .coi-page { font-size: 16px; } /* Neutralise inherited typography from the parent theme inside the COI page. */ .coi-page, .coi-page p, .coi-page span, .coi-page a, .coi-page li { line-height: 1.55; } .coi-page h1, .coi-page h2, .coi-page h3, .coi-page h4 { line-height: 1.1; margin: 0; } .coi-page { --deep: #0F4A32; --deep-2: #0A3424; --cream: #FBF7EC; --cream-2: #F3EDDC; --ink: #15301F; --ink-soft:#3F5A49; --lime: #8EC641; --lime-2: #ABDA66; --coral: #D85A30; --amber: #EF9F27; --purple: #6E4FA8; --blue: #3A86DD; --white: #FFFFFF; --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --container: 1180px; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --radius-pill: 999px; font-family: var(--font-body); color: var(--ink); background: var(--cream); overflow-x: hidden; } .coi-page * { box-sizing: border-box; } .coi-page img { max-width: 100%; display: block; } .coi-page a { color: inherit; text-decoration: none; } .coi-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .coi-wrap--narrow { max-width: 760px; } .coi-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin: 0 0 10px; } .coi-page .coi-h1, .coi-page .coi-h2, .coi-page .coi-h3, .coi-h1, .coi-h2, .coi-h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: 0.005em; margin: 0; text-transform: uppercase; } .coi-page .coi-h1, .coi-h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); color: var(--deep); } .coi-page .coi-h2, .coi-h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--deep); } .coi-page .coi-h3, .coi-h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--deep); } .coi-page .coi-lede, .coi-lede { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin: 18px 0 0; } /* Buttons ========================================================================== */ .coi-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: 16px 30px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .coi-btn:hover { transform: translateY(-2px); } .coi-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; } .coi-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .coi-btn--primary { background: var(--deep); color: var(--white) !important; box-shadow: 0 6px 0 var(--deep-2); } .coi-btn--primary:hover { box-shadow: 0 4px 0 var(--deep-2); color: var(--white) !important; } .coi-btn--ghost { background: transparent; border-color: var(--deep); color: var(--deep); } .coi-btn--ghost:hover { background: var(--deep); color: var(--white) !important; } .coi-btn--ghost-light { background: transparent; border-color: var(--white); color: var(--white); } .coi-btn--ghost-light:hover { background: var(--white); color: var(--deep) !important; } .coi-btn--whatsapp { background: #25D366; color: var(--white) !important; box-shadow: 0 6px 0 #1aa653; } .coi-btn--whatsapp:hover { box-shadow: 0 4px 0 #1aa653; color: var(--white) !important; } .coi-btn--block { width: 100%; justify-content: center; } .coi-btn--sm { padding: 11px 22px; font-size: 0.9rem; } .coi-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } /* Badges / chips ========================================================================== */ .coi-kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.85rem; color: var(--deep); background: var(--white); border: 1.5px solid var(--cream-2); padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 22px; } .coi-kicker .coi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); display: inline-block; } .coi-age-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--white); background: var(--deep); padding: 4px 11px; border-radius: var(--radius-pill); } /* Header / Nav ========================================================================== */ .coi-nav { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 1px solid var(--cream-2); } .coi-nav__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: var(--container); margin: 0 auto; } .coi-nav__logo img { height: 40px; } .coi-nav__links { display: flex; gap: 28px; font-weight: 600; font-size: 0.95rem; color: var(--deep); } .coi-nav__links a:hover { color: var(--coral); } .coi-nav__cta { display: flex; gap: 10px; align-items: center; } .coi-nav__toggle { display: none; } @media (max-width: 860px) { .coi-nav__links { display: none; } .coi-nav__toggle { display: inline-flex; background: none; border: none; cursor: pointer; color: var(--deep); } } /* Floating WhatsApp (sitewide) ========================================================================== */ .coi-float-wa { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.22); z-index: 999; transition: transform 0.2s ease; } .coi-float-wa:hover { transform: scale(1.08); } .coi-float-wa svg { width: 30px; height: 30px; fill: white; } /* Footer ========================================================================== */ .coi-footer { background: var(--deep-2); color: var(--cream); padding: 56px 0 28px; font-size: 0.92rem; } .coi-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; margin-bottom: 36px; } .coi-footer__logo img { height: 36px; margin-bottom: 14px; } .coi-footer p { color: var(--lime-2); opacity: 0.85; line-height: 1.6; max-width: 32ch; } .coi-footer h4 { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: var(--white); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.06em; } .coi-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .coi-footer a { color: var(--lime-2); opacity: 0.85; } .coi-footer a:hover { opacity: 1; color: var(--white); } .coi-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; opacity: 0.7; font-size: 0.84rem; } @media (max-width: 760px) { .coi-footer__grid { grid-template-columns: 1fr; gap: 28px; } } /* Motion + a11y ========================================================================== */ @media (prefers-reduced-motion: reduce) { .coi-page .coi-btn, .coi-page .coi-float-wa { transition: none; } } /* ========================================================================== PARENT-PROOF TYPOGRAPHY Re-declares body/caption font sizes in explicit px, scoped to .coi-page, so they render at the intended scale even when the parent theme sets a small root font-size (which would otherwise shrink all rem-based text). px is used deliberately here: it is immune to root font-size. Headings already use clamp() with a vw term and don't need this. 1rem = 16px baseline, so the px values below mirror the original rem values. ========================================================================== */ /* Shared base */ .coi-page .coi-eyebrow { font-size: 12.5px; } .coi-page .coi-lede { font-size: 18px; } .coi-page .coi-btn { font-size: 16px; } .coi-page .coi-btn--sm { font-size: 14.5px; } .coi-page .coi-kicker { font-size: 13.5px; } .coi-page .coi-age-chip { font-size: 11.5px; } .coi-page .coi-footer { font-size: 14.5px; } .coi-page .coi-footer h4 { font-size: 14px; } /* Books Home */ .coi-page .coi-proof-strip { font-size: 14.5px; } .coi-page .coi-point__text { font-size: 16.5px; } .coi-page .coi-shelf__title { font-size: 15.5px; } .coi-page .coi-shelf__link { font-size: 13.5px; } .coi-page .coi-trust__copy { font-size: 17px; } /* Bookstore */ .coi-page .coi-trust-row__item { font-size: 14.5px; } .coi-page .coi-pill { font-size: 14px; } .coi-page .coi-sort { font-size: 14px; } .coi-page .coi-sort select { font-size: 14px; } .coi-page .coi-product__title { font-size: 17px; } .coi-page .coi-product__desc { font-size: 14.5px; } .coi-page .coi-product__price { font-size: 24px; } .coi-page .coi-product__stock { font-size: 13px; } .coi-page .coi-product__badge { font-size: 11px; } .coi-page .coi-bulk-banner p { font-size: 15.5px; } /* For Mothers */ .coi-page .coi-step h3 { font-size: 17px; } .coi-page .coi-step p { font-size: 15px; } .coi-page .coi-step__num { font-size: 22px; } .coi-page .coi-pick-card h3 { font-size: 17px; } .coi-page .coi-pick-card p { font-size: 14.5px; } .coi-page .coi-pick-card li { font-size: 14px; } .coi-page .coi-quote-card p { font-size: 15.5px; } .coi-page .coi-quote-card__by { font-size: 13.5px; } .coi-page .coi-quote-card__stars { font-size: 15px; } .coi-page .coi-mom-final p { font-size: 16.5px; } /* For Schools */ .coi-page .coi-why-card h3 { font-size: 16px; } .coi-page .coi-why-card p { font-size: 14px; } .coi-page .coi-pack-card__info h3 { font-size: 18px; } .coi-page .coi-pack-card__info p { font-size: 14.5px; } .coi-page .coi-pack-card__price .amount { font-size: 26px; } .coi-page .coi-pack-card__price .note { font-size: 13px; } .coi-page .coi-form-card > p { font-size: 14.5px; } .coi-page .coi-form-field label { font-size: 13.5px; } .coi-page .coi-form-field input, .coi-page .coi-form-field select { font-size: 15.5px; } .coi-page .coi-form-divider { font-size: 13.5px; } .coi-page .coi-school-trust__item p { font-size: 14.5px; } /* Generic paragraph/list fallback inside COI sections (covers anything missed, without touching headings, chips, or buttons). */ .coi-page section p:not([class]), .coi-page section li:not([class]) { font-size: 16px; }