/* ── Topic colour palette ───────────────────────────────────────────────── * * Five parent-topic colour schemes. Each class is applied to individual * .field__item wrappers (tag pills on nodes) and to on taxonomy term * pages. Child terms inherit the same class as their parent. * * Class → parent topic * .topic-color--crimson Weapons (tid 10) * .topic-color--rust International and Regional Arms Trade (tid 18) * .topic-color--forest United States Policy and Practice (tid 1) * .topic-color--gold Implications of the Trade (tid 26) * .topic-color--purple International Instruments (tid 6) * ─────────────────────────────────────────────────────────────────────── */ /* ── CSS custom properties ──────────────────────────────────────────────── */ .topic-color--crimson { --tc-bg: #FAF5F6; --tc-font: #793A48; --tc-border: #B56F7E; } .topic-color--rust { --tc-bg: #F9F8F2; --tc-font: #A4620D; --tc-border: #CA852C; } .topic-color--forest { --tc-bg: #F2F8F7; --tc-font: #15594E; --tc-border: #4F9C90; } .topic-color--gold { --tc-bg: #F9F8F2; --tc-font: #4F5500; --tc-border: #A7A34A; } .topic-color--purple { --tc-bg: #F7F5FA; --tc-font: #55428A; --tc-border: #8B76B8; } /* ── Tag pills on nodes (field items) ───────────────────────────────────── */ /* Shared pill layout — applies to both teaser and full-node topic lists */ .fat-expert-teaser__topics .field__items, .expert-full__topics .field__items { display: flex; flex-wrap: wrap; gap: 0.5rem; } .fat-expert-teaser__topics .field__item, .expert-full__topics .field__item { padding: 0rem 0.75rem; border-radius: 0px; background: #f3f4f6; } /* Solo's site-wide "inline items" setting adds margin-inline-end to this same .field.taxonomy-term-entity.field__items>.field__item element; the flex gap above already owns pill spacing, so cancel that added margin here (selector matched at equal-or-higher specificity to guarantee it wins). */ .solo__inline-items .fat-expert-teaser__topics .field.taxonomy-term-entity.field__items > .field__item, .solo__inline-items .expert-full__topics .field.taxonomy-term-entity.field__items > .field__item { margin-inline-end: 0; } /* Override the default grey background set in style.css and expert-full.css */ .field__item.topic-color--crimson, .field__item.topic-color--rust, .field__item.topic-color--forest, .field__item.topic-color--gold, .field__item.topic-color--purple { background-color: var(--tc-bg); border: 0px solid var(--tc-border); } .field__item.topic-color--crimson a, .field__item.topic-color--rust a, .field__item.topic-color--forest a, .field__item.topic-color--gold a, .field__item.topic-color--purple a { color: var(--tc-font); text-decoration: none; text-transform:capitalize; } .page-wrapper .field__item.topic-color--crimson a:hover, .page-wrapper .field__item.topic-color--rust a:hover, .page-wrapper .field__item.topic-color--forest a:hover, .page-wrapper .field__item.topic-color--gold a:hover, .page-wrapper .field__item.topic-color--purple a:hover { color: var(--tc-font); text-decoration: none; font-weight: 600; /*font-size:.95rem;*/ } /* ── Topic page — page-title header region ──────────────────────────────── */ body.topic-color--crimson .page-title, body.topic-color--rust .page-title, body.topic-color--forest .page-title, body.topic-color--gold .page-title, body.topic-color--purple .page-title { background-color: var(--tc-bg); border-top: 1px solid var(--tc-border); border-bottom: 3px solid var(--tc-border); padding: 0; } body.topic-color--crimson .block-page-title-block h1.page-title-text, body.topic-color--rust .block-page-title-block h1.page-title-text, body.topic-color--forest .block-page-title-block h1.page-title-text, body.topic-color--gold .block-page-title-block h1.page-title-text, body.topic-color--purple .block-page-title-block h1.page-title-text { color: var(--tc-font); font-size: calc(2 * var(--solo-px32)); line-height: calc(2 * var(--solo-px38)); padding-block: var(--solo-px32); padding-inline: 0; } body.topic-color--crimson .topic-page-title-block.has-topic-description, body.topic-color--rust .topic-page-title-block.has-topic-description, body.topic-color--forest .topic-page-title-block.has-topic-description, body.topic-color--gold .topic-page-title-block.has-topic-description, body.topic-color--purple .topic-page-title-block.has-topic-description { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 3rem; align-items: start; text-align: left; } body.topic-color--crimson .topic-page-title-block.has-topic-description .page-title-text, body.topic-color--rust .topic-page-title-block.has-topic-description .page-title-text, body.topic-color--forest .topic-page-title-block.has-topic-description .page-title-text, body.topic-color--gold .topic-page-title-block.has-topic-description .page-title-text, body.topic-color--purple .topic-page-title-block.has-topic-description .page-title-text { justify-content: flex-start; text-align: left; } body.topic-color--crimson .topic-page-title__description, body.topic-color--rust .topic-page-title__description, body.topic-color--forest .topic-page-title__description, body.topic-color--gold .topic-page-title__description, body.topic-color--purple .topic-page-title__description { font-family: var(--at-font-body); font-size: 1rem; line-height: 1.5; } body.topic-color--crimson .topic-page-title__description p, body.topic-color--rust .topic-page-title__description p, body.topic-color--forest .topic-page-title__description p, body.topic-color--gold .topic-page-title__description p, body.topic-color--purple .topic-page-title__description p { margin: 0; } @media (max-width: 74.99875rem) { body.topic-color--crimson .block-page-title-block h1.page-title-text, body.topic-color--rust .block-page-title-block h1.page-title-text, body.topic-color--forest .block-page-title-block h1.page-title-text, body.topic-color--gold .block-page-title-block h1.page-title-text, body.topic-color--purple .block-page-title-block h1.page-title-text { font-size: calc(2 * var(--solo-px24)); line-height: calc(2 * var(--solo-px28)); } } @media (max-width: 61.99875rem) { body.topic-color--crimson .block-page-title-block h1.page-title-text, body.topic-color--rust .block-page-title-block h1.page-title-text, body.topic-color--forest .block-page-title-block h1.page-title-text, body.topic-color--gold .block-page-title-block h1.page-title-text, body.topic-color--purple .block-page-title-block h1.page-title-text { font-size: var(--solo-px36); line-height: calc(2 * var(--solo-px22)); padding-block: var(--solo-px16); } } @media (max-width: 47.99875rem) { body.topic-color--crimson .block-page-title-block h1.page-title-text, body.topic-color--rust .block-page-title-block h1.page-title-text, body.topic-color--forest .block-page-title-block h1.page-title-text, body.topic-color--gold .block-page-title-block h1.page-title-text, body.topic-color--purple .block-page-title-block h1.page-title-text { font-size: var(--solo-px24); line-height: calc(2 * var(--solo-px14)); padding-block: var(--solo-px8); } } @media (max-width: 35.99875rem) { body.topic-color--crimson .block-page-title-block h1.page-title-text, body.topic-color--rust .block-page-title-block h1.page-title-text, body.topic-color--forest .block-page-title-block h1.page-title-text, body.topic-color--gold .block-page-title-block h1.page-title-text, body.topic-color--purple .block-page-title-block h1.page-title-text { font-size: var(--solo-px18); line-height: var(--solo-px22); } } /* ── Topic menu buttons ─────────────────────────────────────────────────── */ /* * Specificity ladder (highest competitor wins unless we match or exceed it): * border: none .solo-inner ul.navigation__menubar li > a.nav__menu-link (0,3,3) * background/color .page-wrapper li.nav__menu-item > a (0,2,2) * --r-bg/--r-tx vars .page-wrapper .header li.nav__menu-item > a (0,3,2) * * Our selector reaches (0,5,3) — beats all three without !important. * The topic-color--* class stays on

so CSS variables cascade into . */ .page-wrapper .solo-inner ul.navigation__menubar li.nav__menu-item > a.btn_menu_topic { background: var(--tc-bg); color: var(--tc-font); border: 1px solid lightgrey; border-radius: 4px; padding-top: 8px; padding-bottom: 8px; text-decoration: none; } .page-wrapper .solo-inner .menu--topics .dropdown-toggler-parent { display: none !important; } .page-wrapper .solo-inner nav.menu--topics button.dropdown-toggler-parent, .page-wrapper .solo-inner nav.menu--topics button.dropdown-toggler-parent .dropdown-arrow { display: none !important; } /* Topic parents open their subtopics on click, not on hover. */ .page-wrapper .solo-inner .forum-topic-menu--click ul.navigation__menubar li.has-sub__menu > ul.sub__menu { display: none !important; } .page-wrapper .solo-inner .forum-topic-menu--click ul.navigation__menubar li.has-sub__menu.forum-topic-menu--open > ul.sub__menu { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; } .page-wrapper .solo-inner .forum-topic-menu--click ul.navigation__menubar li.has-sub__menu.forum-topic-menu--open > ul.sub__menu > li { width: 100%; } .page-wrapper .solo-inner .forum-topic-menu--always-expanded ul.navigation__menubar li.has-sub__menu > ul.sub__menu { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; } .page-wrapper .solo-inner .forum-topic-menu--always-expanded .dropdown-toggler-parent { display: block !important; color: var(--tc-font); font-weight: 700; pointer-events: none; } .page-wrapper .solo-inner #block-solo-forumarmstrade-topics-2 .navigation__menubar > li:nth-child(1) { --tc-font: #15594E; } .page-wrapper .solo-inner #block-solo-forumarmstrade-topics-2 .navigation__menubar > li:nth-child(2) { --tc-font: #4F5500; } .page-wrapper .solo-inner #block-solo-forumarmstrade-topics-2 .navigation__menubar > li:nth-child(3) { --tc-font: #793A48; } .page-wrapper .solo-inner .forum-topic-menu--always-expanded .dropdown-toggler-parent, .page-wrapper .solo-inner .forum-topic-menu--always-expanded ul.sub__menu a.btn_menu_topic { color: var(--tc-font); } .page-wrapper .solo-inner .forum-topic-menu--always-expanded .dropdown-toggler-parent button { pointer-events: none; } .page-wrapper .solo-inner .forum-topic-menu--always-expanded ul.navigation__menubar li.has-sub__menu > ul.sub__menu > li { width: 100%; } .page-wrapper .solo-inner ul.navigation__menubar li.nav__menu-item > a.btn_menu_topic:hover, .page-wrapper .solo-inner ul.navigation__menubar li.nav__menu-item > a.btn_menu_topic:focus { background-color: var(--tc-bg); color: var(--tc-font); text-decoration: none; font-weight: 500; } .page-wrapper .solo-inner ul.navigation__menubar > li.nav__menubar-item > a.btn_menu_topic, .page-wrapper .solo-inner ul.navigation__menubar > li.nav__menubar-item > a.btn_menu_topic:hover, .page-wrapper .solo-inner ul.navigation__menubar > li.nav__menubar-item > a.btn_menu_topic:focus { background: transparent; border: 0; font-weight: 700; } .page-wrapper .solo-inner nav.menu--topics ul.sub__menu li.nav__menu-item > a.btn_menu_topic, .page-wrapper .solo-inner nav.menu--topics ul.sub__menu li.nav__menu-item > a.btn_menu_topic:hover, .page-wrapper .solo-inner nav.menu--topics ul.sub__menu li.nav__menu-item > a.btn_menu_topic:focus { background: transparent; border: 0; } /* ── Taxonomy term page — topic layout ──────────────────────────────────── */ .contextual-region .taxonomy-term .vocabulary-topics, .contextual-region .taxonomy-term .vocabulary-topics-2026 { max-width: fit-content; justify-self: center; } .contextual-region .taxonomy-term.vocabulary-topics-2026 { width: 100%; max-width: none; } body.path-vocabulary-topics-2026 #sidebar-box-main, body.path-vocabulary-topics-2026 #sidebar-box-main .sidebar-box-main-inner { width: 100%; max-width: none; } body.path-vocabulary-topics-2026 #main-container-inner { max-width: none; } /* ── Topic experts filter bar ───────────────────────────────────────────── */ .topic-experts__filter-bar { margin-bottom: 72px; gap: 0; } .topic-experts__filter-btn { border-left: 3px solid var(--tc-bg); border-right: 3px solid var(--tc-bg); border-top: none; border-bottom: none; text-transform: capitalize; font-size: 1.2em; } .topic-experts__filter-btn:hover { background: transparent; font-weight: 600; } .topic-experts__filter-btn.is-active { background: transparent; color: var(--tc-font); }