/* ======================================== GLOSSARY — specific styles Inherits from styles.css (body, nav, footer, a11y) Does not modify any site-wide styles. ======================================== */ /* The [hidden] attribute must override display: flex/grid/block on these glossary elements. Browser default is display: none with low specificity. */ .gloss-tool-callout[hidden], .gloss-disambiguation[hidden], .gloss-peer-review[hidden], .gloss-confusable[hidden], .gloss-entry-foot[hidden], .gloss-404[hidden] { display: none !important; } /* ======================================== PAGE WRAPPER Keeps body scrollable on glossary pages. styles.css sets body { overflow: hidden } for the homepage morph; .morphed class already re-enables Y-scroll, which is why this template uses directly. ======================================== */ .glossary-page { min-height: 100vh; background-color: var(--bg-blue); color: var(--white); padding-top: var(--nav-height); } /* ======================================== BREADCRUMB — page top, on dark background ======================================== */ .gloss-breadcrumb { background-color: var(--bg-blue); padding: 0.875rem 2rem 0; } .gloss-breadcrumb__inner { max-width: 720px; width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); } .gloss-breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.15s ease; } .gloss-breadcrumb a:hover { color: var(--white); } .gloss-breadcrumb__sep { color: rgba(255, 255, 255, 0.4); } .gloss-breadcrumb__inner > span:last-child { color: rgba(255, 255, 255, 0.85); } /* ======================================== ENTRY HERO Title dominant, subtitle elevated above as eyebrow. ======================================== */ .gloss-entry-hero { background-color: var(--bg-blue); padding: 1.25rem 2rem 0.5rem; } .gloss-entry-hero__inner { max-width: 720px; margin: 0 auto; } .gloss-entry-hero__subtitle { font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.65); margin: 0 0 0.625rem; letter-spacing: 0.01em; } .gloss-entry-hero__title { font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 2.5rem; letter-spacing: -0.01em; margin: 0; color: var(--white); line-height: 1.1; } /* ======================================== ENTRY BODY Card on dark blue background — matches library card style. ======================================== */ .gloss-entry-body { background-color: var(--bg-blue); padding: 0 2rem 2.5rem; min-height: 50vh; } .gloss-entry-body__inner { max-width: 720px; width: 100%; margin: 0 auto; background: #F4F6F9; border: 1px solid #D1D5DB; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); border-radius: 10px; padding: 2rem 2.25rem; color: #374151; } /* Definition prose */ .gloss-definition { font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.7; color: #374151; } .gloss-definition p { margin: 0 0 1.25rem; } .gloss-definition p:last-child { margin-bottom: 0; } .gloss-definition a { color: var(--bg-blue); text-decoration: none; border-bottom: 1px solid rgba(22, 47, 122, 0.35); transition: border-color 0.15s ease; } .gloss-definition a:hover { border-bottom-color: var(--bg-blue); } /* ======================================== DISAMBIGUATION — inline italic note Sits between definition paragraphs. ======================================== */ .gloss-disambiguation { font-family: 'Fira Sans', sans-serif; font-style: italic; font-size: 0.9375rem; font-weight: 400; line-height: 1.65; color: #555; padding-left: 14px; border-left: 2px solid rgba(0, 0, 0, 0.18); margin: 0 0 1.5rem; } /* ======================================== TOOL CALLOUT In-body, color derived from tool (CSS var set inline by JS). Defaults to site blue if no tool color specified. ======================================== */ .gloss-tool-callout { display: flex; align-items: center; gap: 14px; text-decoration: none; background: var(--tool-bg, #E1F5EE); border: 1px solid var(--tool-border, #9FE1CB); border-radius: 8px; padding: 18px 20px; margin: 0 0 1.5rem; color: var(--tool-text, #085041); transition: transform 0.15s ease, box-shadow 0.15s ease; } .gloss-tool-callout:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .gloss-tool-callout__icon { flex-shrink: 0; width: 40px; height: 40px; } .gloss-tool-callout__body { flex: 1; } .gloss-tool-callout__eyebrow { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 4px; color: var(--tool-text-muted, #0F6E56); } .gloss-tool-callout__name { font-size: 0.9375rem; font-weight: 500; margin: 0 0 2px; } .gloss-tool-callout__desc { font-size: 0.8125rem; line-height: 1.5; margin: 0; color: var(--tool-text-muted, #0F6E56); } .gloss-tool-callout__arrow { font-size: 1.125rem; flex-shrink: 0; color: var(--tool-text-muted, #0F6E56); } /* ======================================== PEER-REVIEW CITATION CARD Cross-cluster; always blue regardless of entry cluster color. ======================================== */ .gloss-peer-review { background: #ffffff; border: 1px solid #B5D4F4; border-radius: 8px; padding: 18px 20px; margin: 0 0 1.75rem; } .gloss-peer-review__header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .gloss-peer-review__icon { width: 16px; height: 16px; flex-shrink: 0; } .gloss-peer-review__label { font-size: 0.6875rem; color: #185FA5; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .gloss-peer-review__lede { font-size: 0.875rem; color: #222; line-height: 1.65; margin: 0 0 8px; } .gloss-peer-review__citation { font-size: 0.8125rem; color: #444; line-height: 1.6; margin: 0; } .gloss-peer-review__link { display: inline-block; font-size: 0.8125rem; color: #185FA5; text-decoration: none; margin-top: 10px; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .gloss-peer-review__link:hover { border-bottom-color: #185FA5; } /* ======================================== CONFUSABLE-TERMS INSET Three-column compare block. ======================================== */ .gloss-confusable { margin: 0 0 1.5rem 32px; padding: 4px 0 4px 14px; border-left: 2px solid #D1D5DB; } .gloss-confusable__header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .gloss-confusable__icon { width: 11px; height: 11px; flex-shrink: 0; } .gloss-confusable__label { font-size: 0.625rem; color: #854F0B; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .gloss-confusable__lede { font-size: 0.75rem; color: #555; margin: 0 0 10px; line-height: 1.55; } .gloss-confusable__grid { display: flex; gap: 8px; } .gloss-confusable__card { border-radius: 6px; padding: 9px 10px; flex: 1 1 0; min-width: 0; border: 1px solid transparent; } /* Cluster-color border on confusable cards — pulls them off the cream inset */ .gloss-confusable__card.cluster-theory-of-change { border-color: #085041; } .gloss-confusable__card.cluster-impact-irr { border-color: #3C3489; } .gloss-confusable__card.cluster-capital-types { border-color: #0C447C; } .gloss-confusable__card.cluster-data-evidence { border-color: #0A5A5A; } .gloss-confusable__card.cluster-stakeholders { border-color: #712B13; } .gloss-confusable__card.cluster-methodology-stages { border-color: #854F0B; } .gloss-confusable__card.cluster-market-sizing { border-color: #7A1C44; } .gloss-confusable__card.cluster-investment-types { border-color: #444441; } .gloss-confusable__card-title { font-size: 0.6875rem; font-weight: 500; margin: 0 0 3px; } .gloss-confusable__card-desc { font-size: 0.65625rem; line-height: 1.5; margin: 0 0 4px; } .gloss-confusable__card-example { font-size: 0.625rem; font-style: italic; margin: 0; } .gloss-confusable__rule { font-size: 0.6875rem; color: #666; line-height: 1.55; margin: 10px 0 0; } .gloss-confusable__rule em { color: #222; } /* ======================================== ENTRY FOOT — cross-refs + cluster tag side by side ======================================== */ .gloss-entry-foot { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 1.25rem; margin-top: 1.75rem; display: flex; gap: 2rem; align-items: flex-start; } .gloss-cross-refs, .gloss-cluster { flex: 1; min-width: 0; } .gloss-foot-label { font-size: 0.6875rem; color: #666; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; } .gloss-cross-refs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .gloss-cross-refs__list a { font-size: 0.875rem; color: var(--bg-blue); text-decoration: none; transition: opacity 0.15s ease; } .gloss-cross-refs__list a:hover { opacity: 0.7; } .gloss-cluster-tag { display: inline-block; font-size: 0.8125rem; padding: 4px 10px; border-radius: 12px; text-decoration: none; font-weight: 400; } .gloss-cluster-desc { font-size: 0.75rem; color: #666; margin: 8px 0 0; line-height: 1.5; } /* ======================================== CLUSTER COLORS 8 clusters mapped to 8 color pairs (bg, text). Used by cluster tags and confusable-inset cards where applicable. ======================================== */ .cluster-theory-of-change { background: #E1F5EE; color: #085041; } .cluster-impact-irr { background: #EEEDFE; color: #3C3489; } .cluster-capital-types { background: #E6F1FB; color: #0C447C; } .cluster-data-evidence { background: #D9F1F0; color: #0A5A5A; } .cluster-stakeholders { background: #FAECE7; color: #712B13; } .cluster-methodology-stages { background: #FAEEDA; color: #854F0B; } .cluster-market-sizing { background: #FCE7F0; color: #7A1C44; } .cluster-investment-types { background: #F1EFE8; color: #444441; } /* ======================================== BACK TO GLOSSARY BUTTON Centered ghost button, sits below entry foot inside the card. ======================================== */ .gloss-back-to-glossary { border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 1.25rem; margin-top: 1.5rem; text-align: center; } .gloss-back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.625rem 1.375rem; background: #FFFFFF; border: 1px solid #D1D5DB; border-radius: 8px; font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 0.875rem; color: #4B5563; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .gloss-back-btn:hover { background: #F4F6F9; border-color: #9CA3AF; color: #1F2937; } .gloss-back-btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* ======================================== 404 STATE Shown when slug doesn't match any entry. ======================================== */ .gloss-404 { text-align: center; padding: 3rem 0; color: #444; } .gloss-404 h2 { font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 1.5rem; margin: 0 0 0.75rem; } .gloss-404 p { font-size: 1rem; line-height: 1.65; max-width: 420px; margin: 0 auto; } .gloss-404 a { color: var(--bg-blue); border-bottom: 1px solid rgba(22, 47, 122, 0.35); text-decoration: none; } /* ======================================== MOBILE ======================================== */ @media (max-width: 720px) { .gloss-breadcrumb { padding: 0.75rem 1rem 0; } .gloss-entry-hero { padding: 1rem 1rem 0.625rem; } .gloss-entry-hero__title { font-size: 1.75rem; } .gloss-entry-hero__subtitle { font-size: 0.875rem; } .gloss-entry-body { padding: 0 1rem 2rem; } .gloss-entry-body__inner { padding: 1.5rem 1.25rem; } .gloss-definition { font-size: 1rem; } /* On mobile, drop the indent and stack cards vertically */ .gloss-confusable { margin-left: 0; } .gloss-confusable__grid { flex-direction: column; gap: 8px; } /* Stack the foot — cross-refs above cluster tag */ .gloss-entry-foot { flex-direction: column; gap: 1.5rem; } } /* ======================================== A11Y MODES (additions beyond inherited styles.css) ======================================== */ .a11y-highlight-links .gloss-definition a, .a11y-highlight-links .gloss-cross-refs__list a, .a11y-highlight-links .gloss-breadcrumb a { background-color: rgba(253, 210, 13, 0.3); padding: 1px 3px; border-radius: 3px; }