/* GENERATED FILE. Do not edit here. Source: _kim/mockups/src/epp-sheet.css Regenerate: python _kim/mockups/port-to-plugin.py Editing this copy directly will be overwritten by the next port and will silently desync the mockup from production. */ /* ENTTEC product pages, epp-* component layer for Kadence-free product bodies. Loaded ONLY on products registered in enttec_product_pages_html_mode_slugs(), so Kadence product pages are untouched. All font sizes are px, never rem: the theme sets html{font-size:10px}. TASK 3 LIFTS THIS FILE VERBATIM into assets/product-pages.css. --------------------------------------------------------------------------- DESIGN DIRECTION (Kim, 2026-07-30). READ THIS BEFORE CHANGING ANY NUMBER. --------------------------------------------------------------------------- The first four rounds of this page were built by MEASURING the live Pixelator Mini Mk2 page and matching its numbers: band colours, column widths, type sizes, table row counts. That produced something structurally faithful and visually dead, because Pixelator Mini Mk2 is a Kadence page and cloning it inherited a mediocre layout without Kadence's excuse for it. The reference is now the PROJECT PAGES design language (wp-content/mu-plugins/enttec-project-pages/assets/project-pages.css), which is the current, Kadence-free, editorial system this site is moving to. This sheet is deliberately its sibling: same palette, same type scale, same sub-nav, same editorial product rows, same closing CTA. Where the two need the same thing they say it the same way, so a reader moving between a project page and a product page reads one site rather than two. DESIGN CONTRACT (do not drift): - Palette is STRICT SCM-SOP-144 brand only. No blue tints/opacities, ever. blue #0ea5df . black #000 . white #fff . dark grey #333 mid grey #4c4c4c . light grey #d9d9d9 - Type mirrors the project pages: h1 Montserrat 67/500 . h2 Montserrat 38/400 . h3 Montserrat 24/500 body Source Sans 21/400 . body colour #4c4c4c h2 at 38px is Kim's 2026-07-30 decision, unchanged. What DID change is the weight: 400, not 600. That single value is most of the difference between "product datasheet" and "editorial page", and it is why the headings now read as the project pages' do. - Band rhythm alternates and never repeats: dark, white, grey, white, dark, white, grey, dark. Five stacked dark bands was the single biggest thing wrong with the previous draft. - NO stat cards, NO accordion-as-content, NO "Features" heading. All three were cut by Kim on 2026-07-30. The accordion survives only where it is a genuine disclosure control (it currently survives nowhere on this page). --------------------------------------------------------------------------- */ /* ======================= VARIABLES (the only literals) ======================= Brand palette pinned locally, exactly as project-pages.css does it, so nothing on the page can reach for an off-brand design-system tint. */ .epp { --epp-blue: #0ea5df; --epp-black: #000000; --epp-dark: #333333; /* brand "dark grey" - the dark bands */ --epp-mid: #4c4c4c; /* brand "mid grey" - body text on white */ --epp-light: #d9d9d9; /* brand "light grey" - hairlines on light bands */ --epp-grey: #f2f2f2; /* the light grey band */ /* Content measure, copied from the theme's --container-max-width rather than invented, so every section lines up with the live product page beside it. Ours was a flat 1500px cap, which at 1440 gave a 1425px band against the live product pages' 1345px: every section ran 80px wider than its neighbour. Kim spotted it against OCTO MK3. ALL THREE RUNGS, not just the middle one. The theme steps the gutter down as the screen narrows (main-style.scss :root, breakpoints 1600 and 575). We had pinned only the 80px rung, which is correct at 1440 and wrong at both ends: above 1600 our sections ran 80px wider than the theme's, and at a 390px phone the desktop gutter left a 295px section in a 375px viewport, a 263px reading measure once the padding below is counted. Mirror the ladder instead, and the band matches at every width rather than at one. Keep these in step with main-style.scss. They are a copy, not a reference, because that value is a Sass-compiled theme variable and this sheet is loaded independently of it. */ --eds-container: calc(100% - 160px); /* No second gutter. The design system adds --eds-container-pad INSIDE the max-width, which is right for a page that sets --eds-container to a fixed measure (the DS default is 1760px, a cap with no gutter of its own). Ours is already expressed as a gutter, so the padding was charging for it twice: at 1440 that is a 1265px band against the theme's 1345px, and at 390px it is the difference between 335px and 263px of reading width. The gutter lives in --eds-container alone. */ --eds-container-pad: 0px; /* Split sections: heading alone in a narrow left column, content in a wide right column. 24/76 is the live product page's measured 309/966, used by specifications and resources. */ --epp-split-head: 24fr; --epp-split-body: 76fr; /* Related-products carousel: how many product cards are visible at once, and the gap between them. The slide width is computed from these two, so a future page with a different card count changes one number here rather than a hand-worked percentage in three media queries. */ --epp-carousel-visible: 3; --epp-carousel-gap: var(--eds-gap-card); /* On-dark ink. Values match eds-section--tone-dark so the two layers cannot disagree about what "secondary text on charcoal" means. */ --epp-dark-ink: #ffffff; --epp-dark-body: rgba(255,255,255,0.72); --epp-dark-soft: rgba(255,255,255,0.55); --epp-dark-rule: rgba(255,255,255,0.16); --epp-dark-panel:rgba(255,255,255,0.05); } /* The other two rungs of the theme's gutter ladder (see --eds-container above). Written as max-width queries in the theme's own order so a diff against main-style.scss reads straight across. */ @media screen and (max-width: 1600px) { .epp { --eds-container: calc(100% - 80px); } } @media screen and (max-width: 575px) { .epp { --eds-container: calc(100% - 40px); } } /* ============================== BANDS ============================== Each band sets its ink and rule colours ONCE. Components below read only those variables, never a band-specific colour, which is why the same figure, table, capability tile and gallery markup works on charcoal, on white and on grey without a single "if we are on the light band" override. */ .epp-section--dark { background: var(--epp-dark); --epp-ink: var(--epp-dark-ink); --epp-body-ink: var(--epp-dark-body); --epp-soft-ink: var(--epp-dark-soft); --epp-rule: var(--epp-dark-rule); --epp-panel: var(--epp-dark-panel); } .epp-section--light { background: #ffffff; --epp-ink: var(--epp-black); --epp-body-ink: var(--epp-mid); --epp-soft-ink: var(--epp-mid); --epp-rule: var(--epp-light); --epp-panel: var(--epp-grey); } /* #d9d9d9, the brand "light grey", measured off the related-products band at the foot of every prod product page. NOT --epp-grey (#f2f2f2): that is the paler page-grey band, and Kim asked for the grey the products section actually uses on prod. --epp-rule has to move with it, because it normally IS #d9d9d9 and a hairline the same colour as its background is no hairline at all. */ .epp-section--grey { background: var(--epp-light); --epp-ink: var(--epp-black); --epp-body-ink: var(--epp-mid); --epp-soft-ink: var(--epp-mid); --epp-rule: #c2c2c2; --epp-panel: #ffffff; } /* ======================= THE THEME'S BANNER AND SUMMARY ======================= The banner image, h1, breadcrumb, short description, SKU and "Contact an Expert" button are printed by the THEME, above and outside our article, so they are the one part of this page we restyle from the outside rather than author. They are scoped to .product-details-top, which exists only on a single-product template, and this sheet only loads on html-mode products. Left alone, the theme sets the h1 at its own size and weight and the page opens on a different type system to the one the body uses two hundred pixels further down. Matching the project-page h1 here is what makes the banner and the article read as one page. */ .product-details-top h1 { font-family: var(--enttec-font-display); font-weight: 500; font-size: clamp(40px, 6vw, 67px); line-height: 1.1; letter-spacing: normal; text-transform: none; margin: 0 0 18px; } .product-details-top .woocommerce-product-details__short-description p { font-family: var(--enttec-font-body); font-size: clamp(17px, 1.5vw, 21px); /* 60ch, not 46ch. This paragraph is the widest thing in .product-info-area and a flex item that shrinks to its content, so its max-width is what sets the whole summary column's width. At 46ch (412px) the ELM HUB opener wrapped to five lines; 58ch is where it drops to four, and 60ch (537px) keeps a line's worth of slack for copy edits and font fallbacks. The theme caps the column at 570px, so this stays inside the theme's own limit and nothing overflows the band. Measured at 1440; narrower viewports are bound by the column, not by this value. */ font-weight: 400; line-height: 1.5; max-width: 60ch; margin: 0 0 26px; } /* "CONTACT AN EXPERT" TOP MARGIN IS DELIBERATELY NOT SET HERE (Kim, 2026-08-21). There used to be an override on `body.ecp-enabled .product-details-top .contact_us_btn.contact_an_expert` pinning this button's margin-top. It is gone: the button now takes whatever contact-popup.css gives it, which is the single place that styles this button. HISTORY, so nobody re-adds it by reflex. The override was born to cancel a sitewide `.contact_us_btn.contact_an_expert { margin-top: 20px }` in main-style.css, which stacked with the short description's own 26px bottom margin and read as "detached" (46px, rejected 2026-08-11). It was then found not to be applying at all, because contact-popup.css's own `body.ecp-enabled .contact_us_btn.contact_an_expert` is (0,3,1) and beat the (0,3,0) selector; matching the element took it to (0,4,1) and the gap to ~1px (2026-08-12). It briefly carried 14px on 2026-08-21 before being removed as unnecessary. The paragraph's own bottom margin is still zeroed by the rule below, so the remaining separation is the button's margin from contact-popup.css plus its 12px top padding. MEASURING NOTE: .product-info-area is `display: flex; flex-direction: column` with explicit `order` on its children, so DOM order is NOT visual order and previousElementSibling is the wrong tool. Read the computed `order` and compare rendered `top` values instead. */ /* ...and drop the paragraph's own bottom margin, which is the entire remaining gap. Zeroing the button's margin-top above took the space from 36px to 27px, and the 27 left is the short description paragraph's 26px, inherited from the theme. Kim 2026-08-12: "i think you just needed to remove the margin-bottom on .product-details-top .woocommerce-product-details__short-description p". Measured after: 1px, so the only separation left is the button's own 12px top padding, which is what stops it reading as attached to the sentence. `p` rather than `p:last-child` on purpose. ELM HUB's description is a single paragraph, and this sheet loads for html-mode slugs only, which today is ELM HUB alone. If a description here ever gains a SECOND paragraph, this will jam the two together and it should become p:last-child then, not now. NOT SCOPED TO body.ecp-enabled, unlike the button rule above, and that difference is deliberate (Kim 2026-08-14). The button rule needs that class only to outrank the composer's own margin-top; nothing but the theme sets this paragraph's bottom margin, so (0,2,1) already wins on its own. Scoping it meant the gap came back whenever the composer was inactive, which is exactly how it was found: the composer stopped registering, ecp-enabled fell off the body, and 26px reappeared under the short description on a page nobody had changed. A spacing rule should not depend on whether an unrelated dialog is present. */ .product-details-top .woocommerce-product-details__short-description p { margin-bottom: 0; } /* The banner render is composed on brand dark grey (see build-elm-hub-banner.py), so the band it sits in must be that same grey or a seam shows at whatever height the theme's object-fit:cover crops to. */ .product-details-top .banner-image { background: var(--epp-dark); } /* BANNER HEIGHT. The theme gives the banner 100vh, and the summary block (breadcrumb, h1, short description, button) ends at about 70% of it, so on a 900px window there are 264px of empty dark band before the sub-nav, and on a taller screen there is more. Capping at 700px removes the dead space without crowding the summary. TWO THINGS MAKE THIS FIDDLY, both worth knowing before touching it: 1. The height lives on .product-details-top, NOT on the image. The image is position:absolute with height:100%, and .banner-image itself computes to 0px, so setting a height on either of those two does nothing useful. 2. The theme's own rule is body.single-product.newLookEnabled .product-details-top img at (0,3,1), which OUTRANKS a plain .product-details-top .banner-image img at (0,2,1). It also sets object-position: center top. Anchoring the top means a shorter box crops off the BOTTOM of the source, which would cut the base of the unit off (it occupies y 197-740 of the 900px composition). Centred, the crop takes an equal slice from each end and the unit is untouched. 3. The cap is MAX-HEIGHT, not height, and that is the point rather than a workaround. The theme owns `height: 100vh` at (0,3,1) and there is no beating that from (0,2,1) without either chaining .newLookEnabled (which rots the moment the theme renames it) or repeating a class purely for specificity. max-height is a property the theme never sets, so it applies uncontested, AND it says what we actually mean: keep the theme's responsive 100vh behaviour, just stop it getting taller than it needs to be. The theme's inline min-height (about 542px, set from its own script) is left alone and does not conflict, being well under the cap. Both rules are scoped with body.single-product, a WooCommerce CORE body class rather than a theme invention, so the scope does not rot either. Desktop only: below 1025px the summary block reflows much taller and needs all the height the theme gives it. */ @media (min-width: 1025px) { body.single-product .product-details-top { max-height: 700px; } body.single-product .product-details-top .banner-image img { object-position: 50% 50%; } } /* THE BANNER GOES UNDER THE PRODUCT TEXT ON A PHONE (Kim, 2026-09-03). WHERE THIS APPLIES, AND WHY 575px IS NOT AN INVENTED NUMBER. Above it the banner image is not above anything: .banner-image computes to 0px high and the render is an absolutely positioned backdrop with the summary sitting over it, so there is no order to change. At 575px and below the theme drops the image into the flow as a real 300px block above the summary, and that is the only state where the question exists. Measured across 1440 to 390: the flip happens between 576 and 575, which is the theme's own Bootstrap breakpoint and the same one this sheet already uses further down. WHY IT IS WORTH DOING. On a phone the first screen was 300px of product photo before the visitor reached the product's name, and the photo is the one thing on that screen that answers no question: they arrived from a link that already said what this is. Title, SKU, what it is and Contact an Expert now open the page, and the render follows as support rather than as a toll gate. The 3RU chassis is also the least legible thing at 390px wide, so it loses nothing by moving below the sentence that explains it. ORDER, NOT DOM: .product-details-top is the theme's markup and it is already display:flex/column, so this is two declarations rather than a template override. Explicit values on BOTH children, because the theme leaves them at order:0 and relying on one being unset is how this silently reverts. */ @media screen and (max-width: 575px) { body.single-product .product-details-top .summary { order: 1; } body.single-product .product-details-top .banner-image { order: 2; } /* CLEAR THE HEADER, which the reorder makes necessary and which is the one thing the old order was quietly paying for. The theme's header is a transparent overlay pinned at top 0, not part of the flow, so whatever is first in this band runs underneath it. That was fine while the banner render was first (an image bleeding under a transparent header is the intended look, and the theme relies on it). Now the copy is first, and the breadcrumb landed at y20 inside a header running to y70: "Home / Software / ELM HUB" was drawn straight through the logo. Confirmed with elementFromPoint, which returned the header's own brand element over the breadcrumb's midpoint. 86px total, which is 70 + 16: the header measures 70px at every width from 390 up, and 16 is the smallest gap that does not read as a collision. Those are the S-PLAY banner's numbers (see .epp-banner > .eds-container further down, fixed the same day for the same reason on the same header), reused deliberately so the two pages clear it by the same amount. 66px of MARGIN rather than 86 of padding, for the same reason as the margin-bottom below: the theme owns `padding: 20px` here as a shorthand at (0,5,1) and beats any padding of ours. 66 + the theme's own 20 is 86. */ body.single-product .product-details-top .product-info-area { margin-top: 66px; } /* CLOSE THE DEAD BAND ABOVE THE BANNER (Kim, 2026-09-03: "there's too much gap between the banner and the product description section on mobile view"). Measured: 142px between the button and the first pixel of the product, of which only 30px was spacing. The rest was two things, and neither is a spacing problem: 1. THE THEME PADS THE IMAGE BY 70px at this width (body.single-product.newLookEnabled .product-details-top img, screen and max-width 575px: position:relative; min-height:300px; padding-top:70px). That padding is a HEADER RESERVE. It exists because the banner used to be the first thing in the band and ran under the transparent fixed header. It is now the last thing, and the copy above it carries its own 86px clearance, so the reserve is 70px of empty band and nothing else. 2. THE RENDER WAS UPSCALED TO FILL A TALLER BOX than its own shape. The asset is 1903x1040 (aspect 1.83), so at 390 wide its natural height is 213px; object-fit: cover was blowing it up to 300 and cropping the sides, which magnified the composition's own empty top along with it. THE ASSET WAS MEASURED, not guessed: scanning it row by row, content starts at 11.4% and the bright core of the unit at 23.0%, and both run to 99.9%. So the empty band is the TOP of the composition and the unit's base sits on the bottom edge. That is what makes object-position: 50% 100% the right call rather than a nudge: cover with a box shorter than the scaled image crops the end AWAY from the anchor, so bottom-anchoring takes the crop off the top, which is exactly and only the empty part. The theme's `object-position: top` does the opposite and would cut the unit's base. 180px against a 213px scaled height spends 33px of the 49px empty top and leaves the unit whole. SPECIFICITY, since the theme's rule is (0,3,1) and this has to win: adding .banner-image makes it (0,3,2), three classes each and one more element, so it beats the theme outright without chaining .newLookEnabled, which the banner-height note above warns rots the moment the theme renames it. */ body.single-product .product-details-top .banner-image img { padding-top: 0; min-height: 180px; object-position: 50% 100%; } } /* ============================== BASE ============================== A COMPLETE, SELF-SUFFICIENT baseline for every element this body uses. Why it is spelled out in full instead of as a short list of overrides: ELM HUB is the first product body without Kadence, and the intent is to remove Kadence and the legacy theme CSS entirely. So nothing here may be written as a delta from what those sheets happen to do today. Every declaration states what we want in absolute terms, and the test applied to each was: if Kadence and the theme CSS vanished tomorrow, would this line still be correct, and would it still be needed? No !important is used to win against the theme or Kadence, anywhere. The only !important declarations in this sheet are in the reduced-motion block at the very bottom, overriding OUR OWN transitions, which is the one case where an accessibility preference has to beat every component rule unconditionally. --------------------------------------------------------------------------- WHY EVERY ELEMENT SELECTOR BELOW IS WRAPPED IN :where(.epp) This is the load-bearing detail of the whole block, and it is easy to get backwards. `:where()` matches normally but contributes ZERO to specificity, so `:where(.epp) li` scores as a bare `li` (0,0,1) while still only ever matching inside our article. Without it, `.epp li` would score (0,1,1), HIGHER than a single-class component rule like `.epp-cap` (0,1,0). The baseline would then beat our own components no matter what order they appear in. The first draft did exactly that, and silently stripped the padding off every tile. So the cascade we want is, weakest to strongest: legacy bare-element rules (0,0,1) earlier in the document this baseline (0,0,1) but LAST in , so it wins the tie our epp-* components (0,1,0) and above, so they win outright Never @layer here: unlayered styles beat layered ones outright, so putting this in a layer would hand every property straight back to the theme. --------------------------------------------------------------------------- */ .epp, .epp *, .epp *::before, .epp *::after { box-sizing: border-box; } .epp { font-family: var(--enttec-font-body); color: var(--epp-mid); /* 1.5vw, not 1.4vw. Measured against the live OCTO MK3 page: its body copy is a flat 21px with a 31.5px line box, and at 1440 the old 1.4vw resolved to 20.16px, so this page ran a whole point small next to the thing it is meant to match. 1.5vw hits the 21px ceiling at 1400 and above and still scales down on smaller screens. */ font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; font-weight: 400; font-style: normal; text-align: start; -webkit-font-smoothing: antialiased; width: 100%; margin-inline: 0; } /* Bands run edge to edge. The theme insets `main section`; neutralise that horizontal inset and let .epp fill its wrapper rather than using a 100vw breakout (which mixes vw, counting the scrollbar, with 50%, which does not, and shifts the whole page a scrollbar-width left). */ .epp .epp-section { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; } /* Headings carry no bottom margin except h2's, which the project pages set to 30px. Every other gap on this page comes from a grid gap or an explicit spacing rule, so heading margins would double up and margin collapse would make the result depend on sibling order. */ :where(.epp) h2, :where(.epp) h3, :where(.epp) h4 { font-family: var(--enttec-font-display); color: inherit; margin: 0; padding: 0; text-transform: none; } :where(.epp) h2 { font-weight: 400; line-height: 1.2; letter-spacing: 0; margin: 0 0 30px; } :where(.epp) h3 { font-weight: 500; line-height: 1.25; letter-spacing: 0; } :where(.epp) h4 { font-weight: 600; line-height: 1.3; letter-spacing: 0; font-size: 18px; } /* Heading SIZES are split out at (0,1,1), unlike the appearance rules above. A mobile media query in the minified theme bundle (cross-origin, so its selector cannot even be read from the page) sets h2 to 1.5em and h3 to 1.3em, and it outranks a bare element selector. Left in the baseline, our 38px headings silently collapsed to 24.75px below the theme's breakpoint while looking perfectly correct at 1440. That is why the win-everywhere check has to run at every breakpoint, not just at desktop. */ .epp h2 { font-size: clamp(28px, 4vw, 38px); } .epp h3 { font-size: clamp(20px, 2vw, 24px); } :where(.epp) p { margin: 0 0 1.2em; padding: 0; font-size: inherit; line-height: inherit; color: inherit; } :where(.epp) p:last-child { margin-bottom: 0; } /* Semibold, not bold. 600 against a 400 body is a clear step up without the shouty look 700 gives on Source Sans, and it matches the weight the design system uses for card titles and buttons. Used to pick out the load-bearing phrase in a paragraph (Kim 2026-07-31). Inherits colour deliberately: a highlight that also changed colour would compete with the links. */ :where(.epp) strong, :where(.epp) b { font-weight: 600; color: inherit; } :where(.epp) ul, :where(.epp) ol { margin: 0; padding: 0; list-style: none; } :where(.epp) li { margin: 0; padding: 0; } :where(.epp) a { color: var(--epp-blue); text-decoration: none; background-color: transparent; transition: color .15s var(--eds-ease), text-decoration-color .15s var(--eds-ease); } /* Underline ONLY inside body copy, never on cards, buttons or nav (those are links too and must stay clean), and only on hover. Mirrors the project pages. */ /* Underlined ALWAYS, and hover changes the colour rather than the decoration. Kim, 2026-08-04: "the hover ui on a tags here are weird and not right", and there were two separate causes. Outside the overview the underline was absent until hover, so it POPPED IN under the cursor: 1.5px appearing from nothing at a 3px offset reads as a glitch, not as feedback. Inside the overview it was permanent but hover only shifted its colour by a shade, which most people cannot see. Now hover lifts the text AND its underline to the band's ink colour. --epp-ink is white on the dark bands and near-black on the light ones, so this is legible on every band with no band-specific override, which is the rule the palette section sets out. Colour only: animating text-decoration-thickness janks and is patchily supported. */ /* ONE animated property: color. The underline is drawn in currentColor, so it follows the text automatically and the whole link crossfades as a single smooth change. The previous version transitioned color AND text-decoration-color separately, which is where "this isn't smooth" came from: two properties, two interpolations, and text-decoration-color animates unevenly (Safari in particular treats it as discrete), so the text and its underline arrived at slightly different times. Kim, 2026-08-04. Slower and softer too: 240ms on an ease-out rather than a flat 150ms, which is what makes a colour change read as deliberate instead of as a flicker. */ :where(.epp) p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: currentColor; transition: color .24s cubic-bezier(.2, .6, .2, 1); } :where(.epp) p a:hover { color: var(--epp-ink); } @media (prefers-reduced-motion: reduce) { :where(.epp) p a { transition: none; } } :where(.epp) img { display: block; max-width: 100%; height: auto; border: 0; } :where(.epp) figure, :where(.epp) figcaption { margin: 0; padding: 0; } :where(.epp) button { font-family: var(--enttec-font-body); font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; text-transform: none; text-align: center; margin: 0; background: none; border: 0; border-radius: 0; cursor: pointer; } /* appearance is split out at (0,1,0) because a button rule in the minified theme bundle outranks a bare element selector and was painting platform button chrome over our gallery thumbnails. Raising specificity is the fix rather than an !important, and it stays correct once that bundle is gone. */ .epp button { -webkit-appearance: none; appearance: none; } :where(.epp) table { width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; font-size: inherit; color: inherit; } :where(.epp) th, :where(.epp) td { text-align: left; vertical-align: top; background: none; } /* Anchor jumps clearing the sticky sub-nav is NOT handled here any more. Each section carries data-eds-subnav-target instead, and the design system owns the scroll-margin-top calc (plus the mobile height). Setting it on .epp-section as well would win on source order and silently take the value back. */ .epp-section { color: var(--epp-ink); } .epp-section--dark h2, .epp-section--dark p { color: var(--epp-ink); } /* Buttons keep their design-system label colour inside .epp: the broad `:where(.epp) a` colour rule above must not repaint button text. */ .epp a.eds-btn--primary, .epp a.eds-btn--ghost { color: #fff; } .epp a.eds-btn--outline { color: var(--epp-black); } .epp .epp-section--dark a.eds-btn--outline { color: #fff; } /* An eds-btn that is an ANCHOR loses the design system's transform/background transition to the `a { transition: color }` rule above, because that rule REPLACES the declaration rather than merging with it. Restore the full transition on the anchor form or every link-button on the page snaps instead of lifting. Same trap project-pages.css documents at its line 351. */ .epp a.eds-btn { transition: transform var(--eds-dur) var(--eds-ease), background var(--eds-dur) var(--eds-ease), border-color var(--eds-dur) var(--eds-ease), color var(--eds-dur) var(--eds-ease); } /* Eyebrow: solid brand blue on every band. The design system tints it #5ec9ef on dark, which is an off-brand blue variant we are not allowed to use. */ .epp .eds-eyebrow { color: var(--epp-blue); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; margin: 0 0 var(--eds-space-2xs); } .epp .epp-section--dark .eds-eyebrow { color: var(--epp-blue); } .epp .eds-section-head p { color: var(--epp-body-ink); margin: .5em 0 0; max-width: 68ch; } /* ============================== SUB-NAV ============================== MOVED INTO THE DESIGN SYSTEM, 2026-08-04. The bar is now `.eds-subnav .eds-subnav--bar` with `data-eds-subnav`, and every line that used to live here (the sticky offset that follows the navbar, the centred row that scrolls inside itself, the blue underline growing from the centre) is in enttec-design-system.css under the same heading, with the reasoning intact. Nothing is overridden here, deliberately. When this page's bar and the project pages' bar were compared they turned out identical down to the rgba, so there was no page-specific skin to keep: --epp-dark-body is rgba(255,255,255,.72), --epp-blue is #0ea5df, and the design system's --enttec-blue is the same #0ea5df (the off-brand tint the notes warn about is #5ec9ef, and that is the eyebrow, not this bar). One thing worth keeping in mind if this page ever DOES need its own skin: the theme's own [navigation-shortcode] is still not an option. It parses post_content as blocks and knows only nine hardcoded anchor names, so it renders empty on a hand-authored body. */ /* ============================== SPLIT SECTIONS ============================== Heading alone in a narrow left column, content in a wide right column, at the live product page's measured 309/966. Used by specifications and resources. RESTORED 2026-07-30: an intermediate draft moved these to the project pages' 0.85/1.15, which is right for a project page (where the left column carries a sentence-long statement) and wrong here (where it carries one word). */ .epp-split { display: grid; grid-template-columns: minmax(0, var(--epp-split-head)) minmax(0, var(--epp-split-body)); gap: var(--eds-space-lg); align-items: start; } /* minmax(0, 1fr), NOT 1fr. "1fr" is shorthand for minmax(auto, 1fr), and that auto MINIMUM refuses to shrink below the column's min-content, so a single unshrinkable child ends up setting the width of the entire section. The desktop rule directly above already guards against this with minmax(0, ...); this mobile override silently dropped the guard. Measured on the test box 2026-08-24 at 390px: the Specifications track came out 708px inside a 257px container, which clipped the spec table mid-row and drew a scrollbar straight through the middle of it. The spec-index chip row was the child doing it, proved by setting display:none on that nav and watching the track fall to 260px. Note .epp-specidx already carries a min-width:0 with a comment calling it load-bearing, and that comment is right about the mechanism but the declaration is on the wrong element: the grid ITEM is .epp-split__head, so the nav's max-content still reached the track through it. Resources uses the same split and overflowed too, by 26px at 320px, so this one line was breaking two sections. */ @media (max-width: 900px) { .epp-split { grid-template-columns: minmax(0, 1fr); gap: var(--eds-space-md); } } .epp-split__body { display: flex; flex-direction: column; gap: var(--eds-space-lg); } /* ============================== OVERVIEW ============================== Two equal columns: marketing statement plus lead on the left, the rest of the prose on the right. This is the live product page's own overview layout, and it is also exactly what Kim described on 2026-07-30: "there should be a marketing subtitle not the word Overview, then on the right column, that's where the rest of the text should be." --eds-space-md, not -lg: the real page's two columns sum to 1305 of the 1345 available, so its gutter is 40px. -lg (72px here) would miss the measurement. */ .epp-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eds-space-md); align-items: start; } @media (max-width: 900px) { .epp-overview { grid-template-columns: 1fr; } } .epp-overview__head h2 { margin-bottom: 0; } /* ONE size for the whole right column, and no size-up lead paragraph. Kim 2026-07-31: "we need to make the right section the same font size". The emphasis now comes from semibold runs and links inside the prose, which is the better instrument anyway: a bigger first paragraph tells you where to start reading, while semibold tells you what actually matters, and only the second of those survives a reader who skims. */ /* Pure white, not the 72% --epp-body-ink this used. Prod's overview copy is rgb(255,255,255) on its #2f2f2f band; the softer ink is kept everywhere else on the page, where prod also uses a grey (its resource rows are #808080). Matching per band beats one global choice. */ .epp-overview__body p { color: #ffffff; } /* Overview links: blue and CLEAN at rest, underline on hover and on keyboard focus. Kim 2026-08-11, replacing the permanently-underlined treatment. The underline is declared at rest and merely painted TRANSPARENT, rather than flipped from `none` to `underline` on hover. text-decoration-LINE is not an animatable property, so the flip would snap; text-decoration-COLOR is, so this fades in and matches the sheet's other hover transitions. It also means the text never reflows on hover, which a line added from nothing can cause. :focus-visible carries the same underline as :hover, so a keyboard user gets the cue a mouse user gets. Do not drop it to save a selector. ACCESSIBILITY NOTE, deliberately accepted rather than overlooked. The paragraph ink here is pure #fff and the brand blue is #0ea5df, which is 2.8:1 against it. WCAG technique G183 wants 3:1 between link and body text when colour is the only resting difference. We are marginally under, and the palette allows no lighter blue to close it. What keeps this defensible is that the non-colour cue still exists on hover AND focus; the resting state is the compromise. If this ever needs to pass strictly, the fix is a lighter blue in the brand palette, not a tint invented here. THE COLOUR IS PINNED BLUE THROUGH BOTH STATES, which is a deliberate local departure from the sheet's own body-link convention a few hundred lines up (`:where(.epp) p a:hover { color: var(--epp-ink) }`, i.e. hover goes white on a dark band). That convention exists because those links are underlined at rest, so colour is free to be the hover cue. Here the underline IS the hover cue, and letting the colour go white as well would mean a link that stops looking like a link at the exact moment it is being pointed at. One cue per state change. */ .epp-overview__body a { color: var(--epp-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: transparent; transition: text-decoration-color var(--eds-dur-fast) var(--eds-ease); } .epp-overview__body a:hover, .epp-overview__body a:focus-visible { color: var(--epp-blue); text-decoration-color: var(--epp-blue); } /* ============================== HARDWARE ============================== Gallery left, accordion right, at the live product page's measured 598/677 (47:53 of the 1273px left after the gap). minmax(0,...) on both tracks so neither child can force the grid wider than its container. RESTORED 2026-07-30 along with the accordion: an intermediate draft replaced this with prose-plus-gallery and a tile grid, which reads as a project page. */ /* SAME GEOMETRY AS THE OVERVIEW. Kim 2026-08-11 asked for the two sections to align. They were out by 23px, and the cause was two different grids: the Overview is 50/50 with an --eds-space-md gap, this was 47/53 with the larger --eds-space-lg. Matching both values means the accordion and the paragraph above it share a left edge by construction rather than by a magic number, so changing one section's gap can never drift them apart again. The gallery gains a little width from the change, which suits it. */ .epp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eds-space-md); align-items: start; } @media (max-width: 980px) { .epp-features { grid-template-columns: 1fr; gap: var(--eds-space-md); } } /* Accordion: the design system's eds-accordion, re-inked from the band variables so the same markup works on charcoal, white and grey. TYPE MEASURED OFF PROD, 2026-08-06 (Kim: the resources toggle "needs to match the current prod webpage"). Reference is the DMX USB PRO resources accordion on AE prod at 1440, which is the same component in the same place on a published page: prod ours before title 24px / 400 18px / 600 header height 65px 63px vertical padding 20px 18px So the weight was the loudest error, not the size: 600 on a 24px Montserrat title reads as a heading competing with the section's own h2, and prod's 400 is deliberately quieter. 20px top and bottom against a 24px line box is what makes prod's 65px header, so the height falls out of the padding rather than being set. The design system stays at 18px/600, which is right for its other consumers; this is a page-level override, not a change to the component. */ .epp-accordion details { border-color: var(--epp-rule); } /* 28px OF AIR, NOT 20. Kim 2026-08-06: the features section "needs more spacing as it doesn't look premium when it's bundled up like that", and she is describing a real thing. Five 24px titles at 20px padding are five 65px bands separated by nothing but a hairline: the rows touch, so the eye reads one dense block rather than five separate answers, and density is the opposite of what a 3RU rack unit at this price should feel like on the page. 28 makes an 80px row. That is the only number changed, because the space BETWEEN two rows here is just the padding of the two rows either side of the rule, so widening the padding widens the gap and keeps the hairline where it belongs, centred in the space it divides. Adding margins instead would have detached each rule from the rows it separates. The Resources accordion opts back out below: Kim asked for that one to match prod, and prod's header is 65px. */ .epp-accordion summary { font-size: 24px; font-weight: 400; line-height: 1; padding-top: 28px; padding-bottom: 28px; color: var(--epp-ink); } /* No hover colour on the label. See the hover block near the foot of this file for why: recolouring large light text on a dark band reads as a weight change. The hover signal lives on the hairline and the chevron instead. */ /* Chevron scaled to the bigger title. The design system draws a 10px box for its own 18px type; left there it reads as an afterthought under a 24px title, and prod's own trigger is a 24px glyph. padding-right stays the system's 36px rather than prod's 10px: prod's chevron is a flex sibling that reserves its own room, ours is an absolutely positioned pseudo-element, so the text needs the padding to keep clear of it. */ .epp-accordion summary::after { width: 12px; height: 12px; border-right-width: 2px; border-bottom-width: 2px; border-right-color: var(--epp-soft-ink); border-bottom-color: var(--epp-soft-ink); } .epp-accordion summary:hover::after { border-right-color: var(--epp-blue); border-bottom-color: var(--epp-blue); } /* The open pane gets the same treatment: 32px below the paragraph rather than 20, so the text is not sitting on the rule that closes it off. Combined with the summary's 28px above, an open pane now has real margins on both sides of its content instead of being wedged between two lines. */ .epp-accordion .eds-accordion__body { color: var(--epp-body-ink); font-size: 16.5px; padding-bottom: 32px; } /* ============ FEATURES ON MOBILE: BLOCKS, NOT AN ACCORDION ============ Below 981px .epp-features drops to one column, which stacks the gallery ABOVE the panes rather than beside them. That is what makes the desktop behaviour impossible here: a pane that re-frames the stage would be animating a picture the visitor scrolled past several hundred pixels ago, so the coupling is switched off (featuresSideBySide() in product-pages.js) and the strongest thing this section does simply stopped existing on a phone. So mobile stops being an accordion. Every pane is open, and the panes that name a region of the hardware carry their own crop of it, which is the same argument the desktop zoom makes, made in the one layout that can still make it: the picture and the words in a single eyeful. Why opening all five is not a regression. NN/g's finding is that accordions earn their place when the visitor wants ONE section, and that showing everything is better when most of the content is relevant, even at the cost of a longer page. An integrator specifying a permanent install reads most of these five. The section roughly doubles in height, and that is the trade: scrolling is cheap on a phone, tapping is not. FORCING THEM OPEN IS NOT `open`. The panes are a native radio group via their shared `name`, so the browser closes every one but the last no matter how many carry the attribute (measured: five marked open, one actually open). ::details-content is the pane's own content box, so overriding its content-visibility reveals a collapsed pane without touching either the attribute or the grouping. The desktop markup and the desktop exclusivity are both left exactly as they are. The @supports is load-bearing rather than defensive padding. ::details-content reached Baseline in September 2025 (Chrome 131, Firefox 143, Safari 18.4), and anything older falls through to the accordion it has today, which is a working section rather than a broken one. Deliberately NOT touched here: the thumbnail strip. It is the only visible affordance on touch that there are five images at all, and its wrapping is already a documented decision further down this file. ====================================================================== */ @media (max-width: 980px) { @supports selector(::details-content) { .epp-features .epp-accordion details::details-content { content-visibility: visible; block-size: auto; } } /* THE `.epp` PREFIX IS LOAD-BEARING, not habit. The rule that puts the hairline on the summary and sets its 18px padding is `.epp .epp-accordion summary` further down this file, which is the same specificity as `.epp-features .epp-accordion summary` and comes later, so it would win on order alone. Matching its shape here decides the cascade explicitly instead of leaving it to whichever rule happens to sit lower in the file. The summary stops being a control and becomes the block's heading: no chevron, no pointer, and pointer-events:none so a tap cannot collapse the block it labels. Left as a rather than swapped for an

because the element is shared with desktop, where it is still the trigger. */ .epp .epp-features .epp-accordion summary { font-size: 21px; font-weight: 600; line-height: 1.25; padding: 0 0 10px; cursor: default; pointer-events: none; /* THE HAIRLINE COMES OFF THE HEADING HERE. On a collapsing pane it sits between the heading and its content and does useful work, which is why it was moved onto the summary on 2026-08-11. On a block that never collapses it separates a heading from its own picture, which reads as the picture belonging to whatever comes next. */ border-bottom: 0; } .epp .epp-features .epp-accordion summary::after { display: none; } /* One rule BETWEEN blocks rather than under each. With nothing left to collapse, a border under the last block would draw a line closing off a section that has already ended. */ .epp .epp-features .epp-accordion details { padding-bottom: 30px; } .epp .epp-features .epp-accordion details + details { border-top: 1px solid var(--epp-rule); padding-top: 30px; } /* The 14px of air under the summary's rule has no rule to clear any more, and the summary's own 10px is the gap between the heading and its picture. */ .epp .epp-features .epp-accordion .eds-accordion__body { padding-top: 0; padding-bottom: 0; } } /* THE PER-PANE FIGURE. Hidden on desktop, where the stage already does this job by pushing in on the same region. A background rather than an because the crop is a ZOOM, not a fit: background-size and background-position say "260% of the box, held on the point 33.5% across and 44% down" in two values, where an would need a wrapper and a transform to say the same thing. The numbers are the same framing as the pane's own data-epp-gallery-focus, and they sit on the same element so the two cannot drift apart unnoticed. The file is one the gallery above has already fetched, so the block costs no extra request. */ .epp-pane-fig { display: none; } @media (max-width: 980px) { .epp-pane-fig { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 16px; background-color: var(--epp-panel); background-repeat: no-repeat; background-size: var(--epp-fig-size, contain); background-position: var(--epp-fig-pos, center); border-radius: 4px; } } /* ---- STATUS SCREENS INSIDE A PANE (ELM HUB front monitor) ---------------- Two screenshots of the same screen in two states, side by side inside an accordion pane. Added 2026-09-14 (Kim), who asked for them in the pane and side by side rather than in a band of their own. THE SIZE IS THE TRADE, and it is worth writing down because it looks like a mistake otherwise. The pane is one column of the two-column .epp-features grid, so on a 1440 laptop the column is about 650px and each screenshot renders near 318px, roughly a third of its natural 992px. At that size the red fault block reads as a fault and the status chips read as status, but the message text does not. That is why each figure carries data-epp-zoom (the shared lightbox, 768px and up) AND why the captions state in words what the screen says. The image shows the shape of the thing; the caption carries the content. Do not enlarge these by breaking them out of the column. STACKS BELOW 600px. Side by side is Kim's call and it holds everywhere it can, but at 390px two columns put each screen at 163px, 16% of natural, which is a colour smear rather than a picture. One column at that width gives about 335px, which matches what the desktop pair gets. */ .epp-panescreens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eds-space-xs); margin-top: var(--eds-space-sm); } @media (max-width: 600px) { .epp-panescreens { grid-template-columns: 1fr; } } .epp-panescreens figure { margin: 0; } .epp-panescreens img { display: block; width: 100%; height: auto; border-radius: var(--eds-radius-sm); /* The plate. These are screenshots of a black UI on a charcoal panel, so without a visible edge the two merge into one slab and neither reads as a display. Deliberately brighter than --epp-rule, which disappears against pure black. */ background: #000; border: 1px solid rgba(255, 255, 255, 0.18); } .epp-panescreens figcaption { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--epp-soft-ink); } /* ================== MOBILE TYPE AND TAP-TARGET PASS ================== Measured on ELM HUB at 390px, not eyeballed. Every number below is a value that was read off the rendered page and compared against two floors: 44px for anything standalone that gets tapped, and 16px for anything that is read as body copy rather than as fine print. Consolidated into one block on purpose. These are eight small corrections across five components, and spread through the file as eight separate media queries they would be impossible to review as one decision or to revert as one. NOT CHANGED, and worth writing down so it is not "fixed" later by someone measuring the same thing: - Section rhythm. #software sits at 44px where the other bands sit at 60px, and that is .epp-section--tight doing its job on an inset band, not drift. - The thumbnail strip. At 390px it wraps 3 + 2, which is exactly what the comment on .epp-gallery__thumb intends. An earlier reading of "4 + 1 with an orphan" was taken at a different width and was wrong. - Horizontal overflow. There is none: the document and the viewport both measure 375px. The wide boxes an audit script flags are carousel cells inside their own overflow:hidden viewports, which is the design. ===================================================================== */ @media (max-width: 980px) { /* LINE-HEIGHT 1 IS ONLY SAFE WHILE A TITLE FITS ON ONE LINE. The accordion title is 24px Montserrat at line-height 24px, which is fine on desktop where every one of them is a single line, and collides with itself on a phone where three of the five wrap. Features already reads 21px/1.25 from the block above; this is the same correction for the Resources accordion, which is the other consumer and was left behind. `.epp .epp-accordion summary` (0,2,1) rather than a bare `.epp-accordion summary` (0,1,1), because a media query adds no specificity of its own and the 24px declaration would otherwise still win. Same lesson as the th[scope="row"] note further down this file. */ .epp .epp-accordion summary { font-size: 21px; line-height: 1.25; } /* THE 44px FLOOR, for the three standalone targets that were under it. Measured: the pane link 257x25, the specs search field 300x40, the related card's "View product" 14px in a box under 44px tall. Inline links inside a paragraph are deliberately excluded, they are not standalone targets and padding them out would break the line box they sit in. */ .epp .epp-accordion__link a, .epp .epp-swlink, .epp .eds-card__cta { min-height: 44px; } .epp .epp-specs-search__input { min-height: 44px; padding-block: 11px; } /* BODY COPY TO 16px. The related-product excerpt is real body copy at 15px, and the page already concedes the point: .epp--splay .epp-related .eds-card__excerpt was bumped to 16px page-locally further down this file. This does it for every product page instead of one, on mobile only, where the 16px floor actually applies. */ .epp .eds-card__excerpt { font-size: 16px; line-height: 1.6; } .epp .eds-card__cta { font-size: 15px; } /* FINE PRINT STAYS FINE PRINT, just not this fine. These three are captions and labels rather than body copy, so they stay subordinate; they were simply at or under the 12px floor with a 16.5px paragraph next to them. th[scope="row"] is matched at its own weight per the note further down: the stacked spec label was 13px sitting above its own 16.5px value, which reads as the label being the less important half of a pair it introduces. */ .epp .epp-gallery__caption { font-size: 15px; line-height: 1.5; } .epp .epp-specs th[scope="row"] { font-size: 14px; } /* THE TAG IS IN THESE TWO SELECTORS BECAUSE THIS BLOCK LOSES WITHOUT IT. Both of these components are declared LATER in this file than this block, at the same specificity, and a media query adds none of its own: measured, .epp-swmeta stayed at 12px and the figcaption at 28px until the element name took each of them to (0,2,2). Written this way rather than by moving the block to the foot of the file, so all eight corrections stay reviewable as one decision. Third time this file's cascade has caught a mobile override; the rule of thumb is that an earlier block needs to out-specify, never just restate. */ .epp p.epp-swmeta { font-size: 13px; } /* THE DIAGRAM LABEL. clamp(28px, 4vw, 38px) bottoms out at its 28px floor on a phone, so "Connectivity diagram" renders at the same size as the page's h2s and louder than anything it labels. It stays a figcaption and stays centred; it just stops out-shouting the section headings. */ .epp figure.epp-figure--cap-top figcaption { font-size: 22px; } } /* THE RESOURCES MEASURE, 500px. Measured on prod: the accordion is width:500px in a 966px column, left-aligned, so roughly half the column is deliberately empty. Ours filled the full 967px column, which is the "width" and "side" Kim flagged. A cap rather than a column change, so the heading stays on the same 24/76 split as specifications and the section keeps its alignment with the rest of the page. At narrow widths the column is already under 500px and the cap simply stops applying. */ /* Condensed measure, restored 2026-08-11. Matching Features meant inheriting its full-width column, and four short download rows across 836px left the download icon stranded a long way from its label. The width is the ONLY thing that differs now; the summary padding, type and motion all still come from the shared component, which is what Kim actually wanted matched. */ .epp-accordion--resources { max-width: 560px; } /* ONE LINE UNDER THE SUMMARY, NOT TWO. Kim 2026-08-11: 18px top and bottom, with a border-bottom that must not read as a 2px rule. The doubling is why it looked wrong: the design system already draws a border on
, so adding one to puts two hairlines flush against each other on a closed pane and they render as a single heavier line. The line moves ONTO the summary and comes OFF the details, so there is exactly one either way, and on an open pane it now sits between the heading and its content, which is where it does useful work. */ .epp-accordion details { border-bottom: 0; } .epp .epp-accordion summary { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--epp-rule); } /* Air under the rule. Kim 2026-08-11: the first row sat directly against the summary's border, so the line read as the row's own top edge rather than as the boundary of the heading above it. */ .epp-accordion .eds-accordion__body { padding-top: 14px; } /* MATCHES THE FEATURES ACCORDION. Kim 2026-08-11: "the ui for the toggle section doesnt match the toggle section on the features section and i prefer the one in the features section". Both were already the same eds-accordion component; this modifier was what made them differ. It capped the width at 500px and squeezed the summary to 20px, giving a narrow, tighter accordion sitting beside a full-width one two sections up. Dropping both overrides means Resources simply inherits the component, so the two are the same object and cannot drift again. This supersedes the earlier "the width much smaller" (2026-07-31) and the match to the live DMX USB PRO page: matching Features internally beats matching a page we are replacing. */ /* THE SECTION DOES NOT CHANGE HEIGHT WHEN YOU SWITCH PANE. Kim 2026-08-06: "make sure the resources main section height doesn't move or change based on the content inside it". The four panes hold one, two, three and two rows, so every toggle used to grow or shrink the section and shove the whole page below it up or down. The row you were reaching for moved out from under the cursor, which is the most annoying possible failure of a list of links. THE HEIGHT IS ON THE SECTION. Not on the panel, and not on the accordion either. Kim 2026-08-06: "give the section a height, not the toggle a height". The toggle keeps NO height of its own, so every pane is exactly as tall as its own rows and each toggle sits directly under the content above it. The spare room ends up at the foot of the section, where there is nothing to separate and it reads as the section's own padding. Anything lower down puts the spare room inside the list. Reserving the PANEL was the first attempt and it opened a hole between a one-row pane and the next toggle ("why is there a gap between the toggle options, it looks really bad"). Reserving the ACCORDION moved that hole to the bottom of the accordion, which is better but still hands a fixed height to a component whose whole job is to be the size of its content. The section is the thing that must not move, so the section is the thing that gets the height. The number is MEASURED, not typed in. epp-behaviour.js opens each pane once at load and records the tallest the section ever gets. A hardcoded min-height would be a number that silently stops being true the first time somebody adds a data sheet, and nobody would notice until the layout jumped again. The fallback is 0, so with no JS the section behaves exactly as it did before: it resizes, which is honest, rather than reserving a guessed gap. */ .epp-section[data-epp-reserved] { min-height: var(--epp-section-reserve, 0px); } /* Open/close motion. Native
cannot animate its own height, so the panel fades and lifts in instead. Gated on .epp-js so a page without script never holds content at opacity 0, and killed outright under reduced motion. */ .epp-js .epp-accordion details[open] .epp-accordion__panel { animation: epp-panel-in var(--eds-dur) var(--eds-ease) both; } @keyframes epp-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ======================= CAPABILITY TILES ======================= Replaces BOTH things Kim cut on 2026-07-30: the four stat cards ("32,768 universes per protocol") and the eight-pane feature accordion. Why one component for both: the stat cards and the accordion panes were the same content type (a short labelled fact) wearing two different costumes, one of which hid seven of its eight items behind a click for no reason. There is no disclosure problem to solve here, the content is short, so it is simply shown. The blue rule is the only ornament, borrowed from nothing: it is the same 3px blue bar the design system uses to mark a section start, reused at tile scale so the grid reads as a set. */ .epp-caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eds-space-lg); } @media (max-width: 900px) { .epp-caps { grid-template-columns: 1fr; gap: var(--eds-space-md); } } .epp-cap { margin: 0; } .epp-cap::before { content: ""; display: block; width: 44px; height: 3px; background: var(--epp-blue); border-radius: 2px; margin-bottom: var(--eds-space-xs); } .epp-cap h3 { margin: 0 0 8px; } /* Tile body copy is a step DOWN from the 21px page body: at 21px, six tiles three across become six columns of running text competing with each other, and the h3s stop reading as headings. */ .epp p.epp-cap__text { font-size: 16.5px; line-height: 1.55; color: var(--epp-body-ink); margin: 0; } /* ==================== SOFTWARE: THE SIGNAL CHAIN ==================== Kim 2026-08-11. Replaces the lead-block-plus-tile-row treatment on the English ELM HUB body with a three-step walkthrough of what ELM does. The reasoning lives on the markup in products/elm-hub.php; the short version is that a tile grid can list capabilities but cannot explain a product, because a grid has no reading order and "what is this thing" is a sequence. NOTE, and this is why the .epp-swlead and .epp-caps rules below still exist: elm-hub.CN.php has NOT been ported yet, because its copy is translated and the new structure carries new sentences. Until it is, the two bodies render this section differently and BOTH sets of rules are live. Delete the old block only in the same change that ports the Chinese body. */ /* The spine is a 2px track with a blue fill scaled from the top by scroll progress. transform:scaleY animates on the compositor; animating height would lay out the whole section on every scroll frame. */ .epp-chain { position: relative; } .epp-chain__spine { position: absolute; left: 23px; top: 8px; bottom: 96px; width: 2px; background: var(--epp-rule); } .epp-chain__spine i { position: absolute; inset: 0; background: var(--epp-blue); transform: scaleY(0); transform-origin: top; transition: transform .1s linear; } .epp-chain__step { position: relative; padding: 0 0 clamp(48px, 5vw, 76px) 74px; } .epp-chain__num { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--epp-dark); border: 2px solid var(--epp-rule); font-family: var(--enttec-font-display); font-weight: 600; font-size: 17px; color: var(--epp-soft-ink); transition: border-color var(--eds-dur) var(--eds-ease), color var(--eds-dur) var(--eds-ease), background var(--eds-dur) var(--eds-ease), transform var(--eds-dur) var(--eds-ease); } /* The lit state is colour and fill, never motion alone: with reduced motion on, the blue disc is still what marks where you are. */ .epp-chain__step.epp-lit .epp-chain__num { border-color: var(--epp-blue); color: #fff; background: var(--epp-blue); transform: scale(1.06); } .epp-chain__step h3 { margin: 0 0 12px; } .epp p.epp-chain__lede { color: var(--epp-body-ink); font-size: clamp(17px, 1.35vw, 20px); max-width: 62ch; margin: 0 0 24px; } /* align-items:START, not center. The left column (stat, label, chips) is much shorter than the 16:10 image beside it, so centring floated the stat about 130px below the paragraph it belongs to and the step read as two unrelated halves. Top-aligned, the stat sits directly under its own lede. */ .epp-chain__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 3vw, 44px); align-items: start; } @media (max-width: 900px) { .epp-chain__grid { grid-template-columns: 1fr; } } /* Fixed ratio because the three source images are 768x456, 742x800 and 1920x1080. Left to their natural shapes the steps sit at three different heights and the spine reads as uneven. */ .epp-chain__media { border-radius: var(--eds-radius); overflow: hidden; border: 1px solid var(--epp-rule); aspect-ratio: 16 / 10; background: #222; } .epp-chain__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--eds-dur-slow) var(--eds-ease); } .epp-chain__media:hover img { transform: scale(1.03); } /* One number per step, grafted from direction C. Prose gives a skimmer nothing, and this is the section a skimmer most needs to land on. tabular-nums so the count-up does not jitter the line width as the digits change. */ .epp p.epp-chain__stat { font-family: var(--enttec-font-display); font-weight: 600; line-height: 1; font-size: clamp(34px, 3.6vw, 46px); color: var(--epp-blue); margin: 0 0 10px; font-variant-numeric: tabular-nums; } .epp .epp-chain__stat span { font-size: .5em; color: var(--epp-ink); font-weight: 500; } .epp p.epp-chain__statlabel { color: var(--epp-body-ink); font-size: 15.5px; line-height: 1.5; margin: 0 0 20px; max-width: 40ch; } .epp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .epp-chips li { margin: 0; font-size: 13.5px; color: var(--epp-body-ink); border: 1px solid var(--epp-rule); border-radius: var(--enttec-radius-pill); padding: 6px 14px; transition: border-color var(--eds-dur) var(--eds-ease), color var(--eds-dur) var(--eds-ease), transform var(--eds-dur) var(--eds-ease); } .epp-chips li:hover { border-color: var(--epp-blue); color: #fff; transform: translateY(-2px); } .epp-chain__out { margin: clamp(40px, 4vw, 56px) 0 0 74px; padding: 26px 28px; border: 1px solid var(--epp-rule); border-radius: var(--eds-radius); background: var(--epp-panel); } .epp .epp-chain__out h4 { font-size: 17px; font-weight: 600; margin: 0 0 6px; } .epp .epp-chain__out p { font-size: 15.5px; color: var(--epp-body-ink); margin: 0; } .epp p.epp-chain__licence { margin: clamp(40px, 4vw, 60px) 0 0; padding-top: 26px; border-top: 1px solid var(--epp-rule); color: var(--epp-soft-ink); font-size: 15.5px; max-width: 84ch; } .epp .epp-chain__licence strong { color: #fff; } /* The spine needs a gutter to live in. Below 620px there is none, so it goes and the numeral sits above its heading instead of beside it. */ @media (max-width: 900px) { .epp-chain__step { padding-left: 64px; } .epp-chain__out { margin-left: 64px; } .epp-chain__spine { left: 18px; } } @media (max-width: 620px) { .epp-chain__step { padding-left: 0; padding-top: 62px; } .epp-chain__out { margin-left: 0; } .epp-chain__spine { display: none; } } /* ==================== SOFTWARE LEAD BLOCK ==================== Direction A from _kim/mockups/software-section-directions.html, chosen by Kim 2026-07-31. One capability at full size with its image beside it, then the supporting four as a quiet row underneath (.epp-caps--4). Left-aligned, unlike the centred two-up it replaces. Centring was most of why that version was hard to look at: with no common left edge the eye has to find the start of every block on its own, and the section reads slower than the ones above and below it. */ /* NO RULE UNDER THE CLAIM. Kim 2026-08-11. The three blue rules over the proof row already draw the boundary a line here was drawing, so the grey one was a second divider doing the first one's job, and it cut the claim off from the evidence that belongs to it. The gap alone separates them. */ /* align-items: start, not center. Both columns now carry a stack of their own (copy, explainer, link, licence on the left; picture then the figures on the right), so centring them against each other left the shorter one floating in the middle of the taller one's height with a gap above and below. Top-aligned they start on the same line, which is the only alignment a reader can see. */ .epp-swlead { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-bottom: 0; } .epp-swlead__copy h3 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; margin: 0 0 18px; text-wrap: balance; } .epp-swlead__copy p { color: var(--epp-body-ink); font-size: 19px; max-width: 52ch; } /* The lead image is a photograph with its own dark background and a baked-in award badge, so it takes a plain rounded frame and no panel fill: a tinted panel behind a full-bleed photo just shows as a rim. CAPPED AT 520px. Kim 2026-08-06 on the source file: "this is too big". At the 1.15fr column it filled 681px and stood 405px tall next to 198px of copy, so a supporting illustration was twice the height of the point it was supporting and won the section. 520 brings it to about 309px, close enough to the text block that the two read as a pair. margin-left: auto is the load-bearing half of this. Shrinking the image inside its column would otherwise pull its right edge in off the container, and this photo's right edge is what lines up with the gallery, the accordions and every other block on the page. Capping it and pushing it right keeps that line. */ /* THE FRAME MOVED TO THE IMAGE. This column is no longer just a picture: the three figures sit under it now, and a border with overflow:hidden around the whole column would have drawn a box around both and clipped nothing useful. border-radius on the img clips the photograph on its own. */ .epp-swlead__media { max-width: 520px; margin-left: auto; width: 100%; } .epp-swlead__media img { display: block; width: 100%; height: auto; border-radius: var(--eds-radius); border: 1px solid var(--epp-rule); } /* THE FIGURES, as evidence under the picture rather than three headline columns. Kim 2026-08-11 picked this arrangement (option 2 of _kim/mockups/elm-hub/elm-section-positioning.html) because two columns doing two different jobs, "what it is" on the left and "here is the proof" on the right, is the arrangement least likely to read as mesh. The number column is a fixed 96px rather than auto: with auto, "32,768", "100+" and "1TB" each set their own width and the three descriptions started at three different places, which is exactly the ragged look the section was being redesigned away from. A fixed column gives the descriptions one edge. */ .epp-swfacts { list-style: none; margin: var(--eds-space-md) 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .09); } .epp-swfacts li { display: flex; gap: 18px; align-items: baseline; padding: 15px 0; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); } .epp-swfacts b { flex: 0 0 96px; font-family: var(--enttec-font-display); font-weight: 400; font-size: 19px; letter-spacing: -.01em; color: var(--epp-ink); } .epp-swfacts span { font-size: 15px; line-height: 1.5; color: var(--epp-soft-ink); min-width: 0; } /* The explainer and the argument. 19px for the explainer because it is the one paragraph on this page a reader who does not know what ELM is has to get through, and 17px for the argument under it, so the two read in order rather than as one 90-word block. */ /* 65ch, Kim 2026-08-11. Worth knowing where this actually bites: on desktop it does not. The two-column grid gives the copy about 406px, which is narrower than either cap, so the column is what sets the measure and the ch value is only a ceiling. It takes effect below 1000px, where the grid collapses to one column and the paragraphs would otherwise run the full band. */ /* 22px, not 18px (2026-08-14). Every other gap in this column is 22px, so the lede was the one element sitting on its own value and the rhythm stuttered just above the Sentry paragraph. These classes are used by elm-hub{,.CN,.RU} and nothing else, so the change is contained to this page. */ .epp .epp-swlede { font-size: 19px; line-height: 1.62; color: var(--epp-body-ink); max-width: 65ch; margin: 0 0 22px; } .epp .epp-swpara { font-size: 17px; line-height: 1.68; color: var(--epp-body-ink); max-width: 65ch; margin: 0 0 22px; } .epp .epp-swlede strong, .epp .epp-swpara strong { color: var(--epp-ink); font-weight: 500; } /* One column below 1000px, where the image is the full measure and the cap would leave it stranded against the left edge with a hole beside it. */ @media (max-width: 1000px) { .epp-swlead { grid-template-columns: 1fr; } .epp-swlead__media { max-width: none; margin-left: 0; } } /* Four across for the supporting row. Steps to two then one rather than squeezing four columns of two-word lines. */ .epp-caps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--eds-space-md); } @media (max-width: 1000px) { .epp-caps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .epp-caps--4 { grid-template-columns: 1fr; } } /* Supporting tiles are a step down from the lead: 17px against the lead's 19px, and the heading drops to 18px. They are there to be scanned, not read. */ .epp-caps--4 .epp-cap h3 { font-size: 18px; font-weight: 600; } .epp .epp-caps--4 .epp-cap__text { font-size: 15.5px; } /* Three across, for a row of proofs rather than a row of features. Kim 2026-08-10 chose option C of _kim/mockups/elm-hub/elm-section-options.html, which trades the four-capability list for three one-line proofs. No two-column halfway state, unlike --4. Three single-line proofs at two across leave one alone on the second row, and a lone tile under a pair reads as a missing fourth item rather than as a set of three. THE MEDIA QUERY IS NOT OPTIONAL, and inheriting the base one does not work. .epp-caps collapses to a single column at 900px, but that rule and this one are both (0,1,0) and this one is further down the sheet, so it wins even inside the narrower viewport. Without the override below, a 390px phone renders three 90px columns of wrapped text. Caught on the ELM HUB page 2026-08-10; the same trap is why --4 declares its own steps. */ .epp-caps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eds-space-lg); } @media (max-width: 900px) { .epp-caps--3 { grid-template-columns: 1fr; gap: var(--eds-space-md); } } .epp-caps--3 .epp-cap h3 { font-size: 20px; font-weight: 500; } /* Proof-row variant. The 44px blue stub grows into a full-width 2px rule over each column, which is what turns three tiles into one banded row: the eye gets three equal starts on the same line instead of three floating blocks. Kept as a modifier on .epp-cap rather than a new component, so the stub, the heading scale and the body size all still come from one place. */ /* NO BLUE RULE IN THIS SECTION. Kim 2026-08-11: "it actually looks weird here". The full-width version was drawn when the proofs were bordered cards on a near-black band and needed a top edge to sit under. On the plain charcoal band there is nothing for it to cap, and three heavy blue lines across the section were louder than the numbers they were introducing. The icon is the column's opening mark now. */ .epp-caps--proof .epp-cap::before { display: none; } /* THE NUMBER BELONGS TO THE PROOF, not to a row of its own. Kim 2026-08-11: "UI-wise it looks bad". The cause was two identical three-column rows stacked, three proofs then three figures, so the same rhythm ran twice with nothing dominant and 85 words floated in 590px of dark. Folding each figure into the proof it evidences leaves ONE row where every column has a hierarchy to climb: rule, number, claim, line. It also promotes the specs a specifier is hunting for (universes, effects, storage) out of the quietest type on the page. Number first, heading second. A numeral stops the eye where a sentence does not, so it earns the top of the column; the heading below it says what the number is evidence OF. */ .epp-cap__stat { display: block; margin: 0 0 10px; } .epp-cap__stat b { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: 1; color: var(--epp-ink); letter-spacing: -.01em; } .epp .epp-cap__stat span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--epp-soft-ink); } /* The claim under a number is a label, not a headline: half a step down from the 20px --3 heading so the number keeps the column. */ .epp-caps--proof .epp-cap h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; } /* The three body lines are written to the SAME character count (65 in English, Kim 2026-08-11), so the columns end together instead of one running a line longer than its neighbours. min-height holds that alignment when a narrow viewport wraps one of them anyway: without it the blue rules stay level but the text below them does not. */ .epp .epp-caps--proof .epp-cap__text { min-height: 3.2em; } /* ==================== PROOF ICONS ==================== Kim 2026-08-11 replaced all three, and each one now says what its column actually measures rather than what its heading loosely implies: 3D cube for 32,768 universes. The proof is about laying a rig out flat or in true 3D, so the mark is the volume, not a flat grid. Sparkles for 100+ effects. A play triangle described PLAYBACK, which is a different claim from having a library of generative effects. Drive for the 1TB SSD. It was a clock, which measured time rather than storage, and storage is the number underneath it. Inline SVG so they inherit currentColor and cost no request. One motion each, transform or opacity only, so nothing can reflow the row. */ .epp-cap__ico { display: block; width: 26px; height: 26px; margin-bottom: 14px; color: var(--epp-blue); overflow: visible; } /* cube: a small tip toward the reader, as though turning in space */ .epp-caps--proof .epp-cap:first-child:hover .epp-cap__ico { transform: rotate(-6deg) scale(1.06); } .epp-caps--proof .epp-cap:first-child .epp-cap__ico { transition: transform .34s var(--eds-ease); } /* sparkles: the two small ones twinkle out of step with each other, which is what makes it read as sparkle rather than as a single pulse */ .epp-cap__spark1, .epp-cap__spark2 { transform-origin: center; transition: transform .3s var(--eds-ease), opacity .3s var(--eds-ease); opacity: .55; } .epp-cap:hover .epp-cap__spark1 { transform: scale(1.3); opacity: 1; transition-delay: .04s; } .epp-cap:hover .epp-cap__spark2 { transform: scale(1.3); opacity: 1; transition-delay: .14s; } .epp-cap__star { transition: transform .3s var(--eds-ease); transform-origin: 12px 9.5px; } .epp-cap:hover .epp-cap__star { transform: scale(1.08); } /* drive: the two activity LEDs light in sequence, the way a disk actually blinks when something is reading from it */ .epp-cap__led, .epp-cap__led2 { transition: opacity .22s var(--eds-ease); opacity: .45; } .epp-cap:hover .epp-cap__led { opacity: 1; } .epp-cap:hover .epp-cap__led2 { opacity: 1; transition-delay: .12s; } @media (prefers-reduced-motion: reduce) { .epp-cap__ico, .epp-cap__spark1, .epp-cap__spark2, .epp-cap__star, .epp-cap__led, .epp-cap__led2 { transition: none; } .epp-caps--proof .epp-cap:first-child:hover .epp-cap__ico, .epp-cap:hover .epp-cap__spark1, .epp-cap:hover .epp-cap__spark2, .epp-cap:hover .epp-cap__star { transform: none; } } /* Tighter band, for a section whose copy has been cut to a fraction of what the page's default rhythm was built for. At 85 words the standard --eds-section-y reads as an empty room rather than as breathing space. A modifier, not an override of .epp-section, so every other section on every other product keeps the spacing it was designed with. */ .epp-section--tight { padding-block: clamp(44px, 4.5vw, 72px); } /* One gap, not a gap plus the padding that used to sit under the removed rule. */ .epp-section--tight .epp-swlead { margin-bottom: clamp(40px, 4.4vw, 64px); } /* ==================== SOFTWARE LOCKUP + CLAIM ==================== The ELM logo, its attribution and the SKU, then the claim at display size. Why the logo carries the attribution instead of a sentence: "pre-installed on every ELM HUB" and the SKU are lookup facts, not reading. Sitting them against the mark answers "whose software is this and what do I order" in one glance and keeps the claim underneath free to be the only sentence. The logo is the ELM 2026 page's own asset, white ink with brand-blue accents, so it is drawn for a dark surface and gets no recolouring. Sized well under that page's hero use: here it is an attribution and must not out-shout the claim. */ /* JUST THE MARK. Kim 2026-08-11: "the Pre-installed on every ELM HUB / SKU 70581 and the logo is a bit of a weird layout - can we move it around somewhere better?" The honest answer was that there was nowhere better, because the two lines beside the logo did not need to exist here at all. Both facts are now stated once each, in the place a reader would look for them: "ships with ELM 2026 already installed and configured" is in the argument paragraph, and the part number is in the license line at the foot of the column. What remains is a brand mark opening the section, which is the whole of what the lockup was doing visually. .epp img., not the class alone. WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }` and every product page carries .woocommerce-page on the body, so a single-class rule (0,1,0) loses to its (0,1,1) and the logo renders at its intrinsic 190px. Any fixed image height on these pages has to clear that bar. */ .epp img.epp-swmark { height: clamp(52px, 4.6vw, 66px); width: auto; display: block; margin: 0 0 12px; } /* ONE LINE UNDER THE MARK, carrying both facts Kim asked to keep: that ELM is pre-installed (which answers a question buyers ask before they ask anything else) and the part number. A middot separates them rather than a second row, so the mark and its caption are two rows total instead of the three-part object that read as weird. Wrapping is left on: on a narrow column the SKU drops to its own line rather than squeezing the sentence. */ .epp .epp-swmeta { font-family: var(--enttec-font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--epp-soft-ink); line-height: 1.6; margin: 0 0 clamp(16px, 1.8vw, 22px); max-width: none; } .epp .epp-swmeta b { color: var(--epp-body-ink); font-weight: 600; letter-spacing: .06em; } .epp .epp-swmeta span { color: var(--epp-rule); margin: 0 4px; } /* The claim is the section's heading, so it is an h2 carrying display type rather than a styled paragraph: the page still needs one real heading here, and this is the only sentence in the section worth being it. 20ch caps it at three lines, which is what makes it read as a statement rather than as a paragraph that happens to be large. */ /* MATCHES THE PAGE'S OTHER HEADINGS. Kim 2026-08-11 asked whether this and the Overview heading were the same weight. They were not: 300 at 42px with -0.01em tracking against the page's 400 at 38px with none, so this section was running its own type. Defensible on the near-black band it used to sit on, wrong now the band is the same charcoal as its neighbours. Weight, size and tracking all come from the page's h2 rules; only the measure and the balancing are local. */ /* The gap under the claim lives HERE, on the (0,2,1) rule, not on the .epp-swlead__copy one below it. A `margin: 0` shorthand at higher specificity was quietly resetting anything the lower rule set, so the explainer paragraph started on the line directly under a 46px heading. */ .epp h2.epp-swclaim { max-width: 20ch; margin: 0 0 22px; text-wrap: balance; } .epp-swclaim em { font-style: normal; color: var(--epp-blue); } /* ==================== THE WAY OUT ==================== This section stops short of the full feature list on purpose, so it owes the reader the page that carries it. It sits on its own rule under the proofs, which is also the line that says the section has finished. The standalone figure row this replaced is gone: its three numbers now live inside the proofs they evidence (see .epp-cap__stat above), which is what removed the duplicated three-column rhythm. */ /* UNDER THE CLAIM, not stranded at the foot of the section. Kim 2026-08-11: "i really hate that the link is on its own". It had a rule above it and a whole row to itself, which made a single link look like an abandoned section footer. It belongs to the claim: the claim stops short of the feature list on purpose, and this is the sentence that says where the rest is. Sitting directly under it, the two read as one thought and the rule is not needed to separate anything. */ .epp p.epp-swtail { margin: clamp(18px, 2vw, 26px) 0 0; } /* A BUTTON, not a text link. Kim 2026-08-11 asked for a border. It is the only way out of a section that deliberately stops short of the feature list, so it should look like something you press. Ghost rather than filled: the blue fill was already rejected on the View all products button for being louder than the action deserves. */ .epp-swlink { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; font-size: 15px; color: var(--epp-ink); text-decoration: none; border: 1px solid var(--epp-rule); border-radius: 999px; padding: 10px 20px; white-space: nowrap; transition: color .3s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1), background .3s cubic-bezier(.22,.61,.36,1), gap .3s cubic-bezier(.22,.61,.36,1); } /* FILLS ON HOVER. Kim 2026-08-11: blue background, white text, rather than the whole thing turning blue. It reads as a button being pressed into service rather than a link changing its mind, and white on #0ea5df is the same pairing every primary button on the site already uses. The arrow still slides, which is the second half of the hover it already had. Background and border move together so the pill fills edge to edge with no rim of the old colour left showing. */ .epp-swlink:hover { background: var(--epp-blue); border-color: var(--epp-blue); color: #fff; gap: 13px; } .epp-swlink:active { background: var(--epp-blue-hover, #0b93c7); border-color: var(--epp-blue-hover, #0b93c7); } .epp-swlink:focus-visible { outline: 3px solid var(--epp-blue); outline-offset: 3px; border-radius: 3px; } .epp-swlink .epp-swlink__arw { transition: transform .3s cubic-bezier(.22,.61,.36,1); } .epp-swlink:hover .epp-swlink__arw { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .epp-swlink, .epp-swlink .epp-swlink__arw { transition: none; } .epp-swlink:hover { gap: 9px; } .epp-swlink:hover .epp-swlink__arw { transform: none; } } /* THE LICENSING LINE under the three proofs. Deliberately quiet: 14px in the soft ink, no rule above it and no box. It is a purchase detail, not a fourth proof, and giving it a card or a border would make it compete with the three above it for the same attention. 640px, not the full band: this sits under a three-column grid, and a single line running the whole width of that grid reads as a footnote nobody has to finish. SELECTOR CARRIES TWO CLASSES ON PURPOSE. `.epp-section--dark p` sets the band's paragraph colour to the bright ink, and at (0,1,1) it outranks a lone `.epp-swnote`, so the "quiet" colour silently lost and the note rendered pure white. Two classes beat one class plus an element. */ .epp .epp-swnote { margin: var(--eds-space-md) 0 0; max-width: 640px; font-size: 14px; line-height: 1.65; color: var(--epp-soft-ink); } /* No bold anywhere in this line. Kim 2026-08-11: "sold separately should not be font-weight bold". The is gone from the markup rather than being overridden to 400 here, so the file does not carry a rule whose whole job is to cancel a tag we chose to write. The line is one sentence; it does not need a word lifted out of it to be found. */ .epp .epp-swnote a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--eds-dur) var(--eds-ease); } .epp .epp-swnote a:hover { color: var(--epp-ink); } @media (prefers-reduced-motion: reduce) { .epp-swnote a { transition: none; } } /* ===================== LICENSE WARNING CALLOUT ===================== Added 2026-08-14. The product team asked for it to be unmistakable that the software is installed but the LICENSE is not included, and the sales handout carries the point as a warning on every ELM slide it has. WHY THIS IS A NEW ELEMENT AND NOT A BOLDER .epp-swnote. Kim, 2026-08-11: "sold separately should not be font-weight bold", and the swnote rule above deliberately carries no bold at all. Emphasising that line now would reverse a decision rather than add to it. So the quiet purchase detail stays quiet and the warning gets its own object, which is also the honest structure: one is a commercial footnote, the other is a caveat somebody must not miss. COLOURS ARE THE ELM 2026 PAGE'S OWN WARNING TREATMENT (.elmxb-sentrynote in elm-2026.php), not new ones, so a caution reads the same on both pages. Contrast checked on the #2f2f2f band: #f2a35a on #2f2f2f is 7.3:1 and the bolded #f7c08a is 9.6:1, both clear of AA at this size. The colour is never the only signal either, the icon and the word NOT carry it too. */ .epp .epp-swalert { display: flex; gap: 11px; align-items: flex-start; margin: var(--eds-space-md) 0 0; max-width: 640px; padding: 13px 15px; border-radius: 10px; background: rgba(234,88,12,.10); border: 1px solid rgba(234,88,12,.34); font-size: 14px; line-height: 1.6; color: #f2a35a; } /* An inline SVG, not the âš  character: the emoji presentation of U+26A0 renders as a colour glyph on some platforms and a thin outline on others, so its size and weight beside the text cannot be relied on. */ .epp .epp-swalert__icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: #f2a35a; } .epp .epp-swalert__icon svg { display: block; width: 100%; height: 100%; } /* max-width:none is load-bearing (2026-08-14). The warning sits inside .epp-swlead__copy, which caps its paragraphs at 52ch for the 19px body copy. At the warning's 14px that computed to ~362px inside a 588px box, so the disclosure body wrapped early and left a wide ragged gap down the right. The box already has its own measure via max-width:640px, so the column's measure must not apply a second time inside it. */ /* text-wrap:pretty stops the last line stranding a single word (Kim 2026-08-14: the disclosure body was ending on a line containing only "cost."). It asks the browser to shuffle the earlier breaks so the final line carries more than an orphan, which is exactly the case a manual   would otherwise have to patch by hand every time the sentence changes. Progressive enhancement: unsupported browsers wrap as before, nothing breaks. Same family as the text-wrap:balance already on .epp-swclaim. */ .epp .epp-swalert p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; max-width: none; text-wrap: pretty; } .epp .epp-swalert b, .epp .epp-swalert strong { color: #f7c08a; font-weight: 600; } .epp .epp-swalert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--eds-dur) var(--eds-ease); } .epp .epp-swalert a:hover { color: #f7c08a; } @media (prefers-reduced-motion: reduce) { .epp .epp-swalert a { transition: none; } } /* ============ SOFTWARE SECTION: TWO BUTTONS, NOT ONE ============ Kim 2026-08-14 asked for a second button beside "See everything ELM 2026 does" going straight to ELM's What's New section. Wrapping them in a flex row rather than letting the second inherit .epp-swtail's block layout, so they sit side by side and wrap together on a narrow column. */ .epp .epp-swtail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } /* The secondary sits QUIETER than the primary: an outline, not a fill. Two solid buttons of equal weight is two primary actions, and the deeper link is the ELM product page, not the section anchor. */ .epp .epp-swlink--ghost { background: transparent; border: 1px solid var(--epp-rule); color: var(--epp-body-ink); } .epp .epp-swlink--ghost:hover { background: rgba(255,255,255,.06); border-color: var(--epp-blue); color: #fff; } .epp .epp-swlink--ghost:active { background: rgba(255,255,255,.1); border-color: var(--epp-blue); } /* ============================== GALLERY ============================== One main image with a thumbnail strip under it, NOT a carousel: with three real product images, a component that hides two of them is the wrong shape. Arrows stay for keyboard and touch. object-fit:contain, never cover: these are product renders and annotated panel callouts, and a crop would cut a connector or a callout label. NO STAGE BACKGROUND, 2026-08-04 (Kim): "remove the white background behind the image carousel and just leave it as transparent". The stage used to be #ffffff with a rule and padding, on the reasoning that the renders were photographed on white and a white holder turned a hard edge into a deliberate panel. That was solving the wrong problem: the white was not the renders' and it was not the page's, it was added by build-render-assets.py, which composited renders that have a REAL alpha channel onto an opaque white canvas. The renders are now transparent and take the NO SHADOW variant, so the unit sits on the dark band with no box at all and there is nothing left for a holder to hide. Keep the aspect-ratio though (see the note on __main): it is what stops the column resizing every time somebody switches image. overflow:hidden now has two jobs, and both are load-bearing. It clips the hover lens to the picture area (without it the magnifier circle spills over the accordion text next to it whenever the cursor is near an edge), and since 2026-08-06 it is also the window the image track slides behind: the four images that are not on stage are laid out either side of the visible one and it is this rule, and only this rule, that keeps them out of sight. */ .epp-gallery__stage { position: relative; overflow: hidden; } /* THE FOCUS FRAME. A feature pane can ask the stage to close in on the part it is describing (the monitor, the network ports). The transform lives on the cell's own , so it composes with the TRACK's translateX instead of fighting it: the track owns which image is on stage, this owns how closely it is framed. THE EASE IS THE POINT, not decoration. The motion is what tells the visitor that the detail belongs to the unit they were already looking at, which a cut between two photographs cannot say. Slow out, no bounce: it should read as a camera pushing in, not as a UI element animating. Reduced motion still ZOOMS, it just arrives instantly. Removing the transition keeps the information (which part) and drops only the travel, where removing the zoom would throw away the meaning and leave the plain image-swap that was rejected in review. */ .epp-gallery__cell img, .epp-gallery__main { transition: transform .62s cubic-bezier(.22, .61, .36, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .epp-gallery__cell img, .epp-gallery__main { transition: none; } } /* While a frame is held the stage is not a magnifier: the cursor should stop promising a zoom the pointer will not deliver (the lens is suppressed in JS). */ .epp-gallery.is-focused .epp-gallery__zoom { cursor: default; } .epp-gallery.is-focused .epp-gallery__hint { opacity: 0; } /* THE STAGE RATIO IS THE FILE'S RATIO, 1800/990. Not 16/9, and not the product's own shape. Measured alpha bounding boxes of the five renders, 2026-08-06: hero 1527x950 1.61 rear-angle 1546x949 1.63 angle-low 1728x710 2.43 rear 1727x537 3.22 front 1728x506 3.42 Two things follow, and they close off the obvious "make the product bigger by matching the stage to the content" idea: 1. There is no single content ratio to match. The unit is 1.61:1 in the two 3/4 views and 3.42:1 in the front elevation, so any stage ratio is generous to one pair and mean to the other. The ratio has to stay ONE number regardless (it is what stops the column resizing when somebody switches image, i.e. it is a CLS guard), so it can only match the canvas, which every file shares. 2. Against 16/9 (1.778) the 1.818 canvas was width-limited and letterboxed by about 1.2% of the stage width, ~8px at a 640px stage. Real, but small. Using the canvas ratio makes it exactly zero, which is the whole win available here. The dead space that is actually visible lives INSIDE the files: the front elevation carries 242px of transparent margin top and bottom on a 990px canvas. Only a re-crop in build-render-assets.py removes that, and that means five new CDN objects, so it waits for the CDN decision rather than being smuggled in as a CSS tweak. Recorded so this is not reopened as a free win: it is not free. History: a 1.6:1 stage letterboxed the 1.82:1 canvas by about 40px top and bottom, dead white that made the unit look lost in a box and gave the hover lens two bands with nothing to magnify. At 16/9 (1.78:1) the picture very nearly fills the holder. Kept as a ratio rather than a fixed height so the stage still scales with the column. */ .epp-gallery__main { display: block; width: 100%; aspect-ratio: 1800 / 990; object-fit: contain; } /* THE TRACK. Built by the JS, one cell per image, never authored in the body. The two lines that do the work are `width: 100%` on the track and `flex: 0 0 100%` on the cell. flex-basis resolves against the TRACK's inner width, so every cell is exactly one stage wide and the row overflows a box that is still only one stage wide. That is what lets the JS say `translateX(-100%)` and mean "one image", with no width arithmetic and nothing to recompute when the column resizes. translate3d rather than translateX in the JS, and transform rather than `left` here, so the drag runs on the compositor: a drag that repaints on every pointermove is the difference between the picture following the cursor and the picture chasing it. The transition is the SNAP, not the drag. While a finger or a mouse is down the JS sets transition:none and writes the offset directly, so the picture is exactly where the pointer is; on release the transition takes over and eases into place. The curve is a decelerate: fast at the moment of release, slowing into the stop, which is how a released physical object behaves. Reduced motion is already covered by the blanket rule at the foot of this sheet, which kills the transition and leaves the move instant. */ .epp-gallery__track { display: flex; width: 100%; transition: transform 320ms cubic-bezier(.22, .61, .36, 1); } .epp-gallery__cell { flex: 0 0 100%; min-width: 0; } /* ARROWS, DELIBERATELY QUIET. Kim 2026-08-04: "the right and left arrows aren't the best as it attracts too much attention - can we fix this so its more subtle". They were the design system's carousel arrows: 44px filled black circles sitting ON the picture, so on a product shot they competed with the product and overlapped it. Now: no fill, no ring, just the chevron, held at 55% until the pointer is somewhere in the gallery. The 44px accessible tap target is kept as PADDING rather than a painted circle, so the target is still there for a thumb even though there is no longer a button-looking thing to see (WCAG 2.5.5 is about the hit area, not about how loud it looks). They stay visible without hover on touch, where there is no hover to reveal them with: the :hover/:focus-within reveal is inside a (hover: hover) query. */ .epp-gallery .eds-carousel__arrow { width: 44px; height: 44px; border-radius: 0; background: none; color: #fff; font-size: 30px; line-height: 1; opacity: .55; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); transition: opacity var(--eds-dur) var(--eds-ease); } .epp-gallery .eds-carousel__arrow:hover { background: none; opacity: 1; } .epp-gallery .eds-carousel__arrow--prev { left: 0; } /* NOTHING DRAWN ON A MOUSE PRESS. Kim 2026-08-11: a black border appears when pressing the image carousel. There is no :active rule for these controls anywhere in our CSS or the design system (checked all 38 on the page against every control in the gallery), so what shows is the browser's own ring on the pressed button: :focus lands on mouse-down, and only :focus-visible was ever styled here. :focus:not(:focus-visible) is the precise fix. It silences the pointer case and leaves the keyboard case completely untouched, which a blanket outline:none would have destroyed. The Firefox inner border and the mobile tap flash are the same class of browser-drawn artefact, so they go with it. */ .epp-gallery button:focus:not(:focus-visible) { outline: none; } .epp-gallery button::-moz-focus-inner { border: 0; } .epp-gallery button { -webkit-tap-highlight-color: transparent; } .epp-gallery .eds-carousel__arrow--next { right: 0; } @media (hover: hover) and (pointer: fine) { /* Out of the way until the visitor is actually looking at the gallery. */ .epp-gallery .eds-carousel__arrow { opacity: 0; } .epp-gallery:hover .eds-carousel__arrow, .epp-gallery:focus-within .eds-carousel__arrow { opacity: .55; } .epp-gallery:hover .eds-carousel__arrow:hover, .epp-gallery .eds-carousel__arrow:focus-visible { opacity: 1; } } /* Focus must never be hidden by the reveal rule above: a keyboard user has no pointer to trigger it with. */ .epp-gallery .eds-carousel__arrow:focus-visible { opacity: 1; outline: 3px solid var(--epp-blue); outline-offset: 2px; } /* The slide counter is the non-motion half of the gallery's feedback: with reduced motion on there is no crossfade, so this text and the active thumb are what tell you the control worked. Never hide it from sighted users. */ /* CAPTION, built by the script from each thumb's data-epp-caption. It names what is in the picture on the stage, which is what makes the frame legible when the visitor's eye is on the accordion text rather than on the gallery. ONE ROW OF SUPPORTING TEXT, NOT TWO. Kim, reviewing: the caption and the "Image 1 of 5" counter "show up line after line and the ui looks weird". They were two centred meta rows competing directly under the picture, one sentence case and one uppercase, reading as two captions rather than as a caption and a counter. The counter lost, because the thumbnail strip immediately below it already answers the same question BETTER: five thumbs with the active one outlined shows both which image and how many, spatially. So the counter is now screen-reader-only rather than deleted, see __status below. The min-height is MEASURED by the script, never typed, because the captions differ in length and an unreserved row grows and shrinks as the stage changes, walking the thumbnails and everything below them up and down the page. Same class of bug as the accordion's data-epp-reserve, and the same answer. */ .epp-gallery__caption { margin: var(--eds-space-xs) 0 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--epp-soft-ink); } /* Still in the DOM, still role="status" aria-live="polite", so a screen reader is told "Image 2 of 5" on every change exactly as before. Clipped rather than display:none on purpose: a display:none live region announces nothing. */ .epp-gallery__status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; } /* CENTRED under the stage. Kim 2026-08-04: the strip was anchored left, which read as an accident next to a centred product. */ .epp-gallery__thumbs { list-style: none; margin: var(--eds-space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .epp-gallery__thumbs li { margin: 0; } /* 96x60 clears the 44px tap-target floor on both axes. box-sizing is explicit so the padding cannot eat into that floor if the global border-box rule ever stops applying here. THE TILE IS A FAINT LIGHT PANEL, not white, and NOTHING IS DIMMED WITH OPACITY. Kim 2026-08-04: "this as the image thumbnails look really bad". The cause was the two rules together: an opaque white tile, dimmed to 84% opacity when not selected. Opacity fades the whole element, tile included, so four white tiles mixed with the #333 band to grey while the selected one stayed white, and the strip looked like five tiles in two different colours. Now every tile is the same colour in every state and only the BORDER moves, which is also the more honest signal: an unselected thumbnail is not a disabled one. (Baymard's finding is that visitors miss the other images on 40% of product galleries, and those images are what decides the purchase, so making four of five look switched off was working against us.) */ .epp-gallery__thumb { box-sizing: border-box; width: 96px; height: 60px; padding: 5px; display: block; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--eds-radius-sm); background: rgba(255, 255, 255, .08); cursor: pointer; overflow: hidden; transition: border-color var(--eds-dur) var(--eds-ease), background var(--eds-dur) var(--eds-ease), transform var(--eds-dur) var(--eds-ease); } .epp-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .epp-gallery__thumb:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); transform: translateY(-2px); } /* Active state is colour and a ring, never motion alone. WHITE, NOT BRAND BLUE. Kim 2026-08-06: "on the product image carousel, can you make the border white instead of this blue". Right call for two reasons beyond taste: the thumbnails sit on a dark band where white is the higher-contrast marker of the two, and brand blue on this page means "this is a link" (every body link, every row label on hover), so spending it on "this is the picture you are looking at" was teaching the visitor two different things with one colour. The focus ring below stays blue on purpose, because that IS an interaction state and it needs to be distinguishable from the selection. */ .epp-gallery__thumb[aria-current="true"] { border-color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px #fff; } .epp-gallery__thumb:focus-visible { outline: 3px solid var(--epp-blue); outline-offset: 2px; } /* Narrow screens: 96px thumbs with a 10px gap need 308px for three, and the gallery column measures 263px at a 390px viewport, so five thumbs wrapped 2 + 2 + 1 and read as an accident. 80x50 with an 8px gap needs 256px, so it wraps 3 + 2 instead, which looks intentional and still clears the 44px tap-target floor on both axes. Wrapping rather than scrolling on purpose: all five stay visible, and a thumbnail nobody scrolls to is a product view nobody sees. */ @media (max-width: 700px) { .epp-gallery__thumbs { gap: 8px; } .epp-gallery__thumb { width: 80px; height: 50px; padding: 4px; } } /* ======================= GALLERY ZOOM AND LIGHTBOX ======================= Why this exists at all: a gallery that can only swap pictures asks the buyer to take the hardware on trust. Baymard's finding is blunt about it, zoom is the digital substitute for picking the product up, and this is a product whose detail IS the sell: the port labels, the front monitor, the rack ears. Two levels, because they answer two different questions. THE LENS answers "what does that say?" without leaving the page. Hovering magnifies the area under the cursor in place. Desktop pointers only, see the matchMedia gate in the JS: on a touch screen there is no hover to magnify with, and the lightbox is the better answer anyway. THE LIGHTBOX answers "let me really look at this". Fullscreen, dark, one image and nothing else, with the thumb rail still reachable. MAGNIFICATION IS CAPPED AT 2.5x, and the number is arithmetic rather than taste. The stage paints about 600px wide inside the 47% column, from an 1800px source, so there are 3x of real pixels to spend. Lens zoom Z shows a region of 1/Z of the displayed width using 3/Z source pixels per screen pixel, so anything up to 3x is still native resolution and anything past it is upscaling that looks soft exactly when somebody is trying to read a label. 2.5x leaves a margin for a wider column on a big screen. The button wrapper, the lens and the lightbox are all built by the JS, not authored in the body, so every html-mode product page gets this for free and there is no per-page markup to keep in step. A page with JS off keeps the plain image it always had. */ /* SCOPED WITH .epp FOR SPECIFICITY, NOT FOR TIDINESS, and the cursor is why. Bootstrap ships `[type=button]:not(:disabled), button:not(:disabled) { cursor: pointer }`. `:not(:disabled)` counts as a class, so that selector is (0,1,1) and a bare `.epp-gallery__zoom` at (0,1,0) LOSES to it: the zoom-in cursor written here was never once painted on this page, on any of the reviews that signed the magnifier off. Found 2026-08-06 while checking the drag cursor, which only worked because it happens to carry three classes. `.epp` in front makes this (0,2,0) and it wins on merit, with no !important to unpick later. Bootstrap is a theme-level stylesheet, so this is not ELM HUB specific: any