lion-make 0.2.0 → 0.3.0

package/guidelines/composition/constraints.md

@@ -7,13 +7,38 @@ Hard rules that apply across the entire design system. These are non-negotiable.
 - **Template choice is permanent.** Once a page is created with the Forehead or Sideburn template, it cannot be changed without reimporting all components.
 - **The Sideburn and Outro zones do not exist in the Forehead template.** Do not design Sideburn or Outro content for a Forehead page.
 - **Platform cannot be changed after page creation.** Set the platform correctly at the start.
+- If in doubt between templates, choose Forehead — it is easier to migrate Forehead → Sideburn than the reverse.
 
 ## Zone Constraints
 
-- Content types are zone-locked. A Hero content type placed outside the Hero zone is invalid — do not do it.
-- The Anklet zone has a fixed structure (quick-links list). It does not accept arbitrary content types.
-- Header subsections (Corporate Universal Header, Global Header Bar, Navigation) each accept only their designated component. Do not mix subsection types.
-- Footer subsections (Disclaimer, Disclosure, Compliance) are for legal content only. Do not place marketing content in the Footer zone.
+- Content types are zone-locked. A Hero content type placed outside the Hero zone is invalid.
+- **The Anklet zone is structurally fixed** — it only accepts the `Anklet` component (quick-links list). No other content types can be placed there.
+- **Header structural bars are not content types.** `CorporateUniversalHeader` and `GlobalHeaderBar` are containers. The 7 header content types (`HeaderCTA`, `HeaderLogo`, `HeaderProduct`, `HeaderSectionNavigation`, `HeaderSectionTitle`, `TopLevelNavigation`, `HeaderUnderwriter`) go inside them.
+- **One hero per page.** Do not stack multiple hero types (`CTAHeroBlock`, `HeroBlock`, `MultiHero`, `NotAvailableHeroBlock`) on the same page. When a product is state-unavailable, `NotAvailableHeroBlock` replaces the standard hero entirely.
+- Footer content types must follow the mandatory render order: Links & Social → Disclaimers → Disclosures → Compliance → Legal Links. Do not reorder them.
+- **Anklet is not in the footer zone.** It sits between General Content and `<Section zone="footer">` — outside any Section wrapper.
+
+## Header-Specific Constraints
+
+- `HeaderLogo` — one per page, mandatory.
+- `TopLevelNavigation` — one per page, mandatory.
+- `HeaderUnderwriter` — required on all product DLPs where a specific underwriting entity applies. Exact text is set by compliance team.
+- `HeaderProduct` — use only on product DLPs, not on general or hub pages.
+- `HeaderSectionNavigation` — only include when the current page belongs to a multi-page section.
+
+## Hero-Specific Constraints
+
+- `CTAHeroBlock` — use when the hero's primary goal is a conversion action.
+- `HeroBlock` — use for informational pages with no CTA in the hero.
+- `MultiHero` — hub/home pages only. Limit to 2–5 panels. Avoid on product DLPs.
+- `NotAvailableHeroBlock` — must be rendered conditionally from facet/state data; never hardcode unavailability.
+
+## Footer-Specific Constraints
+
+- `Disclosure` starts collapsed; `DisclosureToggleOpen` starts expanded. Use Toggle Open only when regulation mandates the disclosure is visible on page load.
+- `ComplianceBlock` — required on all regulated product pages. Item Numbers and Material IDs come from the compliance team.
+- `LegalLinks` — required on every page. Must be the last element in the footer.
+- Do not place marketing content in the Footer zone.
 
 ## Container Constraints
 
@@ -35,12 +60,19 @@ Hard rules that apply across the entire design system. These are non-negotiable.
 - Facets are targeting triggers (e.g., state, county). Only one facet value per variation.
 - The most common facet is `state`. Other facets like `county` are supported but less common.
 - When no facet matches, no variation displays from that Component. Plan a default (untagged) variation where needed.
+- `NotAvailableHeroBlock` is a common facet-triggered type — show it when the state facet matches an unavailable state.
+
+## Platform-Specific Content Types
+
+Three general content types are restricted by platform:
 
