/* ========================================================================== Elken Africa — product detail page Built section by section from the Figma product template ("Product - Health & Wellness - Spirulina", node 18:822). Section names match Figma: Hero Banner, Quick Nip, What it is, Nutritional Highlights, How it may help, Tablets, Award Winning, Award Winning & Certified, Buy Now. Each product sets its own accent on the , exactly as Spirulina uses green. The accents come from the Elken palette, not from new colours. ========================================================================== */ .pd { --pd-accent: var(--ek-aqua); /* on light grounds */ --pd-accent-dark: var(--ek-aqua); /* on the deep hero ground */ --pd-deep: var(--ek-blue); --pd-ink: var(--ek-charcoal); /* The soft bloom behind light sections. Defaults to the accent; a product whose pack carries a second colour can set it without touching the accent. */ --pd-glow: var(--pd-accent); } /* Each family carries one accent, in two tunings: one that clears 4.5:1 against white for small text, one that clears 3:1 against the deep hero ground for the headline. Same colour, different ground — never two different colours. */ .pd--beauty { --pd-accent: #B5457F; --pd-accent-dark: var(--ek-pink); --pd-deep: #4A1E3C; } .pd--water { --pd-accent: var(--ek-aqua); --pd-accent-dark: var(--ek-aqua); --pd-deep: #10224F; } .pd--wellness { --pd-accent: var(--ek-aqua); --pd-accent-dark: var(--ek-aqua); --pd-deep: #0D1B33; } /* Deep Vital Blue lightened until a 15px eyebrow clears 4.5:1 on white and a 60px headline clears 3:1 on the deep ground — the same derivation used for beauty, which darkened Radiant Bloom Pink for the opposite reason. */ .pd--health { --pd-accent: #696CC9; --pd-accent-dark: #8C8FDA; --pd-deep: #171A46; } /* --pd-accent is for light grounds, --pd-accent-dark for dark ones. Anything sitting on --pd-deep or on the charcoal buy band uses the dark tuning; get this wrong and a muted product accent disappears into its own ground. ========================================================================== */ /* Sec - Hero Banner -------------------------------------------------------- */ .pd-hero { position: relative; min-height: 841px; display: flex; align-items: center; overflow: hidden; } .pd-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .pd-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,10,18,.62) 0%, rgba(6,10,18,.34) 46%, rgba(6,10,18,.58) 100%); } .pd-hero__inner { position: relative; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; display: grid; grid-template-columns: 1fr 556px; align-items: center; gap: var(--ek-56); padding-block: 150px 130px; } /* The breadcrumb hangs off the section, not off .pd-hero__inner. The inner is flex-centred, so `top` measured from it drifted with the length of the copy — on a short page the crumb slid into the middle of the hero. Measured from the section it is 104px from the top on every product page. */ .pd-hero__crumb { position: absolute; top: 104px; z-index: 2; left: 50%; transform: translateX(-50%); width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); } .pd-hero__crumb .ek-breadcrumb { margin: 0; color: rgba(255,255,255,.72); } .pd-hero__crumb .ek-breadcrumb a { color: rgba(255,255,255,.72); } .pd-hero__crumb .ek-breadcrumb a:hover { color: var(--ek-white); } .pd-hero__shot { display: flex; align-items: center; justify-content: center; } /* The cut-outs are trimmed to the product, so their widths differ wildly while their heights do not. Size on HEIGHT and every product reads at the same scale; size on width and a slim tube would tower over a boxed pack. */ /* Sized on height so a slim tube does not tower over a boxed pack — but the height has to be a MAXIMUM, not a fixed value. With `height: 560px` and `max-width: 100%`, the moment the column is narrower than the pack wants (El Marino Yang is 1100x900, so it asks for 684px at 560 tall) the width clamps while the height does not, and the product is squashed sideways. Both axes auto with both maxima set keeps the intrinsic ratio; every pack on the site is taller than 560px natively, so the desktop size is unchanged. `object-fit: contain` is insurance in case a fixed height ever returns. */ /* --pd-shot-scale is set per product on from the product's real height in millimetres (see SHOT_REF_MM / SHOT_K in build_product.py). Without it a 350-tablet jar renders exactly as large as a whole-house water filter, which is what got the Spirulina hero called out. Default 1 so a product without the key is unaffected. */ .pd-hero__shot img { height: auto; max-height: calc(560px * var(--pd-shot-scale, 1)); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); } .pd-hero__title { margin: 0; color: var(--ek-white); font-weight: 700; line-height: 1.34; } .pd-hero__title .t-light { display: block; font-size: 40px; font-style: italic; font-weight: 500; line-height: 1.1; } .pd-hero__title .t-big { font-size: 52px; line-height: 1.34; } .pd-hero__title .t-em { font-style: italic; font-weight: 500; } .pd-hero__title .t-accent { color: var(--pd-accent-dark); } /* The carousel dots are Radiant Bloom Pink site-wide; on a product hero they follow the family accent so the hero reads as one colour, not two. */ .pd-hero__foot .ek-dots button[aria-selected="true"] { background: var(--pd-accent-dark); } .pd-hero__sub { margin-top: 12px; max-width: 595px; font-size: 16px; font-weight: 500; line-height: 1.7; color: rgba(255,255,255,.92); } .pd-hero__actions { display: flex; gap: var(--ek-16); margin-top: 32px; flex-wrap: wrap; } .pd-hero__price { display: block; margin-top: 26px; font-size: 33px; font-weight: 700; color: var(--ek-white); } .pd-hero__price small { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); margin-top: 4px; } .pd-hero__foot { position: absolute; left: 0; right: 0; bottom: 74px; display: flex; align-items: center; justify-content: space-between; gap: var(--ek-24); } .pd-hero__codes { font-size: 13px; color: rgba(255,255,255,.6); } @media (max-width: 1199px) { /* The breadcrumb is absolutely positioned on desktop, which is right there: .pd-hero__inner is flex-centred against a tall shot column, so a crumb measured from the inner drifted with the length of the copy. Once the hero stacks, the copy starts at the TOP of the inner and a crumb pinned at 88px lands straight on the product name — reported on mobile on 3 Sep, "Elken" sitting on top of the trail. Below 1200 the crumb therefore goes back into normal flow, above the copy, so it cannot collide however many lines the trail wraps to on a narrow phone. .pd-hero__bg, __veil and __foot are all absolute, so dropping the section out of flex changes nothing else. */ .pd-hero { min-height: 0; display: block; } /* RELATIVE, not static. The base rule carries `z-index: 2`, which is what lifts the crumb above .pd-hero__veil — and z-index does nothing on a static element. Setting `position: static` here dropped the trail behind the veil: the "/" separators still showed, because `opacity: .5` gives them their own stacking context, and the words vanished. `left: auto` because the base rule sets `left: 50%` for the absolute case — and `top: auto`, because the base rule's `top: 104px` does not stop applying on a relative element, it just changes meaning: it stops being "104px from the top of the section" and becomes "shift 104px DOWN from where you sit in the flow", which dropped the trail straight onto the price. */ .pd-hero__crumb { position: relative; top: auto; left: auto; transform: none; margin-inline: auto; padding-top: 96px; } .pd-hero__inner { grid-template-columns: 1fr; padding-block: 22px 120px; gap: var(--ek-32); } .pd-hero__shot { order: 2; } /* Floored, so the smallest pack still has presence once the hero stacks. */ .pd-hero__shot img { max-height: max(210px, calc(360px * var(--pd-shot-scale, 1))); } .pd-hero__title .t-big { font-size: 40px; } .pd-hero__title .t-light { font-size: 30px; } .pd-hero__foot { bottom: 24px; } } @media (max-width: 767px) { .pd-hero__title .t-big { font-size: 32px; } .pd-hero__title .t-light { font-size: 24px; } .pd-hero__foot { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Sec - Quick Nip ---------------------------------------------------------- */ .pd-nip { background: var(--pd-deep); } /* Five items, and they are content-sized, so a wrapping flex row with space-between drops the two that wrap onto row two at the far left and far right with a hole between them. A grid never does that — a short last row simply fills from the left. The single row is kept only where every product's five items genuinely fit: the widest set needs about 1320px of container, so above 1500px viewport they run as one line, and below that they lay out 3 + 2, then 2 + 2 + 1 on tablet, then one per row. Equal columns cannot do the single row at any width — five tracks wide enough for the longest item ("Undenatured type II collagen") would need 1650px. */ .pd-nip__inner { width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; min-height: 125px; display: grid; align-items: center; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px var(--ek-24); padding-block: 24px; } @media (min-width: 1500px) { .pd-nip__inner { display: flex; justify-content: space-between; flex-wrap: wrap; } } @media (max-width: 1199px) { /* Elken BC asked for two balanced columns at this breakpoint rather than a three-column grid with a short second row. */ .pd-nip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pd-nip__item { display: flex; align-items: center; gap: 14px; color: var(--ek-white); } .pd-nip__item svg { flex: 0 0 auto; color: var(--pd-accent-dark); } .pd-nip__item span { font-size: 15px; font-weight: 600; } @media (max-width: 767px) { .pd-nip__inner { grid-template-columns: 1fr; gap: var(--ek-16); } .pd-nip__item span { font-size: 13px; } } /* Sec - What it is --------------------------------------------------------- */ .pd-what { position: relative; display: grid; grid-template-columns: 938px 1fr; min-height: 817px; } .pd-what__left { background: #EAEAE8; } .pd-what__right { background: #F2F2F0; } .pd-what__inner { position: absolute; inset: 0; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; display: grid; grid-template-columns: 375px 1fr; align-items: center; gap: 120px; } .pd-what__copy { display: flex; flex-direction: column; gap: var(--ek-16); } /* The tracks were a rigid 181px, which is narrower than several of the figures actually set in them — "₦30,000" measures about 235px at 52px, so it ran out of its column and off the page. Flexible tracks plus a clamped figure size. */ .pd-what__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 65px 97px; } .pd-stat__value { font-size: clamp(40px, 3.62vw, 52px); font-weight: 700; line-height: 1.1; color: var(--pd-ink); } .pd-stat__key { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-accent); } .pd-stat__note { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ek-body-ink); } .pd-what__shot { position: absolute; left: 45%; top: 50%; transform: translate(-50%, -50%); width: 520px; max-width: 34vw; pointer-events: none; } .pd-what__shot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.18)); } /* Without the pack shot the middle of this band would be a hole. The copy takes the design system's 561 header column and the figures sit in the lighter panel, so the two-tone split becomes the divider. */ .pd-what--noshot { --pd-what-gap: 90px; display: block; min-height: 620px; /* The two-tone split has to land in the gutter between the copy and the figures, and that gutter moves with the centred container. The old fixed 938px column was tuned for the pack-shot variant; here it cut straight through the middle of the figures grid. Painting the split as a background gradient on the section lets it be computed from the same centring maths the inner uses — and percentages in a gradient resolve against the section box, so unlike 100vw they are not thrown off by the scrollbar. */ /* With two equal columns in a centred container the gutter's midpoint is, by definition, the middle of the viewport — and a percentage in a gradient resolves against the section's own box, so no scrollbar correction. */ --pd-what-split: 50%; background: linear-gradient(90deg, #EAEAE8 0 var(--pd-what-split), #F2F2F0 var(--pd-what-split) 100%); } .pd-what--noshot .pd-what__left, .pd-what--noshot .pd-what__right { display: none; } /* The columns are equal so the composition stays 50/50 however wide the screen gets — the old fixed 561px copy column meant the figures took every extra pixel, and by 1920 they visibly outweighed the copy. The content inside each half is capped instead: 561px on the copy so the measure never runs past about 75 characters, 620px on the figures so they stay a block rather than drifting apart. */ .pd-what--noshot .pd-what__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-what-gap); } /* No max-width on the copy and no narrower container for this band. Both were tried and both were wrong: capping the copy stranded it inside a column that kept growing, and giving the band its own 1240px container pulled its left edge off the line every other section on the page starts from. Equal columns in the site container give the 50/50 balance on their own; the copy simply fills its half. */ @media (max-width: 1439px) { .pd-what--noshot { --pd-what-gap: 64px; } .pd-what__inner { gap: var(--ek-56); } .pd-what__stats { gap: 40px 48px; } } @media (max-width: 1199px) { .pd-what--noshot { min-height: 0; background: #EFEFED; } .pd-what--noshot .pd-what__inner { grid-template-columns: 1fr; gap: var(--ek-40); } } @media (max-width: 1199px) { .pd-what { grid-template-columns: 1fr; min-height: 0; background: #EFEFED; } .pd-what__left, .pd-what__right { display: none; } .pd-what__inner { position: static; grid-template-columns: 1fr; gap: var(--ek-40); padding-block: var(--ek-section-pad); } .pd-what__shot { position: static; transform: none; width: 320px; max-width: 70%; margin: 0 auto; } .pd-what__stats { justify-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .pd-stat__value { font-size: 40px; } } @media (max-width: 599px) { .pd-what__stats { grid-template-columns: 1fr; } } /* Sec - Nutritional Highlights --------------------------------------------- */ .pd-highlights { position: relative; overflow: hidden; background: #F7F8F9; padding-block: 130px; } .pd-highlights::before, .pd-highlights::after { content: ""; position: absolute; width: 1598px; height: 1598px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pd-accent) 16%, transparent) 0%, transparent 62%); pointer-events: none; } .pd-highlights::before { right: -420px; top: -800px; } .pd-highlights::after { left: -740px; bottom: -900px; background: radial-gradient(circle, color-mix(in srgb, var(--pd-glow) 16%, transparent) 0%, transparent 62%); } .pd-highlights > .ek-container { position: relative; } .pd-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 100px; } .pd-card { background: var(--ek-white); padding: 39px 32px 44px; display: flex; flex-direction: column; min-height: 333px; } .pd-card__icon { color: var(--pd-accent); line-height: 0; margin-bottom: 126px; } .pd-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--pd-ink); } .pd-card__body { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ek-body-ink); } @media (max-width: 1199px) { .pd-highlights { padding-block: var(--ek-section-pad); } .pd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ek-40); } .pd-card { min-height: 0; padding: 28px 24px 30px; } .pd-card__icon { margin-bottom: var(--ek-32); } } @media (max-width: 599px) { .pd-cards { grid-template-columns: 1fr; } } /* Sec - How it may help ---------------------------------------------------- */ .pd-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 931px; } .pd-help__panel { position: relative; background: var(--pd-deep); overflow: hidden; display: flex; align-items: center; } .pd-help__panel::after { content: ""; position: absolute; right: -520px; bottom: -520px; width: 1294px; height: 1294px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pd-accent) 26%, transparent) 0%, transparent 60%); } /* The left padding has to land on the page's container edge, and the panel is the left half of a full-bleed section — so a percentage here resolves against half the viewport, and `100% - half the container` IS that edge, exactly, with no 100vw and therefore no scrollbar error. It was a flat 255px, which only happened to line up at about 1920 and left the copy indented past everything above it at every smaller width. */ .pd-help__inner { position: relative; max-width: 100%; padding: 130px 120px 130px max(var(--ek-page-pad), 100% - (var(--ek-content-max) / 2)); } .pd-help__eyebrow { font-size: 15px; font-weight: 600; color: var(--pd-accent-dark); } .pd-help__title { margin: 6px 0 0; font-size: 33px; font-weight: 700; line-height: 1.2; color: var(--ek-white); } .pd-help__title .t-accent { color: var(--pd-accent-dark); } .pd-help__lead { margin-top: 22px; max-width: 375px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.8); } .pd-help__list { margin-top: 40px; max-width: 526px; } .pd-help__list li { position: relative; padding: 24px 0 24px 30px; border-top: 1px solid rgba(255,255,255,.14); } .pd-help__list li:first-child { border-top: 0; } .pd-help__list li::before { content: ""; position: absolute; left: 0; top: 30px; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--pd-accent-dark) 62%, transparent); } .pd-help__name { display: block; font-size: 16px; font-weight: 700; color: var(--ek-white); } .pd-help__note { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.8); } .pd-help--short { min-height: 0; } .pd-help__media { background-size: cover; background-position: center; min-height: 360px; } /* A media panel in two layers: photographed backdrop, cut-out subject on top. The subject stands on the ground of the backdrop and is capped by the panel height, so it survives the panel going from tall-and-narrow on desktop to short-and-wide on mobile. Reusable — not tied to any one page. */ .pd-media--layered { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; /* Side inset so a cut-out carrying its own caption pills does not run its labels into the panel seam. */ padding: 40px 44px 0; } .pd-media--layered > img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; } @media (max-width: 1199px) { .pd-media--layered { padding: 32px 32px 0; min-height: 420px; } } @media (max-width: 767px) { .pd-media--layered { padding: 24px 20px 0; min-height: 340px; } } @media (max-width: 1199px) { .pd-help { grid-template-columns: 1fr; min-height: 0; } .pd-help__media { order: -1; height: 320px; } .pd-help__inner { padding: 56px var(--ek-page-pad); } } /* Sec - Tablets / usage ---------------------------------------------------- */ /* No gap above. Elken BC's rule: the usage band sits directly against the section above it on every product page. */ .pd-usage { padding-block: 0 130px; } .pd-usage__grid { display: grid; grid-template-columns: 705px 1fr; gap: 114px; align-items: center; padding-top: 0; } .pd-usage__cards { display: flex; flex-direction: column; gap: 0; } .pd-usage__card { position: relative; height: 269px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-start; padding: 50px; } .pd-usage__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 78%); } .pd-usage__card > * { position: relative; } .pd-usage__who { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-accent); } .pd-usage__dose { margin-top: 4px; font-size: 33px; font-weight: 700; line-height: 1.2; color: var(--pd-ink); } @media (max-width: 1199px) { .pd-usage { padding-block: 0 var(--ek-section-pad); } .pd-usage__grid { grid-template-columns: 1fr; gap: var(--ek-40); } .pd-usage__card { height: 200px; padding: 28px; } .pd-usage__dose { font-size: 27px; } } /* Sec - Award Winning ------------------------------------------------------ */ .pd-awards { padding-bottom: 130px; } .pd-awards__panel { background: var(--ek-white); display: grid; grid-template-columns: 379px 1fr; gap: var(--ek-40); padding: 73px 0 0 50px; align-items: start; } .pd-awards__media { min-height: 353px; background-size: cover; background-position: center; } .pd-certified { display: grid; grid-template-columns: 368px 1fr; } .pd-certified__label { background: var(--pd-deep); color: var(--ek-white); padding: 60px 50px; display: flex; align-items: center; } .pd-certified__label span { font-size: 23px; font-weight: 700; line-height: 1.25; } .pd-certified__marks { background: var(--ek-grey-light); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-40); padding: 46px 60px; } .pd-certified__group h3 { margin: 0 0 20px; font-size: 15px; font-weight: 600; color: var(--pd-ink); } .pd-certified__icons { display: flex; gap: var(--ek-32); align-items: center; color: var(--pd-accent); } @media (max-width: 1199px) { .pd-awards { padding-bottom: var(--ek-section-pad); } .pd-awards__panel { grid-template-columns: 1fr; padding: 32px 24px 0; } .pd-certified { grid-template-columns: 1fr; } .pd-certified__label { padding: 32px 24px; } .pd-certified__marks { grid-template-columns: 1fr; padding: 32px 24px; gap: var(--ek-24); } } /* Sec - Buy Now ------------------------------------------------------------ */ .pd-buy { position: relative; background: var(--ek-charcoal); min-height: 652px; display: flex; align-items: center; overflow: hidden; } /* The pack and the copy are one object, centred in the section together. A grid pins the copy to the container's right edge and leaves a hole on the left, which reads as right-aligned however tight the gap is; a centred flex row keeps the pair optically centred whatever width the product happens to be — and the products vary from a 0.24 ratio tube to a 1.23 ratio box. */ .pd-buy__inner { position: relative; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; display: flex; justify-content: center; align-items: center; gap: 72px; padding-block: 90px; } .pd-buy__shot { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; } .pd-buy__shot img { height: auto; max-height: calc(430px * var(--pd-shot-scale, 1)); width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); } /* Wide enough that the two buttons stay on one line on every product, including the longest CTA ("WhatsApp about El Marino Yang"). */ .pd-buy__copy { flex: 0 1 520px; } .pd-buy__eyebrow { font-size: 15px; font-weight: 600; color: var(--pd-accent-dark); } .pd-buy__title { margin: 6px 0 0; font-size: 33px; font-weight: 700; line-height: 1.2; color: var(--ek-white); } .pd-buy__title .t-accent { color: var(--pd-accent-dark); } .pd-buy__note { margin-top: 22px; max-width: 348px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.66); } .pd-buy__actions { display: flex; gap: var(--ek-16); margin-top: 34px; flex-wrap: wrap; } @media (max-width: 1199px) { .pd-buy { min-height: 0; } .pd-buy__inner { flex-direction: column; padding-block: 56px; gap: var(--ek-32); } .pd-buy__copy { flex: 0 1 auto; max-width: 470px; } .pd-buy__shot img { max-height: max(180px, calc(280px * var(--pd-shot-scale, 1))); } } /* Specification and FAQ on a product page ---------------------------------- */ .pd-spec { padding-block: 130px; background: var(--ek-ground-light); } .pd-spec__grid { display: grid; grid-template-columns: 561px 762px; align-items: start; } @media (max-width: 1439px) { .pd-spec__grid { grid-template-columns: 40% 1fr; column-gap: var(--ek-56); } } @media (max-width: 1023px) { .pd-spec__grid { grid-template-columns: 1fr; row-gap: var(--ek-24); } } @media (max-width: 1199px) { .pd-spec { padding-block: var(--ek-section-pad); } } .pd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1199px) { .pd-cards--3, .pd-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .pd-cards--3, .pd-cards--4 { grid-template-columns: 1fr; } } /* How to take it — card awaiting its photograph */ .pd-usage__card--todo { background: linear-gradient(120deg, #EEF2F5 0%, #E3E9EE 100%); } .pd-usage__card--todo .ek-todo { position: absolute; right: 22px; top: 20px; max-width: 46%; text-align: right; } /* Product FAQ — one centred column ---------------------------------------- Every product page uses this. The column is centred in the content container and the rows are plates, so the block reads as a single deliberate object rather than a full-width list. */ .pd-faq { background: var(--ek-ground-light); } .pd-faq__inner { width: min(760px, 100%); margin-inline: auto; } .pd-faq__title { text-align: center; margin-bottom: 48px; } .pd-faq__list { display: flex; flex-direction: column; gap: 8px; } .pd-faq__item { background: var(--ek-panel-cool); } .pd-faq__item summary { list-style: none; cursor: pointer; position: relative; padding: 24px 30px 24px 58px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ek-blue); transition: color var(--ek-fast) var(--ek-ease); } .pd-faq__item summary::-webkit-details-marker { display: none; } .pd-faq__item summary:hover { color: var(--ek-aqua); } /* Left-hand plus / minus, drawn rather than typed so it stays optically centred */ .pd-faq__item summary::before, .pd-faq__item summary::after { content: ""; position: absolute; left: 28px; top: 50%; width: 13px; height: 2px; background: var(--ek-aqua); transform: translate(-50%, -50%); transition: transform var(--ek-fast) var(--ek-ease), opacity var(--ek-fast) var(--ek-ease); } .pd-faq__item summary::after { transform: translate(-50%, -50%) rotate(90deg); } .pd-faq__item[open] summary::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); } .pd-faq__body { padding: 0 30px 26px 58px; } .pd-faq__body p { font-size: 15px; line-height: 1.7; color: var(--ek-body-ink); } .pd-faq__body p + p { margin-top: var(--ek-12); } @media (max-width: 767px) { .pd-faq__title { margin-bottom: 32px; } .pd-faq__item summary { font-size: 16px; padding: 20px 20px 20px 46px; } .pd-faq__item summary::before, .pd-faq__item summary::after { left: 22px; } .pd-faq__body { padding: 0 20px 22px 46px; } } /* Imagery that has not arrived yet ---------------------------------------- A missing photograph must be visible as a gap in the plan, never as a broken image and never as silence. */ .pd-hero__bg--todo { background: var(--pd-deep); } /* Clear of the overlaid header, which is about 96px tall on this hero. */ /* Top right of the hero: clear of the overlaid header and of the breadcrumb. */ .pd-hero__todo { position: absolute; right: var(--ek-page-pad); top: 124px; z-index: 3; } @media (max-width: 1199px) { .pd-hero__todo { top: 100px; } } .pd-media--todo { display: flex; align-items: center; justify-content: center; padding: 40px; background: linear-gradient(120deg, #EEF2F5 0%, #E3E9EE 100%); } /* ========================================================================== pd-process — the four-step ordering and installation row Elken BC supplied a vertical timeline mock-up and asked for it horizontal, so the steps run as a single row with the connector line behind the number badges rather than down the left edge. The line is one pseudo-element on the list, inset by half a column at each end so it starts and stops under the first and last badge instead of running off into the margins. ========================================================================== */ .pd-process { background: var(--ek-white); padding-block: 118px; } .pd-process__head { text-align: center; max-width: 720px; margin-inline: auto; } .pd-process__head .ek-h2 { margin-top: 10px; } .pd-process__head .ek-h2 .t-accent { color: var(--pd-accent); } .pd-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 84px; list-style: none; padding: 0; } /* The line has to start and stop on the CENTRES of the outer badges. With four equal columns and a 32px gap that is (100% - 3*32px) / 8 from each edge — 12.5% is wrong, because the gaps are not part of the column width. */ .pd-steps::before { content: ""; position: absolute; top: 27px; left: calc((100% - 96px) / 8); right: calc((100% - 96px) / 8); height: 2px; background: #E4E7EA; z-index: 0; } .pd-step { position: relative; z-index: 1; text-align: center; } .pd-step__no { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ek-blue); color: var(--ek-white); font-size: 15px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 10px var(--ek-white); } .pd-step__icon { display: block; margin: 28px auto 0; color: var(--pd-accent); line-height: 0; } .pd-step__title { margin-top: 18px; font-size: var(--ek-h4); font-weight: 700; line-height: 1.25; color: var(--pd-ink); } .pd-step__note { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--pd-accent); font-weight: 600; } @media (max-width: 1199px) { .pd-process { padding-block: var(--ek-section-pad); } .pd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; margin-top: 56px; } .pd-steps::before { display: none; } } @media (max-width: 767px) { /* One column, four rows — and each row keeps exactly the same centred stack as the desktop columns: badge, icon, title, note. An earlier version laid the badge beside the copy to save height; Elken BC asked for the card composition to survive the breakpoint instead. */ .pd-steps { grid-template-columns: 1fr; gap: 52px; } }