/*
* M2 — Course grid.
*
* The card markup emitted by edublink-child/woocommerce/content-product.php
* deliberately reuses the parent theme's own course classes
* (.edublink-single-course.course-style-1), so the bulk of the styling already
* comes from edublink/assets/css/main.css and matches
* https://demo.edublink.co/courses/?course_preset=1 out of the box.
*
* This file only corrects the two things that differ because the source data is
* WooCommerce products rather than LearnPress courses:
* 1. product images have mixed aspect ratios (the demo ships uniform 590x430);
* 2. cards therefore end up at different heights and the grid looks ragged.
*
* Scope: every rule is namespaced under .ollie-course-card so nothing here can
* reach the book/shop cards or the single product page.
*/
/* --- 1. Equal-height cards ------------------------------------------------ */
.ollie-course-card {
display: flex;
margin-bottom: 30px;
}
.ollie-course-card > .edublink-single-course {
display: flex;
flex-direction: column;
width: 100%;
}
.ollie-course-card > .edublink-single-course > .inner {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.ollie-course-card .edublink-single-course > .inner > .content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
/* Push the meta row to the bottom so prices and meta line up across a row. */
.ollie-course-card .edublink-single-course > .inner > .content > .course-meta {
margin-top: auto;
}
/* --- 2. Uniform thumbnails ------------------------------------------------ */
/*
* Every course preview is pre-composed at exactly 590x430 — the size the
* EduBlink demo ships (measured: naturalWidth/naturalHeight of all eight grid
* images is 590x430, and the reference cards at
* https://demo.edublink.co/courses/?course_preset=1 measure 590x430 as well).
* The thumbnail box keeps that same 590/430 ratio, so `cover` fills the frame
* edge to edge exactly like the demo and crops nothing: the measured overflow
* of the covered image against its box is 0.00px horizontally and 0.01px
* vertically at 1440 — sub-pixel rounding only.
*
* This used to be `contain`, from when the artwork was a mix of landscape
* scenes and near-square cut-outs and cropping decapitated the elephant. That
* constraint is gone now that the previews share one target ratio; `cover` is
* kept as the safer rule for any future image that does not.
*/
.ollie-course-card .thumbnail .course-thumb {
display: block;
background-color: #ffffff;
}
.ollie-course-card .thumbnail .course-thumb img {
width: 100%;
height: auto;
aspect-ratio: 590 / 430;
object-fit: cover;
object-position: center;
}
/*
* The parent theme paints a permanent rgba(0,0,0,0.2) tint over every
* `.thumbnail a::after` (main.css ~L8829). Re-checked after the switch to
* `cover`, because the tint is part of the reference design (the demo's own
* cards compute to `rgba(0, 0, 0, 0.2)`), and the original reason for killing
* it — it greyed the white letterbox bars left by `contain` — no longer holds.
*
* Kept transparent anyway, on the artwork rather than on the rule: the demo's
* thumbnails are photographs, where 20% black reads as depth. Ollie's previews
* are flat vector illustrations on near-white mint backgrounds, where the same
* layer just desaturates the whole card into grey (compare
* docs/screenshots/m2-polish/fix-grid-after-cover-1440.png with
* fix-grid-rejected-cover-with-theme-overlay-1440.png). Nothing functional is
* lost: in
* course-style-1 the theme's hover effect is a transform on the ![]()
* (main.css ~L9193), not a change to this pseudo-element.
*/
.ollie-course-card .thumbnail .course-thumb::after {
background-color: transparent;
}
/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
.ollie-course-card .thumbnail .course-thumb img {
height: 270px;
}
}
/* --- 3. Price ------------------------------------------------------------- */
/*
* WooCommerce wraps the amount in its own markup; strip the strikethrough
* spacing quirks and keep the theme's course price typography.
*/
.ollie-course-card .course-price .woocommerce-Price-amount {
color: inherit;
font: inherit;
}
.ollie-course-card .course-price del {
margin-right: 8px;
opacity: 0.6;
}
.ollie-course-card .course-price ins {
background: none;
text-decoration: none;
}
/* --- 4. Long titles ------------------------------------------------------- */
.ollie-course-card .title {
overflow-wrap: anywhere;
}
/* --- 5. Never let the grid push the page sideways -------------------------- */
/*
* NB: do NOT put `max-width: 100%` on .products.edublink-archive-products.
* That row is a Bootstrap-style row with -15px side margins that live inside
* the container's padding; clamping it to 100% removes the right-hand negative
* margin only, which pulls the whole grid 30px off-centre inside its column.
* The row does not overflow the page — the container padding absorbs it — as
* the measurements in docs/screenshots/m2-polish confirm.
*/
.ollie-course-card,
.ollie-course-card * {
max-width: 100%;
}
/* --- 6. Mobile ------------------------------------------------------------ */
@media (max-width: 575px) {
.ollie-course-card {
margin-bottom: 24px;
}
}
/* --- 7. "Free" / "Price coming soon" -------------------------------------- */
/*
* A zero-priced course reads "Free" and an unpriced one "Price coming soon" —
* the same wording the single course page uses. Both reuse the theme's course
* price typography (inherited from .course-item-price) so nothing looks bolted
* on; only the "coming soon" line is toned down, because it is a status, not a
* price.
*/
.ollie-course-card .course-price .ollie-course-card__price-free {
color: inherit;
}
.ollie-course-card .course-price .ollie-course-card__price-tba {
font-size: 15px;
font-weight: var(--edublink-p-medium, 500);
color: var(--edublink-color-body);
opacity: 0.85;
}
/* --- 8. Course level badge ------------------------------------------------ */
/*
* ONE definition for both places the level is shown — the card in the grid and
* the chip row on the single course page (m2-single-course.css only positions
* it there; the look lives here). Both templates print the same
* `.ollie-level.ollie-level--` pair, so the badge is literally the same
* object on both pages.
*
* Why it needed fixing: the theme's own `.course-level` is an inline-block, but
* section 1 above turns the card's `.content` into a flex column, and a flex
* item stretches — so the badge grew to the full card width (measured 310px of
* a 360px content box) and read as a banner rather than as a label.
* `align-self` + `width: fit-content` put it back on its content.
*
* Text was sitting closer to the top edge than the bottom (measured ~5px top /
* ~6.6px bottom on the grid card). Two separate causes, both fixed here:
*
* 1. `display: inline-flex; align-items: center;` on this rule was never
* actually winning inside the card. The theme's own
* `.edublink-single-course .content .course-level` also declares
* `display: inline-block` at higher specificity (3 classes vs. this rule's
* 1), so the badge rendered as a blockified inline-block flex item and
* `align-items: center` had nothing to act on — vertical position came
* entirely from line-height leading instead. The override block below now
* restates `display`/`align-items` at 4-class specificity so this rule's
* flex centering actually applies everywhere the badge is used.
* 2. Even where the flex centering *did* apply (the single-course chip), a
* ~0.6px residual remained: `line-height: 1.2` adds extra leading around
* the text, and that leading is not guaranteed to split dead-even above
* and below the glyphs for every font/size pair. `line-height: 1` removes
* the extra leading altogether, so there is nothing left to mis-split —
* flex centering then places the tight text box in the exact middle of
* the padding box, and it stays centred for any text length (including a
* wrap to two lines, since `align-items: center` re-centres whatever the
* content's height turns out to be).
*
* Colour is keyed off the level slug, with the neutral base as the fallback for
* any value the client invents later. The scale walks from the brand mint
* (first steps) through green and amber to periwinkle (hardest), and "All
* levels" stays deliberately neutral because it is not a step on that scale.
* Every pair is >= 4.5:1 on its own background.
*/
.ollie-level {
--ollie-level-bg: #eef1f6;
--ollie-level-ink: #46566a;
--ollie-level-line: #dbe1ea;
align-self: flex-start;
background-color: var(--ollie-level-bg);
border: 1px solid var(--ollie-level-line);
border-radius: 999px;
color: var(--ollie-level-ink);
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
padding: 6px 12px;
text-transform: capitalize;
white-space: nowrap;
width: -moz-fit-content;
width: fit-content;
}
/* Brand mint — the very first step. */
.ollie-level--absolute-beginner {
--ollie-level-bg: #e6f7f3;
--ollie-level-ink: #0d7361;
--ollie-level-line: #bde8de;
}
.ollie-level--beginner {
--ollie-level-bg: #e8f6ea;
--ollie-level-ink: #2a7038;
--ollie-level-line: #c8e6cd;
}
.ollie-level--elementary {
--ollie-level-bg: #fdf2dd;
--ollie-level-ink: #8a5b12;
--ollie-level-line: #f3ddb4;
}
.ollie-level--intermediate {
--ollie-level-bg: #eaeefc;
--ollie-level-ink: #38489b;
--ollie-level-line: #d2daf6;
}
.ollie-level--advanced {
--ollie-level-bg: #f7eaf2;
--ollie-level-ink: #8b3568;
--ollie-level-line: #eed2e3;
}
/* "All levels" is not a difficulty step — keep it on the neutral base. */
.ollie-level--all-levels {
--ollie-level-bg: #eef1f6;
--ollie-level-ink: #46566a;
--ollie-level-line: #dbe1ea;
}
/*
* The theme sets its own font-family/size — and crucially `display:
* inline-block` — on `.content .course-level`. That selector beats the base
* `.ollie-level` rule above on specificity (3 classes vs. 1), so `display`
* and `align-items` have to be restated here too, at 4-class specificity,
* or the badge quietly falls back to being a plain inline-block and the
* optical-centring fix above never actually applies inside the card.
*
* The card uses the theme's "Spartan" heading font for this badge (the single
* course page's chip uses "Poppins" instead, via the theme's body font, and
* needed no further correction). Even with `line-height: 1` and flex
* centring, Spartan at 13px still measured a flat 1px low — 5px above the
* glyphs, 6px below (Range-measured, both viewports, every level tested) —
* which means the font's own ascent/descent are not split evenly around its
* em box. That is a fixed property of the typeface at this size, not
* something that varies with text length, so it is safe to correct with a
* one-time 0.5px padding shift rather than fight it with line-height tricks;
* total vertical padding (12px) and therefore badge height is unchanged.
*/
.ollie-course-card .edublink-single-course .content .ollie-level {
background-color: var(--ollie-level-bg);
border-radius: 999px;
color: var(--ollie-level-ink);
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 600;
line-height: 1;
margin-bottom: 14px;
padding: 6.5px 12px 5.5px;
}
/*
* Hover panel: the theme paints it in solid brand teal and flips the text to
* white, so a tinted badge would disappear into it. Solid white plate, level
* colour kept in the text — same badge, adapted to a dark ground.
*/
.ollie-course-card .edublink-single-course .course-hover-content .content .ollie-level {
background-color: #ffffff;
border-color: #ffffff;
color: var(--ollie-level-ink);
}
/* Narrow cards: let a long value wrap rather than push the card sideways. */
@media (max-width: 479px) {
.ollie-level {
white-space: normal;
}
}
/* --- 9. Grid chrome: search box, result count, pagination, empty state ----- */
/*
* Markup emitted by [ollie_course_grid] (see edublink-child/functions.php).
* The search field and the count row reuse the theme's own classes, so this
* section only handles layout — nothing here restyles the theme's components.
*/
/* Count on the left, search on the right — same row, as in the theme demo. */
.ollie-course-grid__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px 20px;
margin-bottom: 30px;
}
/* Accent the numbers the way the demo does ("Showing 1–9 Of 62 Results"). */
.ollie-course-grid__num {
color: var(--edublink-color-primary);
}
/* Own line under the count. The extra `.ollie-course-grid` on the selector is
* deliberate: the theme resets text-decoration on every . */
.ollie-course-grid .ollie-course-grid__reset {
display: block;
margin-top: 6px;
font-size: 14px;
text-decoration: underline;
}
/*
* The theme's search widget is designed as a full-width hero field (70px tall,
* heavy drop shadow). Inside the toolbar row it has to read as a control, not
* as a banner — hence the smaller box. Everything else (colours, icon, focus
* behaviour) still comes from edublink-core-main.css.
*/
.ollie-course-grid__search {
flex: 0 1 345px;
max-width: 100%;
}
/* The widget's inner wrapper shrink-wraps by default; make it fill the slot
* so the field's right edge lines up with the last card in the row. */
.ollie-course-grid__search .edublink-course-search,
.ollie-course-grid__search form {
width: 100%;
}
/* The theme makes the search