-## Content Type Constraints
+| Content type | Component | Platform restriction |
+|---|---|---|
+| All Blog Posts Block | `AllBlogsPostBlock` | Blog platform only (`data-platform="blog"`) |
+| Recent Blog Posts Block | `RecentBlogPostsBlock` | Blog platform only (`data-platform="blog"`) |
+| Hot Jobs Block | `HotJobsBlock` | Careers platform only (`data-platform="careers"`) |
 
-- Content types are predefined. You cannot create ad-hoc content structures outside the defined types.
-- Some content types are platform-specific. Verify platform compatibility before using.
-- A content type placed in the wrong zone is a design error — the system will not render it correctly.
+Do not use these on non-matching platforms.
 
 ## Cross-references
 

package/guidelines/composition/zones.md

@@ -4,24 +4,62 @@ This is the authoritative placement table for the lion-make design system. Every
 
 ## Zone Placement Table
 
-| Zone | Template | Subsections | Allowed Content Types |
+| Zone | Template | Allowed Content Types | Components |
 |---|---|---|---|
-| **Header** | Both | Corporate Universal Header, Global Header Bar, Navigation (Underwriter, Product, Top Nav) | Header content types only |
-| **Hero** | Both | — | Hero content types only |
-| **Primary Column** | Both | — | General content types |
-| **Sideburn** | Sideburn only | — | General content types (subset) |
-| **Outro** | Sideburn only | — | General content types (subset) |
-| **Anklet** | Both | — | Quick links only (fixed structure) |
-| **Footer** | Both | Disclaimer, Disclosure, Compliance | Footer content types only |
+| **Header** | Both | Call to Action, Logo, Product, Section Navigation, Section Title, Top Level Navigation, Underwriter | `HeaderCTA`, `HeaderLogo`, `HeaderProduct`, `HeaderSectionNavigation`, `HeaderSectionTitle`, `TopLevelNavigation`, `HeaderUnderwriter` |
+| **Hero** | Both | CTA Hero Block, Hero Block, Multi Hero, Not Available Hero Block | `CTAHeroBlock`, `HeroBlock`, `MultiHero`, `NotAvailableHeroBlock` |
+| **Primary Column** | Both | All 37 general content types | see [general/overview.md](../content-types/general/overview.md) |
+| **Sideburn** | Sideburn only | Subset of general content types | see [general/overview.md](../content-types/general/overview.md) |
+| **Outro** | Sideburn only | Subset of general content types | see [general/overview.md](../content-types/general/overview.md) |
+| **Anklet** | Both | Quick links only | `Anklet` |
+| **Footer** | Both | Links & Social, Disclaimers, Disclosures, Disclosure Toggle Open, Compliance, Legal Links | `LinksAndSocial`, `Disclaimer`, `Disclosure`, `DisclosureToggleOpen`, `ComplianceBlock`, `LegalLinks` |
+
+## Header Zone Detail
+
+The Header zone uses two structural bars as containers. Content types are placed inside them:
+
+| Structural bar | Accepts |
+|---|---|
+| `CorporateUniversalHeader` | `HeaderLogo`, `HeaderUnderwriter` |
+| `GlobalHeaderBar` | `TopLevelNavigation`, `HeaderCTA`, `HeaderProduct`, `HeaderSectionTitle` |
+| Below `GlobalHeaderBar` | `HeaderSectionNavigation` |
+
+Structural bars (`CorporateUniversalHeader`, `GlobalHeaderBar`) are not content types — they are layout containers for the Header zone.
+
+## Hero Zone Detail
+
+| Content type | Component | When to use |
+|---|---|---|
+| CTA Hero Block | `CTAHeroBlock` | Primary conversion goal (product DLPs, campaigns) |
+| Hero Block | `HeroBlock` | Informational (section hubs, About, resource pages) |
+| Multi Hero | `MultiHero` | Multiple products/messages (home page, category hubs) |
+| Not Available Hero Block | `NotAvailableHeroBlock` | Product unavailable in user's state (facet-triggered) |
+
+Only one hero content type per page. Do not stack multiple hero types.
+
+## Footer Zone Detail
+
+Footer content types have a mandatory render order:
+
+| Order | Content type | Component | Notes |
+|---|---|---|---|
+| 1 | Links & Social | `LinksAndSocial` | Nav columns + social icons; first in footer |
+| 2 | Disclaimers | `Disclaimer` | Static legal copy; always visible |
+| 3 | Disclosures | `Disclosure` | Toggle starts collapsed |
+| 3 | Disclosure Toggle Open | `DisclosureToggleOpen` | Toggle starts expanded (required-visible) |
+| 4 | Compliance | `ComplianceBlock` | Item Number / Material ID |
+| 5 | Legal Links | `LegalLinks` | Privacy, Terms, Copyright; last in footer |
+
+**Anklet** sits in its own zone between General Content and Footer — it is not inside `<Section zone="footer">`.
 
 ## Zone Rules
 
 - A **header content type** can only be placed in the Header zone.
