;
the wrapper carries role="region" and an accessible name in the markup and
tabindex="0" so the overflow is reachable from the keyboard.
Needed by page-pricing.php and page-privacy-policy.php. */
.rv-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--su-line);border-radius:var(--r-md);
background:var(--su-raised);margin-block-end:var(--sp-5)}
.rv-tablewrap:focus-visible{outline:3px solid var(--su-focus);
outline-offset:2px}
.rv-table{inline-size:100%;border-collapse:collapse;
font-variant-numeric:tabular-nums}
.rv-table caption{text-align:start}
.rv-table th,.rv-table td{padding:var(--sp-3) var(--sp-4);text-align:start;
vertical-align:top;font-size:var(--fs-sm);line-height:1.5;
border-block-end:1px solid var(--su-line)}
.rv-table thead th{font-family:var(--ff-display);font-weight:800;
color:var(--su-text);white-space:nowrap;
border-block-end:2px solid var(--su-line-strong)}
.rv-table tbody th{font-weight:700;color:var(--su-text);
min-inline-size:14ch}
.rv-table tbody td{color:var(--su-body)}
.rv-table tbody tr:last-child th,.rv-table tbody tr:last-child td{
border-block-end:0}
.rv-table__mark{display:inline-flex;align-items:center;color:var(--su-a1)}
.rv-table__mark svg{inline-size:18px;block-size:18px}
.rv-table__mark.is-no{color:var(--su-muted)}
/* --- Honeypot --------------------------------------------------------------
Removed from the layout and from the accessibility tree; the field still
posts, which is the point. Paired with aria-hidden and tabindex="-1" in the
markup. Needed by page-contact.php and page-partners.php. */
.rv-hp{display:none}
/* --- Form result messages --------------------------------------------------
Rendered hidden; a handler unhides the one that applies. Needed by
page-contact.php and page-partners.php. */
.rv-form__loading,.rv-form__success,.rv-form__error{
margin:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
font-size:var(--fs-sm);font-weight:700;border:1px solid transparent}
.rv-form__loading{color:var(--su-body);border-color:var(--su-line)}
.rv-form__success{color:var(--rv-success);border-color:var(--rv-success)}
.rv-form__error{color:var(--rv-danger);border-color:var(--rv-danger)}
.rv-form__loading[hidden],.rv-form__success[hidden],.rv-form__error[hidden]{
display:none}
/* --- Process step index ----------------------------------------------------
`.rv-step p` (0,1,1) outranks `.rv-step__n` (0,1,0) and was overriding the
index size wherever the number is authored as a paragraph. This restores
the spec 4.7 treatment for both span and p markup, including the home
pattern. */
.rv-step .rv-step__n{display:block;font-size:var(--fs-2xs);font-weight:800;
letter-spacing:.16em;line-height:1.4;color:var(--su-a1);
margin-block:0 var(--sp-2)}
/* --- Trust strip band -------------------------------------------------------
The five reusable trust lines (copy deck 1.3) sit directly beneath the hero
on the hero's own ground, so they read as part of the hero's claim rather
than as a new section — the same treatment spec 4.3 gives the stat row.
`.rv-section` would impose the full --sp-sec band padding, which is far too
much for a single strip; this is the strip-height version of the same idea.
The items themselves reuse `.rv-checks`.
Needed by patterns/page-home.php and patterns/page-growth-systems.php. */
.rv-trustbar{border-block-start:1px solid var(--su-line);
padding-block:var(--sp-5)}
.rv-trustbar .rv-checks{margin-block-end:0}
/* =============================================================================
9. Defensive overrides.
========================================================================== */
/*
* theme.json prints elements.heading.color as `:root :where(h1,...)`, which has
* the same specificity (0,1,0) as `.rv-section__title`. Today the right colour
* wins only because theme.css is enqueued after global-styles — an ordering
* this theme does not control and should not depend on. These rules are (0,1,1)
* and settle it outright: on a navy band, headings are white, whatever order
* the stylesheets arrive in.
*/
.rv-s-dark h1,.rv-s-dark h2,.rv-s-dark h3,.rv-s-dark h4,
.rv-s-deep h1,.rv-s-deep h2,.rv-s-deep h3,.rv-s-deep h4,
.rv-hero h1,.rv-hero h2,.rv-hero h3{color:var(--su-text)}
.rv-s-dark .rv-section__title,.rv-s-deep .rv-section__title{color:var(--su-text)}
/* Breadcrumbs are prepended before the page's first section, which on an
interior page is the hero. The hero carries its own nav offset; the trail
does not, so it was rendering underneath the fixed bar. Give the trail the
offset and take it back off the hero that follows it. */
.rv-crumbs{padding-block-start:calc(var(--nav-h) + var(--sp-4));
background:var(--su-bg)}
/* The adjacent-sibling selector this replaces never matched: the crumb trail's
next sibling is div.entry-content, not the hero inside it. So every interior
page reserved the fixed nav's height twice — measured 118px of crumb block
plus 112px of hero offset before the first kicker, about a third of a 667px
screen, and on the dark-hero hubs it showed as a grey band wedged between the
navy nav and the navy hero. Targeting the hero through the wrapper fixes it
without touching either component. */
.rv-crumbs + * .rv-hero,
.rv-crumbs + * .rv-hero--page,
.rv-crumbs + .rv-hero,
.rv-crumbs + .rv-hero--page{
padding-block-start:clamp(1.5rem,3vw,2.5rem);
min-block-size:0;
}
/* =============================================================================
10. RTL corrections found during the Arabic build.
========================================================================== */
/*
* Price strings. Isolation is always right — it stops the bidi algorithm
* reordering the number against the punctuation around it. Forcing LTR is only
* right for the English string, which is a Latin run ("SAR 30,000"). The Arabic
* string is "1,099 ريال", and inside an LTR island that lays out with ريال to
* the RIGHT of the number, so an Arabic reader scanning right-to-left meets the
* currency before the amount. Let direction follow the page in Arabic; the
* digits still render left-to-right on their own, because the bidi algorithm
* always treats them that way.
*/
[dir="rtl"] .rv-price{direction:rtl}
/*
* Kickers are letter-spaced and uppercased, which are Latin typographic
* devices: applied to Arabic they break the joins between letters and render
* the word as disconnected glyphs. This is already neutralised via
* body.rv-lang-ar; repeating it on [dir="rtl"] means a single missing body
* class cannot ship letter-spaced Arabic across every page on the tree.
*/
[dir="rtl"] .rv-kicker,
[dir="rtl"] .rv-panel__head,
[dir="rtl"] .rv-stat__l,
[dir="rtl"] .rv-wordmark ~ *,
[dir="rtl"] .rv-step__n{letter-spacing:normal;text-transform:none}
/* Arabic needs more leading than the Latin display face; its ascenders and
descenders are deeper and the marks sit above and below the baseline. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.35}
[dir="rtl"] body,[dir="rtl"] p,[dir="rtl"] li{line-height:1.8}
/* Phone and email inputs stay LTR whatever the page direction: a country code
typed into an RTL field lands on the wrong end of the number. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"]{direction:ltr;text-align:start}
/*
* Pricing tier figures. Same reasoning as .rv-price, with one extra dependency
* worth stating because it is invisible from the CSS alone: this is a flex row,
* so direction decides which child sits first.
*
* English DOM order: cur, amt, per + direction:ltr -> "SAR 1,099 /month"
* Arabic DOM order: amt, cur, per + direction:rtl -> reading right to
* left: 1,099, ريال,
* شهرياً
*
* The Arabic patterns are authored in that order deliberately. If someone
* "fixes" the Arabic markup to match the English order, restore direction:ltr
* for it at the same time, or the amount and the currency swap places.
*/
[dir="rtl"] .rv-tier__price{direction:rtl}
/* Directional arrows. The card-link chevron means "onward", and onward is
leftward in Arabic. Mirrored rather than redrawn so one SVG serves both
trees. The tribar and the wordmark above are the opposite case: they carry
no direction and must never flip. */
[dir="rtl"] .rv-card__link svg,
[dir="rtl"] .rv-btn--link svg{transform:scaleX(-1)}
/* Inline code. It carries the cookie and parameter names on the privacy page —
the page the consent banner links to — and had no rule at all, so it fell
back to the UA default and read as an unstyled artefact. Always LTR: a cookie
name is an identifier, not prose. */
code,kbd,samp{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.92em;direction:ltr;unicode-bidi:isolate;
background:color-mix(in srgb,var(--su-line) 55%,transparent);
border:1px solid var(--su-line);border-radius:var(--r-sm);
padding:.1em .38em;white-space:nowrap;
}
/*
* Table styling for BOTH markup routes.
*
* The money pages hand-author `div.rv-tablewrap > table.rv-table` inside a raw
* HTML block, because only that can carry the role="region"/tabindex the
* scrollable wrapper needs. The articles use core/table, which puts className
* on the wrapping
, not the
— so `.rv-table`'s own box rules
* (width, border-collapse) landed on the figure and did nothing, and the tables
* fell back to block-library defaults. Matching the descendant table as well
* makes one visual contract serve both, with no markup change in twelve files.
*/
.rv-tablewrap table,
figure.rv-table > table,
.wp-block-table.rv-table > table{
inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm);
}
.rv-tablewrap th,.rv-tablewrap td,
figure.rv-table th,figure.rv-table td{
padding:var(--sp-3) var(--sp-4);text-align:start;
border-block-end:1px solid var(--su-line);vertical-align:top;
}
.rv-tablewrap thead th,figure.rv-table thead th{
font-family:var(--ff-display);font-weight:800;color:var(--su-text);
border-block-end:2px solid var(--su-line-strong);white-space:nowrap;
}
.rv-tablewrap td,figure.rv-table td{font-variant-numeric:tabular-nums}
figure.rv-table{margin-inline:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* =============================================================================
11. Fixes from the usability audit.
========================================================================== */
/*
* Header overflow on phones. Measured: the nav row needed 385px inside a 375px
* viewport and 384px inside 320px, so the burger was clipped off the right edge
* on the most common device in this market. That is WCAG 2.2 AA 1.4.10 Reflow,
* not a cosmetic nit. The wordmark's .34em tracking is a brand device and is
* kept — it is only tightened below 480px, where the alternative is the
* navigation not fitting on screen at all.
*/
@media (max-width:480px){
.rv-nav__row{gap:var(--sp-2);padding-inline:var(--sp-4)}
.rv-wordmark{font-size:16px;letter-spacing:.16em;margin-inline-end:-.16em}
.rv-lang a,.rv-lang .is-unavailable{padding-inline:10px;font-size:13px}
.rv-lang a[lang="ar"],.rv-lang .is-unavailable{font-size:13px}
}
@media (max-width:360px){
.rv-wordmark{font-size:15px;letter-spacing:.1em;margin-inline-end:-.1em}
.rv-lang a,.rv-lang .is-unavailable{padding-inline:8px}
}
/*
* The Arabic font was downloading on every English page. The unicode-range
* gating is correct and works; what defeated it is the language switcher
* label — "العربية" is 14 Arabic characters, and the switcher's font stack
* named Noto, so the browser fetched all 162 KB to render one word. Arabic is
* removed from the Latin stacks and the switcher label falls back to the
* system Arabic face, which every device already has. The label is unchanged:
* it still reads العربية, because "AR" is not what a reader looks for.
*/
:root{
--ff-display:"Archivo","Archivo Fallback Display","Arial Black","Archivo Black",system-ui,-apple-system,"Segoe UI",sans-serif;
--ff-body:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Calibri,Arial,sans-serif;
}
.rv-lang a[lang="ar"],.rv-lang .is-unavailable{
font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
letter-spacing:normal;
}
/* Breadcrumb links were 15px tall. WCAG 2.2 AA 2.5.8 wants 24px minimum for a
navigation target; padding gets them there without moving anything visually. */
.rv-crumbs a,.rv-crumbs [aria-current]{
display:inline-block;padding-block:var(--sp-2);min-block-size:24px;
}
.rv-crumbs ol{gap:var(--sp-1) var(--sp-2)}
/* The error notice now actually renders, so it needs to look like one. */
.rv-form__error{
margin-block-end:var(--sp-5);padding:var(--sp-4);
border-inline-start:3px solid var(--rv-danger);
background:color-mix(in srgb,var(--rv-danger) 7%,transparent);
color:var(--rv-ink);font-weight:500;border-radius:var(--r-sm);
}
/* The WhatsApp float's own green is 2.81:1 against the light ground, which
fails 1.4.11 for a component boundary. A ring in an existing ink token gives
it a compliant edge without touching the brand colour itself. */
.rv-wa{box-shadow:var(--el-3),0 0 0 2px var(--rv-ink)}
/* scroll-padding defaulted to 0 while body padding defaulted to 64px, so a
keyboard focus could land underneath the sticky bar before motion.js ran. */
@media (max-width:767px){
html{scroll-padding-block-end:calc(var(--sticky-cta-h,64px) + var(--sp-4))}
}
/* The pricing ribbon letter-spaced Arabic, which breaks the script's joins. */
[dir="rtl"] .rv-tier__ribbon{letter-spacing:normal;text-transform:none}
/* The six nav links wrapped to two lines between 1024px and about 1100px, so
the 72px bar rendered items 64px tall and the CTA 49px. Tighten the gap and
stop the labels wrapping until the burger takes over. */
@media (min-width:1024px) and (max-width:1160px){
.rv-nav__links{gap:14px}
.rv-nav__links a{white-space:nowrap;font-size:14px}
.rv-nav__row{gap:14px}
}
/* Articles wrap their body in .rv-section and the template adds another, so
the padding applied twice — 123px of dead space, and the inner grey ground
sat on the white page. Collapse a section nested directly inside a section. */
.rv-section .rv-section{padding-block:0;background:transparent}
/* =============================================================================
12. Second audit pass.
========================================================================== */
/* Card and pricing grids had a 300px minimum inside a content box that is
~280px at 320px wide, so they overflowed the viewport. */
@media (max-width:400px){
.rv-cards{grid-template-columns:1fr}
.rv-tiers{grid-template-columns:1fr}
}
/* The hero reserved so much top padding that the primary CTA sat below the
fold on a 667px screen on every template. Trim it where height is scarce;
desktop is untouched. */
@media (max-height:740px) and (max-width:767px){
.rv-hero{min-block-size:0;padding-block:var(--sp-7) var(--sp-8)}
.rv-hero h1{margin-block:var(--sp-4) var(--sp-3)}
.rv-hero__lead{margin-block-end:var(--sp-5)}
}
/* A hero needs its own ground, or it inherits whatever is behind it and the
surface-scope abstraction silently stops working on it. */
.rv-hero{background:var(--su-bg)}
.rv-hero.rv-s-dark{background:var(--rv-navy)}
/* `li{line-height:1.8}` under [dir=rtl] was global, so it inflated every
list-based control: the nav, the mobile menu, the footer and the check
lists. Scope it to prose. */
[dir="rtl"] li{line-height:inherit}
[dir="rtl"] .rv-prose li,[dir="rtl"] .rv-section__intro li{line-height:1.9}
/* The same over-reach in the other direction: .rv-section li shrank list items
inside navigation and card components that happen to sit in a section. */
.rv-section li{font-size:inherit}
.rv-prose li,.rv-section > .rv-wrap > ul li,.rv-section > .rv-wrap > ol li{
font-size:var(--fs-sm);
}
/* Breadcrumbs wrapped to two lines on three-level pages at 375px. Truncate the
middle rather than wrap — the first and last crumbs carry the orientation. */
@media (max-width:480px){
.rv-crumbs ol{flex-wrap:nowrap;overflow:hidden}
.rv-crumbs li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-inline-size:38vw;flex:0 1 auto}
.rv-crumbs li:last-child{flex:1 1 auto;max-inline-size:none}
}
/* A scrolled comparison table lost its row labels, so a column of ticks became
unreadable. Pin the row header. */
@media (max-width:767px){
.rv-tablewrap th[scope="row"],figure.rv-table th[scope="row"]{
position:sticky;inset-inline-start:0;z-index:1;
background:var(--su-raised);
}
/* And signal that there is more to the right. */
.rv-tablewrap{background-image:linear-gradient(to left,
color-mix(in srgb,var(--su-line) 70%,transparent),transparent 24px);
background-repeat:no-repeat;background-position:right center;
background-size:24px 100%;}
[dir="rtl"] .rv-tablewrap{background-image:linear-gradient(to right,
color-mix(in srgb,var(--su-line) 70%,transparent),transparent 24px);
background-position:left center;}
}
/* Footer links sat exactly on the 24px target boundary. */
.rv-footer__nav a,.rv-footer__contact a{
display:inline-block;padding-block:var(--sp-1);min-block-size:24px;
}
/* --- 13. Hero WhatsApp + tertiary action ----------------------------------- */
/* WhatsApp now sits in the homepage hero CTA row. Above 768px there is no
sticky bar, so this is the only inline WhatsApp path on the first screen,
and the growth-systems link drops to a text link to keep the row at one
primary and one secondary button as the design spec requires. It carries
the ghost classes so that below 768px, where this rule does not apply, it
simply stays the ghost button it was before WhatsApp moved in. */
@media (min-width:768px){
.rv-hero__tertiary{
align-self:center;min-block-size:24px;padding:var(--sp-2) 0;
border:0;background:none;text-decoration:underline;text-underline-offset:.2em;
}
.rv-hero__tertiary:hover{background:none;border:0;text-decoration-thickness:2px}
}
@media (max-width:767px){
/* The float and the sticky bar already carry WhatsApp on this screen. A
third copy in the hero only pushes the fold down. */
.rv-hero__actions .rv-btn--wa{display:none}
}