/* * BETTER TOGETHER Glossar - frontend styles. * All color/font/spacing values are supplied as CSS Custom Properties by * the plugin (see includes/class-shortcode.php, build_custom_properties_css). * The values here are fallbacks only, in case the inline style somehow * failed to load - they match the current better2gether.info design. */ :root { --glossar-primary-color: #D8A15A; --glossar-primary-hover: #CA6A2B; --glossar-bg: #141E29; --glossar-text-color: #F9F9F9; --glossar-card-bg: #1B2733; --glossar-card-border: #3E5170; --glossar-card-radius: 8px; --glossar-font-heading: 'Montserrat', 'Product Sans', system-ui, sans-serif; --glossar-font-body: 'Lato', -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --glossar-space-1: 4px; --glossar-space-2: 8px; --glossar-space-3: 12px; --glossar-space-4: 16px; --glossar-space-6: 24px; --glossar-space-8: 32px; --glossar-space-12: 48px; /* Deliberately px, not rem: rem is relative to the HOST page's font-size, which this plugin cannot control or predict (some themes set it to something other than the 16px browser default, e.g. 62.5% tricks for easy rem math). px keeps these sizes correct regardless of what font-size the surrounding theme sets on the page root. */ --glossar-font-xs: 12px; --glossar-font-sm: 14px; --glossar-font-base: 16px; --glossar-font-lg: 18px; --glossar-font-xl: 20px; } /* Reset box-sizing inside the widget regardless of what the host theme's global stylesheet uses - the width/height math throughout this file (in particular the aspect-ratio letter tiles) assumes border-box. */ .glossar-wrap, .glossar-wrap *, .glossar-wrap *::before, .glossar-wrap *::after { box-sizing: border-box; } .glossar-wrap { font-family: var(--glossar-font-body); color: var(--glossar-text-color); line-height: 1.5; } /* ---------- Letter navigation ---------- */ .glossar-wrap .glossar-nav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; padding: var(--glossar-space-3) 10px; margin: 0 0 var(--glossar-space-8); background: var(--glossar-bg); border-bottom: 1px solid var(--glossar-card-border); scrollbar-width: thin; } .glossar-wrap .glossar-nav::-webkit-scrollbar { height: 4px; } .glossar-wrap .glossar-nav::-webkit-scrollbar-thumb { background: var(--glossar-card-border); border-radius: 2px; } /* Selectors below are qualified with the .glossar-wrap ancestor (rather than bare .glossar-letter, .glossar-card, etc.) so their specificity reliably beats common theme rules like "a" or ".entry-content a" - without this, a host theme's own link/heading styles can silently win the cascade and override color, font-size, or size-affecting properties on these elements. */ .glossar-wrap .glossar-letter { /* Letters share the available width (flex-grow) so the bar fits all 27 entries (A-Z + 0-9) without horizontal scrolling even at desktop width. overflow-x only kicks in as a fallback on very narrow viewports. */ flex: 1 1 0; min-width: 18px; max-width: 34px; aspect-ratio: 1; white-space: nowrap; display: flex; align-items: center; justify-content: center; font-family: var(--glossar-font-heading); font-weight: 700; font-size: var(--glossar-font-xs); line-height: 1; color: var(--glossar-bg); background: var(--glossar-primary-color); border-radius: 6px; text-decoration: none; transform-origin: center center; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease; will-change: transform; } .glossar-wrap .glossar-letter.is-wide { /* "0-9" is 3 characters wide - not a square, or the text would wrap. */ aspect-ratio: auto; flex: 1.6 1 0; padding: 0 2px; } .glossar-wrap .glossar-letter:hover, .glossar-wrap .glossar-letter:focus-visible { background: var(--glossar-primary-hover); color: #fff; } .glossar-wrap .glossar-letter:focus-visible { outline: 2px solid var(--glossar-text-color); outline-offset: 2px; } .glossar-wrap .glossar-letter.is-disabled { background: transparent; color: var(--glossar-card-border); cursor: not-allowed; pointer-events: none; font-weight: 400; } @media (prefers-reduced-motion: reduce) { .glossar-wrap .glossar-letter { transition: none !important; transform: none !important; } } /* ---------- Letter sections + grid ---------- */ .glossar-wrap .glossar-section { margin: 0 0 var(--glossar-space-12); } /* Scroll target offset for both the letter nav (section jumps) and card cross-links (see glossar.js bindCrossLinks): without this, scrollIntoView aligns the target flush with the very top of the viewport, right behind our own sticky .glossar-nav - the target ends up mostly hidden under it. The admin-bar variants add WordPress's own fixed toolbar height on top: logged-in editors previewing the page (exactly the case while adding cross-links) see that bar as well, stacked above our nav. Its height is a WP core constant, not something this plugin can read from CSS, so the two values below (32px / 46px) are simply WP's own fixed heights. */ .glossar-wrap .glossar-section, .glossar-wrap .glossar-card { scroll-margin-top: 56px; } body.admin-bar .glossar-wrap .glossar-section, body.admin-bar .glossar-wrap .glossar-card { scroll-margin-top: 88px; } @media (max-width: 782px) { body.admin-bar .glossar-wrap .glossar-section, body.admin-bar .glossar-wrap .glossar-card { scroll-margin-top: 102px; } } .glossar-wrap .glossar-section h2 { font-family: var(--glossar-font-heading); font-weight: 700; font-size: var(--glossar-font-xl); line-height: 1.3; color: var(--glossar-primary-color); margin: 0 0 var(--glossar-space-4); padding-bottom: var(--glossar-space-2); border-bottom: 1px solid var(--glossar-card-border); } .glossar-wrap .glossar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* align-items:start instead of the grid default "stretch": an opened card should only grow itself, not artificially inflate its closed neighbors in the same row. */ align-items: start; gap: var(--glossar-space-3); } @media (max-width: 640px) { .glossar-wrap .glossar-grid { grid-template-columns: 1fr; } } /* ---------- Term cards ---------- */ .glossar-wrap .glossar-card { background: var(--glossar-card-bg); border: 1px solid var(--glossar-card-border); border-radius: var(--glossar-card-radius); overflow: hidden; } /* color-mix() is deliberately avoided (unsupported on iOS < 16.2 and older Android browsers) - border color is used as the "open" state indicator instead. Only applies in the default "collapsed" view, where "open" is a meaningful state change a reader triggered themselves. In the "expanded" view every card is open all the time, so the highlight would just be permanent visual noise instead of a signal - see the override below, which resets it back to the plain border color for that view. */ .glossar-wrap .glossar-card[open] { border-color: var(--glossar-primary-color); } .glossar-wrap[data-cards-default="expanded"] .glossar-card[open] { border-color: var(--glossar-card-border); } .glossar-wrap .glossar-card summary { list-style: none; cursor: pointer; padding: var(--glossar-space-3) var(--glossar-space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--glossar-space-3); } .glossar-wrap .glossar-card summary::-webkit-details-marker { display: none; } .glossar-wrap .glossar-card summary h3 { font-family: var(--glossar-font-body); font-weight: 700; font-size: var(--glossar-font-base); line-height: 1.3; margin: 0; color: var(--glossar-text-color); } .glossar-wrap .glossar-card summary:focus-visible { outline: 2px solid var(--glossar-primary-color); outline-offset: -2px; } .glossar-wrap .glossar-card .chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--glossar-primary-color); transition: transform 0.25s ease; } .glossar-wrap .glossar-card[open] .chevron { transform: rotate(180deg); } /* "expanded" view: cards can never be closed (see glossar.js), so the collapse arrow would promise an interaction that does not exist. */ .glossar-wrap[data-cards-default="expanded"] .glossar-card .chevron { display: none; } .glossar-wrap[data-cards-default="expanded"] .glossar-card summary { cursor: default; } .glossar-wrap .glossar-card .glossar-body { /* Height is animated by JS (glossar.js). Pure CSS cannot animate the closing transition, because

hides its content in the same frame that "open" is removed, before a transition can run. */ overflow: hidden; height: 0; transition: height 0.25s ease; } /* Server-rendered cards that start pre-opened (cards_default_state = "expanded", see class-shortcode.php) must show their full content immediately, before glossar.js has run and measured a pixel height - otherwise they would flash collapsed for a moment on every page load. */ .glossar-wrap .glossar-card[open] .glossar-body { height: auto; } .glossar-wrap .glossar-card .glossar-definition { margin: 0; padding: 0 var(--glossar-space-4) var(--glossar-space-4); font-size: var(--glossar-font-sm); line-height: 1.65; color: var(--glossar-text-color); opacity: 0.85; } .glossar-wrap .glossar-card .glossar-definition a { color: var(--glossar-primary-color); text-decoration: underline; text-underline-offset: 2px; opacity: 1; } .glossar-wrap .glossar-card .glossar-definition a:hover, .glossar-wrap .glossar-card .glossar-definition a:focus-visible { color: var(--glossar-primary-hover); } @media (prefers-reduced-motion: reduce) { .glossar-wrap .glossar-card .glossar-body { transition: none; } .glossar-wrap .glossar-card .chevron { transition: none; } }