/* * Amaan Area Pages — V4 Design System * * Loaded only on pages using template-area-page.php, AFTER * amaan-area-pages.css (v3). Everything here is additive/override — * v3 is left in place for the sections that already work well * (hero shell, proof panel base, services rows, FAQ base, final CTA). * * V4 replaces or extends: motion system, hero service-scope panel, * editorial planning layout, property-type section, protection * section, cluster hub (4 featured + 5 chips), services mobile CTA, * estimate two-column panel, FAQ spacing/open-state, final CTA mobile. * * Brand palette ONLY: * #0E1F4D #1B2F6E #244A86 #F07D00 #F6F2EB #EBF0F8 #5D6978 #FFFFFF #25D366 * * Table of contents: * 0. Token additions (fixes a missing --t-slow token from v3) * 1. Motion system (progressive enhancement) * 2. Hero — service scope panel + shorter subtitle spacing * 3. Planning — editorial layout (light section) * 4. Property type section * 5. Protection section * 6. Cluster hub — 4 featured + 5 chips * 7. Services — mobile CTA restored (compact) * 8. Estimate — two-column conversion panel * 9. FAQ — spacing + open-state motion * 10. Final CTA — mobile polish * 11. Responsive * 12. Reduced motion (component-specific) */ /* ============================================================ 0a. TAG-NEUTRAL BADGE RESET V4 content uses

instead of for standalone icon/number/ meta badges (article/li/div block tag → bare inline span → newline → next block tag is exactly the pattern that makes wpautop() strip an opening

but leave a stray closing

— see template-area-page.php for the full explanation).

avoids that bug entirely, but needs its default UA margin reset since these rules were designed for margin-less . ============================================================ */ .amaan-area-planning__row-icon, .amaan-area-protection__card-label, .amaan-area-cluster__feature-meta { margin: 0; } .amaan-area-property__card-index { margin: 0 0 var(--sp-2); } /* proof__number keeps v3's margin-bottom (spacing before the h3) — only reset the top margin

brings by default */ .amaan-area-proof__number { margin-top: 0; } /* module__index keeps v3's margin-inline:auto (centres the circle in its 72px grid column) — only reset the block (top/bottom) margin */ .amaan-area-module__index { margin-block: 0; } /* ============================================================ 0. TOKEN ADDITIONS ============================================================ */ .amaan-area { /* v3 references var(--t-slow) in several places (journey, cluster card underline) but never defines it — the transition silently no-ops. Defining it here (cascades into .amaan-area scope) fixes that for any v3 rule still in use, and V4 rules use it too. */ --t-slow : 420ms; --royal : #244A86; --slate : #5D6978; --motion-dur : 0.6s; --motion-dur-fast: 0.46s; } /* ============================================================ 1. MOTION SYSTEM — progressive enhancement ============================================================ Default (no class on , or JS blocked/failed): .amaan-motion elements have NO opacity/transform override — they render at their natural, fully-visible state. Only once amaan-area-motion.js has found elements, ruled out reduced-motion, and built its observer does it add `amaan-motion-ready` to and start observing — so a hidden starting state is never reached without a watcher already in place to reveal it (see JS file for the full ordering). transform + opacity only. No width/height/top/right/left/box-shadow/ filter animation. Respects prefers-reduced-motion (component below). ============================================================ */ html.amaan-motion-ready .amaan-motion { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-dur) var(--ease) var(--motion-delay, 0s), transform var(--motion-dur) var(--ease) var(--motion-delay, 0s); will-change: opacity, transform; } /* Subtle scale variant — used on images */ html.amaan-motion-ready .amaan-motion[data-motion="scale"] { transform: translateY(12px) scale(0.96); } /* Smaller travel distance for compact elements (chips, proof cards) */ html.amaan-motion-ready .amaan-motion[data-motion="soft"] { transform: translateY(10px); transition-duration: var(--motion-dur-fast); } html.amaan-motion-ready .amaan-motion.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.amaan-motion-ready .amaan-motion { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; } } /* ============================================================ 2. HERO — SERVICE SCOPE PANEL Compact strip of 4 items summarising what's included, sitting under the CTAs as light reinforcement (not competing with them). ============================================================ */ .amaan-area-hero__scope { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.12); position: relative; z-index: 1; width: 100%; } .amaan-area-hero__scope-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.82); line-height: 1; white-space: nowrap; } .amaan-area-hero__scope-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--orange); flex-shrink: 0; } /* Slightly tighten the hero subtitle now that it's shorter, and give the scope panel room without inflating the hero's overall height */ .amaan-area-hero__subtitle { margin-bottom: var(--sp-3); } /* ============================================================ 3. PLANNING — EDITORIAL LAYOUT (light section) Overrides the v3 "glass cards on navy" treatment with a calmer, editorial split: explanation + CTA on one side, a stacked checklist (not a repeated card grid) on the other. Higher-specificity selectors (2–3 classes) are used throughout so these rules win regardless of stylesheet load order. ============================================================ */ .amaan-area-planning.amaan-area-planning--editorial { background-color: var(--ivory); padding-block: var(--sp-7); } .amaan-area-planning--editorial::before, .amaan-area-planning--editorial::after { display: none; } .amaan-area-planning--editorial .amaan-area-planning__layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: var(--sp-6); align-items: start; margin-top: 0; } .amaan-area-planning--editorial .amaan-area-planning__intro { position: sticky; top: var(--sp-4); } .amaan-area-planning--editorial .amaan-area-planning__intro .amaan-area-eyebrow { color: var(--orange); } .amaan-area-planning--editorial .amaan-area-planning__intro .amaan-area-heading { color: var(--navy-deep); } .amaan-area-planning--editorial .amaan-area-planning__intro .amaan-area-lead { color: var(--slate); margin-bottom: var(--sp-4); } .amaan-area-planning__intro-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--white); background-color: var(--navy-deep); padding: 0.85rem 1.6rem; border-radius: var(--r-sm); transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .amaan-area-planning__intro-cta:hover { background-color: var(--royal); transform: translateY(-2px); } .amaan-area-planning__intro-cta:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; } .amaan-area-planning__intro-cta::after { content: '←'; font-size: 0.9em; } /* ── Stacked checklist (right column) ── */ .amaan-area-planning--editorial .amaan-area-planning__checklist { display: flex; flex-direction: column; gap: 0; position: relative; } /* Connecting vertical line through the row dots */ .amaan-area-planning--editorial .amaan-area-planning__checklist::before { content: ''; position: absolute; inset-inline-start: 27px; top: 28px; bottom: 28px; width: 1px; background: linear-gradient(to bottom, rgba(14,31,77,0.14), rgba(14,31,77,0.05)); } .amaan-area-planning__row { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-3); padding-block: var(--sp-3); position: relative; } .amaan-area-planning__row-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background-color: var(--white); border: 1px solid rgba(14,31,77,0.12); box-shadow: var(--sh-sm); color: var(--orange); font-size: 1.35rem; flex-shrink: 0; } .amaan-area-planning__row-body h3 { font-size: 1rem; font-weight: 700; color: var(--navy-deep); margin: 0.5rem 0 0.35rem; line-height: 1.35; } .amaan-area-planning__row-body p { font-size: 0.9rem; line-height: 1.75; color: var(--slate); margin: 0; max-width: 56ch; } /* ============================================================ 4. PROPERTY TYPE SECTION Split layout: image + intro on one side, 4-card grid on the other. ============================================================ */ .amaan-area-property { background-color: var(--white); padding-block: var(--sp-7); } .amaan-area-property__layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--sp-5); align-items: center; } .amaan-area-property__media { position: relative; } .amaan-area-property__media .amaan-area-photo { aspect-ratio: 4 / 5; } .amaan-area-property__content .amaan-area-heading { color: var(--navy-deep); } .amaan-area-property__content .amaan-area-lead { color: var(--slate); margin-bottom: var(--sp-4); } .amaan-area-property__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .amaan-area-property__card { background-color: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-md); padding: var(--sp-3); position: relative; overflow: hidden; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .amaan-area-property__card:hover { border-color: rgba(240,125,0,0.35); box-shadow: var(--sh-md); transform: translateY(-3px); } .amaan-area-property__card-index { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background-color: var(--blue-gray); color: var(--royal); font-size: 1.1rem; margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; } /* Each card gets a slightly different accent so 4 cards don't read as identical clones */ .amaan-area-property__card:nth-child(1) .amaan-area-property__card-index { color: var(--orange); background-color: rgba(240,125,0,0.12); } .amaan-area-property__card:nth-child(2) .amaan-area-property__card-index { color: var(--royal); background-color: rgba(36,74,134,0.12); } .amaan-area-property__card:nth-child(3) .amaan-area-property__card-index { color: var(--orange); background-color: rgba(240,125,0,0.12); } .amaan-area-property__card:nth-child(4) .amaan-area-property__card-index { color: var(--royal); background-color: rgba(36,74,134,0.12); } .amaan-area-property__card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--navy-deep); margin: 0 0 0.4rem; line-height: 1.35; } .amaan-area-property__card p { font-size: 0.84rem; line-height: 1.7; color: var(--slate); margin: 0; } /* ============================================================ 5. PROTECTION SECTION Blue-gray section. 3 large numbered cards + a supporting image. ============================================================ */ .amaan-area-protection { background-color: var(--blue-gray); padding-block: var(--sp-7); } .amaan-area-protection__header { max-width: 62ch; margin-bottom: var(--sp-5); } .amaan-area-protection__header .amaan-area-heading { color: var(--navy-deep); } .amaan-area-protection__header .amaan-area-lead { color: var(--slate); margin-bottom: 0; } .amaan-area-protection__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-5); align-items: stretch; } .amaan-area-protection__cards { display: flex; flex-direction: column; gap: var(--sp-3); } .amaan-area-protection__card { background-color: var(--white); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: flex-start; border: 1px solid rgba(14,31,77,0.06); box-shadow: var(--sh-sm); } .amaan-area-protection__card-label { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background-color: var(--navy-deep); color: var(--white); font-size: 0.95rem; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; } .amaan-area-protection__card h3 { font-size: 1rem; font-weight: 700; color: var(--navy-deep); margin: 0.4rem 0 0.4rem; line-height: 1.35; } .amaan-area-protection__card p { font-size: 0.875rem; line-height: 1.75; color: var(--slate); margin: 0; } .amaan-area-protection__media { border-radius: var(--r-xl); overflow: hidden; } .amaan-area-protection__media .amaan-area-photo { aspect-ratio: 3 / 4; height: 100%; } /* ============================================================ 6. CLUSTER HUB — 4 featured + 5 chips Replaces the old uniform 9-card grid with a scannable hierarchy: 4 larger feature cards for live child pages, then a wrapped row of compact chips for WhatsApp-inquiry areas. ============================================================ */ .amaan-area-cluster__featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); position: relative; z-index: 1; } .amaan-area-cluster__feature-card { background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: 0.5rem; transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .amaan-area-cluster__feature-card:hover { background-color: rgba(255,255,255,0.11); border-color: rgba(240,125,0,0.40); transform: translateY(-3px); } .amaan-area-cluster__feature-meta { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); } .amaan-area-cluster__feature-meta::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--orange); flex-shrink: 0; } .amaan-area-cluster__feature-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin: 0; line-height: 1.3; } .amaan-area-cluster__feature-card p { font-size: 0.8125rem; line-height: 1.7; color: rgba(255,255,255,0.60); margin: 0; flex: 1; } .amaan-area-cluster__feature-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; color: var(--orange); margin-top: 0.25rem; align-self: flex-start; padding-block: 0.25rem; border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .amaan-area-cluster__feature-link::after { content: '←'; font-size: 0.85em; transition: transform var(--t-fast) var(--ease); } .amaan-area-cluster__feature-link:hover { border-color: var(--orange); } .amaan-area-cluster__feature-link:hover::after { transform: translateX(-3px); } .amaan-area-cluster__feature-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } /* Hide
the classic editor injects inside link text */ .amaan-area-cluster__feature-link br { display: none; } /* ── Chip row (secondary / WhatsApp-inquiry areas) ── */ .amaan-area-cluster__chips-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin: var(--sp-5) 0 var(--sp-2); position: relative; z-index: 1; } .amaan-area-cluster__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; position: relative; z-index: 1; } .amaan-area-cluster__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; background-color: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.80); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .amaan-area-cluster__chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background-color: var(--whatsapp); flex-shrink: 0; } .amaan-area-cluster__chip:hover, .amaan-area-cluster__chip:focus-visible { background-color: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); color: var(--white); } .amaan-area-cluster__chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .amaan-area-cluster__chip br { display: none; } /* ============================================================ 7. SERVICES — mobile CTA restored (compact icon button) v3 hides .amaan-area-module__cta entirely at ≤1024px, removing a functional, trackable link from mobile. Replace with a compact circular arrow button instead of hiding it. ============================================================ */ @media (max-width: 1024px) { .amaan-area-module { grid-template-columns: 56px 1fr auto; } .amaan-area-module__cta { display: inline-flex; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; font-size: 0; flex-shrink: 0; } .amaan-area-module__cta::after { content: '←'; font-size: 1rem; } } /* ============================================================ 8. ESTIMATE — two-column conversion panel ============================================================ */ .amaan-area-estimate__panel.amaan-area-estimate__panel--v4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-5); align-items: start; } .amaan-area-estimate__panel--v4 .amaan-area-estimate__intro .amaan-area-eyebrow { color: var(--orange); } .amaan-area-estimate__panel--v4 .amaan-area-estimate__intro .amaan-area-heading { font-size: clamp(1.15rem, 2.2vw, 1.6rem); color: var(--navy-deep); } .amaan-area-estimate__panel--v4 .amaan-area-estimate__intro .amaan-area-lead { margin-bottom: 0; color: var(--slate); } .amaan-area-estimate__panel--v4 .amaan-area-estimate__fill { display: flex; flex-direction: column; gap: var(--sp-3); } .amaan-area-estimate__fill-title { font-size: 0.95rem; font-weight: 700; color: var(--navy-deep); margin: 0; } .amaan-area-estimate__panel--v4 .amaan-area-estimate__checklist { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; background-color: var(--white); border-radius: var(--r-md); padding: var(--sp-3); border: 1px solid var(--border-light); } .amaan-area-estimate__panel--v4 .amaan-area-estimate__checklist li { font-size: 0.875rem; } .amaan-area-estimate__panel--v4 .amaan-area-estimate__cta { background-color: var(--navy-deep); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); align-items: stretch; } .amaan-area-estimate__panel--v4 .amaan-area-estimate__cta h3 { color: var(--white); font-size: 0.95rem; margin: 0 0 0.35rem; } .amaan-area-estimate__panel--v4 .amaan-area-estimate__cta p { color: rgba(255,255,255,0.68); } .amaan-area-estimate__panel--v4 .amaan-area-estimate__cta .amaan-btn { width: 100%; margin-top: 0.25rem; } /* ============================================================ 9. FAQ — spacing + open-state motion ============================================================ */ .amaan-area-faq__list { border-radius: var(--r-lg); } details.amaan-area-faq__item .amaan-area-faq__question { padding-block: var(--sp-3); } /* Fade + slight slide when opened — safe because it starts AFTER the browser has already set display:block on the native

content, so it never fights the open/close mechanism or hides content from assistive tech. */ @keyframes amaan-faq-answer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } details.amaan-area-faq__item[open] > .amaan-area-faq__answer { animation: amaan-faq-answer-in 0.28s var(--ease); } @media (prefers-reduced-motion: reduce) { details.amaan-area-faq__item[open] > .amaan-area-faq__answer { animation: none; } } /* ============================================================ 10. FINAL CTA — mobile polish ============================================================ */ @media (max-width: 640px) { .amaan-area-final__actions { gap: var(--sp-1); } .amaan-area-final__actions::after { margin-block: 2px; } } /* ============================================================ 11. RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .amaan-area-planning--editorial .amaan-area-planning__layout { grid-template-columns: 1fr; gap: var(--sp-4); } .amaan-area-planning--editorial .amaan-area-planning__intro { position: static; } .amaan-area-property__layout, .amaan-area-protection__layout { grid-template-columns: 1fr; } .amaan-area-protection__media { order: -1; } .amaan-area-protection__media .amaan-area-photo { aspect-ratio: 16 / 9; } .amaan-area-cluster__featured { grid-template-columns: repeat(2, 1fr); } .amaan-area-estimate__panel.amaan-area-estimate__panel--v4 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .amaan-area-property__grid { grid-template-columns: 1fr; } .amaan-area-hero__scope { gap: 0.4rem; } .amaan-area-hero__scope-item { font-size: 0.74rem; padding: 0.35rem 0.7rem; } .amaan-area-planning__row { grid-template-columns: 48px 1fr; gap: var(--sp-2); } .amaan-area-planning--editorial .amaan-area-planning__checklist::before { inset-inline-start: 23px; } .amaan-area-planning__row-icon { width: 48px; height: 48px; font-size: 1.15rem; } .amaan-area-protection__card { grid-template-columns: auto 1fr; padding: var(--sp-3); } .amaan-area-cluster__featured { grid-template-columns: 1fr; } .amaan-area-estimate__panel--v4 .amaan-area-estimate__checklist { grid-template-columns: 1fr; } } /* ============================================================ 12. REDUCED MOTION — component-specific (beyond section 1) ============================================================ */ @media (prefers-reduced-motion: reduce) { .amaan-area-planning__intro-cta, .amaan-area-property__card, .amaan-area-cluster__feature-card, .amaan-area-cluster__feature-link::after, .amaan-area-module__cta::after { transition: none; } .amaan-area-planning__intro-cta:hover, .amaan-area-property__card:hover, .amaan-area-cluster__feature-card:hover { transform: none; } } /* ============================================================ 13. STICKY MOBILE CTA — hero-aware visibility (area pages only) .amaan-sticky-cta (template-parts/components/sticky-mobile-cta.php) is fixed to the viewport bottom on mobile, site-wide, and can overlap the hero's own CTA row on short viewports (e.g. 390×844). Two layers, in order of precedence: 1. CSS-only safety net (always on, no JS required): the hero actions row gets bottom margin covering the sticky bar's height + a gap, at the same ≤767.98px breakpoint the bar itself uses (amaan-homepage.css §4) — so the two can never overlap even if JS never runs. 2. JS enhancement (amaan-area-sticky-cta.js): while the hero's CTA row is on screen, adds `.amaan-sticky-cta--hidden` to fade the bar out. Opacity/pointer-events/visibility only — the bar stays `position: fixed`, so this never shifts layout. If the script never runs, the class is simply never added and the bar stays visible — safety net #1 above still guarantees no overlap. `visibility: hidden` (not `display: none`) removes the bar's links from the Tab order while hidden, without any layout/state jump. It's delayed until the opacity fade-out finishes (so the fade is never cut short); becoming visible again switches `visibility` back instantly, so the fade-in is visible from the first frame. ============================================================ */ @media (max-width: 767.98px) { body.page-template-template-area-page-php .amaan-area-hero__actions { margin-bottom: 72px; /* 56px bar height + 16px gap */ } body.page-template-template-area-page-php .amaan-sticky-cta { transition: opacity 0.2s ease, visibility 0s linear 0s; } body.page-template-template-area-page-php .amaan-sticky-cta--hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } } @media (prefers-reduced-motion: reduce) { body.page-template-template-area-page-php .amaan-sticky-cta { transition: none; } } /* ============================================================ 14. BREADCRUMBS — hub/spoke pages (template-parts/seo/breadcrumbs.php) Same component/markup as the areas directory's own copy in amaan-areas-directory.css — duplicated rather than shared because the two templates never load the same stylesheet, and both already carry the --royal/--slate/--navy-deep tokens this reuses (§0). ============================================================ */ .amaan-breadcrumbs { max-width: 1180px; margin-inline: auto; padding: 0.9rem var(--sp-3) 0.75rem; } .amaan-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; } .amaan-breadcrumbs__item { display: flex; align-items: center; color: var(--slate); } .amaan-breadcrumbs__item:not(:last-child)::after { content: '\203A'; margin-inline-start: 0.35rem; color: var(--slate); } .amaan-breadcrumbs__item a { color: var(--royal); text-decoration: none; } .amaan-breadcrumbs__item a:hover, .amaan-breadcrumbs__item a:focus-visible { text-decoration: underline; } .amaan-breadcrumbs__item[aria-current="page"] span { color: var(--navy-deep); font-weight: 600; }