Heads up
Consultation closes Friday.
============================================================================= */
.alert {
--_accent: var(--color-info);
--_bg: rgba(44,168,255,0.08);
display: flex;
flex-direction: column;
gap: var(--space-3xs);
padding: var(--space-sm) var(--space-md);
background: var(--_bg);
border: var(--border-width) solid transparent;
border-left: 4px solid var(--_accent);
border-radius: var(--radius-md);
color: var(--color-text);
}
.alert__title {
font-family: var(--font-heading);
font-weight: var(--weight-semibold);
color: var(--_accent);
}
.alert__body { margin: 0; color: var(--color-text); }
.alert__body :last-child { margin-bottom: 0; }
.alert--info { --_accent: var(--color-info); --_bg: rgba(44,168,255,0.08); }
.alert--success { --_accent: var(--color-success); --_bg: rgba(47,175,106,0.10); }
.alert--warning { --_accent: var(--color-warning); --_bg: rgba(255,178,54,0.12); }
.alert--danger { --_accent: var(--color-danger); --_bg: rgba(255,80,98,0.09); }
/* =============================================================================
MOTION OVERRIDES — animation review 2026-08-26 (STAGING ONLY)
Source: /review-animations pass on staging.digitalrightsalliance.africa
Fixes vendor motion defaults (Elementor / Hello Elementor) + a11y gaps.
Append verbatim to the END of:
wp-content/plugins/draa-content-model/assets/draa-design-system.css
Contested vendor rules carry !important; same-file overrides do not.
========================================================================== */
:root {
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for movement */
}
/* 1 — Nav menu links: color-only, fast (vendor default: all .4s ease) */
.elementor-nav-menu a {
transition: color var(--duration-fast) var(--ease),
background-color var(--duration-fast) var(--ease) !important;
}
/* 2 — Mobile menu panel: fade + lift instead of the max-height wipe.
VERIFY open/close on a phone viewport after applying; if the panel
misbehaves, remove this block only. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
transition: opacity 200ms var(--ease-out),
transform 200ms var(--ease-out) !important;
}
/* 3 — Elementor buttons + social icons: named properties in budget, press
feedback (vendor default: all .3s ease) */
.elementor-button,
button,
[type="button"],
[type="submit"],
.elementor-social-icon {
transition: background-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
transform 140ms var(--ease-out) !important;
}
.elementor-button:active,
button:active,
[type="button"]:active,
[type="submit"]:active {
transform: scale(0.97);
}
/* 3b — Design-system .btn: same press feedback, strong curve on transform
(same-file override, no !important) */
.btn {
transition: background var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
transform 140ms var(--ease-out);
}
.btn:active {
transform: scale(0.97);
}
/* 4 — Cards: movement gets the strong curve. The box-shadow transition stays
as a documented exception: .card is overflow:hidden (media accent bar), so
the pre-rendered ::after shadow fix would be clipped; shadow paint at this
card count is acceptable. */
.card {
transition: box-shadow var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease-out);
}
/* 5 — Touch devices: hover motion must not stick after a tap */
@media (hover: none) {
.card:hover,
.card--interactive:hover {
transform: none;
box-shadow: var(--shadow-sm);
}
.card--flat:hover {
box-shadow: none;
}
}
/* 6 — Counters: fixed-width digits so the 2s count-up doesn't jitter */
.elementor-counter-number {
font-variant-numeric: tabular-nums;
}
/* 7 — Reduced motion: gentler, not zero — keep color/opacity/shadow fades,
drop movement and the whole-page smooth scroll */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
.card,
.btn,
.elementor-button,
button,
[type="button"],
[type="submit"],
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-nav-menu a {
transition-property: color, background-color, border-color, opacity, box-shadow !important;
}
.card:hover,
.card--interactive:hover {
transform: none;
}
.btn:active,
.elementor-button:active,
button:active,
[type="button"]:active,
[type="submit"]:active {
transform: none;
}
}
/* =============================================================================
HOMEPAGE CRAFT FIXES — design-taste audit 2026-08-27 (STAGING ONLY)
Work order: Projects/DRAA Online/Work_Order_Homepage_Craft_2026-08-27.md
Append verbatim to the END of:
wp-content/plugins/draa-content-model/assets/draa-design-system.css
All items reversible; A2 is a presentation-layer hide pending the
editor-session removal (work order Part B).
========================================================================== */
/* A4 — Shape rule (documented): buttons sharp (0) / cards 12px / inputs 6px.
Aligns design-system .btn with the sharp Elementor buttons already rendered. */
.btn {
border-radius: 0;
}
/* A1 — Hero secondary CTA ("Join the alliance"): legible over photography.
Was: transparent, borderless, white text on a busy photo. */
.elementor-element-9079fd6 .elementor-button {
border: 1px solid rgba(255, 255, 255, 0.85) !important;
background-color: rgba(31, 42, 68, 0.25) !important;
}
.elementor-element-9079fd6 .elementor-button:hover,
.elementor-element-9079fd6 .elementor-button:focus {
background-color: rgba(31, 42, 68, 0.5) !important;
}
/* A2 — Hero eyebrow ("DIGITAL RIGHTS ALLIANCE AFRICA") duplicates the logo
directly above it. Hidden pending removal/repurposing in the Elementor
editor (work order Part B item 1). Reversible: delete this rule. */
.elementor-element-1b37347 {
display: none;
}
/* A5 — H1 descender clearance (was line-height 1.0 at 44px; descenders in
"society" / "rights" touched line two) */
.elementor-element-c19c9be .elementor-heading-title {
line-height: 1.1 !important;
}
/* A6 — Body text consumes the design-system body token. Roboto is already
loaded on the page; the theme's system-stack default was winning the
cascade, so headings were on-brand and body text was not. */
html body {
font-family: var(--font-body);
}
/* =============================================================================
A7 — DRAA PRIMARY RESTORED TO BRAND INDIGO (STAGING ONLY)
Work order: Projects/DRAA Online/Work_Order_Homepage_Craft_2026-08-27.md
Decision: Riban, 2026-08-27 ("go with indigo").
Why this block exists: the Download Manager plugin injects an inline
:root { --color-primary: #4a8eff; ... } into every page, which beats any
:root declaration in this stylesheet by source order. html[data-brand="draa"]
(specificity 0-1-1) beats an inline :root block (0-1-0) regardless of source
order, restoring the values the [data-brand="draa"] brand map (defined above
in this file) already intends.
The A3 :root accent-token block appended earlier on 2026-08-27 is REMOVED as
part of this patch: its primary trio was inert against the WPDM inline
block, and its --color-primary-text unintentionally overrode the brand
map's indigo (#333d85). #ffa454 remains available as --draa-orange-bright
(decorative fills only, dark text — see the brand map's own notes).
========================================================================== */
html[data-brand="draa"] {
--color-primary: #3e499b;
--color-primary-hover: #333d85;
--color-primary-active: #2a3270;
}