/* ========================================================================== سلامتك — Public Journey Design System -------------------------------------------------------------------------- Purpose : shared, reusable foundation for the public website rebuild (homepage, courses, categories, consultations). Scope : every rule here is namespaced under a `.ds-` class. Nothing in this file targets bare HTML elements (h1, a, button, ...), so it cannot change the appearance of any existing page until a template opts in by using a `.ds-*` class or an `` component. This is intentional — it keeps this foundation purely additive and safe to load site-wide. RTL : written with CSS logical properties (margin-inline-*, padding-inline, inset-inline-*, text-align: start) so components work correctly in both the site's default Arabic/RTL mode and English/LTR mode without a separate stylesheet. Colors : brand colors are NOT redefined here. They are read from the existing runtime CSS custom properties already set on from SiteSettings (--v-primary-base, --v-secondary-base, ...), with the same fallbacks the rest of the app already uses. This file only adds a documented, limited palette on top of them. Docs : see docs/design-system.md for tokens + component usage. ========================================================================== */ :root { /* ---- 0. Color tokens (bridge to existing runtime brand vars) ---- */ --ds-color-primary: var(--v-primary-base, #83a323); --ds-color-primary-dark: var(--v-primarydark-base, #ffa000); --ds-color-primary-light: var(--v-primarylight-base, #daddf9); --ds-color-secondary: var(--v-secondary-base, #ffaa00); --ds-color-on-primary: #ffffff; /* WhatsApp keeps its own brand color — it must stay recognizable and is used nowhere else, so it does not count against the "limited palette" rule below. */ --ds-color-whatsapp: #25d366; --ds-color-whatsapp-dark: #1da851; --ds-color-ink: #1f2430; /* body text */ --ds-color-ink-soft: #5b6472; /* secondary / muted text */ --ds-color-surface: #ffffff; --ds-color-surface-muted: #f6f8f7; --ds-color-border: #e4e7e6; --ds-color-success: #2e7d55; --ds-color-success-bg: #eaf6ee; --ds-color-warning-bg: #fdf3e2; --ds-color-warning: #9a6b00; /* ---- 1. Typography ---- */ /* Re-uses the font already loaded site-wide (Changa, see layout/head.blade.php) instead of introducing a new webfont/visual identity. */ --ds-font-body: 'Changa', 'Tahoma', system-ui, -apple-system, sans-serif; /* Arabic-readable line-heights + measure (max text width) */ --ds-line-height-body: 1.9; --ds-line-height-heading: 1.35; --ds-measure: 42rem; /* ~ comfortable paragraph width for Arabic script */ --ds-measure-narrow: 30rem; --ds-fs-eyebrow: 0.8125rem; --ds-fs-body: 1rem; --ds-fs-small: 0.875rem; --ds-fs-h1: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem); --ds-fs-h2: clamp(1.5rem, 1.05rem + 1.8vw, 2.25rem); --ds-fs-h3: clamp(1.2rem, 1rem + 1vw, 1.6rem); --ds-fs-h4: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem); /* ---- 2. Spacing scale ---- */ --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.5rem; --ds-space-6: 2rem; --ds-space-7: 3rem; --ds-space-8: 4.5rem; /* Consistent section rhythm, used by */ --ds-section-padding-y: clamp(2.5rem, 2rem + 2vw, 4.5rem); /* ---- 3. Container widths ---- */ --ds-container-sm: 40rem; /* 640px — narrow copy / FAQ */ --ds-container-md: 54rem; /* 864px — standard content */ --ds-container-lg: 70rem; /* 1120px — default section width */ --ds-container-xl: 82.5rem; /* 1320px — wide grids */ --ds-container-padding: clamp(1rem, 3vw, 2rem); /* ---- Radius & elevation (kept deliberately restrained) ---- */ --ds-radius-sm: 8px; --ds-radius-md: 14px; --ds-radius-lg: 20px; --ds-radius-pill: 999px; --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ds-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08); /* ---- Motion ---- */ --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); --ds-duration-fast: 150ms; --ds-duration-base: 240ms; --ds-duration-slow: 420ms; --ds-translate-y-in: 14px; } /* Respect prefers-reduced-motion globally for anything using the tokens above — components don't need their own media queries as long as they consume these variables/classes. */ @media (prefers-reduced-motion: reduce) { :root { --ds-duration-fast: 0ms; --ds-duration-base: 0ms; --ds-duration-slow: 0ms; --ds-translate-y-in: 0px; } } /* Visually-hidden utility (for accessible labels, e.g. loading state). */ .ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 1. Container widths ========================================================================== */ .ds-container { box-sizing: border-box; width: 100%; margin-inline: auto; padding-inline: var(--ds-container-padding); } .ds-container--sm { max-width: var(--ds-container-sm); } .ds-container--md { max-width: var(--ds-container-md); } .ds-container--lg { max-width: var(--ds-container-lg); } .ds-container--xl { max-width: var(--ds-container-xl); } /* ========================================================================== 2. Consistent section spacing ========================================================================== */ .ds-section { box-sizing: border-box; padding-block: var(--ds-section-padding-y); } .ds-section--tight { padding-block: calc(var(--ds-section-padding-y) * 0.6); } .ds-section--loose { padding-block: calc(var(--ds-section-padding-y) * 1.3); } .ds-section--muted { background: var(--ds-color-surface-muted); } /* Stack utility for consistent vertical rhythm inside a section/card. */ .ds-stack > * + * { margin-block-start: var(--ds-space-5); } .ds-stack--tight > * + * { margin-block-start: var(--ds-space-3); } /* ========================================================================== 3. Heading hierarchy (classes only — never applied to bare h1..h4 selectors, so existing pages are unaffected until a template opts in) ========================================================================== */ .ds-eyebrow { display: inline-block; font-family: var(--ds-font-body); font-size: var(--ds-fs-eyebrow); font-weight: 700; letter-spacing: 0.02em; color: var(--ds-color-primary); margin-block-end: var(--ds-space-2); } .ds-h1, .ds-h2, .ds-h3, .ds-h4 { font-family: var(--ds-font-body); color: var(--ds-color-ink); line-height: var(--ds-line-height-heading); font-weight: 700; margin: 0; } .ds-h1 { font-size: var(--ds-fs-h1); } .ds-h2 { font-size: var(--ds-fs-h2); } .ds-h3 { font-size: var(--ds-fs-h3); } .ds-h4 { font-size: var(--ds-fs-h4); } /* ========================================================================== 4. Arabic-readable body copy: line-height + max text width ========================================================================== */ .ds-prose { font-family: var(--ds-font-body); font-size: var(--ds-fs-body); line-height: var(--ds-line-height-body); color: var(--ds-color-ink-soft); max-width: var(--ds-measure); margin: 0; } .ds-prose--narrow { max-width: var(--ds-measure-narrow); } .ds-prose--center { margin-inline: auto; text-align: center; } /* ========================================================================== Grid utility — used to lay out repeated cards (need-selector, ways-to- help, trust, specialists, featured courses, catalog). Mobile-first: single column by default, growing at each breakpoint. ========================================================================== */ .ds-grid { display: grid; gap: var(--ds-space-5); grid-template-columns: 1fr; } @media (min-width: 560px) { .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .ds-grid--3 { grid-template-columns: repeat(3, 1fr); } .ds-grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .ds-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== Section heading component ========================================================================== */ .ds-section-heading { max-width: var(--ds-container-md); margin-block-end: var(--ds-space-6); } .ds-section-heading--center { margin-inline: auto; text-align: center; } .ds-section-heading--center .ds-prose { margin-inline: auto; } .ds-section-heading__subtitle { margin-block-start: var(--ds-space-3); } .ds-section-heading__cta { margin-block-start: var(--ds-space-4); } /* ========================================================================== 5. Buttons — primary, secondary, text, whatsapp One primary action per section is a content discipline, not something CSS can enforce — see docs/design-system.md. ========================================================================== */ .ds-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; gap: var(--ds-space-2); font-family: var(--ds-font-body); font-size: var(--ds-fs-body); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-6); padding-block: var(--ds-space-3); min-height: 48px; /* comfortable touch target */ border: 2px solid transparent; transition: background-color var(--ds-duration-fast) var(--ds-ease), border-color var(--ds-duration-fast) var(--ds-ease), color var(--ds-duration-fast) var(--ds-ease), transform var(--ds-duration-fast) var(--ds-ease); } .ds-btn:active { transform: scale(0.97); } .ds-btn:focus-visible { outline: 3px solid var(--ds-color-primary); outline-offset: 2px; } .ds-btn--block { display: flex; width: 100%; } /* Compound `.ds-btn.ds-btn--variant` selectors + `!important` below are both deliberate and required: the legacy bundle stylesheet has `.site-theme a { color: var(--v-primary-base) !important; }` (specificity 0,1,1). A single-class selector like `.ds-btn--primary` (0,1,0), even with `!important`, still LOSES that fight — among tied `!important` declarations, the browser breaks the tie by specificity, not source order. The compound selector below is (0,2,0), which wins outright. Without this, primary buttons silently render invisible blue-on-blue text — found via visual QA (screenshot review), not something a diff or automated test would catch. */ .ds-btn.ds-btn--primary { background: var(--ds-color-primary); border-color: var(--ds-color-primary); color: var(--ds-color-on-primary) !important; } .ds-btn.ds-btn--primary:hover, .ds-btn.ds-btn--primary:focus-visible { background: var(--ds-color-primary-dark); border-color: var(--ds-color-primary-dark); color: var(--ds-color-on-primary) !important; } .ds-btn.ds-btn--secondary { background: transparent; border-color: var(--ds-color-primary); color: var(--ds-color-primary) !important; } .ds-btn.ds-btn--secondary:hover, .ds-btn.ds-btn--secondary:focus-visible { background: var(--ds-color-primary); color: var(--ds-color-on-primary) !important; } .ds-btn.ds-btn--text { background: transparent; border-color: transparent; color: var(--ds-color-primary) !important; padding-inline: var(--ds-space-2); min-height: auto; } .ds-btn.ds-btn--text:hover, .ds-btn.ds-btn--text:focus-visible { color: var(--ds-color-primary-dark) !important; text-decoration: underline; } .ds-btn.ds-btn--whatsapp { background: var(--ds-color-whatsapp); border-color: var(--ds-color-whatsapp); color: #ffffff !important; } .ds-btn.ds-btn--whatsapp:hover, .ds-btn.ds-btn--whatsapp:focus-visible { background: var(--ds-color-whatsapp-dark); border-color: var(--ds-color-whatsapp-dark); color: #ffffff !important; } /* Floating variant preserves the existing corner-bubble placement people already recognise, without the old inline-style/!important soup. */ .ds-btn--whatsapp-float { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; width: 60px; height: 60px; padding: 0; min-height: 0; border-radius: 999px; box-shadow: var(--ds-shadow-md); z-index: 1000; } @media (prefers-reduced-motion: no-preference) { .ds-btn--whatsapp-float:hover, .ds-btn--whatsapp-float:focus-visible { transform: scale(1.08); } } .ds-btn__icon { flex: none; } /* Only directional icons (e.g. an arrow that means "forward") should flip for RTL — chevrons/checkmarks etc. must not, so this is opt-in. */ [dir="rtl"] .ds-icon--directional { transform: scaleX(-1); } /* ========================================================================== Cards — shared base + service / course / trust / specialist variants ========================================================================== */ .ds-card { box-sizing: border-box; display: flex; flex-direction: column; background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); text-decoration: none; color: inherit; box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-duration-base) var(--ds-ease), transform var(--ds-duration-base) var(--ds-ease), border-color var(--ds-duration-base) var(--ds-ease); } a.ds-card:hover, a.ds-card:focus-visible { box-shadow: var(--ds-shadow-md); border-color: var(--ds-color-primary-light); transform: translateY(-2px); } .ds-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--ds-radius-md); background: var(--ds-color-primary-light); color: var(--ds-color-primary); margin-block-end: var(--ds-space-4); } .ds-card__title { margin-block-end: var(--ds-space-2); } .ds-card__desc { max-width: none; } .ds-card__cta { display: inline-flex; align-items: center; gap: var(--ds-space-1); margin-block-start: var(--ds-space-4); color: var(--ds-color-primary); font-weight: 700; } /* 6. Service card */ .ds-card--service { text-align: start; } /* 7. Course card */ .ds-card--course { padding: 0; overflow: hidden; } .ds-card--course .ds-card__media { display: block; } .ds-card--course .ds-card__body { padding: var(--ds-space-5); } .ds-card--course .ds-card__eyebrow { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-small); font-weight: 700; color: var(--ds-color-primary); } .ds-card--course .ds-card__desc--clamp2 { max-width: none; margin-block: var(--ds-space-2) 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .ds-card--course .ds-card__audience { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-small); color: var(--ds-color-ink-soft); } .ds-card--course .ds-card__meta { display: flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); margin-block-end: var(--ds-space-3); } .ds-card--course .ds-card__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .ds-card--course .ds-card__footer { display: flex; align-items: center; justify-content: space-between; margin-block-start: var(--ds-space-4); padding-block-start: var(--ds-space-3); border-block-start: 1px solid var(--ds-color-border); } .ds-card--course .ds-card__duration { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); } .ds-price { font-weight: 700; color: var(--ds-color-ink); } .ds-price--free { color: var(--ds-color-success); } /* 8. Trust-feature card */ .ds-card--trust { text-align: center; align-items: center; border-color: transparent; background: var(--ds-color-surface-muted); box-shadow: none; } .ds-card--trust .ds-card__icon--trust { background: var(--ds-color-surface); box-shadow: var(--ds-shadow-sm); } /* 9. Specialist card */ .ds-card--specialist { text-align: center; align-items: center; } .ds-card--specialist .ds-card__avatar-wrap { width: 96px; border-radius: 50%; overflow: hidden; margin-block-end: var(--ds-space-4); } .ds-card--specialist .ds-card__role { color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); margin: 0 0 var(--ds-space-3); } .ds-rating { display: inline-flex; gap: 2px; color: var(--ds-color-border); margin-block-end: var(--ds-space-3); } .ds-rating__star--filled { color: var(--ds-color-secondary); } /* Consultation/service card (public consultations page) */ .ds-card--consultation { gap: 0; } .ds-card--consultation .ds-card__desc { max-width: none; margin-block-start: var(--ds-space-2); } .ds-consultation__block { margin-block-start: var(--ds-space-4); } .ds-consultation__block-title { margin: 0 0 var(--ds-space-2); font-weight: 700; font-size: var(--ds-fs-small); color: var(--ds-color-ink); } .ds-consultation__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-2); } .ds-consultation__list li { display: flex; align-items: flex-start; gap: var(--ds-space-2); color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); line-height: var(--ds-line-height-body); } .ds-consultation__list li .ds-icon { flex: none; margin-block-start: 3px; color: var(--ds-color-primary); } .ds-consultation__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); margin-block-start: var(--ds-space-5); padding-block-start: var(--ds-space-4); border-block-start: 1px solid var(--ds-color-border); } .ds-consultation__meta-item { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-size: var(--ds-fs-small); color: var(--ds-color-ink-soft); } .ds-consultation__specialist { display: flex; align-items: center; gap: var(--ds-space-1); margin: var(--ds-space-3) 0 0; font-size: var(--ds-fs-small); color: var(--ds-color-ink-soft); } .ds-consultation__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); margin-block-start: var(--ds-space-5); flex-wrap: wrap; } /* ========================================================================== 11. FAQ accordion — built on native
/ so it is fully keyboard/screen-reader accessible even before design-system.js loads. ========================================================================== */ .ds-faq { display: flex; flex-direction: column; gap: var(--ds-space-3); max-width: var(--ds-container-md); } .ds-faq__item { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); background: var(--ds-color-surface); padding: 0; } .ds-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); padding: var(--ds-space-4) var(--ds-space-5); font-family: var(--ds-font-body); font-weight: 700; color: var(--ds-color-ink); cursor: pointer; list-style: none; } .ds-faq__question::-webkit-details-marker { display: none; } .ds-faq__question:focus-visible { outline: 3px solid var(--ds-color-primary); outline-offset: -2px; } .ds-faq__chevron { flex: none; transition: transform var(--ds-duration-base) var(--ds-ease); } .ds-faq__item[open] .ds-faq__chevron { transform: rotate(180deg); } .ds-faq__answer { padding: 0 var(--ds-space-5) var(--ds-space-4); } /* ========================================================================== 12. Responsive image wrapper ========================================================================== */ .ds-ratio { position: relative; display: block; width: 100%; overflow: hidden; background: var(--ds-color-surface-muted); } .ds-ratio::before { content: ''; display: block; } .ds-ratio--16x9::before { padding-block-start: 56.25%; } .ds-ratio--4x3::before { padding-block-start: 75%; } .ds-ratio--1x1::before { padding-block-start: 100%; } .ds-ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ds-ratio__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ds-color-ink-soft); } /* ========================================================================== 13. Accessible badges (never color-only — always icon/text + sufficient contrast; see docs/design-system.md for the contrast pairs used). ========================================================================== */ .ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-size: var(--ds-fs-small); font-weight: 700; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-color-surface-muted); color: var(--ds-color-ink); } .ds-badge--success { background: var(--ds-color-success-bg); color: var(--ds-color-success); } .ds-badge--warning { background: var(--ds-color-warning-bg); color: var(--ds-color-warning); } /* ========================================================================== 14. Empty & loading states ========================================================================== */ .ds-empty { text-align: center; padding: var(--ds-space-7) var(--ds-space-5); color: var(--ds-color-ink-soft); } .ds-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ds-color-surface-muted); color: var(--ds-color-ink-soft); margin-block-end: var(--ds-space-4); } .ds-empty__desc { margin-inline: auto; margin-block-start: var(--ds-space-2); } .ds-empty__cta { margin-block-start: var(--ds-space-5); } .ds-loading__grid { display: grid; gap: var(--ds-space-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .ds-skeleton { background: linear-gradient(90deg, var(--ds-color-surface-muted) 25%, var(--ds-color-border) 37%, var(--ds-color-surface-muted) 63%); background-size: 400% 100%; border-radius: var(--ds-radius-md); animation: ds-skeleton-shimmer 1.6s ease-in-out infinite; } .ds-skeleton--card { height: 280px; } .ds-skeleton--text { height: 1em; margin-block-end: var(--ds-space-2); } .ds-skeleton--circle { width: 64px; height: 64px; border-radius: 50%; } @keyframes ds-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .ds-skeleton { animation: none; opacity: 0.7; } } /* ========================================================================== Subtle entrance motion (fade + translate) for elements marked data-ds-animate, driven by design-system.js via IntersectionObserver. No parallax, no continuous/looping motion. ========================================================================== */ [data-ds-animate] { opacity: 0; transform: translateY(var(--ds-translate-y-in)); transition: opacity var(--ds-duration-slow) var(--ds-ease), transform var(--ds-duration-slow) var(--ds-ease); } [data-ds-animate].ds-in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-ds-animate] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Page-level patterns shared across Front pages (homepage, consultations, catalog, ...): hero, numbered steps, section-footer CTA, final CTA banner. ========================================================================== */ /* ── Hero ──────────────────────────────────────────────── */ .ds-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); } .ds-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-7); align-items: center; } @media (min-width: 860px) { .ds-hero__inner { grid-template-columns: 1.1fr 0.9fr; } .ds-hero__inner--text-only { grid-template-columns: 1fr; } .ds-hero__inner--text-only .ds-hero__text { max-width: var(--ds-container-md); margin-inline: auto; text-align: center; } .ds-hero__inner--text-only .ds-hero__ctas { justify-content: center; } } .ds-hero__text-body { margin-block-start: var(--ds-space-4); max-width: none; } .ds-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block-start: var(--ds-space-6); } .ds-hero__microcopy { display: inline-block; margin-block-start: var(--ds-space-4); color: var(--ds-color-ink-soft); text-decoration: underline; font-size: var(--ds-fs-small); } .ds-hero__image { border-radius: var(--ds-radius-lg); } /* ── Numbered steps (e.g. "how it works" / "what happens next") ────── */ .ds-steps { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ds-container-md); display: grid; gap: var(--ds-space-5); grid-template-columns: 1fr; } @media (min-width: 700px) { .ds-steps { grid-template-columns: repeat(4, 1fr); } } .ds-steps__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ds-space-3); } .ds-steps__number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ds-color-primary); color: var(--ds-color-on-primary); font-weight: 700; } .ds-steps__text { color: var(--ds-color-ink); font-weight: 600; } /* ── Section footer CTA (centered, single action) ─────────── */ .ds-section-footer-cta { text-align: center; margin-block-start: var(--ds-space-7); } /* ── Final CTA banner ──────────────────────────────────────── */ .ds-final-cta { text-align: center; } .ds-final-cta .ds-prose { margin-block-start: var(--ds-space-3); } .ds-final-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3); margin-block-start: var(--ds-space-6); } /* ── Safety note (calm, low-alarm callout) ─────────────────── */ .ds-safety-note { max-width: var(--ds-container-md); margin-inline: auto; padding: var(--ds-space-5); border-radius: var(--ds-radius-md); background: var(--ds-color-surface-muted); border-inline-start: 4px solid var(--ds-color-secondary); color: var(--ds-color-ink); font-size: var(--ds-fs-small); line-height: var(--ds-line-height-body); text-align: center; } /* ── Decision-support prompt list ──────────────────────────── */ .ds-decision-list { display: flex; flex-direction: column; gap: var(--ds-space-3); max-width: var(--ds-container-md); margin-inline: auto; } .ds-decision-item { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; padding: var(--ds-space-4) var(--ds-space-5); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); background: var(--ds-color-surface); text-decoration: none; color: inherit; transition: border-color var(--ds-duration-base) var(--ds-ease), box-shadow var(--ds-duration-base) var(--ds-ease); } .ds-decision-item:hover, .ds-decision-item:focus-visible { border-color: var(--ds-color-primary-light); box-shadow: var(--ds-shadow-sm); } .ds-decision-item__prompt { font-weight: 600; color: var(--ds-color-ink); } .ds-decision-item__label { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-primary); font-weight: 700; font-size: var(--ds-fs-small); white-space: nowrap; } /* ── Safety note — neutral variant (scope/boundary disclaimers, not crisis warnings) — same shape, calmer border color ──────── */ .ds-safety-note--neutral { border-inline-start-color: var(--ds-color-border); } .ds-rating__count { margin-inline-start: var(--ds-space-1); color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); } /* ── Specialist card — extended real-data facts ────────────── */ .ds-specialist__facts { margin-block-start: var(--ds-space-3); text-align: start; width: 100%; } .ds-specialist__fact { margin-block-end: var(--ds-space-2); } .ds-specialist__fact dt { font-size: var(--ds-fs-small); font-weight: 700; color: var(--ds-color-ink); } .ds-specialist__fact dd { margin: 0; color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); line-height: var(--ds-line-height-body); } .ds-specialist__channels { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); padding-block-start: var(--ds-space-3); border-block-start: 1px solid var(--ds-color-border); width: 100%; justify-content: center; } .ds-specialist__channel { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-size: var(--ds-fs-small); color: var(--ds-color-ink-soft); } /* ── Trust/evidence section ────────────────────────────────── */ .ds-trust-stat { text-align: center; } .ds-trust-stat__number { display: block; font-size: var(--ds-fs-h2); font-weight: 700; color: var(--ds-color-primary); } .ds-trust-stat__label { display: block; margin-block-start: var(--ds-space-1); color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); } .ds-methodology-list { list-style: none; margin: var(--ds-space-2) auto 0; padding: 0; max-width: var(--ds-container-md); display: flex; flex-direction: column; gap: var(--ds-space-3); } .ds-methodology-list li { display: flex; align-items: flex-start; gap: var(--ds-space-2); color: var(--ds-color-ink); line-height: var(--ds-line-height-body); } .ds-methodology-list li .ds-icon { flex: none; margin-block-start: 3px; color: var(--ds-color-primary); } .ds-testimonial { max-width: var(--ds-container-md); margin: var(--ds-space-5) auto 0; padding-inline-start: var(--ds-space-5); border-inline-start: 3px solid var(--ds-color-primary-light); } .ds-testimonial__cite { display: block; margin-block-start: var(--ds-space-2); color: var(--ds-color-ink-soft); font-size: var(--ds-fs-small); font-style: normal; } /* ── Specialist profile page hero ──────────────────────────── */ .ds-hero--profile .ds-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } @media (min-width: 700px) { .ds-hero--profile .ds-hero__inner { grid-template-columns: auto 1fr; text-align: start; justify-items: start; } } .ds-profile__avatar-wrap { width: 140px; border-radius: 50%; overflow: hidden; flex: none; } .ds-profile__facts { display: grid; gap: var(--ds-space-6); grid-template-columns: 1fr; } @media (min-width: 700px) { .ds-profile__facts { grid-template-columns: repeat(3, 1fr); } } .ds-profile__fact-block .ds-prose { margin-block-start: var(--ds-space-2); max-width: none; } /* ── Brand wordmark (text, no image — see docs/brand-naming-rule.md) ── */ .ds-brand-logo { display: inline-flex; align-items: center; font-weight: 800; color: var(--ds-color-primary); text-decoration: none; line-height: 1; white-space: nowrap; } .ds-brand-logo--md { font-size: 1.5rem; } .ds-brand-logo--sm { font-size: 1.125rem; } .ds-brand-logo--image img { display: block; width: auto; object-fit: contain; } .ds-brand-logo--md.ds-brand-logo--image img { height: 40px; } .ds-brand-logo--sm.ds-brand-logo--image img { height: 32px; } /* ── Simplified public header navigation ───────────────────── */ .ds-public-nav__list { display: flex; align-items: center; gap: var(--ds-space-5); margin: 0; padding: 0; list-style: none; } .ds-public-nav__link { color: var(--ds-color-ink); text-decoration: none; font-weight: 600; padding-block: var(--ds-space-2); } .ds-public-nav__link:hover, .ds-public-nav__link:focus-visible { color: var(--ds-color-primary); } .ds-header-cta { margin-inline-start: var(--ds-space-3); padding-inline: var(--ds-space-5); padding-block: var(--ds-space-2); min-height: 40px; font-size: var(--ds-fs-small); } /* ── Mobile nav: one-handed reach + focus management ───────── */ .ds-mobile-nav__close { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; padding: var(--ds-space-4); border: none; background: none; color: var(--ds-color-ink); font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; } .ds-mobile-nav__primary { padding: var(--ds-space-3) var(--ds-space-4); } #slide_menu .collection-item, #slide_menu .list-group-item { min-height: 48px; display: flex; align-items: center; } #slide_menu .menu-list { min-height: 48px; display: flex; align-items: center; width: 100%; } #slide_menu .list-group-item .btn { min-height: 48px; display: flex; align-items: center; justify-content: center; width: 100%; } /* ── Visible keyboard focus ───────────────────────────────── The legacy bundle stylesheet sets `outline: 0 !important` broadly, so keyboard focus is otherwise invisible on every interactive element, including these new ones. Scoped to .ds-* elements only — this file stays purely additive to the rest of the site (see file header). */ .ds-btn:focus-visible, .ds-public-nav__link:focus-visible, .ds-brand-logo:focus-visible, .ds-decision-item:focus-visible, .ds-footer__col a:focus-visible, a.ds-card:focus-visible, .ds-faq__item summary:focus-visible, #slide_menu a:focus-visible, .ds-mobile-nav__close:focus-visible { outline: 2px solid var(--ds-color-primary) !important; outline-offset: 2px !important; } /* ── Footer ─────────────────────────────────────────────────── */ .ds-footer { padding-block: var(--ds-space-8) var(--ds-space-6); background: var(--ds-color-surface-muted); position: relative; z-index: 1; } /* Last thing in the footer, at the very bottom of the page — extra inline-end clearance + a stacking context above the fixed floating WhatsApp button (bottom-inline-end, 60px + 20px inset) so it never sits underneath/behind it once scrolled all the way down. */ .ds-footer__safety--last { position: relative; z-index: 1001; margin-block-end: var(--ds-space-5); padding-inline-end: 90px; } @media (max-width: 480px) { .ds-footer__safety--last { padding-inline-end: var(--ds-space-4); padding-block-end: 90px; } } .ds-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--ds-space-6); } @media (min-width: 700px) { .ds-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } } /* Neutralize the legacy bundle's global `nav { height: 56px; line-height: 56px; background-color: #ee6e73; color: #fff; }` (a Materialize top-bar default) — these footer columns are plain `