/* ============================================================ RiyalPlus commercial site — shared tokens & primitives Pass 1. Extends the brand "Signature" direction. Cool palette per brand/tokens.js — ivory #fafaf7, NOT beige. ============================================================ */ :root { /* —— Color (straight from brand/tokens.js) —— */ --indigo: #1a2150; --indigo-deep: #0e1130; --indigo-mid: #2e3575; --indigo-soft: #e8e9f2; --ink: #0b0e1a; --ink-2: #3d4257; --ink-3: #7a7f92; --paper: #ffffff; --canvas: #fafaf7; --canvas-2: #f1f2ef; --rule: #e4e5e0; --rule-2: #cacbc5; --gold: #b8923d; --gold-bright: #d4a94a; --positive: #2e7148; --negative: #a6332f; --warning: #9b7516; --info: #2a5bb2; --focus: #3b5fe0; /* —— Type —— */ --display: 'Geist', system-ui, sans-serif; --ui: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; --arabic: 'Readex Pro', system-ui, sans-serif; --display-tracking: -0.03em; /* —— Geometry —— */ --r-sm: 4px; --r: 6px; --r-lg: 10px; --max-w: 1240px; --gutter: clamp(20px, 4.5vw, 64px); /* —— Motion (brand timings) —— */ --t-fast: 100ms; --t-base: 140ms; --t-slow: 240ms; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --shadow-md: 0 4px 12px rgba(11,14,26,0.08), 0 2px 4px rgba(11,14,26,0.04); --shadow-lg: 0 18px 48px -20px rgba(26,33,80,0.26), 0 4px 10px rgba(11,14,26,0.05); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { background: var(--canvas); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[lang="ar"] body { font-family: var(--arabic); letter-spacing: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ::selection { background: var(--indigo); color: #fff; } /* —— Bilingual show/hide —— Author both languages inline; CSS reveals one per . */ html[lang="ar"] .en { display: none !important; } html[lang="en"] .ar { display: none !important; } /* —— Numbers always Latin, mono, tabular —— */ .num, .mono { font-family: var(--mono); font-feature-settings: 'tnum' on, 'lnum' on; letter-spacing: 0; } /* ============================================================ Layout primitives ============================================================ */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } .container-wide { max-width: 1480px; } .section { padding-block: clamp(72px, 9vw, 132px); } .section + .section { border-top: 1px solid var(--rule); } .divider { height: 1px; background: var(--rule); border: 0; margin: 0; } /* —— Eyebrow: mono label with gold tick —— */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); flex: none; } .eyebrow.no-tick::before { display: none; } .eyebrow .idx { color: var(--gold); } html[lang="ar"] .eyebrow { font-family: var(--arabic); font-size: 13px; letter-spacing: 0.02em; } /* —— Section heads —— */ .shead { max-width: 56ch; margin-bottom: clamp(40px, 5vw, 64px); } .shead .eyebrow { margin-bottom: 24px; } .stitle { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: var(--display-tracking); margin: 0; text-wrap: balance; } html[lang="ar"] .stitle { font-family: var(--arabic); line-height: 1.18; letter-spacing: 0; font-weight: 600; } .stitle em { font-style: normal; color: var(--indigo); font-weight: 400; } html[lang="ar"] .stitle em { font-weight: 500; } .sdesc { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 22px 0 0; max-width: 58ch; font-weight: 400; } html[lang="ar"] .sdesc { line-height: 1.85; } /* ============================================================ Buttons — institutional, restrained, sharp ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border-radius: var(--r-sm); font-family: var(--ui); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; border: 1px solid transparent; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } html[lang="ar"] .btn { font-family: var(--arabic); letter-spacing: 0; } .btn-primary { background: var(--indigo); color: #fff; } .btn-primary:hover { background: var(--indigo-mid); } .btn-ghost { color: var(--ink); border-color: var(--rule-2); background: var(--paper); } .btn-ghost:hover { border-color: var(--ink); } .btn-ondark { background: #fff; color: var(--indigo-deep); } .btn-ondark:hover { background: var(--indigo-soft); } .btn-ghost-ondark { color: #fff; border-color: rgba(255,255,255,0.28); } .btn-ghost-ondark:hover { border-color: #fff; } .btn-sm { height: 38px; padding: 0 15px; font-size: 14px; } .btn-lg { height: 52px; padding: 0 28px; font-size: 16px; } /* Quiet text link with arrow */ .tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--indigo); border-bottom: 1px solid var(--rule-2); padding-bottom: 3px; transition: border-color var(--t-base) var(--ease), gap var(--t-base) var(--ease); } .tlink:hover { border-color: var(--indigo); gap: 12px; } .tlink .arw { transition: transform var(--t-base) var(--ease); } html[lang="ar"] .tlink .arw { transform: scaleX(-1); } /* ============================================================ Global chrome — top bar, nav, footer ============================================================ */ .topbar { background: var(--indigo-deep); color: rgba(255,255,255,0.82); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; } .topbar .container { display: flex; align-items: center; justify-content: center; gap: 12px; height: 34px; text-align: center; } .topbar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(212,169,74,0.18); flex: none; } .nav { position: sticky; top: 0; z-index: 80; background: color-mix(in oklab, var(--canvas) 86%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; } .nav-left { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); } .brand { display: flex; align-items: center; gap: 9px; } .brand img { width: 30px; height: 30px; } .brand .wm { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.04em; color: var(--ink); } .brand .wm b { color: var(--gold); font-weight: 600; } html[lang="ar"] .brand .wm { font-family: var(--display); } .nav-links { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 18px); } .nav-link { position: relative; font-size: 14.5px; font-weight: 450; color: var(--ink-2); padding: 8px 2px; transition: color var(--t-base) var(--ease); display: inline-flex; align-items: center; gap: 6px; } .nav-link:hover { color: var(--ink); } .nav-link .caret { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.5; } /* Products dropdown */ .has-menu { position: relative; } .menu { position: absolute; inset-inline-start: -16px; top: calc(100% + 6px); width: 320px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base); } .has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: translateY(0); } .menu-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 13px; border-radius: var(--r); transition: background var(--t-fast) var(--ease); } .menu-item:hover { background: var(--canvas); } .menu-item .mk { font-family: var(--mono); font-size: 11px; color: var(--gold); margin-top: 3px; width: 16px; flex: none; } .menu-item .mt { font-weight: 500; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; } .menu-item .md { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; } .soon { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); border-radius: 2px; padding: 1px 5px; } .nav-right { display: flex; align-items: center; gap: 14px; } .lang { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; border: 1px solid var(--rule-2); border-radius: var(--r-sm); overflow: hidden; } .lang button { padding: 6px 9px; color: var(--ink-3); transition: background var(--t-fast), color var(--t-fast); } .lang button.on { background: var(--indigo); color: #fff; } .nav-cta { } @media (max-width: 940px) { .nav-links { display: none; } } /* Footer */ .footer { background: var(--indigo-deep); color: rgba(255,255,255,0.72); } .footer a { color: rgba(255,255,255,0.72); transition: color var(--t-base); } .footer a:hover { color: #fff; } .footer-pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-pillars .p { padding: 28px 28px 28px 0; display: flex; gap: 12px; align-items: flex-start; } html[lang="ar"] .footer-pillars .p { padding: 28px 0 28px 28px; } .footer-pillars .p:not(:last-child) { border-inline-end: 1px solid rgba(255,255,255,0.1); padding-inline: 0 28px; } html[lang="ar"] .footer-pillars .p:not(:last-child) { padding-inline: 0 28px; } .footer-pillars .pk { font-family: var(--mono); font-size: 10px; color: var(--gold-bright); margin-top: 3px; } .footer-pillars .pt { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.86); } @media (max-width: 860px){ .footer-pillars { grid-template-columns: repeat(2,1fr); } } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-block: 64px 48px; } @media (max-width: 860px){ .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; } } .footer-brand .wm { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.04em; color: #fff; } .footer-brand .wm b { color: var(--gold-bright); } .footer-brand p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.6); max-width: 34ch; margin: 16px 0 0; } .footer-col h5 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin: 0 0 18px; font-weight: 400; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer-col a { font-size: 14px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); flex-wrap: wrap; } .footer-bottom .lang { border-color: rgba(255,255,255,0.2); } .footer-bottom .lang button { color: rgba(255,255,255,0.6); } .footer-bottom .lang button.on { background: rgba(255,255,255,0.14); color: #fff; } /* ============================================================ Reusable content blocks ============================================================ */ /* Trust strip — the method, four pillars */ .trust { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); background: var(--rule); gap: 1px; } @media (max-width: 760px){ .trust { grid-template-columns: 1fr 1fr; } } .trust .cell { background: var(--paper); padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; } .trust .cell .ti { font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: 0.1em; } .trust .cell .th { font-weight: 500; font-size: 16.5px; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; } html[lang="ar"] .trust .cell .th { font-weight: 600; letter-spacing: 0; } .trust .cell .td { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: auto; } /* Generic paper card with hairline */ .card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); } .card-pad { padding: clamp(24px, 3vw, 40px); } /* Editorial figure frame (product UI / document) */ .figure { background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .figure-chrome { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--canvas); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.03em; } .figure-chrome .dots { display: flex; gap: 6px; } .figure-chrome .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); } .figure-chrome .url { flex: 1; text-align: center; background: var(--paper); border: 1px solid var(--rule); padding: 4px 12px; border-radius: 3px; max-width: 360px; margin-inline: auto; } .figure-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 14px; display: flex; gap: 10px; align-items: baseline; } .figure-cap b { color: var(--ink-2); font-weight: 500; } /* Striped placeholder for imagery to be supplied */ .ph { background-color: var(--canvas-2); background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgba(26,33,80,0.05) 11px 12px); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } /* On-dark surface */ .ondark { background: var(--indigo-deep); color: #fff; } .ondark .eyebrow { color: rgba(255,255,255,0.55); } .ondark .eyebrow::before { background: var(--gold-bright); } .ondark .stitle { color: #fff; } .ondark .stitle em { color: var(--gold-bright); } .ondark .sdesc { color: rgba(255,255,255,0.7); } /* Pill / small mark */ .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 100px; padding: 5px 12px; } .pill .pd { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* Article/regulatory reference tag */ .ref { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--indigo); background: var(--indigo-soft); padding: 2px 7px; border-radius: 3px; white-space: nowrap; } /* Fade-up entrance, gated on reduced-motion + data-rv */ @media (prefers-reduced-motion: no-preference) { [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } [data-rv].in { opacity: 1; transform: none; } }