/* ============================================================ Wellness Solutions Africa — editorial design system ------------------------------------------------------------ Dark-only. Near-black ground, single brand-navy accent, Anton display over Archivo body. This file carries the *wireframe*: the section scaffolding, the component set, and the form and commerce primitives every real page needs. Palette is locked: ground #0D0F0D accent #0B1B6D (hover #3450D6, text on accent #F7F6F2) ink #F2F3EF muted #9AA097 Accent is signage-sampled brand navy, not the lime it replaces. Navy is dark, so — unlike the lime original — buttons carry light (cream) text, not dark text. ============================================================ */ :root { --rd-bg: #0D0F0D; --rd-surface: #141714; --rd-surface-2: #1b1f1b; --rd-surface-3: #232823; --rd-accent: #0B1B6D; --rd-accent-2: #3450D6; /* hover */ --rd-accent-dim: #081350; --rd-accent-ink: #F7F6F2; /* text that sits ON the accent */ --rd-accent-wash: rgba(52, 80, 214, 0.08); --rd-accent-wash-2: rgba(52, 80, 214, 0.16); /* Brand navy is a fill colour, not a text colour: #0B1B6D as text on the near-black ground measures 1.2:1, which is invisible. This tint is the same hue lifted until it clears 6:1 on every --rd-surface* value, and it is what every accent-coloured *text* role uses. Fills keep --rd-accent. */ --rd-accent-text: #7C93F2; --rd-ink: #F2F3EF; --rd-muted: #9AA097; --rd-muted-2: #6b6f68; --rd-line: rgba(242, 243, 239, 0.10); --rd-line-2: rgba(242, 243, 239, 0.20); --rd-ok: #86d97a; --rd-warn: #e8c86a; --rd-bad: #f08a7a; --rd-display: 'Anton', 'Archivo Narrow', 'Archivo', system-ui, sans-serif; --rd-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --rd-max: 1240px; /* Was clamp(20px, 5vw, 56px) — 20px read as hugging the edge on phones, especially against the large uppercase display type. */ --rd-pad: clamp(28px, 6vw, 64px); --rd-r: 8px; --rd-r-lg: 14px; } .rd *, .rd *::before, .rd *::after { box-sizing: border-box; } .rd body, body.rd { margin: 0; background: var(--rd-bg); color: var(--rd-ink); font-family: var(--rd-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .rd a { color: inherit; text-decoration: none; } .rd img { max-width: 100%; } .rd svg { display: block; } .rd ::selection { background: var(--rd-accent); color: var(--rd-accent-ink); } /* The focus ring has to be seen. Brand navy on the near-black ground measures 1.3:1, so the keyboard focus indicator was effectively absent. */ .rd :focus-visible { outline: 2px solid var(--rd-accent-text); outline-offset: 3px; border-radius: 3px; } .rd-shell { max-width: var(--rd-max); margin: 0 auto; padding-left: var(--rd-pad); padding-right: var(--rd-pad); } .rd-shell--narrow { max-width: 860px; } .rd-display { font-family: var(--rd-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.92; } .rd-eyebrow { display: block; font-family: var(--rd-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rd-accent-text); } .rd-muted { color: var(--rd-muted); } .rd-accent { color: var(--rd-accent-text); } .rd-lead { color: var(--rd-muted); font-size: 1.05rem; } .rd-center { text-align: center; } .rd-stack { display: flex; flex-direction: column; gap: 1rem; } .rd-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .rd-hide { display: none !important; } [x-cloak] { display: none !important; } /* ── Buttons ────────────────────────────────────────────── */ .rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: var(--rd-sans); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.95rem 1.5rem; border-radius: 4px; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; text-align: center; } .rd-btn:active { transform: translateY(1px); } .rd-btn[disabled], .rd-btn.is-disabled { opacity: 0.45; pointer-events: none; } .rd-btn--accent { background: var(--rd-accent); color: var(--rd-accent-ink); } .rd-btn--accent:hover { background: var(--rd-accent-2); color: var(--rd-accent-ink); } .rd-btn--ghost { background: transparent; color: var(--rd-ink); border-color: var(--rd-line-2); } .rd-btn--ghost:hover { border-color: var(--rd-accent-text); color: var(--rd-accent-text); } .rd-btn--solid { background: var(--rd-surface-3); color: var(--rd-ink); border-color: var(--rd-line); } .rd-btn--solid:hover { border-color: var(--rd-line-2); } .rd-btn--danger { background: transparent; color: var(--rd-bad); border-color: rgba(240, 138, 122, 0.4); } .rd-btn--danger:hover { background: rgba(240, 138, 122, 0.1); } .rd-btn--sm { padding: 0.7rem 1.15rem; font-size: 0.74rem; } .rd-btn--lg { padding: 1.1rem 1.9rem; font-size: 0.9rem; } .rd-btn--block { display: flex; width: 100%; } /* Link colours must beat `.rd a { color: inherit }` */ .rd a.rd-btn--accent, .rd a.rd-btn--accent:hover { color: var(--rd-accent-ink); } .rd a.rd-btn--ghost { color: var(--rd-ink); } .rd a.rd-btn--ghost:hover { color: var(--rd-accent-text); } .rd a.rd-btn--solid { color: var(--rd-ink); } .rd-textlink { color: var(--rd-accent-text); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: border-color .18s ease; } .rd .rd-textlink { color: var(--rd-accent-text); } .rd-textlink:hover { border-bottom-color: var(--rd-accent-text); } .rd-inline-form { display: inline; margin: 0; } /* ── Header ─────────────────────────────────────────────── */ .rd-header { position: sticky; top: 0; z-index: 50; background: rgba(13, 15, 13, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rd-line); } .rd-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: 74px; } .rd-brand { display: flex; align-items: center; flex-shrink: 0; } .rd-brand img { height: 40px; width: auto; display: block; } .rd-nav { display: flex; align-items: center; gap: 1.6rem; } .rd-nav-link, .rd-nav-trigger { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--rd-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-muted); background: none; border: 0; padding: 0.4rem 0; cursor: pointer; transition: color .18s ease; } .rd-nav-link:hover, .rd-nav-trigger:hover, .rd-nav-item:hover .rd-nav-trigger { color: var(--rd-ink); } .rd-nav-chevron { width: 12px; height: 12px; transition: transform .2s ease; } .rd-nav-item { position: relative; } .rd-nav-item:hover .rd-nav-chevron { transform: rotate(180deg); } .rd-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 480px; padding: 0.75rem; background: var(--rd-surface); border: 1px solid var(--rd-line-2); border-radius: var(--rd-r-lg); box-shadow: 0 30px 60px -25px rgba(0,0,0,0.9); z-index: 60; } .rd-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .rd-dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; } .rd-dropdown-link { display: block; padding: 0.75rem 0.9rem; border-radius: var(--rd-r); transition: background .16s ease; } .rd-dropdown-link:hover { background: var(--rd-surface-2); } .rd-dropdown-link strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--rd-ink); } .rd-dropdown-link span { display: block; font-size: 0.78rem; color: var(--rd-muted); margin-top: 0.15rem; } .rd-dropdown-link--cta strong { color: var(--rd-accent-text); } .rd-header-actions { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; } .rd-header-actions .rd-nav-link { white-space: nowrap; } .rd-cart { position: relative; display: inline-flex; align-items: center; color: var(--rd-muted); padding: 0.35rem; transition: color .18s ease; } .rd-cart:hover { color: var(--rd-accent-text); } .rd-cart-count { position: absolute; top: -4px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--rd-accent); color: var(--rd-accent-ink); font-size: 0.62rem; font-weight: 800; line-height: 17px; text-align: center; } .rd-nav-toggle { display: none; background: none; border: 1px solid var(--rd-line-2); color: var(--rd-ink); border-radius: 4px; padding: 0.55rem 0.9rem; font-family: var(--rd-sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } /* Mobile nav panel */ .rd-mobile-nav { border-bottom: 1px solid var(--rd-line); background: var(--rd-surface); max-height: calc(100vh - 74px); overflow-y: auto; } .rd-mobile-inner { padding: 1.25rem var(--rd-pad) 2rem; display: grid; gap: 0.4rem; } .rd-mobile-acc-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rd-line); padding: 0.95rem 0; color: var(--rd-ink); cursor: pointer; font-family: var(--rd-display); text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.01em; } .rd-mobile-acc-body { display: grid; gap: 0.15rem; padding: 0.6rem 0 0.9rem; } .rd-mobile-link { display: block; padding: 0.5rem 0; } .rd-mobile-link strong { display: block; font-size: 0.95rem; } .rd-mobile-link span { display: block; font-size: 0.78rem; color: var(--rd-muted); } .rd-mobile-flat { display: grid; gap: 0.1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rd-line); } .rd-mobile-flat a { padding: 0.7rem 0; font-family: var(--rd-display); text-transform: uppercase; font-size: 1.25rem; } .rd-mobile-auth { display: grid; gap: 0.6rem; padding-top: 1.1rem; } .rd-mobile-auth form { display: block; } @media (max-width: 1080px) { .rd-nav, .rd-header-actions .rd-desktop-only { display: none; } .rd-nav-toggle { display: inline-block; } } @media (min-width: 1081px) { .rd-mobile-nav, .rd-mobile-only { display: none !important; } } /* ── Announcement banner ────────────────────────────────── */ .rd-announce { background: var(--rd-accent); color: var(--rd-accent-ink); padding: 0.6rem var(--rd-pad); display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; text-align: center; font-size: 0.82rem; font-weight: 600; } .rd-announce a { color: var(--rd-accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 0.2em; } .rd-announce--info { background: var(--rd-surface-3); color: var(--rd-ink); } .rd-announce--info a { color: var(--rd-accent-text); } /* ── Hero ───────────────────────────────────────────────── */ .rd-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rd-line); } .rd-hero-media { position: absolute; inset: 0; z-index: 0; } .rd-hero-media img, .rd-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .rd-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,15,13,0.95) 0%, rgba(13,15,13,0.78) 45%, rgba(13,15,13,0.38) 100%); } .rd-hero-inner { position: relative; z-index: 1; /* Was `padding: T 0 B` (3-value shorthand) — the middle 0 sets left/right padding too, which silently overrode .rd-shell's horizontal padding (equal specificity, declared later in the cascade). That's the actual bug: hero content had zero side padding regardless of --rd-pad. Using top/bottom longhands only so .rd-shell's padding-left/right survives. */ padding-top: clamp(64px, 12vw, 150px); padding-bottom: clamp(48px, 8vw, 96px); } .rd-hero h1 { margin: 1.4rem 0 0; font-family: var(--rd-display); font-weight: 400; text-transform: uppercase; line-height: 0.98; /* Was clamp(3rem, 10vw, 8rem), sized for a 4-word line ("Transform pain into power."). The real copy is the CMS hero_title field, much longer — that max would overflow/wrap badly, so this scales more conservatively across viewport widths. */ font-size: clamp(1.9rem, 5.5vw, 4.25rem); letter-spacing: 0.005em; max-width: 18ch; } .rd-hero h1 .lime { color: var(--rd-accent-text); } .rd-hero-lead { margin: 1.6rem 0 2.2rem; max-width: 40ch; color: var(--rd-muted); font-size: 1.05rem; } .rd-hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; } .rd-hero-note { margin: 1.1rem 0 0; font-size: 0.88rem; color: var(--rd-muted); } /* Hero with a data card alongside the headline */ .rd-hero-split { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; } @media (max-width: 980px) { .rd-hero-split { grid-template-columns: 1fr; align-items: start; } } .rd-hero-card { background: rgba(20, 23, 20, 0.86); backdrop-filter: blur(10px); border: 1px solid var(--rd-line-2); border-radius: var(--rd-r-lg); padding: 1.75rem; } .rd-hero-card h2 { margin: 0.5rem 0 0.6rem; font-family: var(--rd-display); text-transform: uppercase; font-size: 1.7rem; line-height: 1; } .rd-hero-card p { margin: 0 0 1.2rem; color: var(--rd-muted); font-size: 0.9rem; } .rd-pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--rd-line); } .rd-pricerow .lbl { color: var(--rd-muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .rd-pricerow .val { font-family: var(--rd-display); font-size: 1.25rem; color: var(--rd-accent-text); } .rd-pricerow .val--sm { font-family: var(--rd-sans); font-size: 0.85rem; font-weight: 600; color: var(--rd-ink); } /* ── Marquee / trust strip ──────────────────────────────── */ .rd-strip { border-bottom: 1px solid var(--rd-line); background: var(--rd-bg); } .rd-strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; padding-top: 1.1rem; padding-bottom: 1.1rem; } /* Opt-in centring — the default left alignment is still what the membership currency selector and other reuses of this strip expect. */ .rd-strip-inner--center { justify-content: center; text-align: center; } .rd-strip-item { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--rd-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.02em; } .rd-strip-item::before { content: "◆"; color: var(--rd-accent-text); font-size: 0.6rem; } /* Logo strip (partners) */ .rd-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; padding: 1.6rem 0; } .rd-logos img { height: 34px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; } .rd-logos img:hover { opacity: 1; filter: none; } /* Infinite logo marquee. The track holds two identical copies of the logo row and slides left by exactly half its width, so the second copy lands where the first began and the loop has no visible seam. Edges are faded with a mask so logos enter and leave rather than being cut off. */ .rd-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .rd-marquee-track { display: flex; width: max-content; animation: rd-marquee-scroll 45s linear infinite; } .rd-marquee .rd-logos { flex-wrap: nowrap; /* Each copy must be at least a viewport wide, otherwise a short partner list leaves dead space on the right at the halfway point of the loop. space-around then spreads a short list evenly across that width. */ min-width: 100vw; justify-content: space-around; padding-right: 2.5rem; /* keeps a gap across the seam when the list overflows */ } /* Pause on hover, and whenever a logo link is keyboard-focused — a moving target is impossible to click or tab through. */ .rd-marquee:hover .rd-marquee-track, .rd-marquee:focus-within .rd-marquee-track { animation-play-state: paused; } @keyframes rd-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { /* No motion at all: show one copy as a normal scrollable row. */ .rd-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .rd-marquee-track { animation: none; } .rd-marquee-track > .rd-logos[aria-hidden="true"] { display: none; } } /* ── Section scaffolding ────────────────────────────────── */ .rd-section { padding: clamp(56px, 9vw, 120px) 0; } .rd-section--tight { padding: clamp(40px, 6vw, 72px) 0; } .rd-section--line { border-bottom: 1px solid var(--rd-line); } .rd-section--raised { background: var(--rd-surface); } .rd-section-head { max-width: 44ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .rd-section-head h2 { margin: 0.7rem 0 0; font-family: var(--rd-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 0.95; } .rd-section-head p { margin: 1.1rem 0 0; color: var(--rd-muted); } .rd-section-head--wide { max-width: 62ch; } .rd-section-foot { margin-top: clamp(2rem, 4vw, 3rem); } /* Head with an action pinned right */ .rd-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .rd-head-split .rd-section-head { margin-bottom: 0; } /* ── Feature cards (numbered) ───────────────────────────── */ .rd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .rd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .rd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 1000px) { .rd-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .rd-grid-2, .rd-grid-3 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .rd-grid-4 { grid-template-columns: 1fr; } } .rd-feature { border: 1px solid var(--rd-line); border-radius: var(--rd-r); padding: 1.9rem 1.6rem; background: var(--rd-surface); display: flex; flex-direction: column; gap: 0.5rem; } .rd-feature-n { font-family: var(--rd-display); color: var(--rd-accent-text); font-size: 1.4rem; } .rd-feature h3 { margin: 0.5rem 0 0.2rem; font-size: 1.15rem; letter-spacing: -0.01em; } .rd-feature p { margin: 0; color: var(--rd-muted); font-size: 0.95rem; flex: 1; } .rd-feature .rd-textlink { align-self: flex-start; margin-top: 0.6rem; } /* ── Service / entry-point cards ────────────────────────── */ .rd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 900px) { .rd-cards { grid-template-columns: 1fr; } } .rd-cards--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .rd-cards--2 { grid-template-columns: 1fr; } } .rd-cards--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .rd-cards--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rd-cards--4 { grid-template-columns: 1fr; } } .rd-card { border: 1px solid var(--rd-line); border-radius: var(--rd-r); overflow: hidden; background: var(--rd-surface); display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; } .rd-card:hover { border-color: var(--rd-line-2); transform: translateY(-3px); } .rd-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rd-surface-2); position: relative; } .rd-card-img img { width: 100%; height: 100%; object-fit: cover; } .rd-card-img--tall { aspect-ratio: 4 / 5; } .rd-card-img--square { aspect-ratio: 1 / 1; } .rd-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .rd-card-body h3 { margin: 0; font-size: 1.2rem; } .rd-card-price { font-family: var(--rd-display); color: var(--rd-accent-text); font-size: 1.5rem; margin-top: 0.3rem; } .rd-card-price small { font-family: var(--rd-sans); font-size: 0.78rem; font-weight: 500; color: var(--rd-muted); } .rd-card-sum { color: var(--rd-muted); font-size: 0.92rem; flex: 1; margin: 0; } .rd-card-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.7rem; } /* Branded monogram — never an empty box */ .rd-card-mono, .rd-team-mono, .rd-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--rd-display); font-size: 3.4rem; color: var(--rd-accent-text); background: radial-gradient(circle at 50% 35%, rgba(52, 80, 214, 0.10), var(--rd-surface-2)); text-transform: uppercase; } /* ── Meta / badges ──────────────────────────────────────── */ .rd-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; } .rd-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 3px; background: var(--rd-surface-3); color: var(--rd-muted); border: 1px solid var(--rd-line); } .rd-tag--accent { background: var(--rd-accent); color: var(--rd-accent-ink); border-color: transparent; } .rd-tag--outline { background: transparent; color: var(--rd-accent-text); border-color: var(--rd-accent-text); } .rd-tag--ok { color: var(--rd-ok); border-color: rgba(134, 217, 122, 0.4); } .rd-tag--warn { color: var(--rd-warn); border-color: rgba(232, 200, 106, 0.4); } .rd-tag--bad { color: var(--rd-bad); border-color: rgba(240, 138, 122, 0.4); } /* ── Numbered list rows ─────────────────────────────────── */ .rd-list { border-top: 1px solid var(--rd-line); } .rd-list-row { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rd-line); transition: background .2s ease; } .rd-list-row:hover { background: var(--rd-accent-wash); } .rd-list-n { font-family: var(--rd-display); color: var(--rd-accent-text); font-size: 1.6rem; } .rd-list-main h3 { margin: 0 0 0.25rem; font-size: 1.3rem; } .rd-list-main p { margin: 0; color: var(--rd-muted); font-size: 0.92rem; } .rd-list-price { font-family: var(--rd-display); font-size: 1.4rem; white-space: nowrap; } @media (max-width: 720px) { .rd-list-row { grid-template-columns: 44px 1fr; grid-auto-rows: min-content; gap: 0.5rem 1rem; } .rd-list-price { grid-column: 2; } .rd-list-row .rd-btn { grid-column: 2; justify-self: start; } } /* ── Steps (how it works) ───────────────────────────────── */ .rd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rd-line); } @media (max-width: 900px) { .rd-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .rd-steps { grid-template-columns: 1fr; } } .rd-step { padding: 2rem 1.6rem 2rem 0; border-right: 1px solid var(--rd-line); } .rd-step:last-child { border-right: 0; } @media (max-width: 900px) { .rd-step { border-right: 0; border-bottom: 1px solid var(--rd-line); } } .rd-step-n { font-family: var(--rd-display); font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--rd-accent); } .rd-step h3 { margin: 1rem 0 0.4rem; font-size: 1.1rem; } .rd-step p { margin: 0; color: var(--rd-muted); font-size: 0.9rem; } /* ── Testimonial ────────────────────────────────────────── */ .rd-quote { border: 1px solid var(--rd-line-2); border-radius: var(--rd-r-lg); padding: clamp(2rem, 5vw, 3.5rem); background: var(--rd-surface); position: relative; overflow: hidden; } .rd-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rd-accent); } .rd-quote blockquote { margin: 0; font-family: var(--rd-display); text-transform: none; font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--rd-ink); } .rd-quote-mark { color: var(--rd-accent-text); font-family: var(--rd-display); font-size: 2.4rem; line-height: 1; } .rd-quote-by { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.8rem; } .rd-quote-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--rd-accent); color: var(--rd-accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--rd-display); font-size: 1.2rem; } .rd-quote-by strong { display: block; font-size: 0.98rem; } .rd-quote-by span { color: var(--rd-muted); font-size: 0.85rem; } .rd-quote--sm { padding: 1.6rem; } .rd-quote--sm blockquote { font-family: var(--rd-sans); font-size: 0.98rem; line-height: 1.6; color: var(--rd-muted); } .rd-quote--sm .rd-quote-by { margin-top: 1.2rem; } .rd-quote--sm .rd-quote-avatar { width: 38px; height: 38px; font-size: 1rem; } /* ── Team grid ──────────────────────────────────────────── */ .rd-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } @media (max-width: 1100px) { .rd-team { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .rd-team { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .rd-team { grid-template-columns: 1fr; } } .rd-team-card { border: 1px solid var(--rd-line); border-radius: var(--rd-r); overflow: hidden; background: var(--rd-surface); display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; } .rd-team-card:hover { border-color: var(--rd-line-2); transform: translateY(-3px); } .rd-team-photo { aspect-ratio: 3 / 4; background: var(--rd-surface-2); overflow: hidden; position: relative; } .rd-team-photo img { width: 100%; height: 100%; object-fit: cover; } .rd-team-exp { position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 2; background: var(--rd-accent); color: var(--rd-accent-ink); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 3px; } .rd-team-body { padding: 1rem 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .rd-team-body h3 { margin: 0; font-size: 1.02rem; } .rd-team-role { margin: 0; color: var(--rd-accent-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .rd-team-bio { margin: 0; color: var(--rd-muted); font-size: 0.84rem; flex: 1; } .rd-chips { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; } .rd-chips li { font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-muted); border: 1px solid var(--rd-line); border-radius: 99px; padding: 0.15rem 0.5rem; } /* ── Image band (campaign) ──────────────────────────────── */ .rd-band { position: relative; overflow: hidden; border-radius: var(--rd-r-lg); border: 1px solid var(--rd-line); /* Fallback ground when no photo is supplied — never a flat empty box */ background: radial-gradient(ellipse at 85% 30%, rgba(52, 80, 214, 0.10), var(--rd-surface) 62%); } .rd-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .rd-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9,11,9,0.95) 0%, rgba(9,11,9,0.74) 45%, rgba(9,11,9,0.30) 100%); } .rd-band-inner { position: relative; z-index: 2; padding: clamp(2.5rem, 6vw, 4.5rem); max-width: 42ch; } .rd-band-inner h2 { margin: 0.6rem 0 1rem; font-family: var(--rd-display); text-transform: uppercase; font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 0.95; } .rd-band-inner p { margin: 0 0 1.6rem; } /* ── Featured split (image + copy) ──────────────────────── */ .rd-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); overflow: hidden; background: var(--rd-surface); margin-bottom: 1.25rem; } @media (max-width: 860px) { .rd-featured { grid-template-columns: 1fr; } } .rd-featured--flip .rd-featured-media { order: 2; } @media (max-width: 860px) { .rd-featured--flip .rd-featured-media { order: 0; } } .rd-featured-media { min-height: 320px; background: var(--rd-surface-2); position: relative; } .rd-featured-media img { width: 100%; height: 100%; object-fit: cover; } .rd-featured-body { padding: clamp(1.8rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; } .rd-featured-body h3 { font-family: var(--rd-display); text-transform: uppercase; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 0.95; margin: 0.4rem 0 0; } .rd-featured-body p { color: var(--rd-muted); margin: 0; } .rd-featured-price { font-family: var(--rd-display); color: var(--rd-accent-text); font-size: 2rem; } /* Two-column editorial split */ .rd-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .rd-split--wide-left { grid-template-columns: 1.3fr 1fr; } .rd-split--wide-right { grid-template-columns: 1fr 1.3fr; } @media (max-width: 900px) { .rd-split, .rd-split--wide-left, .rd-split--wide-right { grid-template-columns: 1fr; } } .rd-sticky { position: sticky; top: 96px; } @media (max-width: 900px) { .rd-sticky { position: static; } } /* ── Panel (replaces the old navy block) ────────────────── */ .rd-panel { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); padding: clamp(1.5rem, 3vw, 2.2rem); } .rd-panel--accent { border-color: var(--rd-accent-text); box-shadow: 0 24px 60px -40px rgba(52, 80, 214, 0.5); } .rd-panel--flush { padding: 0; overflow: hidden; } .rd-panel h3 { margin-top: 0; } /* ── Stats ──────────────────────────────────────────────── */ .rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rd-line); border: 1px solid var(--rd-line); border-radius: var(--rd-r); overflow: hidden; } @media (max-width: 760px) { .rd-stats { grid-template-columns: 1fr 1fr; } } /* For rows whose tile count is not a multiple of four — a fixed 4-up grid leaves a stranded pair on the last row and a stranded single at 2-up. */ .rd-stats--auto { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); } .rd-stat { background: var(--rd-surface); padding: 1.6rem 1.4rem; min-width: 0; } .rd-stat-v { font-family: var(--rd-display); line-height: 1; color: var(--rd-accent-text); /* Currency totals like "KES 1,200,000" ran past the tile at 320px. */ font-size: clamp(1.6rem, 5.2vw, 2.2rem); overflow-wrap: anywhere; } .rd-stat-l { display: block; margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-muted); overflow-wrap: anywhere; } .rd-stat-sub { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--rd-muted); line-height: 1.45; } /* ── Live status strip ────────────────────────────────────── Used on a campaign that is happening right now. The state is carried by the words, never by the dot alone — the dot is decorative and hidden from assistive tech. */ .rd-live { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 0.95rem 1.15rem; border: 1px solid var(--rd-accent-text); border-radius: var(--rd-r); background: var(--rd-accent-wash-2); } .rd-live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rd-bad); box-shadow: 0 0 0 0 rgba(240, 138, 122, 0.55); animation: rd-live-pulse 2.4s ease-out infinite; } @keyframes rd-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 138, 122, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(240, 138, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 138, 122, 0); } } @media (prefers-reduced-motion: reduce) { .rd-live-dot { animation: none; } } .rd-live-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rd-ink); white-space: nowrap; } .rd-live-text { margin: 0; min-width: 0; flex: 1 1 16ch; color: var(--rd-ink); font-size: 0.95rem; } .rd-live-text strong { color: var(--rd-ink); } .rd-live-meta { margin: 0; width: 100%; font-size: 0.78rem; color: var(--rd-muted); } @media (max-width: 520px) { .rd-live { padding: 0.85rem 0.95rem; gap: 0.6rem; } } /* Distance covered, distinct from money raised. Two bars on one page must not look like the same measurement. */ .rd-journey { display: flex; flex-direction: column; gap: 0.55rem; } .rd-journey-track { position: relative; height: 10px; border-radius: 999px; background: var(--rd-surface-3); border: 1px solid var(--rd-line); overflow: hidden; } .rd-journey-fill { display: block; height: 100%; background: var(--rd-accent-text); border-radius: 999px; } .rd-journey-meta { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--rd-muted); } .rd-journey-meta strong { color: var(--rd-ink); } /* ── Final CTA ──────────────────────────────────────────── */ .rd-cta { text-align: center; } .rd-cta h2 { font-family: var(--rd-display); text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.95; margin: 0 0 1.4rem; } .rd-cta .rd-hero-actions { justify-content: center; } .rd-cta-panel { background: var(--rd-surface); border: 1px solid var(--rd-line-2); border-radius: 16px; padding: clamp(2.6rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem); position: relative; overflow: hidden; } .rd-cta-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(52, 80, 214, 0.10), transparent 62%); } .rd-cta-panel > * { position: relative; } .rd-cta-note { margin: 1.6rem 0 0; font-size: 0.88rem; color: var(--rd-muted); } /* Accent interrupt band — light (cream) text on navy, never dark-on-navy */ .rd-interrupt { background: var(--rd-accent); color: var(--rd-accent-ink); } /* Centred column: the previous split pushed the CTA to the far right edge, leaving a wide gutter that broke the read between the copy and its button. */ .rd-interrupt-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; /* Was `padding: T 0` (2-value shorthand) — same bug as .rd-hero-inner: the 0 zeroes left/right and overrides .rd-shell's horizontal padding. */ padding-top: clamp(1.6rem, 4vw, 2.4rem); padding-bottom: clamp(1.6rem, 4vw, 2.4rem); } .rd-interrupt .rd-eyebrow { color: rgba(247, 246, 242, 0.75); } .rd-interrupt h2 { margin: 0.5rem auto 0.4rem; font-family: var(--rd-display); text-transform: uppercase; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 0.98; max-width: 22ch; } .rd-interrupt p { margin: 0 auto; max-width: 56ch; font-size: 0.92rem; color: rgba(247, 246, 242, 0.88); } .rd-interrupt .rd-btn--accent, .rd .rd-interrupt a.rd-btn--accent { background: var(--rd-accent-ink); color: var(--rd-accent); } .rd-interrupt .rd-btn--accent:hover, .rd .rd-interrupt a.rd-btn--accent:hover { background: #000; color: var(--rd-accent-2); } /* Anything sitting on the lime accent must stay ink-dark. These elements all already ask for --rd-accent-ink, but the global heading and link colours in wellness_platform.css — and its :root[data-theme="dark"] .page-home overrides — win on specificity and repaint them near-white, which measures about 1.2:1 against lime. Restated here with matching specificity. */ .rd-interrupt h2, :root[data-theme="dark"] .rd-interrupt h2, :root[data-theme="dark"] .page-home .rd-interrupt h2 { color: var(--rd-accent-ink); } .rd .rd-quote-avatar, :root[data-theme="dark"] .rd .rd-quote-avatar, :root[data-theme="dark"] .page-home .rd-quote-avatar { color: var(--rd-accent-ink); } .rd a.rd-skip, :root[data-theme="dark"] .rd a.rd-skip { color: var(--rd-accent-ink); } /* ── Footer ─────────────────────────────────────────────── */ .rd-footer { border-top: 1px solid var(--rd-line); background: var(--rd-bg); padding: clamp(3rem, 6vw, 5rem) 0 2rem; } .rd-footer-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; } @media (max-width: 900px) { .rd-footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .rd-footer-top { grid-template-columns: 1fr; } } .rd-footer-brand img { height: 42px; margin-bottom: 1rem; } .rd-footer-brand p { max-width: 34ch; font-size: 0.92rem; color: var(--rd-muted); margin: 0 0 1.2rem; } .rd-footer-contact { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--rd-muted); } .rd-footer-contact a:hover { color: var(--rd-accent-text); } /* Footer column headings are

for a valid document outline; the small-caps look is carried by .rd-footer-heading, not by the tag name. */ .rd-footer-col h4, .rd-footer-col .rd-footer-heading { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rd-muted-2); margin: 0 0 1rem; font-weight: 700; font-family: inherit; } .rd-footer-col a { display: block; color: var(--rd-muted); font-size: 0.9rem; padding: 0.28rem 0; } .rd-footer-col a:hover { color: var(--rd-accent-text); } .rd-footer-hours { margin-top: 1.2rem; font-size: 0.82rem; color: var(--rd-muted-2); line-height: 1.7; } .rd-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rd-line); color: var(--rd-muted-2); font-size: 0.8rem; } .rd-footer-bottom a { color: var(--rd-muted); } .rd-footer-bottom a:hover { color: var(--rd-accent-text); } .rd-footer-bottom-links { display: flex; gap: 1.2rem; flex-wrap: wrap; } /* ── Page hero (inner pages) ────────────────────────────── */ .rd-page-hero { border-bottom: 1px solid var(--rd-line); padding: clamp(52px, 9vw, 108px) 0 clamp(38px, 6vw, 68px); position: relative; overflow: hidden; } .rd-page-hero h1 { margin: 0.8rem 0 0; font-family: var(--rd-display); font-weight: 400; text-transform: uppercase; line-height: 0.92; font-size: clamp(2.4rem, 7vw, 5.4rem); } .rd-page-hero p { margin: 1.4rem 0 0; max-width: 56ch; color: var(--rd-muted); font-size: 1.05rem; } .rd-page-hero .rd-hero-actions { margin-top: 2rem; } .rd-page-hero--media .rd-hero-media { position: absolute; inset: 0; z-index: 0; } .rd-page-hero--media > .rd-shell { position: relative; z-index: 1; } .rd-crumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rd-muted-2); } .rd-crumbs a { color: var(--rd-muted); } .rd-crumbs a:hover { color: var(--rd-accent-text); } /* ── Pricing tiers ──────────────────────────────────────── */ .rd-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; } @media (max-width: 1000px) { .rd-tiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rd-tiers { grid-template-columns: 1fr; } } .rd-tiers--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .rd-tiers--3 { grid-template-columns: 1fr; } } .rd-tier { border: 1px solid var(--rd-line); border-radius: 10px; padding: 1.8rem 1.5rem; background: var(--rd-surface); display: flex; flex-direction: column; gap: 0.55rem; } .rd-tier--featured { border-color: var(--rd-accent-text); box-shadow: 0 22px 60px -42px rgba(52, 80, 214, 0.65); background: linear-gradient(180deg, var(--rd-accent-wash), var(--rd-surface) 55%); } .rd-tier-badge { align-self: flex-start; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rd-accent-ink); background: var(--rd-accent); padding: 0.22rem 0.6rem; border-radius: 3px; } .rd-tier h3 { margin: 0.4rem 0 0; font-size: 1.3rem; } .rd-tier-ideal { color: var(--rd-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0; } .rd-tier-price { font-family: var(--rd-display); font-size: 2.2rem; color: var(--rd-accent-text); line-height: 1; margin: 0.4rem 0 0; white-space: nowrap; } .rd-tier-per { color: var(--rd-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.2rem 0 0; } .rd-tier p { color: var(--rd-muted); font-size: 0.92rem; margin: 0.4rem 0 0; } .rd-tier .rd-checklist { flex: 1; } .rd-tier .rd-btn { margin-top: 1rem; } /* ── Event cards ────────────────────────────────────────── */ .rd-events { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 820px) { .rd-events { grid-template-columns: 1fr; } } .rd-event { border: 1px solid var(--rd-line); border-radius: 10px; overflow: hidden; background: var(--rd-surface); display: flex; flex-direction: column; } .rd-event-img { aspect-ratio: 16/9; background: var(--rd-surface-2); overflow: hidden; position: relative; } .rd-event-img img { width: 100%; height: 100%; object-fit: cover; } .rd-event-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .rd-event-body h3 { margin: 0.3rem 0 0; font-size: 1.5rem; font-family: var(--rd-display); text-transform: uppercase; line-height: 1; } .rd-event-body p { color: var(--rd-muted); margin: 0; flex: 1; } .rd-event-when { font-family: var(--rd-display); color: var(--rd-accent-text); font-size: 1.05rem; text-transform: uppercase; } /* ── Contact rows ───────────────────────────────────────── */ .rd-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .rd-contact { grid-template-columns: 1fr; } } .rd-contact-row { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rd-line); } .rd-contact-row .lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-accent-text); } .rd-contact-row .val { font-size: 1.1rem; } .rd-contact-row .val a:hover { color: var(--rd-accent-text); } /* ── Prose & lists ──────────────────────────────────────── */ .rd-prose { max-width: 68ch; } .rd-prose > :first-child { margin-top: 0; } .rd-prose p { color: var(--rd-muted); margin: 0 0 1.2rem; } .rd-prose h2 { font-family: var(--rd-display); text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; margin: 2.4rem 0 1rem; } .rd-prose h3 { font-size: 1.2rem; margin: 2rem 0 0.7rem; } .rd-prose h4 { font-size: 1rem; margin: 1.6rem 0 0.5rem; } .rd-prose ul, .rd-prose ol { color: var(--rd-muted); margin: 0 0 1.2rem; padding-left: 1.2rem; } .rd-prose li { margin-bottom: 0.45rem; } .rd-prose a { color: var(--rd-accent-text); border-bottom: 1px solid rgba(52, 80, 214, 0.35); } .rd-prose a:hover { border-bottom-color: var(--rd-accent-text); } .rd-prose blockquote { margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.4rem; border-left: 3px solid var(--rd-accent); color: var(--rd-ink); font-size: 1.05rem; } .rd-prose img { border-radius: var(--rd-r); margin: 1.6rem 0; } .rd-prose hr { border: 0; border-top: 1px solid var(--rd-line); margin: 2.4rem 0; } .rd-prose code { font-size: 0.88em; background: var(--rd-surface-2); border: 1px solid var(--rd-line); border-radius: 4px; padding: 0.1em 0.35em; } .rd-checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.65rem; } .rd-checklist li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--rd-muted); font-size: 0.94rem; } .rd-checklist li::before { content: "◆"; color: var(--rd-accent-text); font-size: 0.6rem; margin-top: 0.42rem; flex-shrink: 0; } /* ── Accordion (FAQ) ────────────────────────────────────── */ .rd-acc { border-top: 1px solid var(--rd-line); } .rd-acc-item { border-bottom: 1px solid var(--rd-line); } .rd-acc-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 1.4rem 0; color: var(--rd-ink); font-family: var(--rd-sans); font-size: 1.05rem; font-weight: 700; } .rd-acc-trigger:hover { color: var(--rd-accent-text); } .rd-acc-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--rd-accent-text); transition: transform .2s ease; } .rd-acc-icon.is-open { transform: rotate(45deg); } .rd-acc-body { padding: 0 0 1.5rem; color: var(--rd-muted); max-width: 72ch; } .rd-acc-body > :first-child { margin-top: 0; } .rd-acc-body > :last-child { margin-bottom: 0; } /* ── Forms ──────────────────────────────────────────────── */ .rd-form { display: grid; gap: 1.15rem; } .rd-field { display: grid; gap: 0.45rem; } .rd-field > label, .rd-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-muted); } .rd-field .rd-req { color: var(--rd-accent-text); } .rd-input, .rd-select, .rd-textarea, .rd-form input[type="text"], .rd-form input[type="email"], .rd-form input[type="tel"], .rd-form input[type="url"], .rd-form input[type="password"], .rd-form input[type="number"], .rd-form input[type="date"], .rd-form input[type="time"], .rd-form input[type="datetime-local"], .rd-form input[type="search"], .rd-form select, .rd-form textarea { width: 100%; font-family: var(--rd-sans); font-size: 0.98rem; color: var(--rd-ink); background: var(--rd-surface-2); border: 1px solid var(--rd-line-2); border-radius: var(--rd-r); padding: 0.85rem 1rem; transition: border-color .18s ease, background .18s ease; appearance: none; } .rd-form input::placeholder, .rd-textarea::placeholder, .rd-input::placeholder { color: var(--rd-muted-2); } .rd-input:focus, .rd-select:focus, .rd-textarea:focus, .rd-form input:focus, .rd-form select:focus, .rd-form textarea:focus { outline: none; border-color: var(--rd-accent-text); background: var(--rd-surface-3); } .rd-textarea, .rd-form textarea { min-height: 140px; resize: vertical; line-height: 1.6; } .rd-select, .rd-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA097' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 16px; padding-right: 2.4rem; } .rd-form select option { background: var(--rd-surface-2); color: var(--rd-ink); } .rd-form input[type="date"]::-webkit-calendar-picker-indicator, .rd-form input[type="time"]::-webkit-calendar-picker-indicator, .rd-form input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.5); cursor: pointer; } .rd-help { font-size: 0.8rem; color: var(--rd-muted-2); margin: 0; } .rd-error { font-size: 0.82rem; color: var(--rd-bad); margin: 0; } .rd-field--error .rd-input, .rd-field--error input, .rd-field--error select, .rd-field--error textarea { border-color: var(--rd-bad); } /* A checkbox in a form built by looping over fields: the box belongs beside its label, not stacked under a shouty uppercase one. */ .rd-field--check { grid-template-columns: auto 1fr; align-items: center; column-gap: 0.65rem; } .rd-field--check > label { grid-column: 2; font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--rd-ink); } .rd-field--check > input[type="checkbox"] { grid-row: 1; grid-column: 1; width: 18px; height: 18px; accent-color: var(--rd-accent-2); margin: 0; } .rd-field--check > .rd-help { grid-column: 2; margin: 0; } .rd-check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; color: var(--rd-muted); cursor: pointer; } .rd-check input[type="checkbox"], .rd-check input[type="radio"] { appearance: none; width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.2rem; border: 1px solid var(--rd-line-2); border-radius: 4px; background: var(--rd-surface-2); cursor: pointer; transition: background .16s ease, border-color .16s ease; } .rd-check input[type="radio"] { border-radius: 50%; } .rd-check input:checked { background: var(--rd-accent); border-color: var(--rd-accent-text); } .rd-check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0F0D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; } .rd-check a { color: var(--rd-accent-text); } .rd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } @media (max-width: 640px) { .rd-form-grid { grid-template-columns: 1fr; } } .rd-form-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; } /* Choice cards — radios that read as selectable panels */ .rd-choices { display: grid; gap: 0.7rem; } .rd-choice { display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; border: 1px solid var(--rd-line); border-radius: var(--rd-r); background: var(--rd-surface); padding: 1rem 1.1rem; transition: border-color .18s ease, background .18s ease; /* Choice cards are used both as