/* Theme Name: Medlife Child Theme URI: https://medlifehealthcare.store/ Description: Child theme of Astra for Medlife Healthcare Store. Custom homepage sections built to the approved design. All customisation lives here - the Astra parent is never edited. Author: Medlife Healthcare Template: astra Version: 1.0.0 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: medlife-child */ /* ------------------------------------------------------------------------- * Brand tokens * Single source of truth for colour. Every section references these. * ---------------------------------------------------------------------- */ :root { --ml-cyan: #00AFF0; --ml-cyan-dark: #0098d1; /* * Kept defined although nothing uses it after the flat-button pass. It is * the end stop of the legacy CTA gradient * `linear-gradient(135deg, var(--ml-cyan), #0790CF)`, which was hardcoded in * 11 places; naming it means a future gradient reaches for the value the * design already used instead of inventing a twelfth blue. */ --ml-cyan-gradient-end: #0790CF; /* * COMPONENTS, NOT A COLOUR - use as `rgba(var(--ml-shadow-tint), .95)`. * * A custom property cannot carry a variable alpha, and every one of the 36 * hardcoded uses needed a different one, so this holds the raw channels and * the caller supplies the opacity. That is the whole reason this could not * simply be `--ml-shadow-tint: rgba(0, 145, 205, 0.95)`. */ --ml-shadow-tint: 0, 145, 205; /* * The readable blue. Brand cyan measures 2.50:1 on white and is deliberately * used anyway in four recorded places; THIS is the value for anything that * has to pass - links in prose, focus rings, small accent text. 4.87:1. */ --ml-accent: #0077B6; /* * Body copy. 5.69:1 on white. Distinct from --ml-muted (4.62:1), which is * for secondary text; below that the greys this replaced were failing AA. */ --ml-body: #55697B; --ml-navy: #0A2540; --ml-navy-light: #123356; --ml-charcoal: #373536; --ml-white: #ffffff; --ml-muted: #6b7684; --ml-line: #e3e8ee; /* Promotional accent, used only by the Deal of the Day bar. */ --ml-amber: #f4c74f; --ml-amber-dark: #e0b23a; /* Sale price and sale badge. Only ever painted when is_on_sale() is true. */ --ml-sale: #d64031; /* Pale blue "stage" the nav bar and hero sit on. */ --ml-stage: #e9f4fb; --ml-stage-soft: #f5fafd; /* * MOTION TOKENS - one duration per interaction role, consolidated 2026-09-05. * * Before this the theme carried 23 distinct durations across 277 transitions, * and 187 of them were either 0.18s or 0.2s - the same gesture written two * ways, differing by an imperceptible 0.02s, decided by which file the * component happened to land in. * * Use a token. A new literal duration is drift by definition. */ --ml-t-base: 180ms; /* interaction: hovers, lifts, fills, colour states */ --ml-t-panel: 280ms; /* disclosure: accordions, dropdowns, chevrons */ --ml-t-enter: 420ms; /* entrance: reveals, drops, first paint */ --ml-e-standard: ease; /* everything interactive */ --ml-e-enter: cubic-bezier(0.22, 0.61, 0.36, 1); /* reveals and entrances */ /* * NAMED EXCEPTIONS - deliberately NOT tokenised, because they are their own * thing rather than drift: the 4.2s top-bar marquee and pin float loops, the * 0.62s pin drop, the 0.85s/0.95s long reveals, the per-item `calc()` stagger * delays, and the `0s` visibility swaps that make the accordion's collapsed * content unreachable at the right moment. */ --ml-container: 1360px; --ml-radius: 8px; --ml-font: 'Poppins', ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ------------------------------------------------------------------------- * Blank front page * * The front page carries no post content on purpose - every section is * rendered through theme hooks. Astra still outputs its content wrapper for * the empty page, which would otherwise leave a band of vertical padding * between the last section and the trust strip. * ---------------------------------------------------------------------- */ .home .site-content > .ast-container { padding-top: 0; padding-bottom: 0; } .home #primary { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .home .ast-article-single { padding: 0; border: 0; } .home .entry-content { margin-top: 0; margin-bottom: 0; } /* ------------------------------------------------------------------------- * Product compliance disclaimer * * Appended to product descriptions by the DRAP content pass. Small, muted, * and separated by a rule, so it reads as a regulatory footnote rather than * as the last line of marketing copy. * * Two classes deep on purpose. The description tab's own container carries * `entry-content`, so Astra's `.entry-content p` - specificity (0,1,1) - * outranks a bare `.ml-product-disclaimer` (0,1,0) whatever the load order, * and would supply its own margin and colour. Same trap as the header * search field; see the note in the nav CSS. * * The `em` reset is also deliberate. The markup wraps the sentence in * because the disclaimer is set apart from the body copy semantically, but * a fully italic paragraph at 13px is harder to read than it is emphatic, * so the visual emphasis comes from size and colour instead. * ---------------------------------------------------------------------- */ .ml-product .ml-product-disclaimer, .entry-content .ml-product-disclaimer { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ml-line); color: var(--ml-muted); font-size: 13px; line-height: 1.65; } .ml-product .ml-product-disclaimer em, .entry-content .ml-product-disclaimer em { font-style: normal; } /* ------------------------------------------------------------------------- * Astra's site-wide pagination (.ast-pagination) * * This is a DIFFERENT COMPONENT from the shop pagination, and confusing the * two costs an afternoon - so, plainly: * * shop / product archives ->