-- A **hero content type** can only be placed in the Hero zone.
+- A **hero content type** can only be placed in the Hero zone. Only one hero per page.
 - A **general content type** can only be placed in the Primary Column, Sideburn, or Outro zones.
-- The **Anklet** zone accepts only the Anklet quick-links structure — no other content types.
+- The **Anklet** zone accepts only the `Anklet` component — no other content types.
 - A **footer content type** can only be placed in the Footer zone.
-- The **Sideburn** and **Outro** zones only exist in the Sideburn template. They are not available in the Forehead template.
+- The **Sideburn** and **Outro** zones only exist in the Sideburn template.
 
 ## Template-to-Zone Availability
 

package/guidelines/content-types/footer/anklet.md

@@ -0,0 +1,62 @@
+# Anklet
+
+**Zone:** Anklet — its own dedicated zone directly above the Footer zone. Not part of the Footer zone itself.
+
+> **Note on placement:** Mondrian documents the Anklet under the "Footer" section of the guide, but architecturally it occupies its own zone (`data-zone="anklet"`) between General Content and the Footer. It is not nested inside a `Section zone="footer"`.
+
+## Description
+
+A full-width quick-links bar anchored between the General Content zone and the Footer. Provides fast access to high-priority destinations — typically product lines, service links, or audience entry points — without requiring the user to navigate through the footer columns.
+
+The Anklet structure is fixed: a horizontal list of text links. No headings, no columns, no icons.
+
+## Component
+
+`Anklet` — located in `src/components/layout/` (not footer), exported from `lion-make`.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `links` | `AnkletLink[]` | Yes | Quick link items |
+| `className` | `string` | No | Additional CSS class |
+
+### AnkletLink
+
+| Prop | Type | Description |
+|---|---|---|
+| `label` | `string` | Link text |
+| `href` | `string` | Destination URL |
+
+## Usage
+
+```tsx
+import { Anklet } from 'lion-make'
+
+<Anklet
+  links={[
+    { label: 'Life Insurance', href: '/life' },
+    { label: 'Medicare', href: '/medicare' },
+    { label: 'Supplemental Health', href: '/supplemental' },
+    { label: 'Dental & Vision', href: '/dental-vision' },
+    { label: 'Find an Agent', href: '/agent-finder' },
+  ]}
+/>
+```
+
+## Page Structure Position
+
+```
+<Section zone="header"> … </Section>
+<Section zone="hero"> … </Section>
+[General Content zone]
+<Anklet links={…} />          ← here, outside any Section
+<Section zone="footer"> … </Section>
+```
+
+## Design Tokens
+
+- Background: `var(--color-gray-lightest)` or `var(--color-brand)`
+- Link: `var(--h5-font-size)`, `var(--font-weight-400)`, `var(--color-text)` or `var(--color-white)`
+- Border top: `var(--border-width-thin)` solid `var(--color-line)`
+- Padding: `var(--padding-base-vertical)` vertical, `var(--edge-padding)` horizontal

package/guidelines/content-types/footer/compliance.md

