@charset "UTF-8"; /*!-------------------------------------------------------------- Archives — Recipes + Healthy Horizons stories ---------------------------------------------------------------- Compiled to stylesheets/archives.css and enqueued after intro-style by northmart_archive_styles() in inc/archives.php. NOTE ON BREAKPOINTS This file deliberately does NOT use the theme's bp() mixin. bp() emits conditions of the form @media (min-width: calc(6 * (3.25rem + clamp(1.5rem, 2.625vw, 2.75rem)) + ...)) and a clamp() containing vw inside a media condition evaluates as TRUE at every viewport width (verified in Chrome down to 200px). 75 of the 88 media queries in the compiled style.css are affected, which is why the existing layouts never step down on tablet/mobile. Fixing bp() itself would change responsive behaviour across the whole site, so it is flagged for Ryan rather than changed here. These px/rem values reproduce the theme's intended column-count breakpoints: $bp-sm ~ bp(6) twoColumn $bp-md ~ bp(8) contentSize $bp-lg ~ bp(12) fullLayout --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Filter bar --------------------------------------------------------------*/ .northmart-archive-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wp--preset--spacing--30); margin-block: var(--wp--preset--spacing--50); } .northmart-archive-filters__label { font-family: var(--wp--custom--typography--font-family--meta); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--primary); } .northmart-archive-filters__list { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; } .northmart-filter-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4em 1em; border: 1px solid var(--wp--preset--color--primary); border-radius: 2em; font-size: var(--wp--preset--font-size--small); line-height: 1.15; text-decoration: none; color: var(--wp--preset--color--primary); background: transparent; transition: 0.2s background ease-in, 0.2s color ease-in, 0.2s border ease-in; } .northmart-filter-pill:hover, .northmart-filter-pill:focus { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); } .northmart-filter-pill.is-active { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); } .northmart-filter-pill__count { font-size: 0.8em; opacity: 0.7; } /*-------------------------------------------------------------- # Card grid --------------------------------------------------------------*/ .northmart-archive-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); margin: 0; padding: 0; list-style: none; } @media (min-width: 30rem) { .northmart-archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60rem) { .northmart-archive-grid { grid-template-columns: repeat(3, 1fr); } } .northmart-archive-grid > li { display: flex; flex-direction: column; margin: 0; } /*-------------------------------------------------------------- # Card --------------------------------------------------------------*/ .northmart-card__media { display: block; position: relative; /* Fixed ratio keeps rows even whether or not a hero image is set. */ aspect-ratio: 3/2; overflow: hidden; border-top-right-radius: 25px; background: var(--wp--preset--color--primary-muted); } .northmart-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .northmart-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--wp--preset--color--primary-muted); color: var(--wp--preset--color--primary); } .northmart-card__placeholder ion-icon { font-size: 3rem; opacity: 0.45; } .northmart-card__meta { display: flex; flex-wrap: wrap; gap: 0.5em 1.25em; font-family: var(--wp--custom--typography--font-family--meta); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--primary); /* Editors have entered some meta with
; keep it on one line in cards. */ } .northmart-card__meta span { display: inline-flex; align-items: center; } .northmart-card__meta br { display: none; } /*-------------------------------------------------------------- # Featured item --------------------------------------------------------------*/ .northmart-featured { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); align-items: center; margin-block: var(--wp--preset--spacing--60); } @media (min-width: 48rem) { .northmart-featured { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); } } .northmart-featured__media { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; border-top-right-radius: 25px; background: var(--wp--preset--color--primary-muted); } .northmart-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .northmart-featured__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .northmart-featured__eyebrow { margin: 0; font-family: var(--wp--custom--typography--font-family--meta); font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--primary); } .northmart-featured__title { margin: 0; font-size: var(--wp--preset--font-size--2xlarge); line-height: 1.15; } .northmart-featured__title a { color: var(--wp--preset--color--primary-dark); text-decoration: none; } .northmart-featured__title a:hover, .northmart-featured__title a:focus { text-decoration: underline; } .northmart-featured__excerpt { margin: 0; } .northmart-featured__cta { margin: 0; } /*-------------------------------------------------------------- # Community list (Success Stories) --------------------------------------------------------------*/ /* * Replaces the two hand-split