/* ========================================================================= lpen-course.css — the course description page template. EVERY SELECTOR CONTAINS ONE OF THIS PAGE'S SECTION IDS, and build_course.py fails the build if one does not. lpen-assets/ is enqueued site wide (CLAUDE.md 18j), and this file reaches into WooCommerce's own add-to-cart markup, so a single unanchored rule would repaint the cart, the checkout and every product page. An id anchor is a fact you can grep; prefix scoping is a transformation you have to trust (18k). Sections 1 tokens 2 hero 3 the sticky enrol bar 4 fact tiles and card chrome 5 the outline 6 faculty headshots 7 accordion, the space-between fix 8 the WooCommerce cart glyph 9 generated blocks appended by the builder ========================================================================= */ /* ------------------------------------------------------------ 1 tokens */ #lpen-c-bar { --c-navy-900: #012032; --c-navy-800: #022e48; --c-navy-700: #0b4465; --c-action: #0f5c96; --c-border: #cfd6dd; --c-text: #111820; --c-secondary: #4a5666; --c-buy: #ffd814; --c-buy-hover: #f0b800; --c-buy-text: #1d3149; --c-fam: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; } /* -------------------------------------------------------------- 2 hero */ /* The hero sits on a photograph, so the two supporting links in it need to be legible against it rather than inheriting the site link colour. */ #lpen-c-hero a { color: #ffffff; } #lpen-c-hero .lpen-c-herolink a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } #lpen-c-hero .lpen-c-herolink a:hover { text-decoration-thickness: 2px; } /* --------------------------------------------------- 3 sticky enrol bar */ /* Anchored to the BOTTOM, on every viewport, on purpose. The site header is already sticky (18c) and a second top bar stacks under it, eats sticky height and fights the redesign notice. A bottom bar never touches the header, and on a phone it is where the thumb already is. */ #lpen-c-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; width: 100%; transform: translateY(105%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; background: var(--c-navy-800); border-top: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 -8px 24px rgba(1, 32, 50, 0.22); font-family: var(--c-fam); padding-bottom: env(safe-area-inset-bottom, 0); } /* `visibility: hidden` rather than opacity, so the buttons are out of the tab order while the bar is down. A focusable control behind a slid-off panel is the kind of defect nobody sees until they use a keyboard. */ #lpen-c-bar.is-on { transform: translateY(0); visibility: visible; transition: transform 0.22s ease, visibility 0s linear 0s; } /* No JS, no bar. The page still carries three enrol buttons in the flow, so nothing is lost, and a bar that cannot be dismissed or updated is worse than none. */ #lpen-c-bar:not(.is-ready) { display: none; } @media (prefers-reduced-motion: reduce) { #lpen-c-bar { transition: none; } } #lpen-c-bar .lpen-cb { max-width: 1120px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 18px; } #lpen-c-bar .lpen-cb__what { min-width: 0; flex: 1 1 auto; } #lpen-c-bar .lpen-cb__title { margin: 0; color: #ffffff; font: 600 16px/22px var(--c-fam); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lpen-c-bar .lpen-cb__meta { margin: 2px 0 0; color: #9abfd6; font: 400 13px/18px var(--c-fam); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #lpen-c-bar .lpen-cb__acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } #lpen-c-bar .lpen-cb__ghost, #lpen-c-bar .lpen-cb__buy { display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; text-decoration: none; white-space: nowrap; font: 700 15px/20px var(--c-fam); } #lpen-c-bar .lpen-cb__ghost { color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.45); padding: 9px 16px; font-weight: 600; } #lpen-c-bar .lpen-cb__ghost:hover, #lpen-c-bar .lpen-cb__ghost:focus-visible { background: #ffffff; color: var(--c-navy-900); } #lpen-c-bar .lpen-cb__buy { background: var(--c-buy); color: var(--c-buy-text); padding: 10px 22px; } #lpen-c-bar .lpen-cb__buy:hover, #lpen-c-bar .lpen-cb__buy:focus-visible { background: var(--c-buy-hover); color: var(--c-buy-text); } #lpen-c-bar a:focus-visible { outline: 3px solid #ffd814; outline-offset: 2px; } #lpen-c-bar .lpen-cb__price { font-weight: 700; } /* Icons are CSS masks, never inline SVG: the html widget sanitiser strips silently and returns ok true (18b.1). */ #lpen-c-bar .lpen-i { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } @media (max-width: 720px) { #lpen-c-bar .lpen-cb { padding: 8px 14px; gap: 12px; } #lpen-c-bar .lpen-cb__meta { font-size: 12px; } /* The passes link goes first on a narrow bar. Two competing calls to action in 340px is one too many, and the buy is the one that has to survive. It is still in the page twice above and once below. */ #lpen-c-bar .lpen-cb__ghost { display: none; } #lpen-c-bar .lpen-cb__buy { padding: 11px 18px; min-height: 44px; } } @media (max-width: 400px) { #lpen-c-bar .lpen-cb__title { font-size: 15px; } } /* ------------------------------------------------- 4 the sticky buy card */ /* An id, not a class: Elementor containers render _element_id and DROP _css_classes (18b.2), so a container level class selector matches nothing. --lpen-sticky-top is measured at runtime by the site header (18c). */ #lpen-c-buy { position: sticky; top: calc(var(--lpen-sticky-top, 90px) + 16px); align-self: start; } @media (max-width: 1024px) { #lpen-c-buy { position: static; } } /* ------------------------------------------------- 5 faculty headshots */ /* Elementor's image widget has no aspect ratio or focal point control, and these two headshots are different shapes, so a centred square crop takes one of them at the chin (18j). Widgets honour _css_classes; containers do not (18b.2), which is how this reaches the image. */ #lpen-c-faculty .lpen-c-face img { width: 128px; height: 128px; object-fit: cover; border-radius: 10px; } @media (max-width: 480px) { #lpen-c-faculty .lpen-c-face img { width: 96px; height: 96px; } } /* ---------------------------------------- 6 accordion space-between fix */ /* `accordion_item_title_position_horizontal: space-between` is set on every nested accordion in this repo and Elementor 4.2 does not emit it, so the plus sign sits jammed against the question instead of at the right edge (18n). One rule, and every other page with an accordion still needs it. */ #lpen-c-faqs .e-n-accordion-item-title, #lpen-c-faculty .e-n-accordion-item-title { justify-content: space-between; gap: 16px; } /* -------------------------------------------- 7 the WooCommerce cart glyph */ /* `fas fa-shopping-cart` comes from WooCommerce, not from _elementor_data, so no build guard in this repo can see it and the site wide fa- sweep cannot attribute it (18j). Zero the glyph and redraw it as a Tabler mask. ⚠️ Sized in PIXELS: `font-size: 0` with `width: 1em` resolves to zero and draws nothing, which is the bug 18n found on /academy/ and /passes/. */ /* ⚠️ Scoped to the wc-add-to-cart WIDGET, not to every button in the section. The first version matched .elementor-button .elementor-button-icon i, which also caught the Elementor buttons beside it and redrew their chevron as a shopping cart. */ #lpen-c-hero .elementor-widget-wc-add-to-cart .elementor-button-icon i, #lpen-c-about .elementor-widget-wc-add-to-cart .elementor-button-icon i, #lpen-c-passes .elementor-widget-wc-add-to-cart .elementor-button-icon i, #lpen-c-cta .elementor-widget-wc-add-to-cart .elementor-button-icon i { font-size: 0; line-height: 0; } #lpen-c-hero .elementor-widget-wc-add-to-cart .elementor-button-icon i::before, #lpen-c-about .elementor-widget-wc-add-to-cart .elementor-button-icon i::before, #lpen-c-passes .elementor-widget-wc-add-to-cart .elementor-button-icon i::before, #lpen-c-cta .elementor-widget-wc-add-to-cart .elementor-button-icon i::before { content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: -3px; background-color: currentColor; -webkit-mask-image: var(--lpen-cart-mask); mask-image: var(--lpen-cart-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* WooCommerce's add-to-cart is not an Elementor button, so 18i's underline fix (typography_text_decoration) never reaches it and all four rendered underlined. ⚠️ On a page that is not the product page WooCommerce emits an ajax `a.add_to_cart_button`, NOT the product page's `.single_add_to_cart_button`, so the obvious selector matches nothing. */ #lpen-c-hero .elementor-widget-wc-add-to-cart a, #lpen-c-about .elementor-widget-wc-add-to-cart a, #lpen-c-passes .elementor-widget-wc-add-to-cart a, #lpen-c-cta .elementor-widget-wc-add-to-cart a, #lpen-c-hero .elementor-widget-wc-add-to-cart button, #lpen-c-about .elementor-widget-wc-add-to-cart button, #lpen-c-passes .elementor-widget-wc-add-to-cart button, #lpen-c-cta .elementor-widget-wc-add-to-cart button { text-decoration: none; } /* The quantity input is meaningless on a seat in a webinar: buying two does not enrol two people, it charges twice for one account. Present only if the widget ever renders the full product form. */ #lpen-c-hero .elementor-widget-wc-add-to-cart .quantity, #lpen-c-about .elementor-widget-wc-add-to-cart .quantity, #lpen-c-passes .elementor-widget-wc-add-to-cart .quantity, #lpen-c-cta .elementor-widget-wc-add-to-cart .quantity { display: none; } /* ------------------------------------------------------- 8 related cards */ /* A linked heading is an and the theme underlines every one of them (18i). typography_text_decoration is set on the widget too; this covers the hover state, which that control does not reach. No card level stretched link: `tabindex` is stripped by the sanitiser (18b.1), so the usual aria-hidden wrapper anchor would arrive focusable and become a second nameless tab stop on every card. */ #lpen-c-more .elementor-heading-title a { text-decoration: none; } #lpen-c-more .elementor-heading-title a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============ GENERATED: DO NOT EDIT ============ */ /* Tabler 3.46.0, 3 glyphs, generated by build_course.py */ #lpen-c-hero, #lpen-c-about, #lpen-c-passes, #lpen-c-cta{--lpen-cart-mask:url("data:image/svg+xml,")} #lpen-c-bar .lpen-i--shopping-cart{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} #lpen-c-bar .lpen-i--ticket{-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,")} /* Headshot focal points, generated from COURSE['faculty'] */ #lpen-c-faculty .lpen-c-face--andrew-carvajal img{object-position:50% 20%} #lpen-c-faculty .lpen-c-face--mark-holthe img{object-position:50% 25%}