@@ -0,0 +1,49 @@
+# Compliance
+
+**Zone:** Footer only — Compliance subsection.
+
+## Description
+
+Displays required compliance identifiers and associated legal copy. This is distinct from the `Disclaimers` content type (which contains free-text legal statements) — `Compliance` is specifically for structured identifiers: Item Numbers and Material IDs as mandated by regulatory and compliance teams.
+
+Required on all regulated product pages (life, Medicare, supplemental health). The exact identifiers and surrounding copy are determined by the compliance team and the product's filing jurisdiction.
+
+## Component
+
+`ComplianceBlock`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `itemNumber` | `string` | No | Compliance Item Number (e.g., `'M37594_XXXXXX'`) |
+| `materialId` | `string` | No | Material ID (primarily used for Medicare Advantage / PDP) |
+| `text` | `string` | No | Required legal copy accompanying the identifiers |
+| `className` | `string` | No | Additional CSS class |
+
+At least one of `itemNumber`, `materialId`, or `text` must be present.
+
+## Usage
+
+```tsx
+import { Section, ComplianceBlock } from 'lion-make'
+
+<Section zone="footer">
+  <ComplianceBlock
+    itemNumber="M37594_0524"
+    text="For more information about Mutual of Omaha's privacy practices, visit mutualofomaha.com/privacy."
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only, always last in the footer — below `Disclaimers` and `Disclosures`.
+- Consult compliance team for required identifiers per product and per state.
+- Do not place on pages without a regulated product.
+
+## Design Tokens
+
+- Text: `var(--h6-font-size)`, `var(--color-gray-dark)`, `var(--h6-line-height)`
+- Label (`dt`): `var(--font-weight-600)`
+- Value (`dd`): `var(--font-weight-400)`

package/guidelines/content-types/footer/disclaimers.md

@@ -0,0 +1,48 @@
+# Disclaimers
+
+**Zone:** Footer only — Disclaimers subsection.
+
+## Description
+
+Static legal statements displayed in the footer. Unlike `Disclosures` (which are toggled open/closed by the user), Disclaimers are always visible — no toggle, no expand/collapse. Use for brief legal copy that must be persistently visible: asterisk footnotes, rate qualifications, "not available in all states" statements, and similar.
+
+One `Disclaimer` per legal statement. Stack multiple instances for multiple statements — do not concatenate them into a single prop.
+
+## Component
+
+`Disclaimer`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `text` | `string` | Yes | The disclaimer copy |
+| `itemNumber` | `string` | No | Compliance Item Number displayed alongside the text |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Section, Disclaimer } from 'lion-make'
+
+<Section zone="footer">
+  <Disclaimer
+    text="*Rates based on a 35-year-old non-smoker in excellent health. Individual rates may vary."
+    itemNumber="M37594_0524"
+  />
+  <Disclaimer
+    text="Products and availability may vary by state. Not available in all states."
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only, in the Disclaimers subsection.
+- Place above `Disclosures` and `Compliance`.
+- Always visible — do not use when a toggle is desired (use `Disclosures` instead).
+
+## Design Tokens
+
+- Text: `var(--h6-font-size)`, `var(--color-gray-dark)`, `var(--h6-line-height)`
+- Item number: same size, `var(--font-weight-400)`, rendered inline after the text

package/guidelines/content-types/footer/disclosure-toggle-open.md

@@ -0,0 +1,51 @@
+# Disclosure Toggle Open
+
+**Zone:** Footer only — Disclosures subsection.
+
+## Description
+
+A toggleable legal disclosure that **starts in the expanded (open) state**. The user can collapse it. Use when regulatory requirements mandate that the disclosure text is visible on page load without requiring user interaction.
+
+Functionally identical to `Disclosures` except for the initial state. Both use the same `Disclosure` component under the hood — the distinction is the `defaultOpen` prop.
+
+## Component
+
+`DisclosureToggleOpen` (thin wrapper around `Disclosure` with `defaultOpen={true}`)
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `triggerLabel` | `string` | Yes | Toggle button label (e.g., "Product Disclosure Statement") |
+| `content` | `string` | Yes | Full legal disclosure text, shown on load |
+| `materialId` | `string` | No | Material ID displayed inline with the content |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Section, DisclosureToggleOpen } from 'lion-make'
+
+<Section zone="footer">
+  <DisclosureToggleOpen
+    triggerLabel="Medicare Supplement Insurance Disclosure"
+    content="Medicare Supplement insurance plans are not connected with or endorsed by the U.S. Government or the federal Medicare program. This is a solicitation of insurance."
+    materialId="MSO-DISC-001"
+  />
+</Section>
+```
+
+## When to use vs Disclosures
+
+| | Disclosures | Disclosure Toggle Open |
+|---|---|---|
+| Initial state | Collapsed | **Expanded** |
+| User can toggle | Yes | Yes |
+| Regulatory use | Standard product disclosures | Required-visible disclosures |
+
+## Design Tokens
+
+Same as `Disclosures`:
+- Trigger: `var(--color-link)`, `var(--h6-font-size)`, no border
+- Content: `var(--h6-font-size)`, `var(--color-gray-dark)`
+- Material ID: inline, same size

