/* SynonymGuide — editorial reference-tool aesthetic */ /* ─── Design tokens ────────────────────────────────────────────────────────── */ body.synonyms-brand { /* Frozen copies of the base tokens this brand used to inherit from design-system.css. SynonymGuide is deliberately insulated from the Syllables World kids design kit and keeps its current look until it receives its own design pass. Do not re-point these at kit tokens. See docs/superpowers/specs/2026-08-20-design-kit-adoption-design.md This is the COMPLETE pre-change --ds-* / --sw-* / legacy base-token set (all 78 custom properties design-system.css's :root defined before the rebrand), not just the subset synonyms-site.css itself references. An earlier pass froze only 7 tokens picked by grepping this file's own var() usages, but design-system.css styles SynonymGuide's DOM directly (.breadcrumb, .button.is-light/.is-ghost, .tag.is-info.is-light, .input/.textarea, etc.) using base tokens this file never touches — so that partial freeze still leaked the new kit through. All values below are literals, not var() forwards: a forwarded var() is exactly what let the earlier leak happen, since a later phase can silently re-point the variable it forwards to. */ --ds-ink: #1A1A2E; --ds-border-width-sm: 2px; --ds-border-width-md: 3px; --ds-radius-md: 12px; --ds-radius-lg: 14px; --ds-shadow-md: 3px 3px 0 #1A1A2E; --ds-shadow-lg: 5px 5px 0 #1A1A2E; --ds-radius-sm: 10px; --ds-radius-xl: 20px; --ds-shadow-sm: 2px 2px 0 #1A1A2E; /* Not a pre-kit token. --line is new, but design-system.css rules already use it (.navbar's border-bottom), and those rules paint this brand's DOM too — so it reaches SynonymGuide whether or not it predates the kit. Pinned here in this brand's own idiom: a 2px ink rule, not the kit's 1.5px cream hairline. Later phases will rewrite more rules onto kit tokens; each new token they reach for needs pinning here the same way, and the test suite fails until it is. */ --line: 2px solid #1A1A2E; /* Also not a pre-kit token. Phase 2 pointed the shared h1-h6 rule at --w-display so the kids brand gets Chivo 900. That rule styles this brand's headings too, which should stay at their existing weight — SynonymGuide is an adult vocabulary site, not a kids product, and its display face is Sora. Pinned to the weight it rendered before: the old h1-h6 rule referenced --font-weight-strong, which this brand pins at 600 — so 600, not 700. The final review caught the wrong value here; the pin was present and the guard was green, but the guard checks names, not values. Bare .title previously fell through to Bulma's 600 as well, so one value covers the grown selector list. */ --w-display: 600; --ds-font-display: 'Baloo 2', system-ui, sans-serif; --ds-font-body: 'Nunito Sans', system-ui, sans-serif; --ds-primary: #FF5A5F; --ds-primary-hover: #E14548; --ds-primary-pressed: #C93A3D; --ds-link: #37A8FF; --ds-link-hover: #2196F3; --ds-accent-yellow: #FFD84D; --ds-accent-green: #34C38F; --ds-bg: #ffffff; --ds-surface: #ffffff; --ds-text: #1A1A2E; --ds-text-soft: #4a4a5e; --ds-border: rgba(26, 26, 46, 0.14); --ds-tag-info-bg: #DBEAFE; --ds-tag-info-text: #1E3A8A; --ds-tag-success-bg: #D1FAE5; --ds-tag-success-text: #065F46; --ds-tag-warning-bg: #FEF3C7; --ds-tag-warning-text: #92400E; --ds-tag-danger-bg: #FFE1E2; --ds-tag-danger-text: #9F1D24; --text-color: #1A1A2E; --text-color-light: #4a4a5e; --heading-color: #1A1A2E; --background-color: #ffffff; --background-light: rgba(26, 26, 46, 0.04); --background-dark: rgba(26, 26, 46, 0.14); --border-radius: 12px; --box-shadow: 3px 3px 0 #1A1A2E; --transition-speed: 0.3s; --font-family: 'Nunito Sans', system-ui, sans-serif; --font-family-heading: 'Baloo 2', system-ui, sans-serif; --font-weight-strong: 600; --ds-button-primary-background-color: #FF5A5F; --ds-button-primary-background-color-hover: #E14548; --ds-button-primary-text-color: #ffffff; --ds-link-primary-color: #37A8FF; --ds-text-on-surface: #1A1A2E; --ds-text-on-mint-wash: #1A1A2E; --ds-eyebrow-banner-light-positive-background-color: rgba(52, 195, 143, 0.15); --sw-primary: #FF5A5F; --sw-surface: #ffffff; --sw-font-display: 'Baloo 2', system-ui, sans-serif; --primary-color: #FF5A5F; --primary-color-dark: #E14548; --secondary-color: #34C38F; --background-positive-light: #e8faf3; --background-positive-dark: #1a5c45; --sw-bg: #fffaf4; --sw-surface-soft: #f7fbff; --sw-text: #223049; --sw-text-soft: #5b6780; --sw-primary-hover: #E14548; --sw-primary-light: rgba(255, 90, 95, 0.12); --sw-secondary: #7c5cff; --sw-accent-yellow: #ffd84d; --sw-accent-green: #34c38f; --sw-accent-coral: #ff7a7a; --sw-accent-orange: #ff9f43; --sw-border: #dce8f5; --sw-shadow: 0 10px 30px rgba(55, 110, 180, 0.12); --sw-shadow-hover: 0 14px 36px rgba(55, 110, 180, 0.18); --sw-radius-sm: 12px; --sw-radius-md: 18px; --sw-radius-lg: 26px; --sw-container: 1120px; --sw-font-body: "Nunito Sans", "Nunito", system-ui, sans-serif; --sg-font-display: 'Sora', system-ui, sans-serif; --sg-font-body: 'Nunito Sans', system-ui, sans-serif; --sg-ink: var(--ds-ink); --sg-primary: #4F46E5; --sg-primary-dark: #4338CA; --sg-accent: #b8902a; --sg-accent-light: rgba(184, 144, 42, 0.12); --sg-surface: #ffffff; --sg-surface-2: #F5F5FA; --sg-card: #ffffff; --sg-border: var(--ds-ink); --sg-border-med: var(--ds-ink); --sg-text: #1A1A2E; --sg-text-muted: #6b6b7e; /* Task 3 (Phase 2): design-system.css rule bodies now reference these kit tokens directly instead of raw hex literals. They style this brand's DOM too (a11y-toggle widget, the shared mobile .navbar-menu drawer, body.worksheet-page — /worksheets/ is allowed on this host and worksheet-base.html extends layout.html directly, so it does render with .synonyms-brand on ), so each is pinned at the literal that rule rendered before the conversion — same idiom as --line/--w-display above. --mint, --mint-ink, --berry, --sun, --sun-ink still have no matching markup on this brand today (nav-dropdown megamenu, the word-star button — synonyms_layout.html and synonyms_word.html don't render them), so those five stay a best-effort match rather than a rendering requirement. --paper-3 is pinned to the worksheet-page gradient's stop (#f6fbff), not .nav-grade-pill's background (#f9fafb) — nav-grade-pill is unreachable here, worksheet-page isn't. .has-text-grey is deliberately NOT covered by the --ink-soft pin below (see the brand-scoped override further down this file) — that literal and the a11y-toggle panel's literal differ, and one token pin can't hold both live values at once. */ --paper-2: #FFFFFF; --paper: #f8fbff; --paper-3: #f6fbff; --ink: #363b45; --ink-soft: #363b45; --rule-color: #d6d9e0; --mint: #10B981; --mint-ink: #059669; --berry: #E5484D; --sun: #f0b400; --sun-ink: #a17700; /* Task 4 (Phase 2): chrome restyle. These have no matching markup on this brand — the logo tile (site-logo-tile) is only rendered by layout.html's non-synonyms branch, the mega-menu family-icon colours and 52px trigger floor apply to .nav-dropdown-* / .nav-panel-* classes this brand's flat nav never uses, and the tangerine hover treatment targets those same dropdown selectors. Best-effort values, same idiom as the Task 3 note above: shape tokens match this brand's own --ds-radius-md/-lg pins so a value stays internally consistent if any of this markup ever does reach here; colour tokens take the kit's own literal since there is no prior synonyms rendering to preserve for a feature that never existed on this brand; --font-display takes this brand's own display face (Baloo 2) rather than leaking the kit's Chivo. */ --r-md: 12px; --r-lg: 14px; --tap-min: 52px; --tangerine: #EE5F0A; --tangerine-ink: #A33D02; --tangerine-tint: #FFE6D2; --sky-ink: #1F5F9F; --berry-ink: #A8213F; --font-display: 'Baloo 2', system-ui, sans-serif; /* Task 5 (Phase 2): home page hero rebuild. No matching markup on this brand — the .home-* classes are only rendered by home.html's syllables-brand template, synonyms_home.html never uses them — so these are best-effort, same idiom as the Task 4 note above. --r-xl matches this brand's own --ds-radius-xl pin (20px) for internal consistency. --gutter/--mint-tint/--sky-tint/--sun-tint/ --tangerine-dark take the kit's own literals since there is no prior synonyms rendering to preserve for markup that never existed here. */ --r-xl: 20px; --gutter: clamp(16px, 4vw, 40px); --mint-tint: #D3F3E8; --sky-tint: #DBEBFA; --sun-tint: #FFF0C7; --tangerine-dark: #C44A03; /* Task 1 (Phase 4): design-system.css rule bodies that used to reference --ds-radius-sm / --font-family / --ds-tag-danger-bg / --sw-secondary / --sw-container / --font-weight-strong now reference these kit tokens directly. Newly reachable on this brand for the first time — pinned at what the OLD alias rendered here (--r-sm matches --ds-radius-sm's old 10px, not --sw-radius-sm's 12px: only the design-system.css consumer, .tag/.button.is-small/.breadcrumb/.navbar-burger/.a11y-toggle__btn, reaches this brand's DOM — kids-browse-components.css's --sw-radius-sm consumers never do). --font-body takes --sw-font-body's longer stack (adds a bare "Nunito" fallback ahead of system-ui) since that is a strict superset of --ds-font-body/--font-family's shorter stack -- same first font, so no consumer's rendering changes either way. --container matches --sw-container's old 1120px (the kids-game-play container width on the one reachable game page, kids-word-synonyms). */ --r-sm: 10px; --font-body: "Nunito Sans", "Nunito", system-ui, sans-serif; --berry-tint: #FFE1E2; --currant: #7c5cff; --container: 1120px; --w-strong: 600; /* Task 3 (Phase 4): kids-practice level map restyle. --ink-faint and --line-ink are new kit tokens with no matching markup on this brand — kids-practice-level-select.html is a syllables-only page, never reachable behind the synonyms host's allowed_paths — so these are best-effort, same idiom as the Task 4/5 notes above: colour tokens take the kit's own literal since there is no prior synonyms rendering to preserve. --line-ink resolves the kit's own `2px solid var(--ink)` against the kit's own --ink (#2A1B33), not this brand's pinned --ink, to match that convention exactly. */ --ink-faint: #B7ABBD; --line-ink: 2px solid #2A1B33; background: var(--sg-surface) !important; font-family: var(--sg-font-body); color: var(--sg-text); } /* Sora display font (final-review fix, 2026-08-10): previously only .site-logo and .word-hero-title used --sg-font-display — every other heading fell through to the Syllables World default (Baloo 2), undermining the point of loading a separate font for this brand. */ body.synonyms-brand h1, body.synonyms-brand h2, body.synonyms-brand h3, body.synonyms-brand h4, body.synonyms-brand h5, body.synonyms-brand h6, body.synonyms-brand .title { font-family: var(--sg-font-display); } /* ─── Phase 4 alias-deletion insulation (Task 1) ───────────────────────────── design-system.css's transitional legacy alias block (ds, sw, bare names) is gone; its rules now reference kit tokens (--ink, --tangerine, --r-sm, ...) directly. Those kit tokens are ALSO already pinned above for other, already-migrated rules (the a11y-toggle widget, mobile nav drawer, worksheet-page, ...) at THIS brand's own values -- values that often differ from what the old alias rendered for THESE newly-migrated rules (e.g. --sw-text used to give this brand #223049; the shared --ink pin above is #363b45, chosen for the a11y-toggle/worksheet consumers). One token can't hold two different literals at once, so every design-system.css selector below that (a) used an alias with a since-diverged target and (b) actually renders on this brand's DOM gets its pre-migration literal restored here, scoped to this brand, instead of repinning the shared token (which would break the rules that already correctly depend on it). Reachability was checked against server/synonyms_site/templates/, worksheet-base.html/worksheet-set.html/worksheets-grade.html/ worksheets-index.html (worksheets are allowed on this host), and synonyms-kids-word-synonyms.html (the one kids-game-layout.css page this brand serves). Selectors confirmed NOT reachable here (hero-section, feature-card, practice-tip, conclusion-section, section-title, example-box/ -word, button-enhanced/input-enhanced outside the already-covered search form, custom-checkbox, checkmark, tool-container, nav-dropdown-trigger, nav-menu-intro, nav-panel-plain-link, .button.is-kids-primary, .box.is-nice) are deliberately left alone -- restoring them would be noise with nothing to protect. Selectors already insulated by an existing, more specific override above (.button.is-primary*, .button.is-ghost, .tag.is-info.is-light, .box, .breadcrumb *, .footer *, .navbar, .search-form .input) are skipped for the same reason: this brand's real Sora/indigo values are page-covered twice over. */ body.synonyms-brand { color: #1A1A2E; background: #ffffff; } body.synonyms-brand h1, body.synonyms-brand h2, body.synonyms-brand h3, body.synonyms-brand h4, body.synonyms-brand h5, body.synonyms-brand h6, body.synonyms-brand .title, body.synonyms-brand .subtitle { color: #1A1A2E; } body.synonyms-brand .content a:not(.button):not(.navbar-item):not(.nav-panel-link):not(.nav-grade-pill):not(.site-logo) { color: #37A8FF; } body.synonyms-brand .content a:not(.button):not(.navbar-item):not(.nav-panel-link):not(.nav-grade-pill):not(.site-logo):hover { color: #2196F3; } body.synonyms-brand .button { border: 3px solid #1A1A2E; box-shadow: 3px 3px 0 #1A1A2E; } body.synonyms-brand .button:active { box-shadow: 2px 2px 0 #1A1A2E; } body.synonyms-brand .button.is-link { border-color: #1A1A2E !important; color: #37A8FF !important; } body.synonyms-brand .button.is-link:hover, body.synonyms-brand .button.is-link:focus { color: #2196F3 !important; } body.synonyms-brand .button.is-info { background-color: #DBEAFE !important; border-color: #1A1A2E !important; color: #1E3A8A !important; } body.synonyms-brand .button.is-success { background-color: #D1FAE5 !important; border-color: #1A1A2E !important; color: #065F46 !important; } body.synonyms-brand .button.is-warning { background-color: #FEF3C7 !important; border-color: #1A1A2E !important; color: #92400E !important; } body.synonyms-brand .button.is-danger { border-color: #1A1A2E !important; } body.synonyms-brand .button.is-light { border-color: #1A1A2E !important; color: #1A1A2E !important; border-width: 2px !important; box-shadow: 2px 2px 0 #1A1A2E; } body.synonyms-brand .button.is-dark { background-color: #1A1A2E !important; border-color: #1A1A2E !important; } body.synonyms-brand .button.is-small { border-width: 2px !important; box-shadow: 2px 2px 0 #1A1A2E; } body.synonyms-brand .button.is-small:active { box-shadow: 1px 1px 0 #1A1A2E; } body.synonyms-brand .tag:not(body) { border: 2px solid #1A1A2E; color: #1A1A2E; } body.synonyms-brand .tag:not(body).is-info { background-color: #DBEAFE; color: #1E3A8A; } body.synonyms-brand .tag:not(body).is-success { background-color: #D1FAE5; color: #065F46; } body.synonyms-brand .tag:not(body).is-warning { background-color: #FEF3C7; color: #92400E; } body.synonyms-brand .tag:not(body).is-danger { color: #9F1D24; } body.synonyms-brand .box { color: #1A1A2E; } body.synonyms-brand .notification { border: 2px solid #1A1A2E; } body.synonyms-brand .table.is-bordered td, body.synonyms-brand .table.is-bordered th { border: 1px solid rgba(26, 26, 46, 0.14); } body.synonyms-brand .main-nav .navbar-item { color: #1A1A2E; transition: all 0.3s ease; } body.synonyms-brand .main-nav .navbar-item:hover, body.synonyms-brand .main-nav .navbar-item.is-active { color: #1A1A2E; } body.synonyms-brand .navbar-burger { border: 2px solid #1A1A2E; background: #f7fbff; box-shadow: 2px 2px 0 #1A1A2E; } body.synonyms-brand .navbar-burger:hover { border-color: #37A8FF; } body.synonyms-brand .navbar-burger span { background-color: #1A1A2E; } body.synonyms-brand .navbar-menu { border-top: 1px solid rgba(26, 26, 46, 0.14); } body.synonyms-brand .a11y-toggle__btn { border: 2px solid #1A1A2E; box-shadow: 2px 2px 0 #1A1A2E; } body.synonyms-brand.worksheet-page { background: linear-gradient(180deg, #ffffff 0%, var(--paper-3) 100%) !important; } body.synonyms-brand.worksheet-page .ws-toolbar { border-bottom: 2px solid #1A1A2E; } body.synonyms-brand.worksheet-page .ws-sheet { border: 2px solid #1A1A2E; box-shadow: 3px 3px 0 #1A1A2E; } body.synonyms-brand .input, body.synonyms-brand .textarea { border: 2px solid #1A1A2E; transition: border-color 0.3s ease, box-shadow 0.3s ease; } body.synonyms-brand .input:focus, body.synonyms-brand .textarea:focus { border-color: #FF5A5F; } body.synonyms-brand .js-speak { transition: opacity 0.3s ease; } /* Same page (synonyms-kids-word-synonyms.html, the one kids-game-layout.css / kids-browse-components.css page this brand serves) -- see the banner above, same reasoning. kids-browse-components.css's own ~146 refs never reach this brand (games-hub/landing/dashboard/achievements/placement.html and kids-practice-level-select.html all extend layout.html directly and never carry the synonyms-brand body class, even when the URL resolves on this host), so nothing there needs restoring -- only kids-game-layout.css's body.kids-game-page(.kids-game-play) rules, which style this one page. */ body.synonyms-brand.kids-game-page .site-header { border-bottom: 1px solid #dce8f5; } body.synonyms-brand.kids-game-page .site-logo { color: #FF5A5F !important; -webkit-text-fill-color: #FF5A5F !important; } body.synonyms-brand.kids-game-page .site-logo:hover { color: #E14548 !important; -webkit-text-fill-color: #E14548 !important; } body.synonyms-brand.kids-game-page.kids-game-play #game-container.kids-game-container, body.synonyms-brand.kids-game-page .kids-game-container { background: linear-gradient(180deg, #2d3e5c 0%, #223049 100%) !important; border-radius: 26px; box-shadow: 0 10px 30px rgba(55, 110, 180, 0.12); } body.synonyms-brand .kids-back-link { color: #5b6780 !important; } body.synonyms-brand .kids-back-link:hover { color: #FF5A5F !important; } body.synonyms-brand.kids-game-page .kids-game-container[data-game-theme="woodland"] .kids-game-loading { color: #223049 !important; } /* ─── Accessibility ────────────────────────────────────────────────────────── */ .is-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Navbar ───────────────────────────────────────────────────────────────── */ body.synonyms-brand .synonyms-site-header .navbar { background: #fff !important; box-shadow: none; border-bottom: var(--ds-border-width-md) solid var(--ds-ink); } body.synonyms-brand .synonyms-site-header .navbar-inner { border-bottom: none; } body.synonyms-brand .synonyms-site-header .site-logo { font-family: var(--sg-font-display) !important; color: var(--sg-primary) !important; font-weight: 800 !important; letter-spacing: -0.02em; font-size: 1.2rem !important; } body.synonyms-brand .synonyms-site-header .navbar-item { font-family: var(--sg-font-body); font-weight: 500; font-size: 0.9rem; color: var(--sg-text) !important; border-radius: 6px; margin: 0 0.05rem; transition: background 0.15s, color 0.15s; } body.synonyms-brand .synonyms-site-header .navbar-item:hover { background: var(--sg-surface-2) !important; color: var(--sg-primary) !important; } /* ─── Section spacing ──────────────────────────────────────────────────────── */ body.synonyms-brand main .section { padding-top: 1.5rem; } /* ─── Breadcrumb ───────────────────────────────────────────────────────────── */ body.synonyms-brand .breadcrumb { font-size: 0.82rem; font-weight: 500; margin-bottom: 1.25rem; border-bottom: 1px solid var(--sg-border); padding-bottom: 0.75rem; } body.synonyms-brand .breadcrumb a { color: var(--sg-primary); text-decoration: none; } body.synonyms-brand .breadcrumb a:hover { text-decoration: underline; } body.synonyms-brand .breadcrumb li.is-active a { color: var(--sg-text-muted); cursor: default; } /* Bulma forces white-space:nowrap on breadcrumbs; a long article title in the active crumb drags the page wider than a phone viewport unless it can wrap. */ @media (max-width: 760px) { body.synonyms-brand .breadcrumb, body.synonyms-brand .breadcrumb a { white-space: normal; word-break: break-word; } } /* ─── Search bar ───────────────────────────────────────────────────────────── */ body.synonyms-brand .search-container { margin-bottom: 2rem; } body.synonyms-brand .search-form .input-group { display: flex; border-radius: 12px; overflow: hidden; border: 2px solid var(--sg-border-med); background: var(--sg-card); transition: border-color 0.2s; } body.synonyms-brand .search-form .input-group:focus-within { border-color: var(--sg-primary); box-shadow: 0 0 0 3px rgba(15, 82, 108, 0.12); } body.synonyms-brand .search-container .input-enhanced, body.synonyms-brand .search-form .input { flex: 1; height: 50px; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; font-family: var(--sg-font-body); font-size: 1rem; color: var(--sg-ink); padding: 0 1rem; } body.synonyms-brand .search-container .input-enhanced:focus, body.synonyms-brand .search-form .input:focus { outline: none; box-shadow: none !important; } body.synonyms-brand .search-container .button-enhanced.primary, body.synonyms-brand .search-form .button.is-primary { height: 50px; padding: 0 1.5rem; background: var(--sg-primary) !important; color: #fff !important; border: none !important; border-radius: 0 !important; font-family: var(--sg-font-body); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s; } body.synonyms-brand .search-container .button-enhanced.primary:hover, body.synonyms-brand .search-form .button.is-primary:hover { background: var(--sg-primary-dark) !important; } /* ─── Word hero ────────────────────────────────────────────────────────────── */ .word-hero { padding: 0.5rem 0 2rem; max-width: 52rem; } .word-hero-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-accent); margin: 0 0 0.35rem; } .word-hero-title { font-family: var(--sg-font-display) !important; font-size: clamp(2.4rem, 6vw, 4.5rem) !important; font-weight: 800 !important; color: var(--sg-ink) !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; margin-bottom: 0.75rem !important; } .word-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; } .word-hero-subtitle { font-size: 0.95rem; color: var(--sg-text-muted); line-height: 1.5; } .word-hero-subtitle a { color: var(--sg-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .word-hero-subtitle strong { color: var(--sg-text); font-weight: 600; } body.synonyms-brand .tag.is-info.is-light { background: var(--sg-accent-light) !important; color: var(--sg-accent) !important; border: 1px solid rgba(184, 144, 42, 0.25) !important; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; } /* .has-text-grey maps to --ink-soft on the kids brand (correct there), but --ink-soft is pinned to the a11y-toggle panel's grey (#363b45) for this brand — and .has-text-grey is used directly for article/quiz date bylines (synonyms_article_index.html, synonyms_quiz.html), reachable on the same page as the a11y widget. One token can't hold both original greys at once, so decouple this rule for this brand instead of repinning the token. */ body.synonyms-brand .has-text-grey { color: #8a8f98 !important; } /* ─── Definition block ─────────────────────────────────────────────────────── */ .definition-block { background: var(--sg-card); border-radius: 10px; border: 1px solid var(--sg-border); border-left: 4px solid var(--sg-accent); padding: 1.1rem 1.4rem; margin-bottom: 2rem; max-width: 48rem; } .definition-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sg-accent); margin: 0 0 0.4rem; } .definition-text { font-size: 1rem; color: var(--sg-ink); line-height: 1.65; margin: 0; } /* ─── Section headings ─────────────────────────────────────────────────────── */ body.synonyms-brand h2.title.is-4, body.synonyms-brand h2.title.is-5, body.synonyms-brand h2.title.is-6 { font-family: var(--sg-font-body) !important; font-weight: 700 !important; color: var(--sg-ink) !important; letter-spacing: -0.01em; } body.synonyms-brand h2.title.is-4 { font-size: 1.15rem !important; margin-bottom: 0.75rem !important; } /* ─── Synonym chips ────────────────────────────────────────────────────────── */ .synonym-chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; } .synonym-chip-list a { display: inline-block; padding: 0.42rem 0.9rem; border-radius: 6px; background: var(--sg-card); color: var(--sg-primary); font-family: var(--sg-font-body); font-size: 0.92rem; font-weight: 600; text-decoration: none; border: 1.5px solid var(--sg-border-med); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; line-height: 1.4; } .synonym-chip-list a:hover { border-color: var(--sg-primary); box-shadow: 0 2px 8px rgba(15, 82, 108, 0.14); transform: translateY(-1px); color: var(--sg-primary-dark); } .synonym-chip-list a:focus-visible { outline: 3px solid rgba(184, 144, 42, 0.5); outline-offset: 2px; } /* ─── Popular words (notification) ────────────────────────────────────────── */ body.synonyms-brand .notification.is-light { background: var(--sg-surface-2) !important; border: 1px solid var(--sg-border) !important; border-radius: 10px; } body.synonyms-brand .notification.is-light .title { font-family: var(--sg-font-body) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sg-text-muted) !important; margin-bottom: 0.6rem !important; } body.synonyms-brand .notification.is-light .synonym-chip-list a { background: rgba(248, 245, 239, 0.6); font-size: 0.85rem; padding: 0.32rem 0.75rem; border-color: var(--sg-border); color: var(--sg-text); } body.synonyms-brand .notification.is-light .synonym-chip-list a:hover { border-color: var(--sg-primary); color: var(--sg-primary); } /* ─── Cards / aside boxes ──────────────────────────────────────────────────── */ body.synonyms-brand .box, body.synonyms-brand .synonyms-aside { border-radius: var(--ds-radius-lg) !important; border: var(--ds-border-width-md) solid var(--ds-ink) !important; box-shadow: var(--ds-shadow-lg) !important; background: var(--sg-card) !important; transition: transform 0.15s; } body.synonyms-brand .box:hover { transform: translateY(-2px); } body.synonyms-brand .synonyms-aside a { color: var(--sg-primary); font-weight: 600; text-decoration: none; } body.synonyms-brand .synonyms-aside a:hover { text-decoration: underline; text-underline-offset: 2px; } body.synonyms-brand .synonyms-aside ul { list-style: none; padding-left: 0; margin-top: 0; } body.synonyms-brand .synonyms-aside ul li + li { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--sg-border); } /* ─── Explore more / content block ────────────────────────────────────────── */ body.synonyms-brand .content a { color: var(--sg-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } body.synonyms-brand .content a:hover { color: var(--sg-primary-dark); } /* ─── Long-form prose ──────────────────────────────────────────────────────── */ body.synonyms-brand article.content, body.synonyms-brand .content.synonyms-prose { max-width: 42rem; } body.synonyms-brand article.content p, body.synonyms-brand .content.synonyms-prose p { line-height: 1.75; font-size: 1.02rem; } /* ─── Footer ───────────────────────────────────────────────────────────── */ body.synonyms-brand .footer { background: var(--sg-ink) !important; color: rgba(255, 255, 255, 0.65); border-top: none !important; padding: 3rem 1.5rem 2rem; } body.synonyms-brand .footer .bd-footer-link-title { color: rgba(255, 255, 255, 0.95) !important; font-family: var(--sg-font-body) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; margin-bottom: 0.85rem !important; } body.synonyms-brand .footer .bd-footer-link { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.5; } body.synonyms-brand .footer a { color: rgba(255, 255, 255, 0.58) !important; text-decoration: none; transition: color 0.15s; opacity: 1 !important; } body.synonyms-brand .footer a:hover { color: rgba(255, 255, 255, 0.95) !important; transform: none !important; } body.synonyms-brand .footer .footer-divider { background-color: rgba(255, 255, 255, 0.1) !important; height: 1px; border: none; margin: 2rem 0; } body.synonyms-brand .footer strong { color: rgba(255, 255, 255, 0.92) !important; } body.synonyms-brand .footer .content p { color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; } /* ─── IPA phonetic ─────────────────────────────────────────────────────────── */ .word-hero-ipa { font-family: 'Georgia', serif; font-size: 1rem; color: var(--sg-text-muted); letter-spacing: 0.02em; } /* ─── Register grid ─────────────────────────────────────────────────────────── */ .register-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; } .register-block { flex: 1 1 200px; } .register-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sg-text-muted); margin: 0 0 0.4rem; } /* ─── Antonym chips ─────────────────────────────────────────────────────────── */ .antonym-chip-list a, .antonym-chip-list .chip-plain { border-color: rgba(180, 60, 40, 0.25) !important; color: #a83228 !important; } .antonym-chip-list a:hover { border-color: #a83228 !important; color: #7a2520 !important; } .chip-plain { display: inline-block; padding: 0.42rem 0.9rem; border-radius: 6px; background: var(--sg-card); font-family: var(--sg-font-body); font-size: 0.92rem; font-weight: 600; border: 1.5px solid var(--sg-border-med); line-height: 1.4; color: var(--sg-text); } /* ─── Collocations ──────────────────────────────────────────────────────────── */ .collocation-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .collocation-list li { background: var(--sg-surface-2); border: 1px solid var(--sg-border); border-radius: 6px; padding: 0.4rem 0.85rem; font-size: 0.9rem; color: var(--sg-text); font-style: italic; } /* ─── Word family ───────────────────────────────────────────────────────────── */ .word-family-grid { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; } .word-family-item { font-size: 0.95rem; color: var(--sg-text); } .wf-pos { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-text-muted); margin-right: 0.35rem; } .word-family-item a { color: var(--sg-primary); font-weight: 600; text-decoration: none; } .word-family-item a:hover { text-decoration: underline; } /* ─── Usage note ────────────────────────────────────────────────────────────── */ .usage-note { background: var(--sg-accent-light); border: 1px solid rgba(184, 144, 42, 0.2); border-left: 4px solid var(--sg-accent); border-radius: 8px; padding: 1rem 1.3rem; max-width: 48rem; } .usage-note-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--sg-accent); margin: 0 0 0.35rem; } .usage-note-text { font-size: 0.96rem; color: var(--sg-ink); line-height: 1.65; margin: 0; } /* ─── Example sentences ─────────────────────────────────────────────────────── */ .example-sentences { padding-left: 1.25rem; max-width: 46rem; } .example-sentences li { font-size: 0.97rem; color: var(--sg-text); line-height: 1.7; margin-bottom: 0.5rem; } /* ─── Quotes ────────────────────────────────────────────────────────────────── */ .quotes-list { list-style: none; padding: 0; max-width: 46rem; } .quotes-list li { margin-bottom: 0.75rem; } .quotes-list blockquote { background: var(--sg-surface-2); border-left: 3px solid var(--sg-border-med); margin: 0; padding: 0.75rem 1.1rem; border-radius: 0 6px 6px 0; font-size: 0.95rem; color: var(--sg-text); font-style: italic; line-height: 1.65; } /* ─── Tighter boxes on word page ───────────────────────────────────────── */ body.synonyms-brand .box.synonyms-aside, body.synonyms-brand .columns .box { padding: 1.1rem 1.3rem !important; } body.synonyms-brand .columns .box .title.is-5 { font-size: 0.9rem !important; margin-bottom: 0.4rem !important; } body.synonyms-brand .columns .box p { font-size: 0.88rem; margin: 0; line-height: 1.6; } /* ─── Home word list ────────────────────────────────────────────────────── */ .home-word-list { max-height: 280px; overflow: hidden; mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); } .home-word-list a { font-size: 0.85rem; padding: 0.32rem 0.72rem; } /* ─── Buttons (global brand overrides) ─────────────────────────────────────── */ body.synonyms-brand .button.is-primary { background: var(--sg-primary) !important; color: #fff !important; border-color: var(--ds-ink) !important; font-family: var(--sg-font-body); font-weight: 700; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-md); } body.synonyms-brand .button.is-primary:hover, body.synonyms-brand .button.is-primary:focus { background: var(--sg-primary-dark) !important; color: #fff !important; border-color: var(--ds-ink) !important; } body.synonyms-brand .button.is-primary.is-light { background: rgba(79, 70, 229, 0.10) !important; color: var(--sg-primary) !important; border-color: var(--ds-ink) !important; font-weight: 700; } body.synonyms-brand .button.is-primary.is-light:hover, body.synonyms-brand .button.is-primary.is-light:focus { background: rgba(79, 70, 229, 0.18) !important; color: var(--sg-primary-dark) !important; } body.synonyms-brand .button.is-ghost { color: var(--sg-primary) !important; background: transparent !important; border: var(--ds-border-width-sm) dashed var(--ds-ink) !important; } /* ─── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .word-hero { padding: 0.25rem 0 1.5rem; } .word-hero-title { font-size: clamp(2rem, 10vw, 3rem) !important; } .word-hero-meta { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .definition-block { padding: 0.9rem 1.1rem; } body.synonyms-brand .search-form .input-group { border-radius: 10px; } .synonym-chip-list a { font-size: 0.87rem; padding: 0.38rem 0.78rem; } } /* ─── Restored rules (final-review fix, 2026-08-10) ─────────────────────── Task 6 deleted the trailing Bulma-workaround block correctly, but these two rules aren't Bulma workarounds — real Bulma doesn't replace them. .button is nowrap with no small-screen escape, so long SynonymGuide button labels overflow their pill below 480px without this. */ body.synonyms-brand .box .button { margin: 0 0.5rem 0.5rem 0; } @media (max-width: 480px) { body.synonyms-brand .button { white-space: normal; text-align: center; line-height: 1.3; } }