/** * ============================================================================ * Al-Bashayer — Light Theme v2 · "Dar Al-Rashid Warm" (Option B) * ============================================================================ * * Activated via [data-theme="light"] on . * * Strategy mirrors the previous Prism file's approach: use EXPLICIT colour * overrides (not just CSS variables) on every element that has a hardcoded * dark rgba(...) baked into redesign.css / wizard-dr.css / dashboard.css. * Otherwise the dark interior bleeds through and only the section * backgrounds switch. * * Approved palette (Option B — warm parchment + matte gold + deep emerald): * #FAF7F0 — warm ivory canvas (hero) * #F2EDE0 — pale sage-gold (services) * #F5E6C8 — soft sand-amber (steps) * #EAF0E8 — warm cream-green (trust) * #086348 — deep emerald · INVERTED (CTA strip, light text on dark) * #1C1A16 — warm charcoal · DARK (footer, light text on dark) * * #B8912A — matte burnished gold (brand) * #086348 — deep emerald (brand accent) * #B0321A — warm danger * #B8821E — warm warning * #2C5F9E — info (kept cobalt for status chips only) * #1E7A48 — success * * #1C1A16 — warm-charcoal ink * #4A3D24 — warm slate (secondary text) * #7A6A47 — warm muted (AA-clean, fixes 3.1:1 fail) * * Watermark approach (two redundant layers, both working): * • Per-section CSS-pattern watermark on the section itself * (works WITHOUT any PHP edit — backward-compatible) * • Optional .dr-section-watermark[data-watermark="…"] utility class * for the inserted
from the migration guide step 5 * * @package AlBashayer * @version 2.0.1 * ============================================================================ */ /* ═══════════════════════════════════════════════════════════════ 1 · CSS VARIABLE OVERRIDES ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; /* ── Six section backgrounds (Option B) ────────────────────── */ --color-hero-bg: #FAF7F0; --color-services-bg: #F2EDE0; --color-steps-bg: #F5E6C8; --color-trust-bg: #EAF0E8; --color-cta-bg: #086348; /* inverted dark strip */ --color-footer-bg: #1C1A16; /* dark warm charcoal */ /* ── Legacy --dr-bg* aliases ───────────────────────────────── */ --dr-bg: #FAF7F0; --dr-bg-2: #F2EDE0; --dr-bg-3: #F5E6C8; --dr-bg-light: #FBF6E4; --dr-bg-light-2: #FFFCEF; /* ── Semantic surfaces / borders ───────────────────────────── */ --color-bg: var(--color-hero-bg); --color-surface: #FBF6E4; --color-surface-2: #FFFCEF; --color-surface-deep: #E5DAB4; --color-border: #DCCC9A; --color-border-soft: #E8DCB2; --color-border-strong: #B89E5A; /* ── Gold (matte burnished — unchanged hex but new tones) ──── */ --dr-gold: #B8912A; --dr-gold-light: #C8A04A; --dr-gold-pale: #F0E3B5; --dr-gold-dim: rgba(184, 145, 42, .45); --dr-gold-glow: rgba(184, 145, 42, .14); --dr-gold-glow2: rgba(184, 145, 42, .06); --color-gold: #B8912A; --color-gold-hover: #C8A04A; --color-gold-muted: #F0E3B5; /* ── Accent palette (warm-rebalanced) ──────────────────────── */ --lt-emerald: #086348; --lt-emerald-2: #0A7558; --lt-cobalt: #2C5F9E; /* retained only for info chips */ --lt-cobalt-2: #3A75B8; --lt-amethyst: #6B3FA0; /* retired but kept for fallback */ --lt-amethyst-2: #8B55C4; --lt-coral: #B0321A; /* ── Green ─────────────────────────────────────────────────── */ --dr-green: #086348; --dr-green-bright: #0A7558; --color-accent: #086348; --color-accent-hover: #0A7558; --color-accent-muted: #D6E5DA; /* ── Text ──────────────────────────────────────────────────── */ --dr-text: #1C1A16; --dr-text-2: #4A3D24; --dr-text-3: #7A6A47; /* fixes WCAG AA fail (was #7A8799) */ --dr-text-dark: #1C1A16; --dr-text-dark-2: #4A3D24; --color-text-primary: #1C1A16; --color-text-secondary: #4A3D24; --color-text-muted: #7A6A47; --color-text-on-emerald: #FAF7F0; --color-text-on-gold: #1C1A16; /* fixes 2.97:1 → 4.92:1 */ /* ── Glass (warm dark-on-light tinted) ─────────────────────── */ --dr-glass: rgba(8, 99, 72, .05); --dr-glass-hover: rgba(8, 99, 72, .10); --dr-glass-border: rgba(184, 145, 42, .20); --dr-glass-border-h: rgba(184, 145, 42, .50); /* ── Feedback ──────────────────────────────────────────────── */ --color-success: #1E7A48; --color-success-muted: #C8E0CE; --color-warning: #B8821E; --color-warning-muted: #F4E3B0; --color-danger: #B0321A; --color-danger-muted: #EFCFC4; --color-info: #2C5F9E; --color-info-muted: #D8E1F2; /* ── Radius / Transitions (unchanged) ──────────────────────── */ --dr-r: 10px; --dr-r-lg: 18px; --dr-r-xl: 28px; --dr-t: .3s cubic-bezier(.4, 0, .2, 1); --dr-t-fast: .18s cubic-bezier(.4, 0, .2, 1); --dr-bounce: .45s cubic-bezier(.34, 1.56, .64, 1); /* ── Shadows (warm-toned) ──────────────────────────────────── */ --dr-shadow-card: 0 1px 4px rgba(74, 56, 14, .06), 0 8px 28px rgba(74, 56, 14, .08); --dr-shadow-gold: 0 0 0 1.5px rgba(184, 145, 42, .30), 0 8px 32px rgba(184, 145, 42, .14), 0 20px 56px rgba(74, 56, 14, .08); --dr-shadow-glow: 0 0 60px rgba(8, 99, 72, .18); /* ── WP presets ────────────────────────────────────────────── */ --wp--preset--color--surface: #FAF7F0; --wp--preset--color--surface-alt: #F2EDE0; --wp--preset--color--surface-elevated: #FBF6E4; --wp--preset--color--text-primary: #1C1A16; --wp--preset--color--text-secondary: #4A3D24; --wp--preset--color--text-muted: #7A6A47; --wp--preset--color--border: rgba(184, 145, 42, .20); --wp--preset--color--primary: #086348; --wp--preset--color--primary-light: #0A7558; --wp--preset--color--primary-dark: #064530; /* ── Watermark data-URI tokens (used by utility class below) ─ */ --watermark-hero: url("data:image/svg+xml;utf8,"); --watermark-services: url("data:image/svg+xml;utf8,"); --watermark-steps: url("data:image/svg+xml;utf8,"); --watermark-trust: url("data:image/svg+xml;utf8,"); --watermark-cta: url("data:image/svg+xml;utf8,"); --watermark-footer: url("data:image/svg+xml;utf8,"); } /* ═══════════════════════════════════════════════════════════════ 2 · BODY & GLOBAL PAGE BACKGROUNDS (explicit, not vars) ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] body { background-color: #FAF7F0; /* Warm gold dot-grid page-wide texture */ background-image: radial-gradient(circle, rgba(184, 145, 42, .08) 1.5px, transparent 1.5px); background-size: 28px 28px; color: #1C1A16; } [data-theme="light"] body.home, [data-theme="light"] body.page-template-page-services, [data-theme="light"] body.post-type-archive-ab_service, [data-theme="light"] body.single-ab_service, [data-theme="light"] body.ab-page-dashboard { background-color: #FAF7F0; background-image: radial-gradient(circle, rgba(184, 145, 42, .08) 1.5px, transparent 1.5px); background-size: 28px 28px; color: #1C1A16; } /* ═══════════════════════════════════════════════════════════════ 3 · FIXED LIGHT-SPOT OVERLAY Warm gold + emerald halos that stay anchored on scroll. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 55% 46% at 6% 14%, rgba(184, 145, 42, .11), transparent 68%), radial-gradient(ellipse 44% 38% at 94% 10%, rgba(184, 145, 42, .08), transparent 62%), radial-gradient(ellipse 48% 54% at 88% 74%, rgba(8, 99, 72, .10), transparent 66%), radial-gradient(ellipse 40% 44% at 8% 86%, rgba(8, 99, 72, .07), transparent 60%), radial-gradient(ellipse 32% 28% at 50% 50%, rgba(176, 50, 26, .04), transparent 55%); } /* Lift the page above the halo layer above — but not the fixed chrome. `body > *` is indiscriminate: it was also rewriting the header's `position: fixed; z-index: 1000` to `position: relative; z-index: 1`, so in the light theme (the default) the navigation bar was not fixed at all and scrolled away with the page, and the mobile menu sheet dropped into normal flow instead of covering the viewport. Anything that positions itself against the viewport has to be left alone here. `#wpadminbar` needs no exclusion — its own ID selector already outranks this. The :not() list keeps this at one class of specificity rather than four. `.ab-preview` is on the list for the same reason and caught the same way: the document preview modal is a body-level child, so this rule turned its `position: fixed` into `relative` and it rendered as a panel further down the page instead of over it, with the backdrop covering only the part of the viewport it happened to occupy. Anything added at body level that positions itself against the viewport belongs here. */ [data-theme="light"] body > *:not(.dr-nav, .dr-nav__mobile, .dr-nav__scrim, .ab-preview) { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ 4 · NAVIGATION (overrides hardcoded rgba(6,13,9,...) in redesign.css) ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-nav.scrolled { background: rgba(250, 247, 240, .96) !important; backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); box-shadow: 0 4px 20px rgba(74, 56, 14, .08); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #086348 0%, #B8912A 50%, #086348 100%) 1; } [data-theme="light"] .dr-nav__menu a { color: #4A3D24; } [data-theme="light"] .dr-nav__menu a:hover { color: #086348; } [data-theme="light"] .dr-nav__menu a::after { background: #B8912A; } [data-theme="light"] .dr-nav__lang { background: rgba(8, 99, 72, .07); border-color: rgba(184, 145, 42, .30); } [data-theme="light"] .dr-nav__lang a.active { background: #086348; color: #FAF7F0; } [data-theme="light"] .dr-nav__lang a:not(.active):hover { color: #086348; } [data-theme="light"] .dr-nav__hamburger span { background: #1C1A16; } /* Mobile menu — was rgba(6,13,9,.97) */ [data-theme="light"] .dr-nav__mobile { background: #FAF7F0; border-top: 1px solid rgba(184, 145, 42, .28); box-shadow: 0 18px 40px rgba(74, 56, 14, .18); } [data-theme="light"] .dr-nav__scrim { background: rgba(74, 56, 14, .35); } [data-theme="light"] .dr-nav__mobile-item { color: #4A3D24; } [data-theme="light"] .dr-nav__mobile-item:hover, [data-theme="light"] .dr-nav__mobile-item:focus-visible { color: #086348; background: rgba(8, 99, 72, .07); border-color: rgba(8, 99, 72, .18); } [data-theme="light"] .dr-nav__mobile-item--lang { color: #8A6A1F; } /* Auth nav */ [data-theme="light"] .ab-auth-nav { background: rgba(250, 247, 240, .97); border-bottom: 1px solid rgba(184, 145, 42, .20); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="light"] .ab-auth-nav__label { color: #4A3D24; } [data-theme="light"] .ab-auth-nav__back, [data-theme="light"] .ab-auth-nav__lang { color: #4A3D24; border-color: rgba(184, 145, 42, .30); } [data-theme="light"] .ab-auth-nav__back:hover, [data-theme="light"] .ab-auth-nav__lang:hover { color: #086348; border-color: #086348; } /* ═══════════════════════════════════════════════════════════════ 5 · HERO — warm ivory + 8-point-star watermark + gold/emerald halos ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-hero { background-color: #FAF7F0 !important; position: relative; overflow: hidden; } /* Override hardcoded rgba(11,28,18,.8) gradient */ [data-theme="light"] .dr-hero__gradient { background: radial-gradient(ellipse 65% 55% at 62% 18%, rgba(184, 145, 42, .10), transparent 70%), radial-gradient(ellipse 48% 50% at 10% 72%, rgba(8, 99, 72, .08), transparent 65%), radial-gradient(ellipse 80% 35% at 50% 105%, rgba(250, 247, 240, .9), transparent); } /* Decorative rotating ring */ [data-theme="light"] .dr-hero__ring { border: 1.5px solid rgba(184, 145, 42, .18); width: 420px; height: 420px; box-shadow: 0 0 60px rgba(184, 145, 42, .08); } [data-theme="light"] .dr-hero__ring::before { border: 1px dashed rgba(8, 99, 72, .14); } [data-theme="light"] .dr-hero__noise { opacity: .015; } /* Islamic geometric watermark — 8-point star dot grid */ [data-theme="light"] .dr-hero__pattern-wrap { opacity: .10; background-image: radial-gradient(circle, rgba(184, 145, 42, 1) 1px, transparent 1px), radial-gradient(circle, rgba(8, 99, 72, 1) 1px, transparent 1px); background-size: 40px 40px, 40px 40px; background-position: 0 0, 20px 20px; } /* Hero ambient orbs */ [data-theme="light"] .dr-hero__orb--1 { background: radial-gradient(circle, rgba(184, 145, 42, .12), transparent 70%); } [data-theme="light"] .dr-hero__orb--2 { background: radial-gradient(circle, rgba(8, 99, 72, .10), transparent 70%); } /* Eyebrow badge */ [data-theme="light"] .dr-hero__eyebrow { background: rgba(8, 99, 72, .08); border-color: rgba(8, 99, 72, .26); color: #086348; } [data-theme="light"] .dr-hero__eyebrow-dot { background: #086348; box-shadow: 0 0 8px rgba(8, 99, 72, .7); } /* Override hardcoded dark float cards rgba(17,37,24,.85) */ [data-theme="light"] .dr-float-card { background: #FBF6E4 !important; border: 1.5px solid rgba(184, 145, 42, .22); box-shadow: 0 8px 32px rgba(74, 56, 14, .10); } [data-theme="light"] .dr-float-card__title { color: #1C1A16; } [data-theme="light"] .dr-float-card__status { color: #086348; } [data-theme="light"] .dr-float-card__status-dot { background: #086348; box-shadow: 0 0 6px rgba(8, 99, 72, .7); } /* Stats strip */ [data-theme="light"] .dr-hero__stats { background: rgba(251, 246, 228, .86); border: 1px solid rgba(184, 145, 42, .22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 20px rgba(74, 56, 14, .08); } [data-theme="light"] .dr-hero__stat { border-inline-end-color: rgba(184, 145, 42, .16); } [data-theme="light"] .dr-hero__stat-label { color: #7A6A47; } /* ═══════════════════════════════════════════════════════════════ 6 · SERVICES — pale sage-gold + diamond-grid watermark + emerald→gold borders ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-services { background-color: #F2EDE0 !important; /* Diamond-grid geometric watermark */ background-image: repeating-linear-gradient(45deg, transparent 0 18px, rgba(184, 145, 42, .07) 18px 19px), repeating-linear-gradient(-45deg, transparent 0 18px, rgba(184, 145, 42, .07) 18px 19px); position: relative; overflow: hidden; border-block-start: 3px solid transparent; border-image: linear-gradient(90deg, transparent, #086348 25%, #B8912A 55%, #086348 80%, transparent) 1; } /* Gold + emerald ambient spots */ [data-theme="light"] .dr-services::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 90% 20%, rgba(184, 145, 42, .12), transparent 60%), radial-gradient(ellipse 40% 55% at 95% 85%, rgba(8, 99, 72, .08), transparent 58%); } [data-theme="light"] .dr-services__viewall { color: #086348; border-bottom-color: rgba(8, 99, 72, .30); } [data-theme="light"] .dr-services__viewall:hover { color: #0A7558; border-color: #086348; } /* Service cards — emerald→gold gradient borders */ [data-theme="light"] .dr-service-card { background: linear-gradient(#FBF6E4, #FBF6E4) padding-box, linear-gradient(135deg, #086348 0%, #B8912A 100%) border-box; border: 1.5px solid transparent; box-shadow: 0 2px 8px rgba(74, 56, 14, .07); } [data-theme="light"] .dr-service-card:hover { transform: translateY(-7px); box-shadow: 0 16px 48px rgba(8, 99, 72, .18), 0 4px 12px rgba(74, 56, 14, .09); } [data-theme="light"] .dr-service-card__icon { background: linear-gradient(135deg, rgba(8, 99, 72, .16), rgba(184, 145, 42, .08)); border: 1px solid rgba(184, 145, 42, .22); color: #086348; } [data-theme="light"] .dr-service-card__title { color: #1C1A16; } [data-theme="light"] .dr-service-card__desc { color: #4A3D24; } [data-theme="light"] .dr-service-card__count { background: rgba(184, 145, 42, .12); border-color: rgba(184, 145, 42, .22); color: #8C6B1F; } [data-theme="light"] .dr-service-card__arrow { background: rgba(184, 145, 42, .14); color: #8C6B1F; } [data-theme="light"] .dr-service-card:hover .dr-service-card__arrow { background: #B8912A; color: #1C1A16; } /* ═══════════════════════════════════════════════════════════════ 7 · SERVICES ARCHIVE / SINGLE — page hero + filter bar ═══════════════════════════════════════════════════════════════ */ /* Override hardcoded dark .dr-page-hero__gradient rgba(11,28,18,.98) */ [data-theme="light"] .dr-page-hero__gradient { background: radial-gradient(ellipse 70% 80% at 30% 50%, rgba(8, 99, 72, .07) 0%, transparent 75%), linear-gradient(160deg, #FAF7F0 0%, #F2EDE0 50%, #FAF7F0 100%); } [data-theme="light"] .dr-page-hero__orb { background: radial-gradient(circle, rgba(184, 145, 42, .10) 0%, transparent 65%); } /* Override hardcoded dark .dr-filter-bar rgba(6,13,9,.9) */ [data-theme="light"] .dr-filter-bar { background: rgba(250, 247, 240, .96) !important; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-block-color: rgba(184, 145, 42, .20); } [data-theme="light"] .dr-filter-tab { color: #4A3D24; } [data-theme="light"] .dr-filter-tab:hover { color: #086348; } [data-theme="light"] .dr-filter-tab.active { color: #086348; } [data-theme="light"] .dr-filter-tab.active::after { background: #086348; } /* Service detail step body (hardcoded rgba(6,13,9,.5)) */ [data-theme="light"] .dr-det-step__body { background: rgba(242, 237, 224, .7) !important; border-block-start-color: rgba(184, 145, 42, .20); } [data-theme="light"] .dr-det-step__summary { color: #1C1A16; } /* ═══════════════════════════════════════════════════════════════ 8 · HOW IT WORKS — sand-amber + hexagon watermark + emerald→gold borders ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-steps { background-color: #F5E6C8 !important; /* Hexagon-band watermark, top edge */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-position: top center; background-size: 56px 48px; position: relative; overflow: hidden; border-block-start: 3px solid transparent; border-image: linear-gradient(90deg, transparent, #B8912A 30%, #086348 65%, #B8912A 88%, transparent) 1; } [data-theme="light"] .dr-steps::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 65% at 2% 50%, rgba(8, 99, 72, .08), transparent 60%), radial-gradient(ellipse 38% 45% at 98% 25%, rgba(184, 145, 42, .10), transparent 55%); } [data-theme="light"] .dr-steps .dr-section-label span { color: #8C6B1F; } [data-theme="light"] .dr-steps .dr-section-title { color: #1C1A16; } [data-theme="light"] .dr-steps .dr-section-subtitle { color: #4A3D24; } [data-theme="light"] .dr-steps .dr-section-label::before { background: linear-gradient(to right, transparent, rgba(184, 145, 42, .40)); } [dir="rtl"] [data-theme="light"] .dr-steps .dr-section-label::before { background: linear-gradient(to left, transparent, rgba(184, 145, 42, .40)); } [data-theme="light"] .dr-steps .dr-section-label::after { background: linear-gradient(to left, transparent, rgba(184, 145, 42, .40)); } [dir="rtl"] [data-theme="light"] .dr-steps .dr-section-label::after { background: linear-gradient(to right, transparent, rgba(184, 145, 42, .40)); } /* Step cards — emerald→gold gradient borders */ [data-theme="light"] .dr-step-card { background: linear-gradient(#FBF6E4, #FBF6E4) padding-box, linear-gradient(135deg, #086348 0%, #B8912A 100%) border-box; border: 1.5px solid transparent; box-shadow: 0 2px 10px rgba(74, 56, 14, .07); } [data-theme="light"] .dr-step-card:hover { box-shadow: 0 12px 40px rgba(8, 99, 72, .16), 0 4px 12px rgba(74, 56, 14, .08); transform: translateY(-6px); } [data-theme="light"] .dr-step-card__number { background: linear-gradient(135deg, #086348, #B8912A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .dr-step-card__icon { background: linear-gradient(135deg, rgba(8, 99, 72, .14), rgba(184, 145, 42, .10)); border-color: rgba(184, 145, 42, .22); color: #086348; } [data-theme="light"] .dr-step-card__title { color: #1C1A16; } [data-theme="light"] .dr-step-card__desc { color: #4A3D24; } /* ═══════════════════════════════════════════════════════════════ 9 · TRUST / STATS — cream-green + concentric-ring watermark ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-trust { background-color: #EAF0E8 !important; /* Concentric compass-ring watermark, centred */ background-image: radial-gradient(circle at 50% 50%, transparent 99px, rgba(8, 99, 72, .08) 100px, transparent 101px), radial-gradient(circle at 50% 50%, transparent 149px, rgba(184, 145, 42, .06) 150px, transparent 151px), radial-gradient(circle at 50% 50%, transparent 199px, rgba(8, 99, 72, .05) 200px, transparent 201px), radial-gradient(circle at 50% 50%, transparent 249px, rgba(184, 145, 42, .04) 250px, transparent 251px); position: relative; overflow: hidden; } [data-theme="light"] .dr-trust::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(184, 145, 42, .10), transparent 65%), radial-gradient(ellipse 30% 35% at 10% 20%, rgba(8, 99, 72, .06), transparent 50%); } [data-theme="light"] .dr-trust::after { background: linear-gradient(to right, transparent, rgba(184, 145, 42, .30), transparent); } /* Trust cards — emerald→gold gradient borders */ [data-theme="light"] .dr-trust-card { background: linear-gradient(#FBF6E4, #FBF6E4) padding-box, linear-gradient(135deg, #086348 0%, #B8912A 100%) border-box; border: 1.5px solid transparent; backdrop-filter: none; box-shadow: 0 2px 10px rgba(74, 56, 14, .07); } [data-theme="light"] .dr-trust-card:hover { box-shadow: 0 12px 40px rgba(8, 99, 72, .16), 0 4px 12px rgba(74, 56, 14, .08); transform: translateY(-5px); } [data-theme="light"] .dr-trust-card__label { color: #1C1A16; } [data-theme="light"] .dr-trust-card__desc { color: #4A3D24; } [data-theme="light"] .dr-trust-card__icon { color: #B8912A; } /* ═══════════════════════════════════════════════════════════════ 10 · CTA — INVERTED dark emerald strip with gold medallion watermark ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-cta { background-color: #086348 !important; /* Medallion watermark + radial gold bloom */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 280px 280px; color: #FAF7F0; position: relative; overflow: hidden; border-block-start: 3px solid transparent; border-image: linear-gradient(90deg, transparent, #B8912A 30%, #FAF7F0 50%, #B8912A 70%, transparent) 1; } [data-theme="light"] .dr-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(184, 145, 42, .18), transparent 65%), radial-gradient(ellipse 35% 45% at 15% 80%, rgba(250, 247, 240, .06), transparent 55%); } [data-theme="light"] .dr-cta::after { background: linear-gradient(to right, transparent 10%, rgba(184, 145, 42, .40) 50%, transparent 90%); } /* All CTA-internal text inherits light colour */ [data-theme="light"] .dr-cta h1, [data-theme="light"] .dr-cta h2, [data-theme="light"] .dr-cta h3, [data-theme="light"] .dr-cta p, [data-theme="light"] .dr-cta .dr-section-title, [data-theme="light"] .dr-cta .dr-section-subtitle { color: #FAF7F0; } [data-theme="light"] .dr-cta .dr-section-label span { color: #B8912A; } [data-theme="light"] .dr-cta .dr-section-subtitle { color: rgba(250, 247, 240, .78); } /* ═══════════════════════════════════════════════════════════════ 11 · FOOTER — DARK warm charcoal with light text + gold links ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-footer { background-color: #1C1A16 !important; background-image: none !important; /* no diagonal stripe — watermark div handles the motif */ color: #FAF7F0; border-top: 3px solid transparent; border-image: linear-gradient(90deg, #086348 0%, #B8912A 50%, #086348 100%) 1; position: relative; overflow: hidden; } /* Subtle warm radial glow at two corners — gives depth without lines */ [data-theme="light"] .dr-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 70% at 90% 110%, rgba(184, 145, 42, .10), transparent 55%), radial-gradient(ellipse 40% 50% at 5% -10%, rgba(8, 99, 72, .12), transparent 50%); } [data-theme="light"] .dr-footer__grid { border-bottom: 1px solid rgba(250, 247, 240, .12); } [data-theme="light"] .dr-footer__brand-name { color: #FAF7F0; font-size: 1.5rem; } [data-theme="light"] .dr-footer__tagline { color: rgba(250, 247, 240, .72); font-size: .92rem; line-height: 1.8; } [data-theme="light"] .dr-footer__col-title { color: #B8912A; /* warm gold instead of flat white — stands out without shouting */ font-size: .82rem; letter-spacing: .18em; } [data-theme="light"] .dr-footer__links a { font-size: .92rem; color: rgba(250, 247, 240, .78); } [data-theme="light"] .dr-footer__social a { background: rgba(184, 145, 42, .10); border: 1px solid rgba(184, 145, 42, .30); color: #FAF7F0; } [data-theme="light"] .dr-footer__social a:hover { background: rgba(184, 145, 42, .25); border-color: #B8912A; color: #B8912A; } [data-theme="light"] .dr-footer a:hover { color: #B8912A; } /* Phone / tel links — force LTR so the number reads left-to-right in RTL pages */ [data-theme="light"] .dr-footer a[href^="tel"], .dr-footer a[href^="tel"] { direction: ltr; unicode-bidi: embed; display: inline-block; } [data-theme="light"] .dr-footer__bottom { border-top: 1px solid rgba(250, 247, 240, .10); color: rgba(250, 247, 240, .55); font-size: .85rem; } [data-theme="light"] .dr-footer__copy, [data-theme="light"] .dr-footer__legal a { font-size: .83rem; } /* ═══════════════════════════════════════════════════════════════ 12 · WIZARD — fixes all hardcoded dark values in wizard-dr.css ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-wiz-wrap { background-color: #FAF7F0 !important; color: #1C1A16; } /* Override the linear-gradient(160deg, #060D09 ...) hardcoded bg */ [data-theme="light"] .dr-wiz-bg__gradient { background: radial-gradient(ellipse 60% 70% at 80% 20%, rgba(184, 145, 42, .10), transparent 60%), radial-gradient(ellipse 50% 60% at 10% 80%, rgba(8, 99, 72, .07), transparent 60%), linear-gradient(160deg, #FAF7F0 0%, #F2EDE0 60%, #FAF7F0 100%); } [data-theme="light"] .dr-wiz-bg__pattern { opacity: .08; } /* Step circles — override rgba(6,13,9,.8) */ [data-theme="light"] .dr-wiz-step__circle { background: #FBF6E4 !important; border-color: rgba(184, 145, 42, .30); color: #7A6A47; box-shadow: 0 2px 8px rgba(74, 56, 14, .08); } [data-theme="light"] .dr-wiz-step--active .dr-wiz-step__circle { background: #B8912A !important; border-color: #B8912A; color: #1C1A16; box-shadow: 0 0 0 4px rgba(184, 145, 42, .20); } [data-theme="light"] .dr-wiz-step--done .dr-wiz-step__circle { background: rgba(8, 99, 72, .14) !important; border-color: rgba(8, 99, 72, .40); color: #086348; } /* Wizard step connector line */ [data-theme="light"] .dr-wiz-step__line { background: rgba(184, 145, 42, .22); } [data-theme="light"] .dr-wiz-step--done .dr-wiz-step__line { background: #086348; } /* Wizard step labels */ [data-theme="light"] .dr-wiz-step__label { color: #7A6A47; } [data-theme="light"] .dr-wiz-step--active .dr-wiz-step__label { color: #1C1A16; font-weight: 600; } [data-theme="light"] .dr-wiz-step--done .dr-wiz-step__label { color: #086348; } /* Wizard bottom nav — was rgba(6,13,9,.98) */ [data-theme="light"] .dr-wiz-nav { background: linear-gradient(to top, rgba(250, 247, 240, .98) 60%, transparent) !important; border-top: 1px solid rgba(184, 145, 42, .22); } /* Wizard progress bar */ [data-theme="light"] .dr-wiz-progress { background: rgba(184, 145, 42, .14); } [data-theme="light"] .dr-wiz-progress__bar { background: linear-gradient(90deg, #086348, #B8912A); } /* Wizard panel / card */ [data-theme="light"] .dr-wiz-panel { background: #FBF6E4 !important; border: 1px solid rgba(184, 145, 42, .22); border-radius: 16px; box-shadow: 0 4px 20px rgba(74, 56, 14, .08); padding: clamp(1.25rem, 4vw, 2rem); } [data-theme="light"] .dr-wiz-panel__title { color: #1C1A16; } [data-theme="light"] .dr-wiz-panel__subtitle { color: #4A3D24; } /* Wizard inputs — .dr-wiz-field is a borderless wrapper; borders live on the inputs */ [data-theme="light"] .dr-wiz-field { background: transparent; border: none; box-shadow: none; color: #1C1A16; } [data-theme="light"] .dr-wiz-field:focus-within { border: none; box-shadow: none; } [data-theme="light"] .dr-wiz-field__label { color: #7A6A47; } [data-theme="light"] .dr-wiz-field input, [data-theme="light"] .dr-wiz-field select, [data-theme="light"] .dr-wiz-field textarea { color: #1C1A16; background: transparent; } /* Wizard select option — hardcoded #0B1C12 bg */ [data-theme="light"] .dr-wiz-select option { background: #FBF6E4 !important; color: #1C1A16; } /* Wizard upload dropzone */ [data-theme="light"] .dr-wiz-dropzone { background: linear-gradient(180deg, #FFFCEF, #FBF6E4) !important; border: 1.5px dashed #B89E5A; color: #4A3D24; } [data-theme="light"] .dr-wiz-dropzone:hover { border-color: #B8912A; background: #F0E3B5 !important; } [data-theme="light"] .dr-wiz-dropzone__icon { background: #E5DAB4; color: #B8912A; } /* Wizard success screen */ [data-theme="light"] .dr-wiz-success__ref { background: #FBF6E4; border: 1px solid rgba(184, 145, 42, .30); color: #086348; font-family: 'Cormorant Garamond', serif; } /* ═══════════════════════════════════════════════════════════════ 13 · DASHBOARD — warm sidebar + cream cards + gold stat-stripes ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] body.ab-page-dashboard .ab-dashboard-sidebar { background: #FBF6E4; border-inline-end: none; box-shadow: 2px 0 0 0 transparent, 4px 0 20px rgba(74, 56, 14, .07); position: relative; } /* Gradient border via pseudo-element (border-image fails with border-radius) */ [data-theme="light"] body.ab-page-dashboard .ab-dashboard-sidebar::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 2px; background: linear-gradient(to bottom, #086348, #B8912A 50%, #086348); } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-link { color: #4A3D24; } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-link:hover { background: rgba(8, 99, 72, .06); color: #086348; } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-item.is-active .ab-sidebar-link { background: rgba(184, 145, 42, .16); color: #1C1A16; font-weight: 700; } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-item.is-active .ab-sidebar-link::before { background: linear-gradient(to bottom, #086348, #B8912A); } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-footer { border-block-start-color: rgba(184, 145, 42, .22); } [data-theme="light"] body.ab-page-dashboard .ab-lang-toggle { background: rgba(8, 99, 72, .06); border-color: rgba(184, 145, 42, .30); color: #086348; } [data-theme="light"] body.ab-page-dashboard .ab-theme-btn { background: rgba(8, 99, 72, .06); border-color: rgba(184, 145, 42, .30); color: #086348; } [data-theme="light"] body.ab-page-dashboard .ab-logout-link { color: rgba(176, 50, 26, .85); } [data-theme="light"] body.ab-page-dashboard .ab-logout-link:hover { color: #B0321A; } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-user-name { color: #1C1A16; } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-user-role { color: #7A6A47; } [data-theme="light"] body.ab-page-dashboard .ab-sidebar-avatar { background: linear-gradient(135deg, #F0E3B5, #D6E5DA); border: 2px solid #B8912A; color: #086348; } /* Page header */ [data-theme="light"] body.ab-page-dashboard .ab-page-header { border-block-end: 2px solid transparent; border-image: linear-gradient(to right, #086348, #B8912A, transparent) 1; } [data-theme="light"] body.ab-page-dashboard .ab-page-title { background: linear-gradient(135deg, #086348 0%, #B8912A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] body.ab-page-dashboard .ab-back-link { color: #086348; } /* Override hardcoded rgba(11,28,18,.72) on .ab-card */ [data-theme="light"] body.ab-page-dashboard .ab-card { background: #FBF6E4 !important; border: 1px solid rgba(184, 145, 42, .22); box-shadow: 0 2px 8px rgba(74, 56, 14, .07), 0 8px 24px rgba(74, 56, 14, .05); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] body.ab-page-dashboard .ab-card-header { background: rgba(184, 145, 42, .05); border-block-end-color: rgba(184, 145, 42, .20); } [data-theme="light"] body.ab-page-dashboard .ab-card-title { color: #086348; } /* Override hardcoded rgba(11,28,18,.72) on .ab-stat-card */ [data-theme="light"] body.ab-page-dashboard .ab-stat-card { background: #FBF6E4 !important; border: 1px solid rgba(184, 145, 42, .20); box-shadow: 0 2px 8px rgba(74, 56, 14, .07); } [data-theme="light"] body.ab-page-dashboard .ab-stat-number { color: #086348; } [data-theme="light"] body.ab-page-dashboard .ab-stat-label { color: #4A3D24; } /* Coloured top stripe per stat card position — emerald → gold cycle */ [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(1) .ab-stat-card, [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(1).ab-stat-card { border-top: 3px solid #086348; } [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(2) .ab-stat-card, [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(2).ab-stat-card { border-top: 3px solid #B8912A; } [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(3) .ab-stat-card, [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(3).ab-stat-card { border-top: 3px solid #1E7A48; } [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(4) .ab-stat-card, [data-theme="light"] body.ab-page-dashboard .ab-stat-cards-grid> :nth-child(4).ab-stat-card { border-top: 3px solid #B8821E; } /* Request rows */ [data-theme="light"] body.ab-page-dashboard .ab-request-row { background: #FBF6E4; border: 1px solid rgba(184, 145, 42, .22); } [data-theme="light"] body.ab-page-dashboard .ab-request-row:hover { background: rgba(184, 145, 42, .06); border-color: rgba(184, 145, 42, .40); box-shadow: 0 4px 16px rgba(8, 99, 72, .10); } [data-theme="light"] body.ab-page-dashboard .ab-request-row__title { color: #1C1A16; } [data-theme="light"] body.ab-page-dashboard .ab-request-row__ref { color: #B8912A; font-family: 'JetBrains Mono', monospace; } [data-theme="light"] body.ab-page-dashboard .ab-request-row__date { color: #7A6A47; } /* Timeline */ [data-theme="light"] body.ab-page-dashboard .ab-timeline-item::before { border-color: #FAF7F0; } [data-theme="light"] body.ab-page-dashboard .ab-timeline-dot { background: #086348; } [data-theme="light"] body.ab-page-dashboard .ab-timeline-line { background: rgba(184, 145, 42, .30); } /* ═══════════════════════════════════════════════════════════════ 14 · AUTH PAGES — emerald→gold gradient-border card ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .ab-auth-page { background-color: #FAF7F0; background-image: radial-gradient(circle, rgba(184, 145, 42, .08) 1.5px, transparent 1.5px); background-size: 28px 28px; color: #1C1A16; } [data-theme="light"] .ab-auth-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 55% 50% at 5% 12%, rgba(184, 145, 42, .12), transparent 65%), radial-gradient(ellipse 45% 45% at 95% 88%, rgba(8, 99, 72, .10), transparent 60%), radial-gradient(ellipse 32% 36% at 90% 12%, rgba(184, 145, 42, .09), transparent 55%), radial-gradient(ellipse 28% 32% at 8% 85%, rgba(8, 99, 72, .07), transparent 52%); } [data-theme="light"] .ab-auth-card { position: relative; z-index: 1; background: linear-gradient(#FBF6E4, #FBF6E4) padding-box, linear-gradient(135deg, #086348 0%, #B8912A 50%, #086348 100%) border-box; border: 2px solid transparent; box-shadow: 0 8px 40px rgba(74, 56, 14, .10); } [data-theme="light"] .ab-auth-card__title { color: #1C1A16; } [data-theme="light"] .ab-auth-card__sub { color: #4A3D24; } [data-theme="light"] .ab-input, [data-theme="light"] .ab-select, [data-theme="light"] .ab-textarea { background: #FFFCEF; border-color: rgba(184, 145, 42, .30); color: #1C1A16; } [data-theme="light"] .ab-input:focus, [data-theme="light"] .ab-select:focus, [data-theme="light"] .ab-textarea:focus { border-color: #086348; background: #FBF6E4; box-shadow: 0 0 0 3px rgba(8, 99, 72, .12); } [data-theme="light"] .ab-input::placeholder, [data-theme="light"] .ab-textarea::placeholder { color: #B89E5A; } /* ═══════════════════════════════════════════════════════════════ 15 · CALLOUT BANNERS + WORKFLOW STATUS BADGES ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .ab-callout--warning { background: rgba(184, 130, 30, .10); border-color: rgba(184, 130, 30, .30); color: #6A4A0E; } [data-theme="light"] .ab-callout--error { background: rgba(176, 50, 26, .08); border-color: rgba(176, 50, 26, .28); color: #7A1F0E; } [data-theme="light"] .ab-callout--success { background: rgba(30, 122, 72, .10); border-color: rgba(30, 122, 72, .28); color: #0E4A2A; } [data-theme="light"] .ab-callout--info { background: rgba(44, 95, 158, .10); border-color: rgba(44, 95, 158, .28); color: #1E3A6E; } /* Workflow status badges — light theme values */ [data-theme="light"] .ab-badge-draft, [data-theme="light"] .badge--draft { background: #E8E0C8; color: #5A4C2A; } [data-theme="light"] .ab-badge-pending, [data-theme="light"] .badge--pending { background: #F4E3B0; color: #6A4A0E; } [data-theme="light"] .ab-badge-review, [data-theme="light"] .badge--review { background: #D8E1F2; color: #1E3A6E; } [data-theme="light"] .ab-badge-process, [data-theme="light"] .badge--processing { background: #E0D6EE; color: #4A2A78; } [data-theme="light"] .badge--revision { background: #F4D8C8; color: #6A2E10; } [data-theme="light"] .ab-badge-completed, [data-theme="light"] .badge--completed { background: #C8E0CE; color: #0E4A2A; } [data-theme="light"] .ab-badge-rejected, [data-theme="light"] .badge--rejected { background: #EFCFC4; color: #7A1F0E; } /* ═══════════════════════════════════════════════════════════════ 16 · SEARCH + FILTER TABS ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .ab-search-field { background: #FBF6E4; border-color: rgba(184, 145, 42, .30); color: #1C1A16; } [data-theme="light"] .ab-search-field:focus { border-color: #086348; box-shadow: 0 0 0 3px rgba(8, 99, 72, .10); } [data-theme="light"] .ab-search-field::placeholder { color: #B89E5A; } [data-theme="light"] .ab-search-icon { color: #7A6A47; } [data-theme="light"] .ab-search-clear { color: #B0321A; } [data-theme="light"] body.ab-page-dashboard .ab-status-tab { color: #4A3D24; } [data-theme="light"] body.ab-page-dashboard .ab-status-tab:hover { color: #086348; } [data-theme="light"] body.ab-page-dashboard .ab-status-tab.is-active { background: #086348; color: #FAF7F0; border-color: #086348; } /* ═══════════════════════════════════════════════════════════════ 17 · PRIMARY BUTTON CONTRAST FIX White on gold = 2.97 : 1 fail. Dark ink on gold = 4.92 : 1 pass. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-btn-primary, [data-theme="light"] .ab-btn-primary, [data-theme="light"] .btn-primary, [data-theme="light"] .dr-cta__btn-primary { background: linear-gradient(180deg, #C8A04A 0%, #B8912A 100%) !important; color: #1C1A16 !important; border-color: transparent; box-shadow: 0 0 0 1px rgba(184, 145, 42, .30), 0 8px 22px rgba(184, 145, 42, .18); } [data-theme="light"] .dr-btn-primary:hover, [data-theme="light"] .ab-btn-primary:hover, [data-theme="light"] .btn-primary:hover, [data-theme="light"] .dr-cta__btn-primary:hover { background: linear-gradient(180deg, #D8B05A 0%, #C8A04A 100%) !important; color: #1C1A16 !important; } /* Secondary outline buttons */ [data-theme="light"] .dr-btn-secondary, [data-theme="light"] .ab-btn-secondary, [data-theme="light"] .btn-secondary { background: transparent; color: #086348; border: 1px solid #086348; } [data-theme="light"] .dr-btn-secondary:hover, [data-theme="light"] .ab-btn-secondary:hover, [data-theme="light"] .btn-secondary:hover { background: rgba(8, 99, 72, .08); } /* Inside the inverted CTA strip — gold button still uses dark ink */ [data-theme="light"] .dr-cta .dr-btn-primary, [data-theme="light"] .dr-cta .ab-btn-primary, [data-theme="light"] .dr-cta .btn-primary { background: linear-gradient(180deg, #C8A04A 0%, #B8912A 100%) !important; color: #1C1A16 !important; box-shadow: 0 8px 22px rgba(184, 145, 42, .30); } [data-theme="light"] .dr-cta .dr-btn-secondary, [data-theme="light"] .dr-cta .ab-btn-secondary { background: transparent; color: #FAF7F0; border-color: rgba(250, 247, 240, .40); } [data-theme="light"] .dr-cta .dr-btn-secondary:hover, [data-theme="light"] .dr-cta .ab-btn-secondary:hover { background: rgba(250, 247, 240, .10); border-color: #FAF7F0; } /* ═══════════════════════════════════════════════════════════════ 18 · THEME TOGGLE BUTTON (in nav) ═══════════════════════════════════════════════════════════════ */ .dr-nav__theme-toggle, .ab-auth-nav__theme-toggle, .dr-nav__logout, .dr-nav__staff { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(200, 168, 75, .10); border: 1.5px solid rgba(200, 168, 75, .32); border-radius: 50%; color: rgba(242, 234, 214, .78); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; } .dr-nav__theme-toggle:hover, .ab-auth-nav__theme-toggle:hover { background: rgba(200, 168, 75, .18); border-color: rgba(200, 168, 75, .6); color: #C8A84B; transform: scale(1.1) rotate(15deg); box-shadow: 0 0 18px rgba(200, 168, 75, .3); } [data-theme="light"] .dr-nav__theme-toggle, [data-theme="light"] .ab-auth-nav__theme-toggle, [data-theme="light"] .dr-nav__logout, [data-theme="light"] .dr-nav__staff { background: rgba(184, 145, 42, .10); border-color: rgba(184, 145, 42, .36); color: #8C6B1F; } [data-theme="light"] .dr-nav__theme-toggle:hover, [data-theme="light"] .ab-auth-nav__theme-toggle:hover { background: rgba(184, 145, 42, .18); border-color: #B8912A; color: #B8912A; transform: scale(1.1) rotate(-15deg); box-shadow: 0 0 18px rgba(184, 145, 42, .28); } /* Logout shares the toggle's shape but not its playful rotate — and it warms to red rather than gold, because it is the one control in the bar that ends the session. The icon points out of the door, so it has to mirror in RTL. */ .dr-nav__logout, .dr-nav__staff { text-decoration: none; } /* Staff keeps the gold accent — it is a destination, not a warning. */ .dr-nav__staff:hover, [data-theme="light"] .dr-nav__staff:hover { background: rgba(184, 145, 42, .20); border-color: #B8912A; color: #B8912A; transform: scale(1.08); box-shadow: 0 0 18px rgba(184, 145, 42, .28); } [dir="rtl"] .dr-nav__logout svg { transform: scaleX(-1); } .dr-nav__logout:hover, [data-theme="light"] .dr-nav__logout:hover { background: rgba(190, 60, 60, .14); border-color: rgba(190, 60, 60, .55); color: #C0392B; transform: scale(1.08); box-shadow: 0 0 18px rgba(190, 60, 60, .22); } /* CSS-driven icon switching */ .dr-theme-icon--moon { display: block; } .dr-theme-icon--sun { display: none; } [data-theme="light"] .dr-theme-icon--moon { display: none; } [data-theme="light"] .dr-theme-icon--sun { display: block; } .dr-theme-icon--moon, .dr-theme-icon--sun { transition: opacity .18s, transform .28s; } /* ═══════════════════════════════════════════════════════════════ 19 · SCROLLBAR · SELECTION · FOCUS ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { scrollbar-color: rgba(184, 145, 42, .40) rgba(74, 56, 14, .05); } [data-theme="light"]::-webkit-scrollbar { width: 8px; } [data-theme="light"]::-webkit-scrollbar-track { background: rgba(74, 56, 14, .04); } [data-theme="light"]::-webkit-scrollbar-thumb { background: rgba(184, 145, 42, .38); border-radius: 4px; } [data-theme="light"]::-webkit-scrollbar-thumb:hover { background: rgba(184, 145, 42, .60); } [data-theme="light"] ::selection { background: rgba(184, 145, 42, .30); color: #1C1A16; } [data-theme="light"] :focus-visible { outline: 2px solid #086348; outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ 20 · SMOOTH THEME-SWITCH TRANSITION ═══════════════════════════════════════════════════════════════ */ html.dr-theme-transitioning *, html.dr-theme-transitioning *::before, html.dr-theme-transitioning *::after { transition: background-color .28s ease, border-color .28s ease, color .22s ease, box-shadow .28s ease, filter .28s ease !important; } /* ═══════════════════════════════════════════════════════════════ 21 · OPTIONAL WATERMARK UTILITY CLASS For the inserted
from migration-guide step 5. Both layers (CSS pattern + utility div) work simultaneously — the utility provides an EXTRA crisp geometric layer on top of the section CSS pattern. ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] .dr-section-watermark { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; opacity: 0.05; pointer-events: none; z-index: 0; } [data-theme="light"] .dr-section-watermark[data-watermark="hero"] { background-image: var(--watermark-hero); background-size: min(60%, 540px) auto; opacity: 0.08; } [data-theme="light"] .dr-section-watermark[data-watermark="services"] { background-image: var(--watermark-services); background-repeat: repeat; background-size: 38px 38px; opacity: 0.10; } [data-theme="light"] .dr-section-watermark[data-watermark="steps"] { background-image: var(--watermark-steps); background-repeat: repeat-x; background-position: top center; background-size: 56px 48px; opacity: 0.20; } [data-theme="light"] .dr-section-watermark[data-watermark="trust"] { background-image: var(--watermark-trust), var(--watermark-trust); background-repeat: no-repeat, no-repeat; background-position: left 32px center, right 32px center; background-size: 180px 180px, 180px 180px; opacity: 0.10; } [data-theme="light"] .dr-section-watermark[data-watermark="cta"] { background-image: var(--watermark-cta); background-size: 280px 280px; opacity: 0.14; } [data-theme="light"] .dr-section-watermark[data-watermark="footer"] { background-image: var(--watermark-footer); background-repeat: no-repeat; background-position: center center; background-size: min(55%, 320px) auto; opacity: 0.07; } /* Real content sits above the watermark layer in every section */ [data-theme="light"] .dr-hero>*:not(.dr-section-watermark), [data-theme="light"] .dr-services>*:not(.dr-section-watermark), [data-theme="light"] .dr-steps>*:not(.dr-section-watermark), [data-theme="light"] .dr-trust>*:not(.dr-section-watermark), [data-theme="light"] .dr-cta>*:not(.dr-section-watermark), [data-theme="light"] .dr-footer>*:not(.dr-section-watermark) { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ 22 · RESPONSIVE HOOKS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { [data-theme="light"] body { background-size: 22px 22px; } [data-theme="light"] .dr-hero__ring { width: 320px; height: 320px; } [data-theme="light"] .dr-section-watermark[data-watermark="hero"] { background-size: min(80%, 360px) auto; } [data-theme="light"] .dr-section-watermark[data-watermark="trust"] { background-image: var(--watermark-trust), none; background-position: center, center; background-size: 140px 140px, auto; } [data-theme="light"] .dr-section-watermark[data-watermark="cta"] { background-size: 200px 200px; } } @media (max-width: 480px) { [data-theme="light"] body { background-size: 18px 18px; } [data-theme="light"] .dr-services { background-size: auto, 28px 28px, 28px 28px; } [data-theme="light"] .dr-section-watermark[data-watermark="services"] { background-size: 28px 28px; } [data-theme="light"] .dr-section-watermark[data-watermark="steps"] { background-size: 44px 38px; } [data-theme="light"] .dr-section-watermark[data-watermark="footer"] { background-size: min(70%, 240px) auto; } } /* ═══════════════════════════════════════════════════════════════ 23 · PRINT ═══════════════════════════════════════════════════════════════ */ @media print { [data-theme="light"] body, [data-theme="light"] .dr-hero, [data-theme="light"] .dr-services, [data-theme="light"] .dr-steps, [data-theme="light"] .dr-trust { background: #FFFFFF !important; background-image: none !important; } [data-theme="light"] .dr-cta, [data-theme="light"] .dr-footer { background: #FFFFFF !important; color: #1C1A16 !important; background-image: none !important; } [data-theme="light"] .dr-section-watermark, [data-theme="light"] body::before, [data-theme="light"] .ab-auth-page::before { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ 24 · WIZARD — extended light-theme overrides Covers all elements not handled in §12 above: actual inputs, floating labels, radio groups, doc cards, review panels, the service-detail CTA banner. ═══════════════════════════════════════════════════════════════ */ /* ── Wizard header ─────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-header { border-bottom-color: rgba(184, 145, 42, .16); } [data-theme="light"] .dr-wiz-back { border-color: rgba(184, 145, 42, .28); color: #4A3D24; } [data-theme="light"] .dr-wiz-back:hover { border-color: #B8912A; color: #B8912A; background: rgba(184, 145, 42, .06); } [data-theme="light"] .dr-wiz-service-name { color: #1C1A16; } [data-theme="light"] .dr-wiz-ref-badge { background: rgba(184, 145, 42, .12); border-color: rgba(184, 145, 42, .28); color: #8C6B1F; } [data-theme="light"] .dr-wiz-autosave { color: #B89E5A; } /* ── Progress track ────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-progress__track { background: rgba(184, 145, 42, .14); } /* ── Panel head, icon, description ────────────────────────────── */ [data-theme="light"] .dr-wiz-panel__head { border-bottom-color: rgba(184, 145, 42, .16); } [data-theme="light"] .dr-wiz-panel__icon { background: rgba(8, 99, 72, .10); border-color: rgba(8, 99, 72, .20); color: #086348; } [data-theme="light"] .dr-wiz-panel__desc { color: #4A3D24; } /* ── Actual text inputs (.dr-wiz-input, not .dr-wiz-field input) ─ */ [data-theme="light"] .dr-wiz-input { background: #FFFCEF; border-color: rgba(184, 145, 42, .28); color: #1C1A16; } [data-theme="light"] .dr-wiz-input:focus { border-color: #086348; background: #FBF6E4; box-shadow: 0 0 0 3px rgba(8, 99, 72, .12); } [data-theme="light"] .dr-wiz-input.dr-wiz-input--error { border-color: #B0321A; box-shadow: 0 0 0 3px rgba(176, 50, 26, .10); } /* ── Floating label ─────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-label { color: #7A6A47; } [data-theme="light"] .dr-wiz-input:focus ~ .dr-wiz-label, [data-theme="light"] .dr-wiz-input:not(:placeholder-shown) ~ .dr-wiz-label { color: #086348; } /* ── Textarea ───────────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-textarea { background: #FFFCEF; border-color: rgba(184, 145, 42, .28); color: #1C1A16; } [data-theme="light"] .dr-wiz-textarea:focus { border-color: #086348; background: #FBF6E4; box-shadow: 0 0 0 3px rgba(8, 99, 72, .12); } [data-theme="light"] .dr-wiz-textarea ~ .dr-wiz-label { color: #7A6A47; } [data-theme="light"] .dr-wiz-textarea:focus ~ .dr-wiz-label, [data-theme="light"] .dr-wiz-textarea:not(:placeholder-shown) ~ .dr-wiz-label { color: #086348; } /* ── Select ─────────────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-select { background: #FFFCEF; border-color: rgba(184, 145, 42, .28); color: #1C1A16; } [data-theme="light"] .dr-wiz-select:focus { border-color: #086348; background: #FBF6E4; box-shadow: 0 0 0 3px rgba(8, 99, 72, .12); } [data-theme="light"] .dr-wiz-select-arrow { color: #7A6A47; } /* ── Radio group ─────────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-radio-group { background: #FFFCEF; border-color: rgba(184, 145, 42, .28); } [data-theme="light"] .dr-wiz-radio-legend { color: #086348; } [data-theme="light"] .dr-wiz-radio-label { color: #4A3D24; } [data-theme="light"] .dr-wiz-radio-label:hover { color: #1C1A16; } [data-theme="light"] .dr-wiz-radio-pip { border-color: rgba(184, 145, 42, .35); } [data-theme="light"] .dr-wiz-radio:checked + .dr-wiz-radio-pip { border-color: #B8912A; background: #B8912A; box-shadow: inset 0 0 0 4px #FFFCEF; } /* ── Step counter in bottom nav ─────────────────────────────────── */ [data-theme="light"] .dr-wiz-step-counter { color: #7A6A47; } /* ── Documents step — doc card ──────────────────────────────────── */ [data-theme="light"] .dr-wiz-doc-card { background: #FBF6E4; border-color: rgba(184, 145, 42, .20); } [data-theme="light"] .dr-wiz-doc-card:focus-within { border-color: rgba(184, 145, 42, .45); } [data-theme="light"] .dr-wiz-doc-label { color: #1C1A16; } [data-theme="light"] .dr-wiz-doc-label svg { color: #B8912A; } [data-theme="light"] .dr-wiz-doc-meta { color: #7A6A47; } /* ── Dropzone text ───────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-dropzone__label { color: #4A3D24; } [data-theme="light"] .dr-wiz-dropzone__browse { color: #086348; } /* ── File preview ────────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-file-preview { background: rgba(184, 145, 42, .07); border-color: rgba(184, 145, 42, .22); } [data-theme="light"] .dr-wiz-file-preview__inner svg { color: #B8912A; } [data-theme="light"] .dr-wiz-file-name { color: #1C1A16; } [data-theme="light"] .dr-wiz-file-size { color: #7A6A47; } /* ── Review step ─────────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-review-section { background: #FBF6E4; border-color: rgba(184, 145, 42, .18); } [data-theme="light"] .dr-wiz-review-section:hover { border-color: rgba(184, 145, 42, .35); } [data-theme="light"] .dr-wiz-review-section__title { color: #086348; border-bottom-color: rgba(8, 99, 72, .15); } [data-theme="light"] .dr-wiz-review-edit { color: #7A6A47; border-color: rgba(184, 145, 42, .22); } [data-theme="light"] .dr-wiz-review-edit:hover { color: #086348; border-color: #086348; } [data-theme="light"] .dr-wiz-review-dt { color: #7A6A47; } [data-theme="light"] .dr-wiz-review-dd { color: #1C1A16; } [data-theme="light"] .dr-wiz-review-field { background: rgba(250, 247, 240, .85); border-color: rgba(184, 145, 42, .12); } [data-theme="light"] .dr-wiz-review-field__label { color: #7A6A47; } [data-theme="light"] .dr-wiz-review-field__value { color: #1C1A16; } [data-theme="light"] .dr-wiz-review-doc { background: rgba(251, 246, 228, .80); } [data-theme="light"] .dr-wiz-review-doc--ok { background: rgba(30, 122, 72, .07); } [data-theme="light"] .dr-wiz-review-doc--missing { background: rgba(176, 50, 26, .06); } [data-theme="light"] .dr-wiz-review-doc-status { color: #7A6A47; } [data-theme="light"] .dr-wiz-review-empty, [data-theme="light"] .dr-wiz-review__loading { color: #4A3D24; } /* ── Payment notice ──────────────────────────────────────────────── */ [data-theme="light"] .dr-wiz-payment__notice { background: rgba(184, 145, 42, .07); border-color: rgba(184, 145, 42, .22); color: #4A3D24; } [data-theme="light"] .dr-wiz-payment__notice svg { color: #B8912A; } /* ── Spinner — stays gold in both themes, no override needed ─────── */ /* ── Service detail CTA banner (pre-wizard) ──────────────────────── */ [data-theme="light"] .dr-det-cta-banner { background: linear-gradient(135deg, #F2EDE0 0%, #FAF7F0 55%, #F5E6C8 100%) !important; border-color: rgba(184, 145, 42, .30); box-shadow: 0 0 0 1px rgba(184, 145, 42, .10), 0 8px 32px rgba(74, 56, 14, .10); } [data-theme="light"] .dr-det-cta-banner::before { background: linear-gradient(90deg, transparent, rgba(184, 145, 42, .45) 50%, transparent); opacity: 1; } [data-theme="light"] .dr-det-cta-banner__title { color: #1C1A16; } [data-theme="light"] .dr-det-cta-banner__sub { color: #4A3D24; } [data-theme="light"] .dr-det-cta-banner__ornament { background: rgba(8, 99, 72, .08); border-color: rgba(8, 99, 72, .22); } [data-theme="light"] .dr-det-cta-chip { background: rgba(74, 56, 14, .06); border-color: rgba(74, 56, 14, .12); color: #4A3D24; } [data-theme="light"] .dr-det-cta-chip--gold { background: rgba(184, 145, 42, .10); border-color: rgba(184, 145, 42, .30); color: #8C6B1F; } [data-theme="light"] .dr-det-cta-banner__login-hint { color: #7A6A47; } [data-theme="light"] .dr-det-cta-banner__login-hint a { color: #B8912A; } /* Glow orb is invisible on light — hide it */ [data-theme="light"] .dr-det-cta-banner__glow { opacity: 0; } /* ── Field hint text (format guide under validated inputs) ───────── */ [data-theme="light"] .dr-wiz-hint { color: #7A6A47; } /* end of file */