Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
WIKIPARTNER
GLOBAL LIGHT / DARK THEME
============================================================ */
/* ============================================================
LIGHT THEME
============================================================ */
:root,
html.wp-theme-light {
color-scheme: light;
--wp-teal: #0F6B65;
--wp-teal-dark: #09534E;
--wp-teal-soft: #EEF6F5;
--wp-gold: #E8A33D;
--wp-blue: #3E7CB1;
--wp-navy: #12233F;
--wp-charcoal: #2B2B2B;
--wp-text: #2B2B2B;
--wp-muted: #6D7378;
--wp-page-bg: #FAF9F7;
--wp-surface: #FFFFFF;
--wp-surface-2: #FAF7F2;
--wp-surface-3: #F3F5F4;
--wp-border: #DDDAD3;
--wp-heading: #12233F;
--wp-input-bg: #FFFFFF;
--wp-hover-bg: #EEF6F5;
--wp-shadow:
0 8px 24px
rgba(18, 35, 63, 0.08);
}
/* ============================================================
DARK THEME
============================================================ */
html.wp-theme-dark {
color-scheme: dark;
--wp-teal: #70CEC3;
--wp-teal-dark: #9BE2DA;
--wp-teal-soft: #173431;
--wp-gold: #E7B65E;
--wp-blue: #83B6DF;
--wp-navy: #EEE5D4;
--wp-charcoal: #E2E9E7;
--wp-text: #E2E9E7;
--wp-muted: #A4B0AE;
--wp-page-bg: #0C1517;
--wp-surface: #111D20;
--wp-surface-2: #162426;
--wp-surface-3: #1B2B2E;
--wp-border: #2B4144;
--wp-heading: #F0E7D7;
--wp-input-bg: #142225;
--wp-hover-bg: #193633;
--wp-shadow:
0 12px 32px
rgba(0, 0, 0, 0.30);
}
/* ============================================================
PAGE
============================================================ */
html.wp-theme-light body,
html.wp-theme-dark body {
background:
var(--wp-page-bg) !important;
color:
var(--wp-text) !important;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
/* ============================================================
HEADER
============================================================ */
html.wp-theme-light .wp-site-header,
html.wp-theme-dark .wp-site-header {
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
border-bottom-color:
var(--wp-teal) !important;
box-shadow:
var(--wp-shadow) !important;
}
/* ============================================================
SEARCH
============================================================ */
html.wp-theme-light .wp-search,
html.wp-theme-dark .wp-search {
background:
var(--wp-input-bg) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-light .wp-search input,
html.wp-theme-dark .wp-search input {
background:
transparent !important;
color:
var(--wp-text) !important;
}
html.wp-theme-dark .wp-search input::placeholder {
color:
#879794 !important;
}
html.wp-theme-light .wp-search button,
html.wp-theme-dark .wp-search button {
background:
var(--wp-input-bg) !important;
color:
var(--wp-teal) !important;
border-left-color:
var(--wp-border) !important;
}
html.wp-theme-light .wp-search button:hover,
html.wp-theme-dark .wp-search button:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
SEARCH AUTOCOMPLETE
============================================================ */
html.wp-theme-light .wp-search-suggestions,
html.wp-theme-dark .wp-search-suggestions {
background:
var(--wp-surface) !important;
border-color:
var(--wp-border) !important;
box-shadow:
var(--wp-shadow) !important;
}
html.wp-theme-light .wp-search-suggestion,
html.wp-theme-light .wp-search-suggestions a,
html.wp-theme-dark .wp-search-suggestion,
html.wp-theme-dark .wp-search-suggestions a {
background:
transparent !important;
color:
var(--wp-text) !important;
}
html.wp-theme-light .wp-search-suggestion:hover,
html.wp-theme-light .wp-search-suggestions a:hover,
html.wp-theme-light .wp-search-suggestion.is-active,
html.wp-theme-dark .wp-search-suggestion:hover,
html.wp-theme-dark .wp-search-suggestions a:hover,
html.wp-theme-dark .wp-search-suggestion.is-active {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal) !important;
}
/* ============================================================
MAIN WEBSITE
============================================================ */
html.wp-theme-light .wp-page,
html.wp-theme-dark .wp-page {
background:
var(--wp-page-bg) !important;
color:
var(--wp-text) !important;
}
html.wp-theme-light .wp-content,
html.wp-theme-dark .wp-content {
background:
transparent !important;
color:
var(--wp-text) !important;
}
/* ============================================================
ARTICLE HEADER
============================================================ */
html.wp-theme-light .wp-article-header,
html.wp-theme-dark .wp-article-header {
background:
transparent !important;
color:
var(--wp-text) !important;
}
html.wp-theme-light .firstHeading,
html.wp-theme-dark .firstHeading,
html.wp-theme-light .mw-parser-output h1,
html.wp-theme-dark .mw-parser-output h1,
html.wp-theme-light .mw-parser-output h2,
html.wp-theme-dark .mw-parser-output h2,
html.wp-theme-light .mw-parser-output h3,
html.wp-theme-dark .mw-parser-output h3,
html.wp-theme-light .mw-parser-output h4,
html.wp-theme-dark .mw-parser-output h4 {
color:
var(--wp-heading) !important;
}
/* ============================================================
ARTICLE BODY
============================================================ */
html.wp-theme-light .wp-article-body,
html.wp-theme-dark .wp-article-body,
html.wp-theme-light .mw-body,
html.wp-theme-dark .mw-body,
html.wp-theme-light .mw-body-content,
html.wp-theme-dark .mw-body-content,
html.wp-theme-light .mw-parser-output,
html.wp-theme-dark .mw-parser-output {
background:
transparent !important;
color:
var(--wp-text) !important;
}
/* ============================================================
PARAGRAPHS / TEXT
============================================================ */
html.wp-theme-dark .mw-parser-output p,
html.wp-theme-dark .mw-parser-output li,
html.wp-theme-dark .mw-parser-output dd,
html.wp-theme-dark .mw-parser-output dt {
color:
var(--wp-text) !important;
}
/* ============================================================
LINKS
============================================================ */
html.wp-theme-light a,
html.wp-theme-dark a {
color:
var(--wp-teal);
}
html.wp-theme-light a:hover,
html.wp-theme-dark a:hover {
color:
var(--wp-teal-dark);
}
/* ============================================================
SIDEBARS
============================================================ */
html.wp-theme-light .wp-sidebar-box,
html.wp-theme-dark .wp-sidebar-box {
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
box-shadow:
var(--wp-shadow) !important;
}
html.wp-theme-light .wp-sidebar-section,
html.wp-theme-dark .wp-sidebar-section {
border-color:
var(--wp-border) !important;
}
html.wp-theme-light .wp-sidebar-title,
html.wp-theme-dark .wp-sidebar-title {
color:
var(--wp-heading) !important;
}
html.wp-theme-light .wp-sidebar-static-item,
html.wp-theme-dark .wp-sidebar-static-item {
color:
var(--wp-muted) !important;
}
html.wp-theme-light .wp-sidebar-highlight,
html.wp-theme-dark .wp-sidebar-highlight {
background:
var(--wp-surface-2) !important;
}
/* ============================================================
CONTENTS BUTTON
============================================================ */
html.wp-theme-light .wp-toc-button,
html.wp-theme-dark .wp-toc-button {
background:
var(--wp-surface) !important;
color:
var(--wp-teal) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-light .wp-toc-popover,
html.wp-theme-dark .wp-toc-popover {
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
box-shadow:
var(--wp-shadow) !important;
}
html.wp-theme-light .wp-toc-heading,
html.wp-theme-dark .wp-toc-heading {
color:
var(--wp-heading) !important;
}
/* ============================================================
INFOBOX
============================================================ */
html.wp-theme-light .infobox,
html.wp-theme-dark .infobox {
background:
var(--wp-surface-2) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-light .infobox th,
html.wp-theme-dark .infobox th {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-heading) !important;
}
html.wp-theme-light .infobox td,
html.wp-theme-dark .infobox td {
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
/* ============================================================
TABLES
============================================================ */
html.wp-theme-dark .mw-parser-output table {
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-dark .mw-parser-output table th {
background:
var(--wp-surface-3) !important;
color:
var(--wp-heading) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-dark .mw-parser-output table td {
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
/* ============================================================
MEDIAWIKI FORMS
============================================================ */
html.wp-theme-dark input,
html.wp-theme-dark textarea,
html.wp-theme-dark select {
background:
var(--wp-input-bg) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
/* ============================================================
CODE
============================================================ */
html.wp-theme-dark pre,
html.wp-theme-dark code,
html.wp-theme-dark .mw-code {
background:
#142225 !important;
color:
#E4ECEA !important;
border-color:
var(--wp-border) !important;
}
/* ============================================================
USER AREA
============================================================ */
.wp-user-area {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
}
/* ============================================================
USERNAME
============================================================ */
.wp-user-primary {
margin: 0;
padding: 0;
display: flex;
align-items: center;
list-style: none;
}
.wp-user-primary.is-empty {
display: none;
}
.wp-user-primary > li {
margin: 0;
padding: 0;
list-style: none;
}
.wp-user-primary > li > a {
min-height: 34px;
padding:
8px
11px;
display: inline-flex;
align-items: center;
border-radius: 7px;
color:
var(--wp-teal) !important;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
}
.wp-user-primary > li > a:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
USER MENU TOP LEVEL
============================================================ */
.wp-user-menu-list {
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 7px;
list-style: none;
}
.wp-user-menu-list > li {
margin: 0;
padding: 0;
list-style: none;
}
/* ============================================================
LOGGED-OUT LINKS
============================================================ */
.wp-user-menu-list.wp-is-logged-out > li > a {
min-height: 34px;
padding:
8px
11px;
display: inline-flex;
align-items: center;
border:
1px solid
var(--wp-border);
border-radius: 7px;
background:
var(--wp-surface-2);
color:
var(--wp-teal) !important;
font-size: 12px;
font-weight: 600;
text-decoration: none !important;
}
.wp-user-menu-list.wp-is-logged-out > li > a:hover {
background:
var(--wp-hover-bg);
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
THEME BUTTON
============================================================ */
.wikipartner-theme-item {
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
list-style: none !important;
}
.wikipartner-theme-toggle {
width: 35px;
height: 35px;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 35px;
cursor: pointer;
appearance: none;
background:
var(--wp-surface-2) !important;
color:
var(--wp-teal) !important;
border:
1px solid
var(--wp-border) !important;
border-radius: 50%;
box-shadow: none !important;
transition:
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
.wikipartner-theme-toggle:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
transform:
rotate(-7deg);
}
.wp-theme-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.wp-theme-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ============================================================
HAMBURGER
============================================================ */
.wp-user-dropdown {
position: relative;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.wp-user-menu-trigger {
width: 35px;
height: 35px;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
appearance: none;
background:
var(--wp-surface-2) !important;
color:
var(--wp-teal) !important;
border:
1px solid
var(--wp-border) !important;
border-radius: 8px;
transition:
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
}
.wp-user-menu-trigger:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
HAMBURGER LINES
============================================================ */
.wp-menu-bars {
width: 17px;
height: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wp-menu-bars > span {
width: 100%;
height: 2px;
display: block;
background:
currentColor;
border-radius: 999px;
}
/* ============================================================
HAMBURGER DROPDOWN
============================================================ */
.wp-user-dropdown-menu {
position: absolute;
top:
calc(100% + 10px);
right: 0;
z-index: 9999;
width: 220px;
margin: 0;
padding: 6px;
list-style: none;
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border:
1px solid
var(--wp-border) !important;
border-radius: 10px;
box-shadow:
var(--wp-shadow) !important;
}
.wp-user-dropdown-menu[hidden] {
display: none !important;
}
.wp-user-dropdown-menu > li {
width: 100%;
margin: 0 !important;
padding: 0 !important;
display: block;
list-style: none !important;
}
.wp-user-dropdown-menu > li > a {
width: 100%;
min-height: 38px;
padding:
9px
11px;
display: flex;
align-items: center;
background:
transparent !important;
color:
var(--wp-text) !important;
border: 0 !important;
border-radius: 7px;
font-size: 12px;
font-weight: 500;
text-decoration: none !important;
}
.wp-user-dropdown-menu > li > a:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
.wp-user-dropdown-menu #pt-logout > a {
margin-top: 4px;
border-top:
1px solid
var(--wp-border) !important;
}
/* ============================================================
FOOTER
============================================================ */
html.wp-theme-light .wp-footer,
html.wp-theme-dark .wp-footer {
background:
var(--wp-surface) !important;
color:
var(--wp-muted) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-light .wp-footer-inner,
html.wp-theme-dark .wp-footer-inner {
color:
var(--wp-muted) !important;
}
html.wp-theme-light .wp-footer a,
html.wp-theme-dark .wp-footer a {
color:
var(--wp-teal) !important;
}
html.wp-theme-light .wp-social-icon,
html.wp-theme-dark .wp-social-icon {
background:
var(--wp-surface-2) !important;
color:
var(--wp-teal) !important;
border-color:
var(--wp-border) !important;
}
/* ============================================================
COMMON HOMEPAGE / COMPONENT SURFACES
============================================================ */
/*
These selectors intentionally cover WikiPartner components
that may still have hard-coded white backgrounds in the
skin's homepage.css/components.css files.
*/
html.wp-theme-dark
[class*="wp-card"],
html.wp-theme-dark
[class*="wp-box"],
html.wp-theme-dark
[class*="wp-panel"],
html.wp-theme-dark
[class*="wp-section-card"],
html.wp-theme-dark
[class*="wp-feature"] {
background-color:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
html.wp-theme-dark
[class*="wp-card"] h1,
html.wp-theme-dark
[class*="wp-card"] h2,
html.wp-theme-dark
[class*="wp-card"] h3,
html.wp-theme-dark
[class*="wp-box"] h1,
html.wp-theme-dark
[class*="wp-box"] h2,
html.wp-theme-dark
[class*="wp-box"] h3 {
color:
var(--wp-heading) !important;
}
/* ============================================================
MEDIAWIKI NOTICES
============================================================ */
html.wp-theme-dark .mw-message-box,
html.wp-theme-dark .warningbox,
html.wp-theme-dark .errorbox,
html.wp-theme-dark .successbox {
color:
var(--wp-text) !important;
border-color:
var(--wp-border) !important;
}
/* ============================================================
SELECTION
============================================================ */
html.wp-theme-dark ::selection {
background:
#24514C;
color:
#FFFFFF;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 700px) {
.wp-user-dropdown-menu {
width: 200px;
}
.wikipartner-theme-toggle,
.wp-user-menu-trigger {
width: 32px;
height: 32px;
flex-basis: 32px;
}
.wp-theme-icon,
.wp-theme-icon svg {
width: 16px;
height: 16px;
}
}
/* ============================================================
WIKIPARTNER
RESTORE SIDEBAR CARD SEPARATION + FOOTER ACCENT
============================================================ */
/* ============================================================
SIDEBAR OUTER WRAPPER
Must stay transparent so gaps between cards remain visible.
============================================================ */
html.wp-theme-light .wp-sidebar-box,
html.wp-theme-dark .wp-sidebar-box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ============================================================
INDIVIDUAL SIDEBAR CARDS
============================================================ */
html.wp-theme-light .wp-sidebar-section,
html.wp-theme-dark .wp-sidebar-section {
background: var(--wp-surface) !important;
color: var(--wp-text) !important;
border-color: var(--wp-border) !important;
box-shadow:
0 7px 18px
rgba(18, 35, 63, 0.055) !important;
}
/* Keep proper separation between every card */
.wp-sidebar-section + .wp-sidebar-section {
margin-top: 16px !important;
}
/* ============================================================
LEFT SIDEBAR — TEAL ACCENT
============================================================ */
html.wp-theme-light
.wp-left-sidebar
.wp-sidebar-section,
html.wp-theme-dark
.wp-left-sidebar
.wp-sidebar-section {
border-top-color: var(--wp-teal) !important;
}
/* ============================================================
RIGHT SIDEBAR — GOLD ACCENT
============================================================ */
html.wp-theme-light
.wp-right-sidebar
.wp-sidebar-section,
html.wp-theme-dark
.wp-right-sidebar
.wp-sidebar-section {
border-top-color: var(--wp-gold) !important;
}
/* ============================================================
FOOTER
Restore WikiPartner teal top accent.
============================================================ */
html.wp-theme-light .wp-footer,
html.wp-theme-dark .wp-footer {
border-top:
4px solid
var(--wp-teal) !important;
}
/* ============================================================
LIGHT MODE PAGE BACKGROUND
Keeps visible warm gaps around white sidebar cards.
============================================================ */
html.wp-theme-light body,
html.wp-theme-light .wp-page {
background:
#FAF7F2 !important;
}
/* ============================================================
DARK MODE PAGE BACKGROUND
============================================================ */
html.wp-theme-dark body,
html.wp-theme-dark .wp-page {
background:
var(--wp-page-bg) !important;
}
/* ============================================================
DARK MODE SIDEBAR SHADOW
============================================================ */
html.wp-theme-dark
.wp-sidebar-section {
box-shadow:
0 8px 22px
rgba(0, 0, 0, 0.22) !important;
}
/* ============================================================
USER DROPDOWN — WIKIPARTNER ACCENT
============================================================ */
.wp-user-dropdown-menu {
border-top:
4px solid
var(--wp-teal) !important;
border-radius:
10px !important;
}
/* ============================================================
REMOVE DIVIDER ABOVE LOG OUT
============================================================ */
.wp-user-dropdown-menu #pt-logout > a {
border-top:
0 !important;
margin-top:
0 !important;
}
/* ============================================================
ARTICLE CONTENTS DROPDOWN
Match WikiPartner user hamburger menu
============================================================ */
/* ============================================================
CONTENTS DROPDOWN BOX
============================================================ */
.wp-toc-popover {
width: 220px !important;
margin: 0 !important;
padding: 6px !important;
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border:
1px solid
var(--wp-border) !important;
border-top:
4px solid
var(--wp-teal) !important;
border-radius:
10px !important;
box-shadow:
var(--wp-shadow) !important;
}
/* ============================================================
CONTENTS HEADING
============================================================ */
.wp-toc-heading {
margin: 0 !important;
padding:
9px
11px !important;
color:
var(--wp-heading) !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
/* ============================================================
CONTENTS LINKS WRAPPER
============================================================ */
.wp-toc-links {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================
CONTENTS LINKS
============================================================ */
.wp-toc-links > a {
width: 100% !important;
min-height: 38px !important;
margin: 0 !important;
padding:
9px
11px !important;
display: flex !important;
align-items: center !important;
background:
transparent !important;
color:
var(--wp-text) !important;
border: 0 !important;
border-radius:
7px !important;
font-size:
12px !important;
font-weight:
500 !important;
line-height:
1.25 !important;
text-decoration:
none !important;
transition:
background 0.15s ease,
color 0.15s ease !important;
}
/* ============================================================
CONTENTS LINK HOVER
============================================================ */
.wp-toc-links > a:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
text-decoration:
none !important;
}
/* ============================================================
"(TOP)" LINK
============================================================ */
.wp-toc-links > .wp-toc-top {
color:
var(--wp-teal) !important;
font-weight:
600 !important;
}
/* ============================================================
NESTED CONTENTS LEVELS
============================================================ */
.wp-toc-links .wp-toc-level-2 {
padding-left:
20px !important;
}
.wp-toc-links .wp-toc-level-3 {
padding-left:
30px !important;
font-size:
11.5px !important;
}
.wp-toc-links .wp-toc-level-4 {
padding-left:
40px !important;
font-size:
11px !important;
}
/* ============================================================
CONTENTS HAMBURGER BUTTON
Match user hamburger button
============================================================ */
.wp-toc-button {
width: 35px !important;
height: 35px !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
background:
var(--wp-surface-2) !important;
color:
var(--wp-teal) !important;
border:
1px solid
var(--wp-border) !important;
border-radius:
8px !important;
transition:
background 0.15s ease,
color 0.15s ease,
border-color 0.15s ease !important;
}
.wp-toc-button:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
CONTENTS HAMBURGER LINES
============================================================ */
.wp-toc-icon {
width: 17px !important;
height: 14px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.wp-toc-icon > span {
width: 100% !important;
height: 2px !important;
display: block !important;
background:
currentColor !important;
border-radius:
999px !important;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 700px) {
.wp-toc-popover {
width: 200px !important;
}
.wp-toc-button {
width: 32px !important;
height: 32px !important;
}
}
/* ============================================================
ARTICLE CONTENTS — FINAL CLEANUP
============================================================ */
/* Hide completely when article has no headings */
.wp-title-toc[hidden] {
display: none !important;
}
/* ============================================================
CONTENTS DROPDOWN
============================================================ */
.wp-toc-popover {
width: 220px !important;
margin: 0 !important;
padding: 6px !important;
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border:
1px solid
var(--wp-border) !important;
border-top:
4px solid
var(--wp-teal) !important;
border-radius:
10px !important;
box-shadow:
var(--wp-shadow) !important;
}
/* ============================================================
REMOVE OLD CONTENTS/TOP STYLING
============================================================ */
.wp-toc-heading,
.wp-toc-top {
display: none !important;
}
/* ============================================================
HEADING LIST
============================================================ */
.wp-toc-links {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
/* ============================================================
ARTICLE HEADING LINKS
============================================================ */
.wp-toc-links > a {
width: 100% !important;
min-height: 37px !important;
margin: 0 !important;
padding:
9px
11px !important;
display: flex !important;
align-items: center !important;
background:
transparent !important;
border:
0 !important;
border-radius:
7px !important;
color:
var(--wp-text) !important;
font-size:
12px !important;
font-weight:
500 !important;
line-height:
1.3 !important;
text-decoration:
none !important;
transition:
background 0.15s ease,
color 0.15s ease;
}
.wp-toc-links > a:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
HEADING LEVEL INDENTATION
============================================================ */
.wp-toc-links > .wp-toc-level-2 {
padding-left:
11px !important;
font-weight:
600 !important;
}
.wp-toc-links > .wp-toc-level-3 {
padding-left:
24px !important;
}
.wp-toc-links > .wp-toc-level-4 {
padding-left:
37px !important;
font-size:
11.5px !important;
}
.wp-toc-links > .wp-toc-level-5 {
padding-left:
50px !important;
font-size:
11px !important;
}
.wp-toc-links > .wp-toc-level-6 {
padding-left:
63px !important;
font-size:
11px !important;
}
/* ============================================================
ACCENT
============================================================ */
html.wp-theme-light .wp-toc-popover,
html.wp-theme-dark .wp-toc-popover {
border-top-color:
var(--wp-teal) !important;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 700px) {
.wp-toc-popover {
width:
200px !important;
}
}
/* ============================================================
ARTICLE CONTENTS
ONLY SHOW WHEN REAL HEADINGS EXIST
============================================================ */
/*
Hidden by default.
JavaScript adds .wp-toc-ready only when the
article actually contains H2/H3/H4/H5/H6 headings.
*/
.wp-title-toc:not(.wp-toc-ready) {
display: none !important;
}
/*
Restore normal positioning once headings exist.
*/
.wp-title-toc.wp-toc-ready {
display: inline-block;
}
/* ============================================================
REMOVE OLD CONTENTS LABEL / TOP LINK
============================================================ */
.wp-title-toc .wp-toc-heading,
.wp-title-toc .wp-toc-top {
display: none !important;
}
/* ============================================================
CONTENTS DROPDOWN ACCENT
============================================================ */
.wp-title-toc .wp-toc-popover {
border:
1px solid
var(--wp-border) !important;
border-top:
4px solid
var(--wp-teal) !important;
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-radius:
10px !important;
padding:
6px !important;
box-shadow:
var(--wp-shadow) !important;
}
/* Remove any old divider at the top */
.wp-title-toc .wp-toc-links {
border-top:
0 !important;
margin:
0 !important;
padding:
0 !important;
}
/* ============================================================
REAL ARTICLE HEADING LINKS
============================================================ */
.wp-title-toc .wp-toc-links > a {
width: 100% !important;
min-height: 37px !important;
margin:
0 !important;
padding:
9px
11px !important;
display:
flex !important;
align-items:
center !important;
background:
transparent !important;
border:
0 !important;
border-radius:
7px !important;
color:
var(--wp-text) !important;
font-size:
12px !important;
font-weight:
500 !important;
line-height:
1.3 !important;
text-decoration:
none !important;
}
.wp-title-toc .wp-toc-links > a:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
HEADING LEVELS
============================================================ */
.wp-title-toc .wp-toc-level-2 {
padding-left:
11px !important;
font-weight:
600 !important;
}
.wp-title-toc .wp-toc-level-3 {
padding-left:
24px !important;
}
.wp-title-toc .wp-toc-level-4 {
padding-left:
37px !important;
font-size:
11.5px !important;
}
.wp-title-toc .wp-toc-level-5 {
padding-left:
50px !important;
font-size:
11px !important;
}
.wp-title-toc .wp-toc-level-6 {
padding-left:
63px !important;
font-size:
11px !important;
}