package/guidelines/content-types/footer/disclosures.md

@@ -0,0 +1,50 @@
+# Disclosures
+
+**Zone:** Footer only — Disclosures subsection.
+
+## Description
+
+A toggleable legal disclosure that **starts collapsed**. The user clicks a trigger link to expand and read the full content. Use for standard product disclosures, fine print, and supplementary legal text that doesn't need to be immediately visible.
+
+When the disclosure must be visible on page load, use `Disclosure Toggle Open` instead.
+
+## Component
+
+`Disclosure`
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `triggerLabel` | `string` | Yes | — | Toggle button label |
+| `content` | `string` | Yes | — | Full disclosure text, revealed on expand |
+| `materialId` | `string` | No | — | Material ID shown inline within the content |
+| `defaultOpen` | `boolean` | No | `false` | Set `true` to start expanded (equivalent to `DisclosureToggleOpen`) |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Section, Disclosure } from 'lion-make'
+
+<Section zone="footer">
+  <Disclosure
+    triggerLabel="Term Life Insurance — Product Disclosure"
+    content="Term life insurance coverage is issued by Mutual of Omaha Insurance Company, Omaha, NE. Policy Form ICC22L-TERM. Not available in all states."
+    materialId="L-TERM-DISC-0524"
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only.
+- Place below `Disclaimers` and above `Compliance`.
+- Stack multiple `Disclosure` instances for multiple product disclosures — do not merge into one.
+- If the disclosure must be pre-expanded, use `DisclosureToggleOpen` instead.
+
+## Design Tokens
+
+- Trigger: `var(--color-link)`, `var(--h6-font-size)`, no border, cursor pointer
+- Content: `var(--h6-font-size)`, `var(--color-gray-dark)`
+- Material ID: inline, appended after the content text

package/guidelines/content-types/footer/legal-links.md

