/* * DomainSouq design system. * * One file, in this order: tokens → base and type → layout → components → header → footer → * marketing sections → WordPress block overrides. The plugin (domainsouq-core) reads the same * tokens through var(--ds-*, fallback), so a colour or radius is decided here once. * * Rules: * - Nothing says left or right. Spacing, alignment, borders and positions use logical * properties, so this one file serves Arabic (RTL) and English (LTR). The only mirrored things * are direction-bearing icons (.ds-flip). * - Never letter-spacing and never uppercase: both break or mean nothing in Arabic. * - Radius rule: controls (buttons, inputs) --ds-radius-md, surfaces (cards, tables, the search * bar) --ds-radius-lg, large bands --ds-radius-xl, pills only for badges and toggles. * - Colour roles (brand 4.0 "Souq Night", theme 2.0.0). Deep Navy is the brand and the structure: * the header, the footer, dark bands, headings. Action Blue is for what the visitor can do next: * primary buttons, the search button, links, active and selected states, focus. It reads at * 5.75:1 under white text and as text on white (the old Primary Blue was 4.1:1). Action Blue * Dark is its hover/pressed state. Soft Blue is the light tint for badges, icon tiles and * selected rows. Blue on Navy is for accents and blue text on Deep Navy only. * - Deal Amber is the warm accent: deals, savings, offers, limited-time promotions, and (as * Premium Gold, the same family) premium names. Amber is never a button and never an error. * Text in amber uses --ds-amber-text (6.3:1 on white). * - Red is for errors only, always with an icon or a word. Never a promotion, never a brand * colour. Never reintroduce red, green, teal or purple as a brand colour. * - Status colours are not brand colours: green means "available / paid / done" (text and small * marks only, never a button), a burnt orange with a warning icon means "warning". * - Motion is 150-300ms, eases out, and only runs for visitors who have not asked for reduced * motion. Nothing is ever hidden waiting for a script or an animation. */ /* ==== 1. Tokens ============================================================ */ :root { /* Colour: brand palette (brand 4.0 "Souq Night"). Each colour has one job (see the rules at the top). */ --ds-navy: var(--wp--preset--color--ink, #071b3a); /* Deep Navy: brand, header, footer, headings, dark sections */ --ds-navy-2: var(--wp--preset--color--ink-2, #12305c); /* hover on navy, raised surfaces on dark bands */ --ds-navy-deep: var(--wp--preset--color--navy-deep, #051530); /* footer */ --ds-blue: var(--wp--preset--color--go, #0b5fd9); /* Action Blue: primary buttons, search, links, active states, focus (5.75:1) */ --ds-blue-deep: var(--wp--preset--color--go-deep, #0849ad); /* Action Blue Dark: hover/pressed (8.2:1 under white) */ --ds-blue-light: var(--wp--preset--color--go-bright, #5ab0ff); /* Blue on Navy: accents and blue text on Deep Navy only (7.4:1) */ --ds-blue-soft: var(--wp--preset--color--teal-tint, #eaf2ff); /* Soft Blue: badges, icon tiles, selected rows */ --ds-blue-line: #c4dbff; /* borders on Soft Blue */ --ds-blue-on-dark: var(--ds-blue-light); /* Deal Amber: deals, savings, offers, promotions. Never a button, never an error. */ --ds-amber: var(--wp--preset--color--promo, #f5a623); /* fills, bars, ribbons (Deep Navy text on it: 8.45:1) */ --ds-amber-strong: #e08e00; /* borders and marks on white (3:1 non-text) */ --ds-amber-text: #8a5300; /* amber that reads as text (6.3:1 on white, 5.8:1 on its tint) */ --ds-amber-tint: #fff4de; --ds-amber-line: #f7d595; --ds-on-amber: var(--ds-navy); /* Old promo names (brand 3.0 "Promo Red") now mean Deal Amber, so every offer mark follows. */ --ds-promo: var(--ds-amber); --ds-promo-text: var(--ds-amber-text); --ds-promo-tint: var(--ds-amber-tint); /* Premium Gold: the same warm family, a step deeper; premium names and marketplace value. */ --ds-gold: var(--wp--preset--color--saffron, #e8a317); /* Deep Navy text on it: 7.9:1 */ --ds-gold-text: #7a4e00; /* 7.2:1 on white */ --ds-gold-tint: var(--wp--preset--color--saffron-tint, #fff7e6); /* Status colours: not brand colours, used only for what they say */ --ds-success: #067647; /* available, paid, done (text and marks only) */ --ds-success-mark: #17b26a; --ds-success-tint: #ecfdf3; --ds-warning: #dc6803; --ds-warning-text: #b54708; /* 5.4:1 on white; always with the warning icon */ --ds-warning-tint: #fef6ee; --ds-danger: var(--wp--preset--color--danger, #c62828); /* errors only: always with an icon or a word */ --ds-danger-tint: #fdecea; --ds-danger-on-dark: #ff7a75; /* error marks on Deep Navy (toasts) */ --ds-info: var(--ds-blue); --ds-info-tint: var(--ds-blue-soft); --ds-text: #172033; /* Primary text (headings use Deep Navy) */ --ds-heading: var(--ds-navy); --ds-muted: var(--wp--preset--color--muted, #647084); /* Muted text: 5:1 on white, 4.6:1 on the page background */ --ds-subtle: var(--ds-muted); --ds-border: var(--wp--preset--color--line, #dde3ea); --ds-border-strong: #c5ced9; --ds-surface: var(--wp--preset--color--paper, #fff); --ds-surface-2: var(--wp--preset--color--surface, #f4f6f9); /* Page background */ --ds-mist: var(--wp--preset--color--mist, #ebeff5); --ds-mist-2: #dfe6ef; /* hover on mist */ --ds-background: var(--ds-surface-2); --ds-focus: var(--ds-blue); /* 4.1:1 on white, so the ring is visible (WCAG 1.4.11 needs 3:1) */ --ds-focus-on-dark: var(--ds-blue-light); /* Text and lines on Deep Navy (header, footer, dark bands) */ --ds-on-dark-1: #e4eaf3; /* links */ --ds-on-dark-2: #c3cedf; /* body text */ --ds-on-dark-3: #9aa9c0; /* quiet notes (7:1) */ --ds-on-dark-line: rgba(255, 255, 255, 0.12); --ds-on-dark-hover: rgba(255, 255, 255, 0.08); /* Old colour names, kept so the plugin and saved content keep working. --ds-red* (brand 2.0) meant "action", so it points at the blue system; promotions use --ds-promo*. New code uses the names above. */ --ds-red: var(--ds-blue); --ds-red-deep: var(--ds-blue-deep); --ds-red-soft: var(--ds-blue-soft); --ds-red-line: var(--ds-blue-line); --ds-red-on-dark: var(--ds-blue-on-dark); --ds-emerald: var(--ds-blue); --ds-emerald-deep: var(--ds-blue-deep); --ds-emerald-bright: var(--ds-blue); --ds-mint: var(--ds-blue-soft); --ds-teal: var(--ds-blue); --ds-teal-deep: var(--ds-blue-deep); --ds-teal-tint: var(--ds-blue-soft); --ds-saffron: var(--ds-gold); --ds-saffron-text: var(--ds-gold-text); --ds-saffron-tint: var(--ds-gold-tint); /* Type */ /* Inter for Latin (also the domain names and prices on Arabic pages), IBM Plex Sans Arabic for Arabic. */ --ds-font: var(--wp--preset--font-family--ui, "Inter", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif); --ds-text-hero: clamp(2.375rem, 1.45rem + 3.9vw, 4rem); /* home hero: 38 -> 64px */ --ds-text-display: clamp(2.125rem, 1.5rem + 2.7vw, 3.5rem); --ds-text-h1: clamp(1.875rem, 1.5rem + 1.4vw, 2.625rem); --ds-text-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); --ds-text-h3: 1.25rem; --ds-text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --ds-text-body: 1rem; --ds-text-sm: 0.9375rem; --ds-text-xs: 0.8125rem; --ds-text-price: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* the big price on a result or a deal */ --ds-leading-body: 1.55; --ds-leading-heading: 1.15; --ds-weight-hero: 800; --ds-weight-heading: 700; --ds-tracking-display: -0.025em; /* Latin only (see :lang(ar) below): Arabic is never letter-spaced */ /* Space (4px steps) */ --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-20: 5rem; --ds-space-24: 6rem; --ds-section: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem); /* Shape */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; --ds-radius-pill: 999px; --ds-border-w: 1px; --ds-shadow-xs: 0 1px 2px rgba(7, 27, 58, 0.05); --ds-shadow-sm: 0 1px 2px rgba(7, 27, 58, 0.04), 0 4px 12px rgba(7, 27, 58, 0.06); --ds-shadow-md: 0 2px 6px rgba(7, 27, 58, 0.05), 0 16px 40px rgba(7, 27, 58, 0.1); --ds-shadow-lg: 0 4px 10px rgba(7, 27, 58, 0.06), 0 28px 64px rgba(7, 27, 58, 0.16); --ds-shadow-blue: 0 8px 20px rgba(11, 95, 217, 0.28); /* under a primary button on hover */ --ds-shadow-amber: 0 10px 28px rgba(224, 142, 0, 0.22); /* under a deal card on hover */ /* Elevation: 1 = resting card, 2 = lifted (hover, sticky bars), 3 = floating (menus, dialogs, toasts) */ --ds-elev-1: var(--ds-shadow-sm); --ds-elev-2: var(--ds-shadow-md); --ds-elev-3: var(--ds-shadow-lg); --ds-lift: -3px; /* how far a card rises on hover */ --ds-ring: 0 0 0 4px rgba(11, 95, 217, 0.18); /* Motion */ --ds-ease: cubic-bezier(0.2, 0, 0, 1); --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ds-dur-1: 150ms; /* colour, small state changes */ --ds-dur-2: 200ms; /* hover lift, toggles */ --ds-dur-3: 300ms; /* panels, toasts, reveals */ --ds-fast: var(--ds-dur-1); /* Controls: buttons and fields share one height so they line up in a row */ --ds-control-sm: 2.25rem; --ds-control: 2.875rem; --ds-control-lg: 3.25rem; /* Layout */ --ds-container-wide: 80rem; /* 1280px: marketing, prices, header, footer */ --ds-container: 75rem; /* 1200px: cart, checkout, account, search results */ --ds-container-prose: 48rem; --ds-gutter: clamp(1rem, 0.6rem + 1.6vw, 1.5rem); /* 16px on phones */ --ds-header-h: 4.5rem; /* Icons used as CSS masks (one definition each; the colour comes from currentColor/background) */ --ds-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); --ds-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E"); --ds-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E"); --ds-icon-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.6V4.5a1 1 0 0 1 1-1h8.1l8 8a1 1 0 0 1 0 1.4l-8.1 8.1a1 1 0 0 1-1.4 0z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6' fill='black'/%3E%3C/svg%3E"); --ds-icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); --ds-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Old names, kept so nothing that still uses them breaks */ --ds-ink: var(--ds-navy); --ds-ink-2: var(--ds-navy-2); --ds-paper: var(--ds-surface); --ds-line: var(--ds-border); --ds-go: var(--ds-blue); --ds-go-deep: var(--ds-blue-deep); --ds-r-md: var(--ds-radius-lg); --ds-r-lg: var(--ds-radius-xl); --ds-wide: var(--ds-container-wide); } /* Arabic: a step larger and looser (its letterforms read smaller at the same size), weight 700 at most (the Arabic font stops there), and never letter-spaced. */ :root:lang(ar) { --ds-text-hero: clamp(2.375rem, 1.55rem + 3.5vw, 3.875rem); --ds-text-h1: clamp(1.9375rem, 1.55rem + 1.45vw, 2.75rem); --ds-text-h2: clamp(1.6875rem, 1.35rem + 1.25vw, 2.375rem); --ds-text-h3: 1.3125rem; --ds-leading-body: 1.85; --ds-leading-heading: 1.45; --ds-weight-hero: 700; --ds-tracking-display: 0; } @media (max-width: 1023px) { :root { --ds-header-h: 3.75rem; } } /* ==== 2. Base and type ===================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* In-page links (/#faq, #pricing) stop below the sticky header. */ scroll-padding-block-start: calc(var(--ds-header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--ds-space-4)); } body { -webkit-tap-highlight-color: transparent; background: var(--ds-background); color: var(--ds-text); font-family: var(--ds-font); font-size: 1rem; line-height: var(--ds-leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :lang(ar) body { font-size: 1.0625rem; } /* Arabic letterforms need the extra pixel to read as easily */ /* Arabic has no italics. Emphasis is weight, not slant. */ :lang(ar) em, :lang(ar) i, :lang(ar) cite, :lang(ar) address { font-style: normal; font-weight: 600; } h1, h2, h3, h4, h5, h6 { color: var(--ds-heading); font-weight: var(--ds-weight-heading); line-height: var(--ds-leading-heading); letter-spacing: 0; text-wrap: balance; } h1, h2 { letter-spacing: var(--ds-tracking-display); } /* tighter Latin display type; 0 in Arabic */ h1 { font-size: var(--ds-text-h1); } h2 { font-size: var(--ds-text-h2); } h3 { font-size: var(--ds-text-h3); font-weight: 600; } h4 { font-size: var(--ds-text-body); font-weight: 600; } p, li { text-wrap: pretty; } a { color: var(--ds-blue-deep); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--ds-fast); } a:hover { color: var(--ds-navy); } small { font-size: var(--ds-text-xs); } strong, b { font-weight: 600; } :focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } img, svg { max-width: 100%; } a, button, summary, label, input[type="submit"] { touch-action: manipulation; } /* no double-tap zoom delay on phones */ /* The page behind the phone menu or a dialog does not scroll. Phones only: their scrollbars overlay, so nothing shifts. */ @media (max-width: 1023px) { html:has(dialog:modal) { overflow: hidden; } } .wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; } .wp-site-blocks > main { flex: 1 0 auto; } /* No block gap between the navy header and the page: on the gray page background it would show as a strip. */ .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; } /* Domain names, codes and prices are always Latin and left-to-right, even inside Arabic text. */ .ds-domain, code { direction: ltr; unicode-bidi: isolate; display: inline-block; } .ds-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } /* Prices: Inter's tabular figures, so columns of prices line up and a changing total does not jiggle. */ .ds-price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; color: var(--ds-heading); } .ds-display { font-size: var(--ds-text-display); line-height: 1.1; letter-spacing: var(--ds-tracking-display); } :lang(ar) .ds-display { line-height: 1.35; } .ds-lead { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-lead); line-height: var(--ds-leading-body); } .ds-eyebrow { margin: 0 0 var(--ds-space-2); color: var(--ds-blue-deep); font-size: var(--ds-text-sm); font-weight: 600; } .ds-meta { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-sm); } /* Screen-reader-only text, on every page (the header switchers and plugin widgets use it). */ .dsq-sr, .ds-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ==== 3. Layout ============================================================ */ /* * Containers: width is the screen minus a gutter on each side, up to a maximum. At 1440px the * content is 1280px wide (marketing) or 1200px (app pages); at 1920px it stops growing. */ .ds-container { box-sizing: border-box; width: min(100% - 2 * var(--ds-gutter), var(--ds-container-wide)); max-width: none; margin-inline: auto; padding-inline: 0; } .ds-container.ds-container--app { width: min(100% - 2 * var(--ds-gutter), var(--ds-container)); } .ds-container.ds-narrow { width: min(100% - 2 * var(--ds-gutter), var(--ds-container-prose)); } .ds-center { justify-content: center; margin-block-start: var(--ds-space-8); } .ds-section { padding-block: var(--ds-section); } .ds-section--tint { background: var(--ds-surface); border-block: 1px solid var(--ds-border); } /* white band on the gray page */ .ds-section--tight { padding-block: calc(var(--ds-section) * 0.6); } .ds-section__head { max-width: 42rem; margin: 0 auto var(--ds-space-10); text-align: center; } .ds-section__head .ds-lead { margin-block-start: var(--ds-space-3); } .ds-section__title { margin: 0 auto var(--ds-space-10); max-width: 26em; text-align: center; } .ds-section__head .ds-section__title { margin-block-end: 0; } /* Page header: one look for every inner page (prices, transfer, cart, checkout, account). */ .ds-page-header { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) clamp(1.5rem, 1rem + 1.6vw, 2.25rem); } .ds-page-header__title, .ds-page-title { margin: 0; font-size: var(--ds-text-h1); } .ds-page-header .ds-lead { max-width: 44rem; margin-block-start: var(--ds-space-3); } .ds-page-header--tint { background: var(--ds-surface); border-block-end: 1px solid var(--ds-border); } /* Default page template: the page title lines up with whatever width its content uses. */ .ds-page { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3rem) var(--ds-section); } .ds-page > .ds-page-title { box-sizing: border-box; max-width: var(--ds-container-prose); margin: 0 auto var(--ds-space-6); } /* Plugin app pages (cart, checkout, account) are alignwide: the title takes the app width. */ .ds-page:has(.dsq-app) > .ds-page-title { max-width: var(--ds-container); } .ds-page:has(.dsq-acct--auth) > .ds-page-title { max-width: 70rem; } .ds-page .wp-block-post-content > .alignwide { max-width: var(--ds-container); } .ds-page .wp-block-post-content > .dsq-acct--auth { max-width: 70rem; } /* ==== 4. Components ========================================================= */ /* ---- 4.1 Buttons ---------------------------------------------------------- * .ds-button + one variant (--primary blue, --secondary navy, --outline, --ghost, --danger) and * optionally a size (--sm, --lg) and --block. WordPress's own button block and the log-in form's * submit button get the same look, so there is one button on the whole site. * Loading: add .is-loading (or aria-busy="true"); the label stays and a spinner appears. */ .ds-button, .wp-block-button .wp-block-button__link, .dsq-acct input[type="submit"] { --_bg: var(--ds-navy); --_fg: #fff; --_bd: transparent; --_bg-hover: var(--ds-navy-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); box-sizing: border-box; min-height: var(--ds-control); margin: 0; padding-block: 0; padding-inline: 1.25rem; border: 1.5px solid var(--_bd); border-radius: var(--ds-radius-md); background: var(--_bg); color: var(--_fg); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease); } .ds-button:hover, .wp-block-button .wp-block-button__link:hover, .dsq-acct input[type="submit"]:hover { background: var(--_bg-hover); color: var(--_fg); } .ds-button:active, .wp-block-button .wp-block-button__link:active { transform: translateY(1px); } .ds-button:focus-visible, .wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 2px; } .ds-button svg { flex: none; width: 1.15em; height: 1.15em; } .ds-button--primary, .wp-block-button.is-style-go .wp-block-button__link, .dsq-acct #dsq-signup .ds-button { --_bg: var(--ds-blue); --_bg-hover: var(--ds-blue-deep); } .ds-button--primary:hover, .wp-block-button.is-style-go .wp-block-button__link:hover, .dsq-acct #dsq-signup .ds-button:hover { box-shadow: var(--ds-shadow-blue); } @media (prefers-reduced-motion: no-preference) { .ds-button--primary:hover:not(:disabled, .is-loading) { transform: translateY(-1px); } } .ds-button--secondary { --_bg: var(--ds-navy); --_bg-hover: var(--ds-navy-2); } .ds-button--outline, .wp-block-button.is-style-outline .wp-block-button__link { --_bg: transparent; --_fg: var(--ds-navy); --_bd: var(--ds-border-strong); --_bg-hover: var(--ds-surface-2); } .ds-button--outline:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--ds-navy); } .ds-button--ghost { --_bg: transparent; --_fg: var(--ds-blue-deep); --_bg-hover: var(--ds-blue-soft); padding-inline: 0.75rem; } .ds-button--ghost:hover { color: var(--ds-navy); } .ds-button--danger { --_bg: transparent; --_fg: var(--ds-muted); --_bd: transparent; --_bg-hover: var(--ds-danger-tint); padding-inline: 0.75rem; } .ds-button--danger:hover { color: var(--ds-danger); } /* quiet until pointed at, so it never competes with the blue primary action */ .ds-button--light, .wp-block-button.is-style-saffron .wp-block-button__link { --_bg: #fff; --_fg: var(--ds-navy); --_bg-hover: var(--ds-mist); } .ds-button--sm { min-height: var(--ds-control-sm); padding-inline: 0.9rem; font-size: var(--ds-text-xs); } .ds-button--lg { min-height: var(--ds-control-lg); padding-inline: 1.6rem; font-size: 1rem; } .ds-button--xl { min-height: 3.75rem; padding-inline: 2rem; border-radius: var(--ds-radius-lg); font-size: 1.0625rem; } .ds-button--block { display: flex; width: 100%; } .ds-button:disabled, .ds-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; } .ds-button.is-loading, .ds-button[aria-busy="true"] { cursor: progress; pointer-events: none; } .ds-button.is-loading::before, .ds-button[aria-busy="true"]::before { content: ""; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ds-spin 0.7s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } } /* Done (2.0.0): a button that finished its job ("Added", "Saved") turns status green with a tick. */ .ds-button.is-done { --_bg: var(--ds-success); --_bg-hover: var(--ds-success); --_fg: #fff; --_bd: transparent; pointer-events: none; } .ds-button.is-done::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--ds-icon-check) center / contain no-repeat; mask: var(--ds-icon-check) center / contain no-repeat; } @media (prefers-reduced-motion: no-preference) { .ds-button.is-done { animation: ds-bump var(--ds-dur-3) var(--ds-ease-out); } } @keyframes ds-bump { 0% { transform: scale(0.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } } /* A button that looks like a link (remove coupon, small inline actions). */ .ds-link, .dsq-link-btn { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--ds-blue-deep); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .ds-link:hover, .dsq-link-btn:hover { color: var(--ds-navy); } /* ---- 4.2 Form fields ----------------------------------------------------- * Every input on the site: one height, border, radius and focus ring. :where() keeps this at * zero specificity, so a component (the search bar) can still restyle its own input. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], select, textarea { font: inherit; color: var(--ds-text); } :where(.wp-site-blocks, .editor-styles-wrapper) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], select, textarea) { box-sizing: border-box; max-width: 100%; min-height: var(--ds-control); margin: 0; padding-block: 0.55rem; padding-inline: 0.9rem; border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-md); background-color: var(--ds-surface); font-size: 1rem; /* 16px or more: phones do not zoom into the field */ line-height: 1.4; transition: border-color var(--ds-fast), box-shadow var(--ds-fast); } :where(.wp-site-blocks) :where(select) { -webkit-appearance: none; appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23647084' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 0.7rem auto; background-position: right 0.9rem center; cursor: pointer; } :where([dir="rtl"]) :where(.wp-site-blocks) :where(select:not([dir="ltr"])) { background-position: left 0.9rem center; } :where(.wp-site-blocks) :where(textarea) { min-height: 7rem; } :where(.wp-site-blocks) :where(input, select, textarea):hover { border-color: var(--ds-border-strong); } :where(.wp-site-blocks) :where(input, select, textarea):focus { outline: none; border-color: var(--ds-blue); box-shadow: var(--ds-ring); } :where(.wp-site-blocks) :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--ds-danger); } :where(.wp-site-blocks) :where(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.18); } :where(.wp-site-blocks) :where(input, select, textarea):disabled, :where(.wp-site-blocks) :where(input[readonly]) { background-color: var(--ds-surface-2); color: var(--ds-muted); cursor: not-allowed; } :where(.wp-site-blocks) :where(input, textarea)::placeholder { color: var(--ds-subtle); opacity: 1; } :where(.wp-site-blocks) :where(input[type="checkbox"], input[type="radio"]) { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; vertical-align: middle; accent-color: var(--ds-blue); cursor: pointer; } /* A field = label + control + hint/error. Use .ds-field on the wrapper. */ .ds-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; min-width: 0; } .ds-field > label, .ds-label { color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.4; } .ds-field > input, .ds-field > select, .ds-field > textarea, .ds-field__control > input { width: 100%; } .ds-optional { color: var(--ds-muted); font-weight: 400; } .ds-hint { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-xs); line-height: 1.5; } .ds-error, .dsq-field-error { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0; color: var(--ds-danger); font-size: var(--ds-text-xs); font-weight: 600; line-height: 1.5; } .ds-error::before, .dsq-field-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-block-start: 0.1rem; border-radius: 50%; background: var(--ds-danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; } .ds-fields { display: grid; gap: var(--ds-space-5) var(--ds-space-4); } .ds-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-fields .ds-field--full { grid-column: 1 / -1; } @media (max-width: 600px) { .ds-fields--2 { grid-template-columns: 1fr; } } .ds-check { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; cursor: pointer; } /* Password field with a show/hide button (added by the plugin's ui.js). */ .ds-password { position: relative; display: block; } .ds-password > input { width: 100%; padding-inline-end: 4.75rem; } .ds-password__toggle { position: absolute; inset-block: 0.3rem; inset-inline-end: 0.3rem; min-height: 0; padding-inline: 0.7rem; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-blue-deep); font: inherit; font-size: var(--ds-text-xs); font-weight: 600; cursor: pointer; } .ds-password__toggle:hover { background: var(--ds-mist); color: var(--ds-navy); } /* ---- 4.3 Cards ----------------------------------------------------------- */ .ds-card { box-sizing: border-box; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-xs); } .ds-card--flush { padding: 0; overflow: hidden; } .ds-card--muted { background: var(--ds-surface-2); box-shadow: none; } .ds-card__title { margin: 0 0 var(--ds-space-1); font-size: var(--ds-text-h3); font-weight: 600; } .ds-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); margin-block-end: var(--ds-space-5); } .ds-card__head > :is(h2, h3) { margin: 0; font-size: var(--ds-text-h3); font-weight: 600; } .ds-card__sub { margin: 0; color: var(--ds-muted); font-size: var(--ds-text-sm); } /* Cards that lead somewhere rise a little on hover (2.0.0); still cards for reduced motion, just no movement. */ .ds-card--link, .ds-card--hover { transition: border-color var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2) var(--ds-ease), transform var(--ds-dur-2) var(--ds-ease-out); } .ds-card--link:hover, .ds-card--hover:hover, .ds-card--link:focus-within, .ds-card--hover:focus-within { border-color: var(--ds-border-strong); box-shadow: var(--ds-elev-2); } @media (prefers-reduced-motion: no-preference) { .ds-card--link:hover, .ds-card--hover:hover { transform: translateY(var(--ds-lift)); } } .ds-card--raised { box-shadow: var(--ds-elev-1); } .ds-card--deal { background: linear-gradient(180deg, var(--ds-amber-tint), var(--ds-surface) 70%); border-color: var(--ds-amber-line); } .ds-card--deal:hover { border-color: var(--ds-amber-strong); box-shadow: var(--ds-shadow-amber); } .ds-card--dark { background: var(--ds-navy); border-color: var(--ds-navy-2); color: var(--ds-on-dark-2); } .ds-card--dark :is(h2, h3, h4, .ds-card__title) { color: #fff; } /* ---- 4.4 Alerts (info, success, warning, error) --------------------------- */ .ds-alert { --_c: var(--ds-navy-2); --_bg: var(--ds-info-tint); display: flex; align-items: flex-start; gap: var(--ds-space-3); margin: 0 0 var(--ds-space-5); padding: 0.85rem 1rem; background: var(--_bg); border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent); border-radius: var(--ds-radius-md); color: var(--ds-text); font-size: var(--ds-text-sm); line-height: 1.55; } .ds-alert::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-block-start: 0.1rem; background: var(--_c); -webkit-mask: var(--_icon) center / contain no-repeat; mask: var(--_icon) center / contain no-repeat; } .ds-alert { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-6h2Zm0-8h-2V7h2Z'/%3E%3C/svg%3E"); } .ds-alert--success { --_c: var(--ds-success); --_bg: var(--ds-success-tint); --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4Z'/%3E%3C/svg%3E"); } .ds-alert--warning { --_c: var(--ds-warning-text); --_bg: var(--ds-warning-tint); --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 16h-2v-2h2Zm0-4h-2v-4h2Z'/%3E%3C/svg%3E"); } .ds-alert--error { --_c: var(--ds-danger); --_bg: var(--ds-danger-tint); --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2Zm0-4h-2V7h2Z'/%3E%3C/svg%3E"); } .ds-alert > :first-child { margin-block-start: 0; } .ds-alert > :last-child { margin-block-end: 0; } .ds-alert p { margin: 0; } .ds-alert ul { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; } .ds-alert strong { font-weight: 600; } /* ---- 4.5 Badges: status is icon/dot + word, never colour alone ------------ */ .ds-badge, .dsq-badge { --_c: var(--ds-muted); --_bg: var(--ds-mist); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: var(--ds-radius-pill); background: var(--_bg); color: var(--ds-text); font-size: var(--ds-text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; } .ds-badge::before, .dsq-badge::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--_c); } .ds-badge--success, .dsq-badge--active { --_c: var(--ds-success-mark); --_bg: var(--ds-success-tint); color: var(--ds-success); } .ds-badge--warning, .dsq-badge--warn { --_c: var(--ds-warning); --_bg: var(--ds-warning-tint); color: var(--ds-warning-text); } .ds-badge--premium { --_c: var(--ds-gold); --_bg: var(--ds-gold-tint); color: var(--ds-gold-text); } .ds-badge--danger, .dsq-badge--danger { --_c: var(--ds-danger); --_bg: var(--ds-danger-tint); color: var(--ds-danger); } .ds-badge--info { --_c: var(--ds-navy-2); --_bg: var(--ds-info-tint); color: var(--ds-navy-2); } .ds-badge--plain::before { display: none; } /* * Domain badges (2.0.0). Each says its state in a word and an icon, never colour alone: * Available (green tick), Taken (muted cross), Premium (gold, star), Sale / Offer (amber, tag), * Regional (soft blue, globe: an Arab country extension). */ .ds-badge--available, .ds-badge--taken, .ds-badge--premium, .ds-badge--sale, .ds-badge--offer, .ds-badge--regional { gap: 0.3rem; } :is(.ds-badge--available, .ds-badge--taken, .ds-badge--premium, .ds-badge--sale, .ds-badge--offer, .ds-badge--regional)::before { width: 0.85rem; height: 0.85rem; border-radius: 0; background: currentColor; -webkit-mask: var(--_icon) center / contain no-repeat; mask: var(--_icon) center / contain no-repeat; } .ds-badge--available { --_bg: var(--ds-success-tint); --_icon: var(--ds-icon-check); color: var(--ds-success); } .ds-badge--taken { --_bg: var(--ds-mist); --_icon: var(--ds-icon-x); color: var(--ds-muted); } .ds-badge--premium { --_bg: var(--ds-gold); --_icon: var(--ds-icon-star); color: var(--ds-on-amber); } .ds-badge--sale { --_bg: var(--ds-amber); --_icon: var(--ds-icon-tag); color: var(--ds-on-amber); } .ds-badge--offer { --_bg: var(--ds-amber-tint); --_icon: var(--ds-icon-tag); color: var(--ds-amber-text); box-shadow: inset 0 0 0 1px var(--ds-amber-line); } .ds-badge--regional { --_bg: var(--ds-blue-soft); --_icon: var(--ds-icon-globe); color: var(--ds-blue-deep); } .ds-tag { display: inline-flex; align-items: center; padding: 0.05rem 0.5rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 500; line-height: 1.6; white-space: nowrap; } /* ---- 4.6 Tables: sentence-case heads; on phones each row becomes a card --- */ .ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; } .ds-table th, .ds-table td { padding: 0.85rem 1.1rem; border-block-end: 1px solid var(--ds-border); text-align: start; vertical-align: middle; } .ds-table thead th { background: var(--ds-surface-2); color: var(--ds-muted); font-size: var(--ds-text-xs); font-weight: 600; white-space: nowrap; } .ds-table tbody tr:last-child > * { border-block-end: 0; } .ds-table tbody tr { transition: background-color var(--ds-fast); } .ds-table tbody tr:hover { background: var(--ds-surface-2); } .ds-table .ds-table__end { text-align: end; } .ds-table-wrap { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; } @media (max-width: 640px) { .ds-table--stack thead { display: none; } .ds-table--stack, .ds-table--stack tbody, .ds-table--stack tr, .ds-table--stack td, .ds-table--stack th { display: block; width: auto; } .ds-table--stack tr { padding: 0.9rem 1rem; border-block-end: 1px solid var(--ds-border); } .ds-table--stack tbody tr:last-child { border-block-end: 0; } .ds-table--stack td, .ds-table--stack th { padding: 0.2rem 0; border: 0; } .ds-table--stack td[data-label]::before { content: attr(data-label) " "; color: var(--ds-muted); font-size: var(--ds-text-xs); } .ds-table--stack .ds-table__end { text-align: start; margin-block-start: 0.5rem; } } /* ---- 4.7 Empty state ----------------------------------------------------- */ .ds-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-3); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) var(--ds-space-6); text-align: center; background: var(--ds-surface); border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-lg); } .ds-empty { background: radial-gradient(90% 70% at 50% 0%, var(--ds-blue-soft), var(--ds-surface) 65%); } /* 2.0.0: the icon is drawn as a small illustration: a soft disc, a dashed orbit and two dots (blue and amber). */ .ds-empty__icon { position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-block-end: var(--ds-space-2); border-radius: 50%; background: linear-gradient(145deg, #fff, var(--ds-blue-soft)); box-shadow: 0 8px 20px rgba(11, 95, 217, 0.14), inset 0 0 0 1px var(--ds-blue-line); color: var(--ds-blue); } .ds-empty__icon::before { content: ""; position: absolute; inset: -0.75rem; border: 1.5px dashed var(--ds-blue-line); border-radius: 50%; } .ds-empty__icon::after { content: ""; position: absolute; inset-block-start: -0.55rem; inset-inline-end: 0.15rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--ds-amber); box-shadow: -3.6rem 4.4rem 0 -0.12rem var(--ds-blue-light); } html[dir="rtl"] .ds-empty__icon::after { box-shadow: 3.6rem 4.4rem 0 -0.12rem var(--ds-blue-light); } @media (prefers-reduced-motion: no-preference) { .ds-empty__icon::before { animation: ds-orbit 24s linear infinite; } } @keyframes ds-orbit { to { transform: rotate(360deg); } } .ds-empty__icon svg { width: 1.75rem; height: 1.75rem; } .ds-empty__title { margin: var(--ds-space-1) 0 0; font-size: var(--ds-text-h3); font-weight: 600; } .ds-empty p { max-width: 30rem; margin: 0; color: var(--ds-muted); } .ds-empty .ds-button { margin-block-start: var(--ds-space-2); } .ds-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3); } .ds-empty__actions .ds-button { margin-block-start: var(--ds-space-2); } /* ---- 4.8 Steps (cart → details → payment) -------------------------------- */ .ds-steps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); margin: 0 0 var(--ds-space-6); padding: 0; list-style: none; font-size: var(--ds-text-sm); } .ds-steps-bar li { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; color: var(--ds-muted); font-weight: 500; } .ds-steps-bar li + li::before { content: ""; width: clamp(1rem, 3vw, 2.5rem); height: 1px; margin-inline-end: var(--ds-space-1); background: var(--ds-border-strong); } .ds-steps-bar__n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--ds-border-strong); border-radius: 50%; font-size: var(--ds-text-xs); font-weight: 700; font-variant-numeric: tabular-nums; } .ds-steps-bar [aria-current="step"] { color: var(--ds-text); font-weight: 600; } .ds-steps-bar [aria-current="step"] .ds-steps-bar__n { border-color: var(--ds-navy); background: var(--ds-navy); color: #fff; } .ds-steps-bar .is-done { color: var(--ds-success); } .ds-steps-bar .is-done .ds-steps-bar__n { border-color: var(--ds-success); background: var(--ds-success); color: #fff; } .ds-steps-bar .ds-steps-bar__n svg { width: 0.9rem; height: 0.9rem; } /* ---- 4.9 Skeleton loading ------------------------------------------------- */ .ds-skeleton { display: inline-block; min-width: 4rem; height: 0.9em; border-radius: var(--ds-radius-sm); background: linear-gradient(90deg, var(--ds-mist) 0%, var(--ds-surface-2) 50%, var(--ds-mist) 100%); background-size: 200% 100%; vertical-align: middle; } @media (prefers-reduced-motion: no-preference) { .ds-skeleton { animation: ds-shimmer 1.3s ease-in-out infinite; } } @keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ---- 4.10 Tabs (2.0.0) ------------------------------------------------------ * .ds-tabs > [role=tab] (or /