/* ========================================================================= ONION TRAINING - SITE STYLESHEET Loaded on every page by the onion-child theme (functions.php). Assembled 16 September 2026. Edit this file directly. *** THE PART ORDER 4, 3, 2, 1 IS DELIBERATE *** WPCode printed the four snippets in reverse, so Part 1 loaded LAST and won every conflict with Parts 2 to 4. This file reproduces that exact cascade. Reordering them 1,2,3,4 inverts every override and breaks the footer and the blog layout. Do not tidy the order. SECTION 5 was rescued from the two "LifterLMS" snippets. Despite the name, those snippets contained the site-wide header, footer and Divi row rules, written with "html body" prefixes to beat Divi's specificity. Making them load only on course pages broke the header and footer everywhere else. They belong here. Google Fonts @import replaced with self-hosted @font-face in Part 1. ========================================================================= */ /* ======================================================================== PART 4 OF 4 (loaded 1 of 4 - see note above) ======================================================================== */ /* ===== ONION TRAINING — SHARED STYLESHEET (PART 4 of 4) ===== ADDED HERE THURSDAY 10 SEP 2026 @ 07:52am LAST UPDATED --> Tuesday 15 Sep 2026 @ 02:30pm NEW 4th WPCode CSS snippet (parts 1-3 are at the ~64KB limit). Paste as its own site-wide CSS snippet. Tokens (:root) live in PART 1. Contents: pagination skin, Groups card tweaks, course/lesson headings, 404, FAQ links, founder LinkedIn, orders, + RESPONSIVE (mobile/tablet) pass 1-2. ========================================================================= */ /* pagination container (LifterLMS student dashboard, Groups reports, Woo, WP) */ #et-boc .llms-pagination,#et-boc .llms-pagination ul,#et-boc ul.page-numbers,#et-boc nav.woocommerce-pagination ul{list-style:none!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;justify-content:center!important;align-items:center!important;padding:0!important;margin:8px 0 0!important;border:0!important} /* schools reports: trim the space above pagination */ #et-boc .llms-group-card .llms-pagination,#et-boc .llms-group-main .llms-pagination{margin-top:4px!important} #et-boc .llms-group-card-main .llms-table+.llms-pagination,#et-boc .llms-group-card-main>.llms-pagination{margin-top:0!important} #et-boc .llms-pagination li,#et-boc ul.page-numbers li,#et-boc .woocommerce-pagination li{list-style:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important} /* the number/next/prev pills — matches .onion-pagebtn from the Articles grid */ #et-boc a.page-numbers,#et-boc span.page-numbers{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:40px!important;height:40px!important;padding:0 12px!important;font-family:var(--on-font-body)!important;font-weight:600!important;font-size:.9rem!important;line-height:1!important;color:var(--on-navy-deep)!important;background:var(--on-warm)!important;border:1px solid var(--on-line)!important;border-radius:10px!important;text-decoration:none!important;box-shadow:none!important;transition:background .15s,color .15s,border-color .15s!important} #et-boc a.page-numbers:hover{border-color:var(--on-copper)!important;color:var(--on-copper)!important;background:var(--on-warm)!important} #et-boc .page-numbers.current,#et-boc span.page-numbers.current{background:var(--on-cta)!important;border-color:var(--on-cta)!important;color:#fff!important} #et-boc .page-numbers.dots{background:transparent!important;border-color:transparent!important;color:var(--on-muted)!important;min-width:auto!important;padding:0 4px!important} #et-boc a.next.page-numbers,#et-boc a.prev.page-numbers{font-family:var(--on-font-body)!important;font-weight:600!important} /* Groups (Schools) card headers — vertically centre the icon+title with the action button */ #et-boc .llms-group-card-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important} #et-boc .llms-group-card-header .llms-group-card-title{display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;line-height:1!important} #et-boc .llms-group-card-header .llms-group-card-title .fa{line-height:1!important;align-self:center!important} #et-boc .llms-group-card-header .llms-group-button .fa,#et-boc .llms-group-card-action .fa{font-size:.8rem!important} #et-boc .llms-group-card-footer a{font-size:15px!important} #et-boc .llms-group-menu-item.item--member-more>.llms-group-button{transform:translateY(2px)!important} #et-boc .llms-group-pending-invitations-msg{font-size:15px!important} /* course/lesson pages: headings default to Divi Montserrat because the content sits in .et_pb_text modules (#et-boc id specificity beats .onion h2). Force the brand type. */ #et-boc .onion-lesson-main>h1,#et-boc .onion-course-main>h1{font-family:var(--on-font-display)!important;font-weight:800!important;color:var(--on-navy-deep)!important;letter-spacing:-.02em!important;line-height:1.1!important} #et-boc .onion-prose h2,#et-boc .onion-prose h3,#et-boc .onion-prose h4{font-family:var(--on-font-display)!important;font-weight:700!important;color:var(--on-navy-deep)!important;letter-spacing:-.01em!important} /* glossary TERM page (.ot-body): h2–h4 were falling back to the theme's Montserrat — give them the brand display font, matching .onion-prose. */ #et-boc .ot-body h2,#et-boc .ot-body h3,#et-boc .ot-body h4, #et-boc .ot-body h2 strong,#et-boc .ot-body h3 strong,#et-boc .ot-body h4 strong{font-family:var(--on-font-display)!important;font-weight:700!important;color:var(--on-navy-deep)!important;letter-spacing:-.01em!important} #et-boc .ot-body h2{font-size:clamp(1.5rem,2.6vw,2rem)!important;margin:30px 0 12px!important} #et-boc .ot-body h3{font-size:1.25rem!important;margin:24px 0 10px!important} #et-boc .ot-body h4{font-size:1.05rem!important;margin:20px 0 8px!important} #et-boc .llms-course-continue-button,#et-boc .llms-course-continue-button:hover{text-decoration:none!important} /* 404 page: drop the full-viewport centering; fixed 100px top space */ #et-boc .onion-404{min-height:auto!important;align-items:flex-start!important;padding-top:60px!important;padding-bottom:60px!important} /* FAQ answer links — copper + hover (custom FAQ, Divi accordion, module accordion) */ #et-boc .onion-faq-a a,#et-boc .et_pb_toggle_content a,#et-boc .et_pb_accordion .et_pb_toggle_content a,#et-boc .onion-macc-panel a{color:var(--on-copper)!important;font-weight:600!important;text-decoration:none!important} #et-boc .onion-faq-a a:hover,#et-boc .et_pb_toggle_content a:hover,#et-boc .et_pb_accordion .et_pb_toggle_content a:hover,#et-boc .onion-macc-panel a:hover{color:var(--on-cta-hover)!important;text-decoration:underline!important} /* About page: founder LinkedIn icon button */ #et-boc .onion-founder .onion-founder-link{display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--on-warm-2)!important;color:var(--on-navy)!important;margin:2px 0 8px;transition:background .18s,color .18s,transform .18s} #et-boc .onion-founder .onion-founder-link:hover{background:var(--on-navy-deep)!important;color:#fff!important;transform:translateY(-2px)} /* Orders (My Account): remove the "Browse products" button on the empty-orders notice */ #et-boc .woocommerce-MyAccount-content .woocommerce-info a.wc-forward,#et-boc .woocommerce-MyAccount-content .woocommerce-info a.button{display:none!important} /* ========================================================================= RESPONSIVE — tablet + mobile (pass 1: header burger, hero, 2-col layouts) ========================================================================= */ /* header: collapse desktop nav to the burger below 1100px; Login/member links move into the mobile menu */ @media(max-width:1100px){ #et-boc .onion-links,.onion-links{display:none!important} #et-boc .onion-navcta .onion-textlink,.onion-navcta .onion-textlink{display:none!important} #et-boc .onion-navcta .btn,.onion-navcta .btn{display:none!important} #et-boc .onion-navcta,.onion-navcta{margin-left:auto!important} #et-boc .onion-burger,.onion-burger{display:inline-flex!important} } /* hero: stack the two columns, add safe side padding, wrap the proof stats. NB: the hero's desktop rules are #et-boc-scoped, so these overrides must be too (a bare .onion-hero-* !important still loses to the id-scoped desktop rule). */ @media(max-width:960px){ #et-boc .onion-hero-inner,.onion-hero-inner{grid-template-columns:1fr!important;gap:30px!important;padding:44px 22px 54px!important} #et-boc .onion-hero-proof,.onion-hero-proof{flex-wrap:wrap!important} #et-boc .onion-hero-proof .stat,.onion-hero-proof .stat{flex:1 1 auto!important} /* let the 3rd tile drop to the next row instead of being cut off */ #et-boc .onion-hero-proof .divider,.onion-hero-proof .divider{display:none!important} } @media(max-width:760px){ .onion-hero-visual{display:none!important} } /* main two-column layouts stack */ @media(max-width:900px){ .onion-split,.onion-founders,.onion-contact-grid,.onion-why-grid,.onion-membership-split, .onion-lesson-layout,.onion-auth,.onion-dofe,.onion-account .woocommerce{grid-template-columns:1fr!important} .onion-lesson-layout .onion-lesson-syllabus{position:static!important} /* stacked hero-style splits (image + lead paragraph): reorder to eyebrow > h2 > image > paragraph > CTA. The CTA is nested inside the text column, so flatten that column with display:contents and order the pieces. gap:0 (the split's desktop grid-gap would otherwise become a huge flex row-gap); align-items:flex-start keeps the eyebrow left-aligned as on desktop. */ #et-boc .onion-split:has(>img):has(.onion-lead){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important} #et-boc .onion-split:has(>img):has(.onion-lead)>div{display:contents!important} #et-boc .onion-split:has(>img):has(.onion-lead) .onion-eyebrow{order:0!important;text-align:left!important} #et-boc .onion-split:has(>img):has(.onion-lead) h2{order:1!important;margin:0 0 8px!important} #et-boc .onion-split:has(>img):has(.onion-lead)>img{order:2!important;display:block!important;width:100%!important;margin:12px 0 18px!important} #et-boc .onion-split:has(>img):has(.onion-lead) .onion-lead, #et-boc .onion-split:has(>img):has(.onion-lead) p, #et-boc .onion-split:has(>img):has(.onion-lead) ul, #et-boc .onion-split:has(>img):has(.onion-lead) ol{order:3!important} #et-boc .onion-split:has(>img):has(.onion-lead) .btn{order:4!important;margin-top:22px!important} } /* Basket (Divi WooCommerce cart module) on mobile: Divi stacks the cart rows and renders the data-title labels ("Price:", "Quantity:"…) as navy text on a navy background — solid dark bars. Neutralise the background and use a muted label. */ @media(max-width:768px){ #et-boc .et_pb_wc_cart_products td::before, #et-boc .woocommerce-cart-form table td::before{ background:transparent!important;background-color:transparent!important; color:var(--on-muted)!important;font-weight:600!important;padding:0!important; } /* trim the empty gaps at the top of the first row and around the actions area (Divi's responsive rule pads each , leaving dead space inside the box) */ #et-boc .et_pb_wc_cart_products tr.cart_item{padding-top:0!important;padding-bottom:0!important} #et-boc .et_pb_wc_cart_products td.product-name{border-top:0!important;padding-top:16px!important} #et-boc .et_pb_wc_cart_products td.product-subtotal{padding-bottom:10px!important} /* coupon + Update-basket footer: solid warm panel filling the whole box */ #et-boc .et_pb_wc_cart_products table.shop_table tr:has(>td.actions){padding:0!important} #et-boc .et_pb_wc_cart_products td.actions{background:var(--on-warm)!important;background-color:var(--on-warm)!important;padding:18px 20px!important;margin:0!important;border-bottom-left-radius:14px!important;border-bottom-right-radius:14px!important} #et-boc .et_pb_wc_cart_products td.actions button[name="update_cart"]{margin-bottom:0!important} /* dark navy header strip across the top of the basket card, echoing the checkout "Your order" table. The 4-col thead is repurposed into a single title bar. */ #et-boc .et_pb_wc_cart_products table.shop_table thead{display:block!important;background:var(--on-navy-deep)!important} #et-boc .et_pb_wc_cart_products table.shop_table thead tr{display:block!important} #et-boc .et_pb_wc_cart_products table.shop_table thead th{display:none!important} #et-boc .et_pb_wc_cart_products table.shop_table thead th.product-name{display:block!important;font-size:0!important;padding:14px 20px!important;border:0!important} #et-boc .et_pb_wc_cart_products table.shop_table thead th.product-name::before{content:"Your Basket"!important;font-family:var(--on-font-mono)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#fff!important} /* Basket totals (Divi cart-totals module): un-stack into the checkout's dark 2-col table — navy label cells, right-aligned values, copper Total + VAT note. (Simple 2-col table, so it un-stacks cleanly, unlike the 4-col cart above.) */ #et-boc .et_pb_wc_cart_totals table.shop_table{display:table!important;width:100%!important;table-layout:fixed!important;border-collapse:separate!important;border:1px solid var(--on-line)!important;border-radius:14px!important;overflow:hidden!important} #et-boc .et_pb_wc_cart_totals table.shop_table tbody{display:table-row-group!important} #et-boc .et_pb_wc_cart_totals table.shop_table tr{display:table-row!important} #et-boc .et_pb_wc_cart_totals table.shop_table th{display:table-cell!important;width:45%!important;background:var(--on-navy-deep)!important;color:#fff!important;font-family:var(--on-font-mono)!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.04em!important;text-align:left!important;padding:14px 16px!important;vertical-align:middle!important} #et-boc .et_pb_wc_cart_totals table.shop_table td{display:table-cell!important;text-align:right!important;padding:14px 16px!important;font-size:15px!important;vertical-align:middle!important;background:#fff!important} #et-boc .et_pb_wc_cart_totals table.shop_table td::before{display:none!important} #et-boc .et_pb_wc_cart_totals table.shop_table tr.order-total td .amount{color:var(--on-copper)!important;font-family:var(--on-font-display)!important;font-weight:800!important} #et-boc .et_pb_wc_cart_totals table.shop_table tr.order-total td small{display:block!important;color:var(--on-muted)!important;font-size:12px!important;font-weight:400!important;white-space:normal!important} } /* My Account dashboard course card: the existing full-width rules are prefixed body.woocommerce-account, but this page's body class is page-id-* (no woocommerce-account), so the default .llms-loop-list.cols-3 grid stayed and right-aligned the single card. Force it full-width, body-class-independent. */ #et-boc .onion-dash-main-course .llms-loop-list{display:block!important;grid-template-columns:1fr!important;width:100%!important;max-width:none!important;margin:0!important} #et-boc .onion-dash-main-course .llms-loop-item{width:100%!important;max-width:none!important;margin:0!important;float:none!important} /* the visible card (.llms-loop-item-content) had margin:0 18px, pushing it 18px right of the welcome paragraph — zero it so the card's left edge lines up */ #et-boc .onion-dash-main-course .llms-loop-item-content{margin-left:0!important;margin-right:0!important} /* My Account: the nav|content layout is a bare .woocommerce grid (no .onion-account wrapper, so the earlier stack rule never matched) — on mobile the content column sat beside the nav and was cut off. Stack it below the nav. */ @media(max-width:900px){ /* stack nav above content, and drop the 24px grid padding so the content/card sit at the column's left edge (full width, left-aligned) instead of inset 65px */ #et-boc .woocommerce:has(>.woocommerce-MyAccount-navigation){display:block!important;padding:24px 0 48px!important} #et-boc .woocommerce:has(>.woocommerce-MyAccount-navigation)>.woocommerce-MyAccount-navigation{width:auto!important;float:none!important} #et-boc .woocommerce:has(>.woocommerce-MyAccount-navigation)>.woocommerce-MyAccount-content{width:auto!important;margin:24px 0 0!important} /* collapse the (now stacked) nav behind a toggle so content shows immediately. JS that inserts .onion-acct-navtoggle lives in the templates PHP. */ #et-boc .woocommerce-MyAccount-navigation .onion-acct-navtoggle{display:flex!important;align-items:center;justify-content:space-between;width:100%;gap:10px;background:var(--on-navy-deep);color:#fff;border:0;border-radius:12px;padding:14px 18px;cursor:pointer;font-family:var(--on-font-mono);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase} #et-boc .woocommerce-MyAccount-navigation .onion-acct-navcaret{transition:transform .2s} #et-boc .woocommerce-MyAccount-navigation.is-open .onion-acct-navcaret{transform:rotate(180deg)} #et-boc .woocommerce-MyAccount-navigation ul{display:none!important;margin-top:10px!important} #et-boc .woocommerce-MyAccount-navigation.is-open ul{display:flex!important} } /* toggle button is mobile-only — hidden on desktop where the nav is its own column */ .onion-acct-navtoggle{display:none} /* My Courses list on mobile: cards were full-column (364px) with an 18px margin that overflowed right. Cap the width and auto-centre each card in the column. */ @media(max-width:600px){ #et-boc .llms-my-courses .llms-loop-item-content{max-width:320px!important;width:auto!important;margin-left:auto!important;margin-right:auto!important} } /* Orders table (My Account) on mobile: rebuild each stacked order as a bordered card whose rows read like the Order-details table — a full-height navy label cell (mono/uppercase, white) on the left, value on the right. */ @media(max-width:768px){ #et-boc .account-orders-table tbody tr,#et-boc .woocommerce-orders-table tbody tr{ display:block!important;background:#fff!important;border:1px solid var(--on-line)!important; border-radius:12px!important;overflow:hidden!important;margin:0 0 16px!important} #et-boc .account-orders-table tbody td,#et-boc .woocommerce-orders-table tbody td{ display:flex!important;align-items:center!important;column-gap:14px!important; padding:0 14px 0 0!important;margin:0!important;border-top:1px solid var(--on-line)!important; text-align:left!important;font-size:14px!important;color:var(--on-ink)!important} #et-boc .account-orders-table tbody tr td:first-child,#et-boc .woocommerce-orders-table tbody tr td:first-child{border-top:0!important} /* dividers are border-top only — strip any stray side/bottom border on cells and the table/tbody so the card shows a single clean bottom edge */ #et-boc .account-orders-table tbody td,#et-boc .woocommerce-orders-table tbody td{border-bottom:0!important;border-left:0!important;border-right:0!important} #et-boc .account-orders-table,#et-boc .account-orders-table tbody,#et-boc .woocommerce-orders-table,#et-boc .woocommerce-orders-table tbody{border:0!important} #et-boc .account-orders-table td::before,#et-boc .woocommerce-orders-table td::before{ flex:0 0 42%!important;align-self:stretch!important;display:flex!important;align-items:center!important; background:var(--on-navy-deep)!important;color:#fff!important;margin:0!important;padding:12px 14px!important; border-radius:0!important;font-family:var(--on-font-mono)!important;text-transform:uppercase!important; font-size:11px!important;letter-spacing:.04em!important;font-weight:600!important;white-space:nowrap!important} } /* Login page: on mobile the stacked .onion-auth column ballooned to ~436px (its 40px padding + the form's min-content wouldn't shrink), overflowing the viewport so the form/error shifted right and clipped. minmax(0,1fr) lets it shrink; trim the card padding. Worse when an error notice is shown. */ @media(max-width:900px){ #et-boc .onion-auth{grid-template-columns:minmax(0,1fr)!important} #et-boc .onion-auth-main{padding:28px 22px!important} #et-boc .onion-auth .woocommerce-error{padding-left:16px!important;margin-left:0!important} } /* long emails in the login error were an unbreakable string spilling out of the box */ #et-boc .onion-auth .woocommerce-error li,#et-boc .onion-auth .woocommerce-error strong{overflow-wrap:anywhere!important;word-break:break-word!important} /* Course/lesson content: the content is a Divi post layout nested in .onion-prose. On some courses its first section+row add ~48px top padding, leaving a big gap between the progress bar and the first heading while others have none. Zero that leading top padding so the gap is consistent across all courses. */ #et-boc .onion-prose .et-l--post .et_builder_inner_content>.et_pb_section:first-child{padding-top:0!important} #et-boc .onion-prose .et-l--post .et_builder_inner_content>.et_pb_section:first-child>.et_pb_row:first-child{padding-top:0!important} /* ...and the trailing section/row bottom padding, so the gap between the last content (e.g. instructors) and the progress bar at the bottom is consistent too. */ #et-boc .onion-prose .et-l--post .et_builder_inner_content>.et_pb_section:last-child{padding-bottom:0!important} #et-boc .onion-prose .et-l--post .et_builder_inner_content>.et_pb_section:last-child>.et_pb_row:last-child{padding-bottom:0!important} /* Checkout order table: a theme rule (tr.order-total th, tr.order-total td) forces the whole TOTAL row copper !important. Keep the amount copper but restore the TOTAL label to white so it matches the other navy-cell labels. */ #et-boc .onion-checkout table.shop_table tfoot tr.order-total th{color:#fff!important} /* My Schools tiles: they're 200px inline-blocks with a right margin for side-by-side spacing, so on mobile (one per row) they sit left. Centre them. Higher specificity (.llms-group a) so this beats the identical base rule in onion-lifterlms, which loads after this file. */ @media(max-width:600px){ body.woocommerce-account .woocommerce-MyAccount-content .llms-group a:has(> .llms-group-logo){display:block!important;margin-left:auto!important;margin-right:auto!important;width:200px!important} } /* Order-received / view-order "Order details" table: match the dark-table look — the footer label cells (Subtotal/Discount/Total) were cream; make them navy like the header and the checkout/basket totals. All viewports. */ #et-boc table.woocommerce-table--order-details thead th, table.woocommerce-table--order-details thead th{background:var(--on-navy-deep)!important;color:#fff!important} #et-boc table.woocommerce-table--order-details tfoot th, table.woocommerce-table--order-details tfoot th{background:var(--on-navy-deep)!important;color:#fff!important;font-family:var(--on-font-mono)!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-size:.74rem!important} #et-boc table.woocommerce-table--order-details tfoot td, table.woocommerce-table--order-details tfoot td{background:#fff!important} #et-boc table.woocommerce-table--order-details tfoot tr:last-child td .amount, table.woocommerce-table--order-details tfoot tr:last-child td .amount{color:var(--on-copper)!important;font-family:var(--on-font-display)!important;font-weight:800!important} /* thin 1px row dividers (were thick white bands from cell borders/spacing) */ #et-boc table.woocommerce-table--order-details, table.woocommerce-table--order-details{border-collapse:separate!important;border-spacing:0!important} #et-boc table.woocommerce-table--order-details th,#et-boc table.woocommerce-table--order-details td, table.woocommerce-table--order-details th,table.woocommerce-table--order-details td{border-width:0 0 1px 0!important;border-style:solid!important;border-color:var(--on-line)!important} #et-boc table.woocommerce-table--order-details tfoot tr:last-child th,#et-boc table.woocommerce-table--order-details tfoot tr:last-child td, table.woocommerce-table--order-details tfoot tr:last-child th,table.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0!important} /* Contact form card: the 34px card padding squeezed the form below the fixed 300px Cloudflare Turnstile widget, so it ran off-screen. Trim the padding on mobile; on the narrowest phones also scale the widget to fit (overflow:hidden clips the widget's leftover layout box so there's no horizontal page scroll). */ @media(max-width:600px){ #et-boc .onion-form-card,.onion-form-card{padding-left:16px!important;padding-right:16px!important} } @media(max-width:374px){ #et-boc .onion-form-card,.onion-form-card{padding-left:12px!important;padding-right:12px!important} .onion-form-card .gfield--type-turnstile{overflow:hidden!important} .onion-form-card .cf-turnstile{transform:scale(.85)!important;transform-origin:left top!important} } /* Glossary term page eyebrow (.ot-eyebrow) was missing the copper bar the rest of the site's eyebrows have — give it the same ::before dash. */ .ot-eyebrow{display:flex!important;align-items:center!important;gap:.5em!important} /* block-level flex so it sits on its own line below the "← All glossary terms" back-link */ .ot-eyebrow::before{content:""!important;width:14px!important;height:1.5px!important;background:var(--on-copper)!important;opacity:.6!important;flex:none!important} /* Glossary A-Z index: the chip row was a nowrap horizontal-scroll strip (775px) running off-screen — wrap it onto multiple centred rows on mobile/tablet. The term lists use a fixed 3-col grid that overflowed the page; drop to 2 cols on tablet and 1 on phones (minmax(0,1fr) lets long terms wrap, not overflow). */ @media(max-width:1024px){ #et-boc .onion-gloss-az,.onion-gloss-az{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:center!important} #et-boc .onion-gloss-search,.onion-gloss-search{margin-bottom:28px!important} /* space below the search bar before the first (#) section */ } @media(max-width:900px){ #et-boc .onion-gloss-terms,.onion-gloss-terms{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:560px){ #et-boc .onion-gloss-terms,.onion-gloss-terms{grid-template-columns:minmax(0,1fr)!important} } /* Checkout trust items: on phones they wrap and centre unevenly (the inline
s skew the flex row). Stack them into a centred column. */ /* Articles/category grid: the stacked column resolved to a child's min-content (348px) wider than the container (335px), so cards/sidebar overflowed the right edge. minmax(0,1fr) forces the column to fit — even 20px margins both sides. */ /* author archive on mobile/tablet: the Divi body section adds 30px padding-top under the header (on top of the hero's own padding) — drop it so the hero sits snug. */ @media(max-width:980px){ body.author #et-boc .et_pb_section_0_tb_body,body.author .et_pb_section_0_tb_body{padding-top:0!important} /* single post: the 2-col row (content + sidebar) squeezed the content on tablet. Stack it — content full width, sidebar below. */ body.single-post #et-boc .et_pb_row_0_tb_body{flex-direction:column!important;display:flex!important} body.single-post #et-boc .et_pb_row_0_tb_body>.et_pb_column{width:100%!important;max-width:100%!important;margin:0 0 24px!important} } @media(max-width:900px){ #et-boc .onion-arts-layout{grid-template-columns:minmax(0,1fr)!important} /* single blog post (Divi Theme Builder body): rows ran edge-to-edge on mobile — add side padding so the title, image and body text aren't flush to the edges */ body.single-post .et-l--body .et_pb_row{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important} /* course progress boxes: the real layout container is .llms-sd-widgets (a flex row that wraps 2-up). Switch it to a column so the boxes stack one per row and the donut fits. Widget display is left alone, so Grade/Achievement stay hidden. */ #et-boc .llms-sd-widgets{flex-direction:column!important;gap:16px!important} #et-boc .llms-sd-widgets .llms-sd-widget{width:auto!important;max-width:100%!important;float:none!important;margin:0!important} /* lessons/progress table was wider than the rest and pushed right — fit it */ #et-boc .llms-table.llms-single-course-progress,#et-boc .llms-sd-section .llms-table{width:100%!important;max-width:100%!important;display:block!important;overflow-x:auto!important} } @media(max-width:700px){ #et-boc .onion-checkout-trust{flex-direction:column!important;align-items:center!important;gap:12px!important} #et-boc .onion-checkout-trust br{display:none!important} #et-boc .onion-checkout-trust span{justify-content:center!important;width:100%!important} .onion-price-grid{grid-template-columns:1fr!important} /* pricing card action row: stack the buttons (Contact Us drops to its own row) */ #et-boc .onion-price .btn-ghost,#et-boc .onion-price .btn-dark{flex:1 1 100%!important} } /* tighter section rhythm + safe edge padding on phones */ @media(max-width:760px){ .onion-section{padding:56px 0!important} .onion-section-sm{padding:40px 0!important} .onion-wrap{padding-left:20px!important;padding-right:20px!important} .onion-cta-band,.onion-newsletter{padding:32px 22px!important} } /* --- mobile pass 2: hero CTAs stack, long buttons wrap, mobile-menu variants --- */ @media(max-width:760px){ #et-boc .onion-hero-actions,.onion-hero-actions{flex-direction:column!important;align-items:stretch!important} #et-boc .onion-hero-actions .btn,.onion-hero-actions .btn{width:100%!important;padding:13px 20px!important;font-size:15px!important} /* smaller CTAs on phones */ .onion-hero h1{font-size:clamp(1.9rem,7vw,2.6rem)!important} #et-boc .brands,.brands{justify-content:center!important} /* "skills in demand" chips centre each wrapped row */ /* DofE eyebrow: keep it as ONE centred line on mobile (nowrap + slightly smaller font). Wrapping was what floated the bar/"//" apart; on one line the whole bar + // + text sits together, centred. */ #et-boc .onion-dofe .onion-eyebrow,.onion-dofe .onion-eyebrow{white-space:nowrap!important;font-size:11px!important} } @media(max-width:360px){ #et-boc .onion-dofe .onion-eyebrow,.onion-dofe .onion-eyebrow{font-size:10px!important} } /* DofE eyebrow: tight 2px between the bar and the // */ #et-boc .onion-dofe .onion-eyebrow,.onion-dofe .onion-eyebrow{gap:2px!important} @media(max-width:560px){ .onion .btn{white-space:normal!important} /* long CTAs wrap instead of running off-screen */ /* long .btn-lg labels wrap onto balanced lines (flex blocks text-wrap:balance, so go inline-block) */ #et-boc a.btn-lg,a.btn-lg{display:inline-block!important;text-align:center!important;text-wrap:balance!important} } /* mobile menu: show member links as block when logged in; make the ghost Login button visible on the dark panel; no Enrol */ body.logged-in .onion-mobilenav a.onion-member-only{display:block!important} .onion-mobilenav .m-actions .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.3)!important} /* current-page link in the mobile menu: was dim/near-invisible on the dark panel — highlight it in copper */ /* course/lesson (LifterLMS) pages colour links blue, which bled into the mobile menu. Force the top-level/member links white (keep .sub muted, active copper). */ .onion-mobilenav a:not(.sub):not(.active):not([aria-current]){color:#fff!important} .onion-mobilenav a.active,.onion-mobilenav a[aria-current]{color:var(--on-copper-soft)!important} .onion-mobilenav .m-actions .btn-ghost:hover{border-color:var(--on-copper-soft)!important;color:var(--on-copper-soft)!important;background:rgba(255,255,255,.06)!important} /* Post-16 / Schools page (page-id-27057): the two cream ".onion-why" bands sit inside Divi's 1180px row, so the cream doesn't reach the screen edges. Break them out to full-bleed; the inner .onion-wrap still re-centres the content to the normal width. */ body.page-id-27057 .onion-why{ width:auto!important;max-width:none!important; margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important; } /* Mobile: trim the big top gap between the header and the hero H1 (page hero top padding is 90px on desktop — too tall on phones). Applies site-wide. */ @media(max-width:600px){ .onion-page-hero,.onion-gloss-head{padding-top:40px!important} } /* Mobile burger nav: collapsible "Resources" group (guest menu). A