@@ -0,0 +1,59 @@
+# Legal Links
+
+**Zone:** Footer only — Legal Links subsection.
+
+## Description
+
+A horizontal bar of links to legal and policy pages — Privacy Policy, Terms of Use, Accessibility Statement, Cookie Preferences, Site Map, and similar. Optionally includes a copyright notice. Typically the bottommost element in the footer, below all disclosures and compliance blocks.
+
+Separate from `Links & Social` (which handles the main footer nav columns) — Legal Links is a dedicated subsection for purely legal/regulatory destinations.
+
+## Component
+
+`LegalLinks`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `links` | `LegalLink[]` | Yes | Legal page links |
+| `copyrightText` | `string` | No | Copyright line (e.g., `'© 2025 Mutual of Omaha Insurance Company'`) |
+| `className` | `string` | No | Additional CSS class |
+
+### LegalLink
+
+| Prop | Type | Description |
+|---|---|---|
+| `label` | `string` | Link text |
+| `href` | `string` | Destination URL |
+
+## Usage
+
+```tsx
+import { Section, LegalLinks } from 'lion-make'
+
+<Section zone="footer">
+  <LegalLinks
+    copyrightText="© 2025 Mutual of Omaha Insurance Company. All rights reserved."
+    links={[
+      { label: 'Privacy Policy', href: '/privacy' },
+      { label: 'Terms of Use', href: '/terms' },
+      { label: 'Accessibility', href: '/accessibility' },
+      { label: 'Cookie Preferences', href: '/cookies' },
+      { label: 'Site Map', href: '/sitemap' },
+    ]}
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only. Always the last element in the footer.
+- Must be below `Compliance` block.
+- Render on every page — legal links are sitewide requirements.
+
+## Design Tokens
+
+- Copyright: `var(--h6-font-size)`, `var(--color-gray-dark)`
+- Links: `var(--h6-font-size)`, `var(--color-link)`, pipe separator between items
+- Background inherits from footer: `var(--color-gray-darkest)`

package/guidelines/content-types/footer/links-and-social.md

@@ -0,0 +1,94 @@
+# Links & Social
+
+**Zone:** Footer only — Links & Social subsection.
+
+## Description
+
+The primary footer navigation block. Renders multiple columns of site links (product lines, services, company info, etc.) alongside social media icon links. Always the first content type in the footer, immediately below the Anklet zone.
+
+Footer nav columns help users discover content they didn't find in the main navigation. Social links build brand presence. Both are optional individually but the component requires at least one column.
+
+## Component
+
+`LinksAndSocial`
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `columns` | `FooterNavColumn[]` | Yes | Navigation columns (min 1, typically 3–5) |
+| `socialLinks` | `SocialLink[]` | No | Social media links (rendered as icon links) |
+| `className` | `string` | No | Additional CSS class |
+
+### FooterNavColumn
+
+| Prop | Type | Description |
+|---|---|---|
+| `heading` | `string` | Column heading |
+| `links` | `Array<{ label: string; href: string }>` | Column links |
+
+### SocialLink
+
+| Prop | Type | Description |
+|---|---|---|
+| `platform` | `'facebook' \| 'twitter' \| 'linkedin' \| 'youtube' \| 'instagram' \| 'x'` | Platform identifier (controls icon class) |
+| `href` | `string` | Profile URL |
+| `label` | `string` (optional) | Accessible label (defaults to platform name) |
+
+## Usage
+
+```tsx
+import { Section, LinksAndSocial } from 'lion-make'
+
+<Section zone="footer">
+  <LinksAndSocial
+    columns={[
+      {
+        heading: 'Insurance',
+        links: [
+          { label: 'Life Insurance', href: '/life' },
+          { label: 'Medicare', href: '/medicare' },
+          { label: 'Supplemental Health', href: '/supplemental' },
+          { label: 'Dental & Vision', href: '/dental-vision' },
+        ],
+      },
+      {
+        heading: 'Company',
+        links: [
+          { label: 'About Us', href: '/about' },
+          { label: 'Careers', href: '/careers' },
+          { label: 'Newsroom', href: '/news' },
+          { label: 'Community', href: '/community' },
+        ],
+      },
+      {
+        heading: 'Support',
+        links: [
+          { label: 'Contact Us', href: '/contact' },
+          { label: 'Find an Agent', href: '/agent-finder' },
+          { label: 'File a Claim', href: '/claims' },
+          { label: 'Customer Login', href: '/login' },
+        ],
+      },
+    ]}
+    socialLinks={[
+      { platform: 'facebook', href: 'https://facebook.com/mutualofomaha' },
+      { platform: 'linkedin', href: 'https://linkedin.com/company/mutual-of-omaha' },
+      { platform: 'youtube', href: 'https://youtube.com/mutualofomaha' },
+    ]}
+  />
+</Section>
+```
+
+## Placement Rules
+
+- Footer zone only. Always the first content type in the footer.
+- Social link targets must use `rel="noopener noreferrer"` and `target="_blank"`.
+- Column headings use `<h3>` — do not skip heading levels.
+
+## Design Tokens
+
+- Background: `var(--color-gray-darkest)` (dark footer)
+- Column heading: `var(--h5-font-size)`, `var(--font-weight-600)`, `var(--color-white)`
+- Column links: `var(--h6-font-size)`, `var(--color-white-opaque)`, no underline
+- Social icons: 24×24px, `var(--color-white-opaque)`, hover `var(--color-white)`