/* ====================================================================== EMKAN v156 — tightly scoped final patch Scope only: 1) lower context/breadcrumb/back strip geometry (header/mega-menu untouched) 2) Store selected filter/category state 3) Education disclosure icon consistency 4) Tree spine/node alignment ====================================================================== */ /* ---------------------------------------------------------------------- 1) ONE SOURCE OF TRUTH FOR EVERY LOWER CONTEXT STRIP IMPORTANT: v155 mega-menu/header values are intentionally NOT touched. v155 desktop context deduction was 96px total = 48px each side. Requested: 3x the current side distance -> 144px each side. Therefore the new total deduction is 288px. v155 laptop context deduction was 120px total = 60px each side. Requested: 3x -> 180px each side = 360px total deduction. ---------------------------------------------------------------------- */ @media (min-width:1280px){ } @media (min-width:901px) and (max-width:1279px){ } @media (min-width:901px){ /* Covers Architecture first, then every current/future public inner page using a context bar, plus the two legacy equivalents. Viewport-centering is deliberate: older rules calculate margins against different parent widths, which is why pages drifted apart. */ } /* ---------------------------------------------------------------------- 2) STORE — hover stays accent; selected state returns to normal black/fg. No bold retained after click. ---------------------------------------------------------------------- */ html body .store-category-nav a.is-active, html body .store-subcategory-list a.is-active, html body .store-sort-list button.is-active, html body .store-subcategory-list a[aria-current="page"], html body .store-sort-list button[aria-pressed="true"]{ color:var(--fg)!important; font-weight:400!important; transform:none!important; } html body .store-category-nav a.is-active:is(:hover,:focus-visible), html body .store-subcategory-list a.is-active:is(:hover,:focus-visible), html body .store-sort-list button.is-active:is(:hover,:focus-visible), html body .store-subcategory-list a[aria-current="page"]:is(:hover,:focus-visible), html body .store-sort-list button[aria-pressed="true"]:is(:hover,:focus-visible){ color:var(--fg)!important; font-weight:400!important; transform:none!important; } /* ---------------------------------------------------------------------- 3) EDUCATION — remove legacy + / − and use the site's canonical quiet two-line disclosure mark everywhere inside educational pages. ---------------------------------------------------------------------- */ body.content-section-page #contentApp .v49-section details > summary::after, body.v90-education-item-page #contentApp .v49-section details > summary::after, body.v90-education-item-page #contentApp .v97-mobile-accordion-item > summary::after{ content:""!important; display:inline-block!important; visibility:visible!important; width:12px!important; height:10px!important; min-width:12px!important; flex:0 0 12px!important; margin:0!important; padding:0!important; border:0!important; color:currentColor!important; opacity:.78!important; transform:none!important; background: linear-gradient(currentColor,currentColor) 100% 2px/6px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 8px/11px 1px no-repeat!important; } body.content-section-page #contentApp .v49-section details[open] > summary::after, body.v90-education-item-page #contentApp .v49-section details[open] > summary::after, body.v90-education-item-page #contentApp .v97-mobile-accordion-item[open] > summary::after{ content:""!important; background: linear-gradient(currentColor,currentColor) 100% 2px/11px 1px no-repeat, linear-gradient(currentColor,currentColor) 100% 8px/6px 1px no-repeat!important; } /* ---------------------------------------------------------------------- 4) TREE DIAGRAMS — mathematical centre alignment. Spine and every diamond share exactly the same physical X coordinate. ---------------------------------------------------------------------- */ @media (min-width:721px){ /* About / company tree: 18px content inset, 7px node. 18 - 16 + 3.5 = 5.5px node centre; 5 + .5 = 5.5px spine centre. */ html[dir="rtl"] body .company-axis{ padding-left:0!important; padding-right:18px!important; } html[dir="rtl"] body .company-axis::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:5px!important; width:1px!important; } html[dir="rtl"] body .company-axis .practice-button::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:-16px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } html[dir="ltr"] body .company-axis{ padding-right:0!important; padding-left:18px!important; } html[dir="ltr"] body .company-axis::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:5px!important; width:1px!important; } html[dir="ltr"] body .company-axis .practice-button::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:-16px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } /* Learning-resource tree: 24px content inset, 7px node. 24 - 23 + 3.5 = 4.5px; spine centre = 4 + .5 = 4.5px. */ html[dir="rtl"] body #contentApp .learning-tree{ padding-left:0!important; padding-right:24px!important; } html[dir="rtl"] body #contentApp .learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:4px!important; width:1px!important; } html[dir="rtl"] body #contentApp .learning-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } html[dir="ltr"] body #contentApp .learning-tree{ padding-right:0!important; padding-left:24px!important; } html[dir="ltr"] body #contentApp .learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:4px!important; width:1px!important; } html[dir="ltr"] body #contentApp .learning-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } /* Current course-detail tree uses v115 class names; keep the exact same law. */ html[dir="rtl"] body #contentApp .v115-learning-tree{ padding-left:0!important; padding-right:24px!important; } html[dir="rtl"] body #contentApp .v115-learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:4px!important; width:1px!important; } html[dir="rtl"] body #contentApp .v115-tree-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; left:auto!important; right:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } html[dir="ltr"] body #contentApp .v115-learning-tree{ padding-right:0!important; padding-left:24px!important; } html[dir="ltr"] body #contentApp .v115-learning-tree::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:4px!important; width:1px!important; } html[dir="ltr"] body #contentApp .v115-tree-branch::before{ inset-inline-start:auto!important; inset-inline-end:auto!important; right:auto!important; left:-23px!important; width:7px!important; height:7px!important; box-sizing:border-box!important; } }