From e33d75d65ee6fe9dd9b4b0601a7571d2374acb75 Mon Sep 17 00:00:00 2001 From: AEMY Studio Date: Thu, 16 Jul 2026 00:45:16 +0000 Subject: [PATCH 1/5] Add cards, header, hero blocks Automated migration updates generated by Experience Modernization Agent. Changed files (10): - .gitignore - .migration/project.json - blocks/cards/cards.css - blocks/cards/cards.js - blocks/header/header.css - blocks/header/header.js - blocks/hero/hero.css - head.html - styles/brand.css - styles/styles.css --- .gitignore | 1 + .migration/project.json | 14 + .../scrape-webpage/scripts/package-lock.json | 45 + .skills/scrape-webpage/scripts/package.json | 1 + blocks/cards/cards.css | 324 ++-- blocks/cards/cards.js | 28 + blocks/header/header.css | 1427 +++-------------- blocks/header/header.js | 691 ++------ blocks/hero/hero.css | 297 +--- head.html | 3 + styles/brand.css | 38 + styles/styles.css | 136 +- 12 files changed, 820 insertions(+), 2185 deletions(-) create mode 100644 .migration/project.json create mode 100644 styles/brand.css diff --git a/.gitignore b/.gitignore index 55fcf8e..a7cb1cc 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,4 @@ helix-importer-ui !AGENTS.md tasks/lessons.md tasks/todo.md +migration-work/navigation-validation/ diff --git a/.migration/project.json b/.migration/project.json new file mode 100644 index 0000000..653ce06 --- /dev/null +++ b/.migration/project.json @@ -0,0 +1,14 @@ +{ + "type": "da", + "sites": { + "demo": { + "previewOrg": "scdemos", + "previewSite": "demo" + }, + "publicissapient": { + "libraryUrl": "https://main--sta-boilerplate--aemdemos.aem.page/tools/sidekick/library.json", + "previewOrg": "scdemos", + "previewSite": "publicissapient" + } + } +} \ No newline at end of file diff --git a/.skills/scrape-webpage/scripts/package-lock.json b/.skills/scrape-webpage/scripts/package-lock.json index 7171151..fa19dd3 100644 --- a/.skills/scrape-webpage/scripts/package-lock.json +++ b/.skills/scrape-webpage/scripts/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "playwright": "^1.61.1", "sharp": "^0.33.0" } }, @@ -429,12 +430,56 @@ "node": ">=8" } }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/is-arrayish": { "version": "0.3.4", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz", "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==", "license": "MIT" }, + "node_modules/playwright": { + "version": "1.61.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz", + "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==", + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.61.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.61.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz", + "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==", + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/semver": { "version": "7.7.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", diff --git a/.skills/scrape-webpage/scripts/package.json b/.skills/scrape-webpage/scripts/package.json index 6aa4586..e379088 100644 --- a/.skills/scrape-webpage/scripts/package.json +++ b/.skills/scrape-webpage/scripts/package.json @@ -1,6 +1,7 @@ { "type": "module", "dependencies": { + "playwright": "^1.61.1", "sharp": "^0.33.0" } } diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 5cc2c9a..3bc2c20 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,4 +1,9 @@ -/* Default cards */ +/* ========================================================================== + Cards — Publicis Sapient design system + Source: publicissapient.com/industries/financial-services + Minimalist content cards: white rounded surface, no heavy borders/shadows, + typographic hierarchy (eyebrow / title / body) and generous spacing. + ========================================================================== */ .cards > ul { list-style: none; @@ -7,34 +12,30 @@ display: grid; grid-template-columns: 1fr; gap: var(--space-l); - max-width: 340px; - margin-inline: auto; } .cards > ul > li { - border: 1px solid light-dark(var(--color-gray-200), rgb(245 242 237 / 10%)); - background: light-dark(var(--color-light), var(--color-card-dark)); display: flex; flex-direction: column; - border-radius: 12px; + background-color: light-dark(var(--color-light), var(--color-card-dark)); + border: 1px solid light-dark(var(--color-gray-200), rgb(255 255 255 / 10%)); + border-radius: 16px; overflow: hidden; - box-shadow: 0 2px 8px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 40%)), - 0 1px 2px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 25%)); - transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; + transition: transform 0.3s var(--ease-out-smooth), box-shadow 0.3s ease, border-color 0.3s ease; } .cards > ul > li:hover { - transform: translateY(-8px); - box-shadow: 0 24px 48px light-dark(rgb(161 79 43 / 18%), rgb(197 160 89 / 18%)); - border-color: light-dark(var(--color-gold), rgb(197 160 89 / 45%)); + transform: translateY(-4px); + border-color: light-dark(var(--color-rust), var(--color-rust-bright)); + box-shadow: 0 12px 28px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 45%)); } -/* Article wrapper — layout-invisible so the card link remains the direct flex child */ +/* Article wrapper is layout-invisible so the link/body stay direct children */ .cards > ul > li > article { display: contents; } -/* Card link */ +/* Card link (whole-card clickable) */ .cards .cards-card-link { display: flex; flex-direction: column; @@ -45,212 +46,197 @@ cursor: pointer; } -/* Image */ -.cards .cards-card-image { - line-height: 0; - flex-shrink: 0; - overflow: hidden; +/* ===== Text body ===== */ +.cards .cards-card-body { + padding: var(--space-l); + flex-grow: 1; + display: flex; + flex-direction: column; } -.cards .cards-card-image img { - display: block; - height: auto; - max-width: 100%; - margin-inline: auto; - transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); +/* ===== Image / icon cell ===== */ +.cards .cards-card-body:has(img), +.cards .cards-card-body:has(picture) { + padding: var(--space-l) var(--space-l) 0; + line-height: 0; } -.cards > ul > li:hover .cards-card-image img { - transform: scale(1.05); +/* Empty authored cell (image slot with no image) — collapse it */ +.cards .cards-card-body:empty { + display: none; } -/* Body */ -.cards .cards-card-body { - padding: var(--space-m); - flex-grow: 1; +.cards .cards-card-body img { + display: block; + width: 48px; + height: 48px; + object-fit: contain; } .cards .cards-card-body :is(h2, h3, h4) { - margin-top: 0; - line-height: 1.2; + margin: 0 0 var(--space-s); + font-family: var(--font-family); + font-size: 20px; + font-weight: 500; + line-height: 1.3; + color: light-dark(var(--color-ink), var(--color-parchment)); } .cards .cards-card-body p { - color: light-dark(var(--color-gray-700), var(--color-muted)); - font-size: var(--body-font-size-s); + margin: 0 0 var(--space-s); + font-family: var(--font-family-body); + font-size: 18px; line-height: 1.55; + color: light-dark(rgb(68 68 68), var(--color-gray-300)); } -/* Tablet: 2 columns */ -@media (width >= 600px) { - .cards > ul { - grid-template-columns: repeat(2, 1fr); - max-width: none; - } +/* ===== CTA container pushes to the bottom of the card ===== */ +.cards .cards-card-body p:has(> a), +.cards .cards-card-body p.button-container { + margin-top: auto; + padding-top: var(--space-s); } -/* Desktop */ -@media (width >= 900px) { - .cards > ul { - grid-template-columns: repeat(auto-fill, minmax(257px, 1fr)); - } - - .cards .cards-card-body { - padding: var(--space-l); - } +.cards .cards-card-body p:last-child { + margin-bottom: 0; } -/* Links variant empty state */ -.cards .cards-links-empty { +/* ===== CTA link (Learn more) — plain arrow-style link, undo button decoration ===== */ +.cards .cards-card-body a.button:any-link, +.cards .cards-card-body a:any-link { + display: inline-flex; + align-items: center; + gap: 6px; margin: 0; - padding: var(--space-m); - color: light-dark(var(--color-gray-600), var(--color-gray-400)); + padding: 0; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; + font-family: var(--font-family-body); + font-size: var(--body-font-size-m); + font-weight: 600; + color: light-dark(var(--color-rust), var(--color-rust-bright)); + text-decoration: none; + text-transform: none; + letter-spacing: normal; + white-space: normal; + overflow: visible; } -/* ========================================================================== - Bento variant - ========================================================================== */ - -.cards.bento > ul { - max-width: 1400px; - gap: 24px; +.cards .cards-card-body a.button:any-link::after, +.cards .cards-card-body a:any-link::after { + content: '→'; + transition: transform 0.25s ease; } -.cards.bento > ul > li { - border: var(--border-heritage); - border-radius: var(--border-radius-heritage); - padding: 45px; - background: light-dark(var(--color-parchment), var(--color-card-dark)); - transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.4s ease, background-color 0.4s ease; +.cards .cards-card-body a:hover { + color: light-dark(var(--color-gold), var(--color-rust)); + text-decoration: none; + background: none; + box-shadow: none; } -.cards.bento > ul > li:hover { - transform: translateY(-10px); - box-shadow: 0 32px 64px -12px light-dark(rgb(161 79 43 / 25%), rgb(197 160 89 / 20%)), 0 0 0 1px light-dark(var(--color-gold), rgb(197 160 89 / 40%)); - border-color: var(--color-gold); +/* Title links inherit color (higher specificity, placed after base link rules) */ +.cards .cards-card-body :is(h2, h3, h4) a:any-link { + color: inherit; + text-decoration: none; } -/* Featured card */ -.cards.bento > ul > li.cards-card-featured { - border: none; - background-color: var(--color-rust); - color: var(--color-parchment); +.cards .cards-card-body :is(h2, h3, h4) a:hover { + color: var(--color-rust); + text-decoration: none; } -/* Tag */ -.cards.bento .cards-card-tag { +/* ===== Eyebrow label (first

immediately before the title) ===== */ +.cards .cards-card-body > p:first-child:has(+ h2), +.cards .cards-card-body > p:first-child:has(+ h3), +.cards .cards-card-body > p:first-child:has(+ h4) { + margin-bottom: var(--space-m); font-family: var(--font-family-mono); - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 3px; - color: var(--color-gold); - margin: 0 0 30px; + font-size: 14px; + font-weight: 500; + line-height: 1.3; + letter-spacing: 0.02em; + color: light-dark(var(--color-rust), var(--color-rust-bright)); + text-transform: none; } -/* Headings */ -.cards.bento .cards-card-body :is(h2, h3) { - font-family: var(--font-family-serif); - font-weight: 500; - font-size: 2.2rem; - line-height: 1.1; - letter-spacing: -1px; - margin: 0; - color: light-dark(var(--color-ink), var(--color-parchment)); +.cards .cards-card-body a:hover::after { + transform: translateX(4px); } -.cards.bento .cards-card-featured .cards-card-body :is(h2, h3) { - font-size: 3.2rem; +/* ========================================================================== + Responsive grid + ========================================================================== */ + +/* Tablet: 2 columns */ +@media (width >= 600px) { + .cards > ul { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-xl); + } } -/* Body text */ -.cards.bento .cards-card-body p:not(.cards-card-tag) { - line-height: 1.5; +/* Desktop: 3 columns */ +@media (width >= 900px) { + .cards > ul { + grid-template-columns: repeat(3, 1fr); + } + + .cards .cards-card-body :is(h2, h3, h4) { + font-size: 22px; + } } -.cards.bento .cards-card-featured .cards-card-body p:not(.cards-card-tag) { - font-family: var(--font-family-serif); - font-size: 1.2rem; - opacity: 0.9; - margin-top: 35px; - max-width: 550px; +/* ========================================================================== + Accent variant — Bodhi-style icon cards on a warm gradient backdrop + Applied when the section carries Style=accent (icon + text cards). + Falls back gracefully: also triggered for image (icon) cards. + ========================================================================== */ + +.cards.accent { + --card-icon-size: 48px; } -.cards.bento > ul > li:not(.cards-card-featured) .cards-card-body p:not(.cards-card-tag) { - font-size: 0.95rem; - opacity: 0.8; - color: light-dark(var(--color-ink), var(--color-muted)); +/* Warm gradient frame behind the card stack (matches source red→white wash) */ +.cards.accent > ul { + padding: var(--space-l); + border-radius: 24px; + background: linear-gradient(160deg, + light-dark(rgb(233 1 48 / 12%), rgb(233 1 48 / 22%)) 0%, + light-dark(rgb(233 1 48 / 4%), rgb(233 1 48 / 6%)) 45%, + transparent 100%); } -/* Focus */ -.cards.bento .cards-card-link:focus-visible { - outline: 2px solid var(--color-gold); - outline-offset: 3px; - border-radius: var(--border-radius-heritage); - box-shadow: 0 0 0 4px rgb(197 160 89 / 20%); +/* Accent cards: white surface, icon left of text (flex row) */ +.cards.accent > ul > li { + border: 0; + box-shadow: 0 1px 3px rgb(0 0 0 / 6%); } -/* Image — stretch to card edges */ -.cards.bento .cards-card-image { - margin: -45px -45px 24px; - width: calc(100% + 90px); - border-radius: var(--border-radius-heritage); +.cards.accent > ul > li > article { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: var(--space-m); + padding: var(--space-l); } -/* Body — no extra padding, card has its own */ -.cards.bento .cards-card-body { +.cards.accent .cards-card-body { padding: 0; } -/* Medium desktop: 2-column equal cards */ -@media (width >= 900px) { - .cards.bento > ul { - grid-template-columns: repeat(2, 1fr); - grid-auto-rows: auto; - } - - .cards.bento > ul > li { - padding: 60px; - } - - .cards.bento .cards-card-image { - margin: -60px -60px 30px; - width: calc(100% + 120px); - aspect-ratio: 16 / 9; - } - - .cards.bento .cards-card-image img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - } +.cards.accent .cards-card-body:has(img), +.cards.accent .cards-card-body:has(picture) { + flex: 0 0 auto; } -/* Large desktop: 12-column bento grid */ -@media (width >= 1200px) { - .cards.bento > ul { - grid-template-columns: repeat(12, 1fr); - } - - .cards.bento > ul > li { - grid-column: span 3; - } - - .cards.bento > ul > li.cards-card-featured { - grid-column: span 6; - } - - /* Text-only cards (no image) span double width */ - .cards.bento > ul > li.cards-card-text-only { - grid-column: span 6; - } - - .cards.bento .cards-card-image { - aspect-ratio: 4 / 3; - } +.cards.accent .cards-card-body img { + width: var(--card-icon-size); + height: var(--card-icon-size); +} - .cards.bento .cards-card-featured .cards-card-image { - max-height: 300px; - } +.cards.accent .cards-card-body :is(h2, h3, h4) { + font-size: 20px; } diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 13314e3..2a87e65 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -182,6 +182,33 @@ function decorateDefault(block) { block.replaceChildren(ul); } +/** + * Mirror the section's `accent` style onto the block so the accent card + * treatment can be scoped to `.cards.accent`. Reads the section class (the + * standard EDS section-metadata path) and falls back to the authored + * section-metadata table when the section-metadata block is unavailable. + */ +function applyAccentVariant(block) { + const section = block.closest('.section'); + if (!section) return; + if (section.classList.contains('accent')) { + block.classList.add('accent'); + return; + } + const meta = section.querySelector('.section-metadata'); + if (!meta) return; + const isAccent = [...meta.querySelectorAll(':scope > div')].some((row) => { + const cells = [...row.children]; + return cells.length === 2 + && cells[0].textContent.trim().toLowerCase() === 'style' + && /\baccent\b/i.test(cells[1].textContent); + }); + if (isAccent) { + section.classList.add('accent'); + block.classList.add('accent'); + } +} + export default async function decorate(block) { if (block.classList.contains('links')) { await decorateLinks(block); @@ -189,5 +216,6 @@ export default async function decorate(block) { decorateBento(block); } else { decorateDefault(block); + applyAccentVariant(block); } } diff --git a/blocks/header/header.css b/blocks/header/header.css index 4659b15..3b3150c 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1,1330 +1,427 @@ -/* header – mobile first, 600/900/1200px breakpoints */ +/* + * Header block — Publicis Sapient style. + * Two bands: red announcement carousel + solid white sticky main nav. + */ + /* stylelint-disable no-descending-specificity -- header cascade order is intentional across breakpoints */ -header { - --header-hover-bg: transparent; - --header-link-hover-bg: transparent; - --header-drop-shadow: none; - --header-drop-border: transparent; - - /* typography: brand (strongest) > primary nav > dropdown headings > dropdown items */ - --nav-brand-size: 1.7rem; - --nav-brand-weight: 700; - --nav-primary-size: 0.8rem; - --nav-primary-weight: 700; - --nav-heading-size: var(--body-font-size-s); - --nav-heading-weight: 700; - --nav-item-size: var(--body-font-size-s); - --nav-item-weight: 400; - - /* spacing: use space tokens */ - --nav-padding: var(--space-m); - --nav-gap: var(--space-s); - --nav-item-padding: var(--space-m); - --nav-dropdown-padding: var(--space-m); - --nav-dropdown-item-padding: var(--space-s) var(--space-m); - --nav-dropdown-offset: var(--space-s); - --nav-radius: var(--space-s); - - /* backgrounds */ - --nav-bg: var(--background-color); - --nav-bg-hover: var(--header-hover-bg); - --nav-bg-link-hover: var(--header-link-hover-bg); - --nav-bg-dropdown: light-dark(var(--background-color), var(--color-card-dark)); - --nav-bg-dropdown-mobile: light-dark(var(--color-gray-100), var(--color-card-dark)); - --nav-bg-mega: light-dark(var(--color-parchment), var(--color-obsidian)); - --nav-bg-hover-item: light-dark(var(--light-color), var(--color-card-dark)); - - /* header uses neutral hover color */ - --nav-hover-color: light-dark(var(--color-rust), var(--color-gold)); - --nav-focus-color: light-dark(var(--color-rust), var(--color-gold)); - - /* desktop-only (overridden in @media 900px) */ - --nav-desktop-max-width: 1264px; - --nav-desktop-dropdown-min: 220px; - --nav-desktop-dropdown-max: 320px; - --nav-desktop-mega-min-col: 200px; - --nav-desktop-arrow-size: 8px; - --nav-mega-promo-max-width: 280px; - --nav-mega-promo-img-height: 140px; - --nav-mega-promo-max-height: 260px; + +/* ---------- Wrapper / layout ---------- */ + +/* Override the global fixed header height (styles.css sets 64px) so the header + reserves its real height and the sticky nav never overlaps the first block. */ +header.header-wrapper { + height: auto; } header .nav-wrapper { - background-color: light-dark(#faf8f5, var(--color-obsidian)); - width: 100%; - z-index: 1000; - position: fixed; + position: sticky; top: 0; - left: 0; - right: 0; - border-bottom: var(--border-heritage); - box-shadow: none; + z-index: 20; + background: #fff; } -/* mobile: base layout */ header nav { - box-sizing: border-box; display: grid; - grid-template: - 'hamburger brand tools' var(--nav-height) - 'sections sections sections' 1fr / auto 1fr auto; + grid-template-areas: + 'announcement announcement announcement' + 'brand sections tools'; + grid-template-columns: auto 1fr auto; align-items: center; - gap: 0 var(--nav-gap); + max-width: var(--content-max-width); margin: 0 auto; - max-width: 100%; - min-height: var(--nav-height); - padding: 0 var(--nav-padding); font-family: var(--body-font-family); } -header nav[aria-expanded='true'] { - grid-template: - 'hamburger brand tools' var(--nav-height) - 'sections sections sections' 1fr / auto 1fr auto; - overflow: hidden; - min-height: 100dvh; -} - -header nav p { - margin: 0; - line-height: 1; -} +/* ---------- Announcement carousel ---------- */ -header nav a:any-link { - color: currentcolor; - transition: color 0.18s ease, opacity 0.18s ease; +header nav .nav-announcement { + grid-area: announcement; + margin: 0 calc((100vw - 100%) / -2); + background: var(--brand-red); + color: #fff; } -/* hamburger – mobile */ -header nav .nav-hamburger { - grid-area: hamburger; - justify-self: start; - height: 22px; +header nav .nav-announcement-inner { display: flex; align-items: center; + justify-content: center; + gap: 12px; + max-width: var(--content-max-width); + min-height: 56px; + margin: 0 auto; + padding: 8px 24px; } -header nav .nav-hamburger button { - height: 22px; +header nav .nav-announcement ul { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + list-style: none; margin: 0; - border: 0; - border-radius: var(--nav-radius); padding: 0; - background-color: transparent; - color: inherit; - cursor: pointer; - transition: background-color 0.18s ease, opacity 0.18s ease; + text-align: center; } -header nav .nav-hamburger button:hover, -header nav .nav-hamburger button:focus-visible { - opacity: 0.85; - background-color: var(--nav-bg-hover); +header nav .nav-announcement-slide { + font-size: 15px; + font-weight: 400; } -header nav .nav-hamburger-icon, -header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { - box-sizing: border-box; - display: block; - position: relative; - width: 20px; +header nav .nav-announcement-slide[hidden] { + display: none; } -header nav .nav-hamburger-icon::before, -header nav .nav-hamburger-icon::after { - content: ''; - position: absolute; - background: currentcolor; +header nav .nav-announcement-slide a { + color: #fff; + font-weight: 600; + text-decoration: underline; + text-underline-offset: 3px; + margin-left: 6px; + white-space: nowrap; } -header nav[aria-expanded='false'] .nav-hamburger-icon, -header nav[aria-expanded='false'] .nav-hamburger-icon::before, -header nav[aria-expanded='false'] .nav-hamburger-icon::after { - height: 2px; - border-radius: 2px; - background: currentcolor; +header nav .nav-announcement-slide a:hover { + text-decoration: none; } -header nav[aria-expanded='false'] .nav-hamburger-icon::before { - top: -6px; +header nav .nav-announcement button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 0; + border: 0; + background: transparent; + color: #fff; + cursor: pointer; + border-radius: 50%; } -header nav[aria-expanded='false'] .nav-hamburger-icon::after { - top: 6px; +header nav .nav-announcement button:hover { + background: rgb(255 255 255 / 20%); } -header nav[aria-expanded='true'] .nav-hamburger-icon { - height: 22px; - background: transparent; +header nav .nav-announcement-prev::before { + content: '‹'; + font-size: 22px; + line-height: 1; } -header nav[aria-expanded='true'] .nav-hamburger-icon::before, -header nav[aria-expanded='true'] .nav-hamburger-icon::after { - inset: 0; - width: 2px; - height: 20px; - margin: auto; - background: currentcolor; - border-radius: 2px; +header nav .nav-announcement-next::before { + content: '›'; + font-size: 22px; + line-height: 1; } -header nav[aria-expanded='true'] .nav-hamburger-icon::before { - transform: rotate(45deg); +header nav .nav-announcement-pause::before { + content: '❚❚'; + font-size: 11px; + letter-spacing: -1px; } -header nav[aria-expanded='true'] .nav-hamburger-icon::after { - transform: rotate(-45deg); +header nav .nav-announcement-pause.is-paused::before { + content: '▶'; + font-size: 11px; } -/* brand */ -header .nav-brand { +/* ---------- Brand ---------- */ + +header nav .nav-brand { grid-area: brand; - display: flex; - align-items: center; - justify-content: center; - justify-self: stretch; - min-width: 0; - font-family: var(--font-family-serif); - font-size: var(--nav-brand-size); - font-weight: var(--nav-brand-weight); - line-height: 1; - letter-spacing: -0.5px; - color: light-dark(var(--color-rust), var(--color-rust-bright)); + padding: 0 24px; } -header nav .nav-brand a:any-link { +header nav .nav-brand p { margin: 0; } + +header nav .nav-brand a { display: inline-flex; align-items: center; - transition: opacity 0.18s ease; } -header nav .nav-brand a:any-link:hover, -header nav .nav-brand a:any-link:focus-visible { - opacity: 0.85; +header nav .nav-brand img { + width: 100px; + height: 54px; } -header nav .nav-brand .icon.icon-logo { - position: relative; - top: 5px; - } - -header nav .nav-brand :is(img, svg) { - width: min(200px, 42vw); - height: 45px; - object-fit: contain; -} +/* ---------- Primary nav ---------- */ -/* sections – mobile: accordion when expanded */ header nav .nav-sections { grid-area: sections; - display: none; - visibility: hidden; - align-self: start; - width: 100%; } -header nav[aria-expanded='true'] .nav-sections { - display: block; - visibility: visible; - padding: var(--nav-item-padding) 0; -} - -header nav .nav-sections ul { +header nav .nav-sections > ul { + display: flex; + align-items: center; + gap: 4px; list-style: none; - padding: 0; margin: 0; - font-size: var(--nav-primary-size); - text-transform: uppercase; - letter-spacing: 1.5px; -} - -@media (width <= 899px) { - header nav .nav-sections { - overflow-y: auto; - -webkit-overflow-scrolling: touch; - } - - header nav[aria-expanded='true'] .nav-sections { - max-height: calc(var(--nav-open-height, 100dvh) - var(--nav-height)); - } - - header nav .nav-sections ul, - header nav .nav-sections .default-content-wrapper > ul > li, - header nav .nav-sections .default-content-wrapper > ul > li > ul { - text-align: center; - } - - header nav .nav-sections .default-content-wrapper > ul > li > p { - justify-content: center; - } - - header nav .nav-sections .default-content-wrapper > ul > li > p > a { - justify-content: center; - text-align: center; - } -} - -header nav .nav-sections .default-content-wrapper > ul > li { - font-weight: var(--nav-primary-weight); - border-bottom: 1px solid light-dark(var(--color-gray-200), var(--color-gray-600)); -} - -header nav .nav-sections .default-content-wrapper > ul > li:last-child { - border-bottom: 0; + padding: 0; } -header nav .nav-sections .default-content-wrapper > ul > li > p { - margin: 0; - padding: var(--nav-item-padding); +header nav .nav-sections > ul > li { position: relative; - min-height: 44px; - display: flex; - align-items: center; } -header nav .nav-sections .default-content-wrapper > ul > li.nav-drop { - cursor: pointer; -} - -header nav .nav-sections .default-content-wrapper > ul > li.nav-drop > p > a { - flex: 1; - min-height: 44px; - display: flex; +header nav .nav-sections > ul > li > a, +header nav .nav-sections > ul > li > .nav-drop-toggle { + display: inline-flex; align-items: center; -} - -/* chevron: mobile only (p::after); desktop uses li::after below */ -@media (width <= 899px) { - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop > p { - padding-right: calc(var(--nav-item-padding) + 26px); - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop > p > .nav-submenu-toggle { - position: absolute; - right: var(--nav-item-padding); - top: 50%; - width: 24px; - height: 24px; - transform: translateY(-50%); - border: 0; - border-radius: 999px; - background: transparent; - color: inherit; - padding: 0; - cursor: pointer; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop > p > .nav-submenu-toggle::before { - content: ''; - display: block; - width: 6px; - height: 6px; - margin: auto; - border: 2px solid currentcolor; - border-radius: 0 1px 0 0; - border-width: 2px 2px 0 0; - opacity: 0.6; - transform: rotate(135deg); - transition: transform 0.2s ease; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop[aria-expanded='true'] > p > .nav-submenu-toggle::before { - transform: rotate(-45deg); - } -} - -header nav .nav-sections .default-content-wrapper > ul > li > p > a { - display: block; - color: inherit; + gap: 6px; + padding: 12px 14px; + font-family: var(--body-font-family); + font-size: 16px; + font-weight: 400; + line-height: 1; + color: #000; + background: transparent; + border: 0; + cursor: pointer; text-decoration: none; + white-space: nowrap; } -header nav .nav-sections .default-content-wrapper > ul > li > ul { - display: none; - padding: 0 var(--nav-dropdown-padding) var(--nav-dropdown-padding); - margin: 0; - border-radius: var(--nav-radius); +header nav .nav-sections > ul > li > a:hover, +header nav .nav-sections > ul > li > .nav-drop-toggle:hover { + color: var(--brand-red); } -header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul { - display: block; +/* caret on dropdown toggles */ +header nav .nav-sections .nav-drop-toggle::after { + content: ''; + width: 8px; + height: 8px; + border-right: 2px solid currentcolor; + border-bottom: 2px solid currentcolor; + transform: rotate(45deg); + transition: transform 0.2s ease; + margin-left: 2px; + margin-top: -3px; } -/* mega menu groups: heading (e.g. BEGINNERS) + nested ul with items */ -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading { - padding: var(--space-l) 0 var(--space-s); - font-size: var(--nav-heading-size); - font-weight: var(--nav-heading-weight); - color: var(--dark-color); - border-bottom: 0; +header nav .nav-sections .nav-drop[aria-expanded='true'] .nav-drop-toggle { + color: var(--brand-red); } -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading:first-child { - padding-top: 0; +header nav .nav-sections .nav-drop[aria-expanded='true'] .nav-drop-toggle::after { + transform: rotate(-135deg); + margin-top: 2px; } -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading > p { - margin: 0; - padding: 0; - font-size: inherit; - font-weight: var(--nav-heading-weight); -} - -/* sub-items under headings: align with heading, normal case */ -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading > ul { - padding: 0; +/* dropdown panel */ +header nav .nav-sections .nav-drop > ul { + position: absolute; + top: calc(100% + 8px); + left: 0; + z-index: 30; + display: none; + min-width: 304px; + padding: 12px; + list-style: none; margin: 0; - background: none; - border-radius: 0; -} - -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading > ul a { - font-size: var(--nav-item-size); - text-transform: none; - font-weight: var(--nav-item-weight); - padding: var(--space-xs) 0; -} - -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading > ul > li.nav-mega-item { - padding: var(--space-s) 0; - font-weight: var(--nav-item-weight); - border-bottom: 0; - margin-left: 0; - border-left: 0; -} - -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-heading > ul > li.nav-mega-item > a { - padding: 0; + background: #fff; + border: 1px solid #ececec; + border-radius: 8px; + box-shadow: 0 12px 32px rgb(0 0 0 / 12%); } -header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-item { - padding: var(--space-s) 0; - font-size: var(--nav-item-size); - font-weight: var(--nav-item-weight); - border-bottom: 0; -} - -header nav .nav-sections .default-content-wrapper > ul > li > ul > li:not(.nav-mega-heading, .nav-mega-item) { - padding: var(--space-xs) 0; - font-size: var(--nav-item-size); - font-weight: var(--nav-item-weight); -} - -/* mobile: mega menu accordion – structure with .nav-mega-inner */ -@media (width <= 899px) { - header nav .nav-sections .default-content-wrapper > ul > li > ul > li.nav-mega-promo, - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-promo { - display: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul { - background-color: var(--nav-bg-dropdown-mobile); - padding: var(--nav-dropdown-padding); - margin: 0 var(--nav-gap) var(--nav-gap); - border-radius: var(--nav-radius); - border: 1px solid light-dark(var(--color-gray-200), var(--color-gray-600)); - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner { - display: block; - padding: 0; - margin: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading { - padding: var(--space-m) 0 var(--space-s); - font-size: var(--nav-heading-size); - font-weight: var(--nav-heading-weight); - color: var(--dark-color); - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading:first-child { - padding-top: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading > p { - margin: 0 0 var(--space-s); - padding: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading > ul { - list-style: none; - padding: 0; - margin: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading > ul > li { - padding: 0; - margin: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading > ul a { - display: block; - padding: var(--space-s) 0; - font-size: var(--nav-item-size); - font-weight: var(--nav-item-weight); - text-transform: none; - color: inherit; - text-decoration: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-item { - padding: var(--space-s) 0; - font-size: var(--nav-item-size); - font-weight: var(--nav-item-weight); - border-bottom: 1px solid light-dark(var(--color-gray-200), var(--color-gray-600)); - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-item:last-child { - border-bottom: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-item > a { - display: block; - padding: var(--space-s) 0; - color: inherit; - text-decoration: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li > ul > .nav-mega-inner > li.nav-mega-heading + li.nav-mega-heading { - margin-top: var(--space-m); - padding-top: var(--space-m); - border-top: 1px solid light-dark(var(--color-gray-200), var(--color-gray-600)); - } -} - -header nav .nav-sections .default-content-wrapper > ul > li > ul a { +header nav .nav-sections .nav-drop[aria-expanded='true'] > ul { display: block; - padding: var(--space-xs) 0; - font-size: inherit; - font-weight: inherit; - text-decoration: none; - color: inherit; -} - -header nav .nav-sections .default-content-wrapper > ul > li > ul a:hover, -header nav .nav-sections .default-content-wrapper > ul > li > ul a:focus-visible { - color: var(--nav-hover-color); -} - -header nav .nav-sections a.button:any-link, -header nav .nav-sections button.button { - border: 0; - border-radius: 0; - background: transparent; - color: var(--text-color); - padding: 0; - min-width: 0; - font-weight: var(--nav-primary-weight); - text-transform: uppercase; - letter-spacing: 1.5px; -} - -header nav .nav-sections a.button:any-link:hover, -header nav .nav-sections a.button:any-link:focus-visible, -header nav .nav-sections button.button:hover, -header nav .nav-sections button.button:focus-visible { - background: transparent; - border: 0; - transform: none; - box-shadow: none; -} - -/* CTA button in header tools */ -header nav .nav-tools a.button:any-link:not(.nav-tool) { - border: 1.5px solid var(--color-rust); - border-radius: 4px; - background: transparent; - color: var(--color-rust); - padding: 12px 24px; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1.5px; - transition: all 0.3s; } -header nav .nav-tools a.button.nav-auth-link:any-link { - padding: 10px 14px; - min-height: 36px; - line-height: 1; - white-space: nowrap; -} - -header nav .nav-auth-link .nav-auth-info { - display: inline-flex; - align-items: center; - justify-content: center; - width: 14px; - height: 14px; - margin-left: 8px; - border: 1px solid currentcolor; - border-radius: 50%; - font-size: 10px; - font-weight: 700; - line-height: 1; - text-transform: none; +header nav .nav-sections .nav-drop > ul > li { + margin: 0; } -header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a { +header nav .nav-sections .nav-drop > ul > li > a { display: block; - color: inherit; + padding: 10px 12px; + font-size: 16px; + font-weight: 500; + color: #000; text-decoration: none; + border-radius: 6px; } -header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a:hover, -header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a:focus-visible { - color: var(--nav-hover-color); -} - -header nav .nav-tools a.button:any-link:not(.nav-tool):hover { - background: var(--color-rust); - color: var(--color-light); - transform: none; - box-shadow: none; +header nav .nav-sections .nav-drop > ul > li > a:hover { + color: var(--brand-red); + background: var(--light-color, #f5f5f5); } -header nav .nav-sections .default-content-wrapper > ul > li > ul p.button-container { - margin: 0; +header nav .nav-sections .nav-drop > ul > li > p { + margin: 0 0 4px; + padding: 0 12px 8px; + font-size: 13px; + font-weight: 400; + line-height: 1.4; + color: var(--brand-muted, #666); } -header nav .nav-sections .default-content-wrapper > ul > li > ul a.button:any-link { - display: block; - padding: var(--space-xs) 0; -} +/* ---------- Tools ---------- */ -/* tools – mobile */ header nav .nav-tools { grid-area: tools; - justify-self: end; display: flex; align-items: center; - gap: var(--nav-gap); - justify-content: flex-end; + gap: 20px; + padding: 0 24px; } -header nav .nav-tools p { - margin: 0; -} +header nav .nav-tools p { margin: 0; } -header nav .nav-tools .nav-search-form { - position: relative; +header nav .nav-tools .nav-search-link { display: inline-flex; - align-items: center; - margin: 0; -} - -header nav .nav-tools .nav-search-input { - width: 120px; - border: 1px solid light-dark(rgb(0 0 0 / 14%), rgb(255 255 255 / 20%)); - border-radius: 999px; - padding: var(--nav-gap) 38px var(--nav-gap) var(--nav-padding); - background-color: transparent; - color: inherit; - font: inherit; - font-size: var(--body-font-size-s); - line-height: 1.2; - transition: border-color 0.18s ease, box-shadow 0.18s ease; -} - -header nav .nav-tools .nav-search-input::placeholder { - color: inherit; - opacity: 0.6; + width: 24px; + height: 24px; + color: #000; + background: currentcolor; + mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } -header nav .nav-tools .nav-search-input:focus-visible { - outline: none; - border-color: var(--nav-focus-color); - box-shadow: 0 0 0 2px light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 12%)); +header nav .nav-tools .nav-search-link:hover { + color: var(--brand-red); } -header nav .nav-tools .nav-tool { +header nav .nav-tools .nav-cta { display: inline-flex; align-items: center; - justify-content: center; - cursor: pointer; - border: 0; - border-radius: 999px; - background: transparent; - padding: var(--nav-gap); - color: inherit; - transition: background-color 0.18s ease; -} - -header nav .nav-tools .nav-search-submit { - position: absolute; - top: 50%; - right: 6px; - transform: translateY(-50%); - flex: 0 0 auto; - padding: var(--space-xs); - border-radius: 999px; -} - -header nav .nav-tools .nav-tool:hover, -header nav .nav-tools .nav-tool:focus-visible, -header nav .nav-tools a.button.nav-tool:any-link:hover, -header nav .nav-tools a.button.nav-tool:any-link:focus-visible { - background-color: var(--nav-bg-hover); - opacity: 1; + padding: 12px 22px; + font-size: 15px; + font-weight: 600; + color: #fff; + background: var(--brand-red); + border-radius: 9999px; text-decoration: none; + white-space: nowrap; } -header nav .nav-tools a.button.nav-tool:any-link { - border: 0; - background-color: transparent; - color: inherit; - padding: var(--nav-gap); - min-width: 0; -} - -header nav .nav-tools .nav-tool:focus-visible { - outline: 2px solid currentcolor; - outline-offset: 2px; -} - -header nav .nav-tools .icon img { - width: 18px; - height: 18px; -} - -:where(body.dark-scheme, body.dark, body.theme-dark) header nav .nav-tools .icon img { - filter: invert(1) brightness(1.2); +header nav .nav-tools .nav-cta:hover { + background: var(--brand-red-dark); } -header nav .nav-tools .nav-language-wrap { - position: relative; - display: inline-flex; -} +/* ---------- Hamburger (hidden on desktop) ---------- */ -header nav .nav-tools .nav-language-menu { - list-style: none; - margin: 0; - padding: var(--nav-gap) 0; - position: absolute; - top: calc(100% + var(--nav-dropdown-offset)); - right: 0; - left: auto; - min-width: 160px; - max-width: min(200px, calc(100vw - 2 * var(--space-m))); - background-color: var(--nav-bg-dropdown); - border: 1px solid var(--header-drop-border); - border-radius: var(--nav-radius); - box-shadow: var(--header-drop-shadow); - z-index: 1001; -} - -header nav .nav-tools .nav-language-menu[hidden] { +header nav .nav-hamburger { display: none; + grid-area: brand; } -header nav .nav-tools .nav-language-menu li { - margin: 0; - padding: 0; -} - -header nav .nav-tools .nav-language-menu a { - display: block; - padding: var(--nav-dropdown-item-padding); - text-decoration: none; - transition: background-color 0.18s ease; -} - -header nav .nav-tools .nav-language-menu a:hover, -header nav .nav-tools .nav-language-menu a:focus-visible { - background-color: var(--nav-bg-hover-item); - text-decoration: none; -} +/* ---------- Mobile ---------- */ -/* tablet: 600px */ -@media (width >= 600px) { +@media (width < 900px) { header nav { - padding: 0 var(--space-l); - gap: 0 var(--space-l); - } - - header { - --nav-padding: var(--space-l); + grid-template-areas: + 'announcement announcement announcement' + 'hamburger brand tools' + 'sections sections sections'; + grid-template-columns: auto 1fr auto; + row-gap: 0; } - header nav .nav-tools .nav-search-input { - width: 160px; - } -} - -/* small phones: prevent header row clipping */ -@media (width <= 430px) { - header { - --nav-padding: var(--space-s); - --nav-gap: 6px; - } - - header nav { - gap: 0 var(--nav-gap); - } - - header nav .nav-brand :is(img, svg) { - width: min(138px, 37vw); - height: 36px; - } - - header nav .nav-brand .icon.icon-logo { - width: 100px; - height: 40px; - } - - header nav .nav-tools { - gap: 4px; - min-width: 0; - } - - header nav .nav-tools .nav-search-input { - width: min(98px, 26vw); - padding: var(--space-xs) 32px var(--space-xs) var(--space-s); - font-size: var(--body-font-size-xs); - } - - header nav .nav-tools .nav-tool, - header nav .nav-tools a.button.nav-tool:any-link { - padding: var(--space-xs); - } - - header nav .nav-tools .icon img { - width: 16px; - height: 16px; - } - - header nav .nav-tools a.button.nav-auth-link:any-link { - padding: 8px 10px; - font-size: var(--body-font-size-xs); - letter-spacing: 1px; - } - } - - /* very small phones */ - @media (width <= 350px) { - header { - --nav-padding: var(--space-s); - --nav-gap: var(--space-xs); - } - - header nav .nav-brand :is(img, svg) { - width: min(120px, 40vw); - height: 38px; - } - - header nav .nav-tools .nav-search-input { - width: 82px; - padding: var(--space-xs) 34px var(--space-xs) var(--space-s); - } - } - -/* desktop: 900px */ -@media (width >= 900px) { - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop > p > .nav-submenu-toggle { - display: none; - } - - header nav { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0 var(--space-xl); - max-width: var(--nav-desktop-max-width); - margin: 0 auto; - padding: 0 var(--space-xl); - min-height: var(--nav-height); - } - - header { - --nav-padding: var(--space-xl); - } - - /* brand: left, no shrink */ - header .nav-brand { - flex: 0 0 auto; - flex-basis: 150px; - } - - /* sections: nav items flow from logo, horizontal nav with dropdowns */ - header nav .nav-sections { - flex: 1 1 auto; + header nav .nav-hamburger { display: flex; - justify-content: flex-start; + grid-area: hamburger; align-items: center; - visibility: visible; - padding: 0; - white-space: nowrap; - } - - header nav .nav-sections .default-content-wrapper { - width: 100%; + padding-left: 12px; } - header nav .nav-sections .default-content-wrapper > ul { - justify-content: flex-start; + header nav .nav-hamburger button { display: flex; - gap: var(--space-l); - margin: 0; - } - - /* tools: right, no shrink */ - header nav .nav-tools { - flex: 0 0 auto; - } - - header nav[aria-expanded='true'] { - min-height: 0; - overflow: visible; - } - - header nav .nav-hamburger { - display: none; - visibility: hidden; - } - - header nav[aria-expanded='true'] .nav-sections { - align-self: unset; - } - - header nav .nav-sections .default-content-wrapper > ul > li { - position: relative; - flex: 0 1 auto; - display: inline-flex; - align-items: center; - border-bottom: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li > p { - margin: 0; - display: inline-flex; align-items: center; - min-height: var(--nav-height); + justify-content: center; + width: 40px; + height: 40px; padding: 0; - font-size: var(--body-font-size-l); - font-weight: var(--nav-primary-weight); - letter-spacing: 0.01em; - } - - header nav .nav-sections .default-content-wrapper > ul > li > p > a { - padding: var(--space-xs) var(--space-s); - border-radius: var(--nav-radius); - line-height: 1.2; - transition: color 0.18s ease, background-color 0.18s ease; - } - - header nav .nav-sections .default-content-wrapper > ul > li > p > a:hover, - header nav .nav-sections .default-content-wrapper > ul > li > p > a:focus-visible { - color: var(--nav-hover-color); - background-color: var(--nav-bg-link-hover); - } - - header nav .nav-sections .default-content-wrapper > ul > li > p > a:focus-visible { - outline: 2px solid var(--nav-focus-color); - outline-offset: 2px; - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop) a:hover, - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop) a:focus-visible { - color: var(--nav-hover-color); - text-decoration: underline; - text-underline-offset: 0.35em; - text-decoration-thickness: 2px; - } - - header nav .nav-sections .nav-drop { - padding-right: var(--nav-item-padding); + border: 0; + background: transparent; cursor: pointer; } - header nav .nav-sections .nav-drop:focus-within > p > a, - header nav .nav-sections .nav-drop:hover > p > a { - background-color: var(--nav-bg-link-hover); - color: var(--nav-hover-color); - } - - header nav .nav-sections .nav-drop::after { + header nav .nav-hamburger-icon, + header nav .nav-hamburger-icon::before, + header nav .nav-hamburger-icon::after { content: ''; - display: inline-block; - position: absolute; - top: 50%; - right: var(--space-xs); - transform: translateY(-50%) rotate(135deg); - width: 5px; - height: 5px; - border: 2px solid currentcolor; - border-radius: 0 1px 0 0; - border-width: 2px 2px 0 0; - transition: transform 0.2s ease; - opacity: 0.7; - } - - header nav .nav-sections .nav-drop:hover::after, - header nav .nav-sections .nav-drop[aria-expanded='true']::after { - transform: translateY(-50%) rotate(-45deg); - opacity: 1; - } - - /* regular dropdown – desktop */ - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul { display: block; - position: absolute; - top: calc(100% + var(--nav-dropdown-offset)); - left: 50%; - transform: translate(-50%, -4px); - min-width: var(--nav-desktop-dropdown-min); - width: max-content; - max-width: var(--nav-desktop-dropdown-max); - padding: var(--nav-gap); - border-radius: var(--nav-radius); - border: 1px solid var(--header-drop-border); - background-color: var(--nav-bg-dropdown); - box-shadow: var(--header-drop-shadow); - white-space: initial; - visibility: hidden; - opacity: 0; - pointer-events: none; - z-index: 8; - transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega)[aria-expanded='true'] > ul { - visibility: visible; - opacity: 1; - transform: translate(-50%, var(--space-xs)); - pointer-events: auto; - transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul::before { - content: ''; - position: absolute; - top: calc(-1 * var(--nav-desktop-arrow-size)); - left: 50%; - transform: translateX(-50%); - width: 0; - height: 0; - border-left: var(--nav-desktop-arrow-size) solid transparent; - border-right: var(--nav-desktop-arrow-size) solid transparent; - border-bottom: var(--nav-desktop-arrow-size) solid var(--nav-bg-dropdown); - } - - /* invisible hover bridge above regular dropdown to prevent close on gap traversal */ - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul::after { - content: ''; - position: absolute; - bottom: 100%; - left: 0; - right: 0; - height: calc(var(--nav-dropdown-offset) + var(--space-m)); - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul > li { - padding: 0; - border: 0; - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul > li + li { - border-top: 1px solid var(--header-drop-border); - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul a { - display: block; - padding: var(--nav-dropdown-item-padding); - border-radius: var(--nav-radius); - text-decoration: none; - transition: background-color 0.18s ease, color 0.18s ease; - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul a:hover, - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul a:focus-visible { - background-color: var(--nav-bg-hover-item); - color: var(--nav-hover-color); - text-decoration: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li:not(.nav-drop-mega) > ul a:focus-visible { - outline: 2px solid var(--nav-focus-color); - outline-offset: -2px; - } - - /* mega menu – desktop: full-width panel, centered content */ - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul { - display: flex; - justify-content: center; - position: fixed; - left: 0; - right: 0; - top: var(--mega-top, var(--nav-height, 64px)); - padding: var(--space-xl) var(--space-xl); - border-bottom: var(--border-heritage); - background-color: light-dark(#faf8f5, var(--color-obsidian)); - color: var(--text-color); - box-shadow: var(--header-drop-shadow); - z-index: 999; - visibility: hidden; - opacity: 0; - pointer-events: none; - transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; - transform: translateY(-4px); - overflow: hidden; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega[aria-expanded='true'] > ul { - visibility: visible; - opacity: 1; - transform: translateY(0); - pointer-events: auto; - transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul::before { - content: ''; - position: absolute; - top: calc(-1 * var(--nav-desktop-arrow-size)); - left: var(--mega-pointer-x, 84px); - width: 0; - height: 0; - border-left: var(--nav-desktop-arrow-size) solid transparent; - border-right: var(--nav-desktop-arrow-size) solid transparent; - border-bottom: var(--nav-desktop-arrow-size) solid var(--nav-bg-mega); - } - - /* invisible hover bridge above mega dropdown to prevent close on gap traversal */ - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul::after { - content: ''; - position: absolute; - bottom: 100%; - left: 0; - right: 0; - height: var(--space-l); - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner { - display: grid; - grid-template-columns: repeat(var(--mega-columns, 2), minmax(var(--nav-desktop-mega-min-col), 1fr)); - align-items: start; - max-width: var(--nav-desktop-max-width); - width: 100%; - margin: 0 auto; - padding: 0; + width: 22px; + height: 2px; + background: #000; + position: relative; + transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li { - grid-column: var(--mega-group, 1); - grid-row: var(--mega-row, auto); - border: 0; - margin: 0; - padding: 0; - min-width: 0; - overflow-wrap: break-word; - } + header nav .nav-hamburger-icon::before { transform: translateY(-7px); } + header nav .nav-hamburger-icon::after { transform: translateY(5px); } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading { - display: block; - margin-top: 0; - padding: 0 0 var(--nav-gap); - color: var(--dark-color); - font-size: var(--nav-heading-size); - font-weight: var(--nav-heading-weight); - line-height: 1.2; - } + header nav[aria-expanded='true'] .nav-hamburger-icon { background: transparent; } + header nav[aria-expanded='true'] .nav-hamburger-icon::before { transform: rotate(45deg); } + header nav[aria-expanded='true'] .nav-hamburger-icon::after { transform: rotate(-45deg) translateY(-4px) translateX(3px); } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > p { - margin: 0 0 var(--space-s); - padding: 0; + header nav .nav-brand { + justify-self: start; + padding: 0 12px; } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > ul { - list-style: none; - padding: 0; - margin: 0; + header nav .nav-brand img { + width: 84px; + height: 46px; } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > ul > li { - padding: 0; - margin: 0; + /* Tools (search + CTA) stay in the header bar, right-aligned. */ + header nav .nav-tools { + grid-area: tools; + gap: 12px; + padding: 0 12px; } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul.nav-mega-has-groups > .nav-mega-inner > li.nav-mega-item { - padding-top: var(--space-xs); + header nav .nav-tools .nav-cta { + padding: 10px 16px; + font-size: 14px; } - /* mega items: direct links (e.g. Tools) get full padding */ - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-item > a { - display: block; - padding: var(--nav-dropdown-item-padding); - border-radius: var(--nav-radius); - color: var(--text-color); - font-size: var(--body-font-size-m); - line-height: 1.25; - font-weight: var(--nav-item-weight); - transition: background-color 0.18s ease, color 0.18s ease; - overflow-wrap: break-word; + /* Accordion drawer, hidden until open. */ + header nav .nav-sections { + grid-area: sections; + display: none; } - /* mega items under headings: align with heading, proper padding for hover */ - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > ul a { + header nav[aria-expanded='true'] .nav-sections { display: block; - padding: var(--space-s) var(--space-s); - border-radius: var(--nav-radius); - color: var(--text-color); - font-size: var(--body-font-size-m); - font-weight: var(--nav-item-weight); - text-decoration: none; - transition: background-color 0.18s ease, color 0.18s ease; - overflow-wrap: break-word; - max-width: max-content; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-promo { - grid-column: var(--mega-group, 2); - grid-row: 1 / span 20; - align-self: start; - max-width: var(--nav-mega-promo-max-width); - min-width: 0; + border-top: 1px solid #ececec; } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-promo a { - display: flex; + header nav .nav-sections > ul { flex-direction: column; - height: 100%; - min-height: 0; - max-height: var(--nav-mega-promo-max-height); - border-radius: var(--nav-radius); - background-color: var(--nav-bg-hover-item); - text-decoration: none; - overflow: hidden; - gap: var(--nav-gap); - padding: inherit; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-promo picture { - display: block; - border-radius: var(--nav-radius); - overflow: hidden; - flex: 1 1 auto; - min-height: 0; - min-width: 0; - max-height: calc(var(--nav-mega-promo-img-height) + var(--space-m)); - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-promo img { - display: block; + align-items: stretch; + gap: 0; width: 100%; - height: var(--nav-mega-promo-img-height); - max-width: 100%; - max-height: var(--nav-mega-promo-img-height); - object-fit: cover; - object-position: center; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-promo a:hover, - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-promo a:focus-visible { - background-color: var(--nav-bg-hover-item); - box-shadow: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > ul a:hover, - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > ul a:focus-visible { - color: var(--nav-hover-color); - background-color: var(--nav-bg-hover-item); - text-decoration: none; } - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-heading > ul a:focus-visible { - outline: 2px solid var(--nav-focus-color); - outline-offset: 2px; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-item > a:hover, - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-item > a:focus-visible { - background-color: var(--nav-bg-hover-item); - color: var(--nav-hover-color); - text-decoration: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-item > a:focus-visible { - outline: 2px solid var(--nav-focus-color); - outline-offset: 2px; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-drop-mega > ul > .nav-mega-inner > li.nav-mega-item + li.nav-mega-item { - border-top: 0; - } - - header nav .nav-tools .nav-search-input { - width: 190px; - } - - header nav .nav-tools a.button.nav-auth-link:any-link { - padding: 12px 18px; - } - - header nav .nav-tools .nav-search-input:hover { - border-color: light-dark(rgb(0 0 0 / 24%), rgb(255 255 255 / 30%)); + header nav .nav-sections > ul > li { + width: 100%; + border-bottom: 1px solid #ececec; } - header nav .nav-tools .nav-language-menu { - top: calc(100% + var(--nav-dropdown-offset)); + header nav .nav-sections > ul > li > a, + header nav .nav-sections > ul > li > .nav-drop-toggle { + width: 100%; + justify-content: space-between; + padding: 16px 20px; + font-size: 18px; } -} -@media (width <= 899px) { - header nav .nav-tools .nav-auth-desktop { + header nav .nav-sections .nav-drop > ul { + position: static; display: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item { - border-bottom: 0; - padding: var(--space-m) 0; - text-align: center; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p { - margin: 0; - padding: 0; - justify-content: center; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a.button.nav-auth-mobile:any-link { - display: inline-flex; - align-items: center; - justify-content: center; - border: 1.5px solid var(--color-rust); - border-radius: 4px; - background: transparent; - color: var(--color-rust); - padding: 12px 24px; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 1.5px; - line-height: 1; - min-width: 120px; - text-decoration: none; - } - - header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a.button.nav-auth-mobile:any-link:hover, - header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a.button.nav-auth-mobile:any-link:focus-visible { - background: var(--color-rust); - color: var(--color-light); - transform: none; + width: 100%; + min-width: 0; + border: 0; + border-radius: 0; box-shadow: none; - text-decoration: none; + padding: 0 0 8px 20px; } -} -@media (width >= 900px) { - header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item { - display: none; - } -} - -/* large screens: 1200px */ -@media (width >= 1200px) { - header nav { - max-width: 1264px; + header nav .nav-sections .nav-drop[aria-expanded='true'] > ul { + display: block; } } diff --git a/blocks/header/header.js b/blocks/header/header.js index bd51f82..2894f3f 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,534 +1,168 @@ /* - * Header block – simple, maintainable nav - * Nav fragment: plain.html via loadFragment (brand, sections, tools) - * Sections: ul > li; add #mega to link for full-width dropdown + * Header block — content-driven navigation. + * Nav fragment (content/nav.plain.html) provides four sections in order: + * 1. Announcement carousel —