/* Domaintico Brand Overrides ------------------------- Loaded LAST in to keep brand consistency across: - CMS pages (DB-scoped CSS) - Add-ons (cookie consent, etc.) - Marketing pages هدف الملف: 1) توحيد اللون الأساسي (Domaintico Blue) في كل CTA 2) ضمان تباين النص داخل الأزرار (خصوصاً .btn-primary) 3) إبقاء التغييرات "safe" بدون كسر layout أو HTML. */ :root{ /* Brand aliases (do NOT overwrite admin theme tokens) */ --dm-brand-primary: var(--dm-primary, #2563EB); --dm-brand-primary-hover: var(--dm-primary-hover, #1D4ED8); --dm-brand-primary-pressed: var(--dm-primary-pressed, #1E40AF); /* Soft background for hover/outline (fallback first, then modern color-mix) */ --dm-brand-primary-soft: rgba(37,99,235,.10); --dm-brand-primary-soft: color-mix(in srgb, var(--dm-brand-primary) 10%, transparent); } /* Body + links – keep consistent blue */ body{ color: var(--dm-text, #0F172A); background: var(--dm-surface-2, #F8FAFC); } a{ color: var(--dm-brand-primary); text-underline-offset: 2px; } a:hover{ color: var(--dm-brand-primary-hover); } /* CTA Unification --------------- Some CMS pages / landing blocks may use btn-dark/btn--dark for the main CTA. We map those to the brand primary. */ /* Primary / Base buttons */ body.dm-app :is( .btn-primary, .btn--base, .btn--primary, .dm-btn--primary, .dm-btn-primary ){ background: var(--dm-brand-primary) !important; border-color: var(--dm-brand-primary) !important; color: #fff !important; } body.dm-app :is( .btn-primary:hover, .btn--base:hover, .btn--primary:hover, .dm-btn--primary:hover, .dm-btn-primary:hover ){ background: var(--dm-brand-primary-hover) !important; border-color: var(--dm-brand-primary-hover) !important; color: #fff !important; } body.dm-app :is( .btn-primary:active, .btn--base:active, .btn--primary:active, .dm-btn--primary:active, .dm-btn-primary:active ){ background: var(--dm-brand-primary-pressed) !important; border-color: var(--dm-brand-primary-pressed) !important; color: #fff !important; } /* "Dark" buttons used as CTA in some pages -> brand primary IMPORTANT: exclude dismiss/cancel buttons (No/Close) in modals/offcanvas */ body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark ):not([data-bs-dismiss]):not([data-dismiss]){ background: var(--dm-brand-primary) !important; border-color: var(--dm-brand-primary) !important; color: #fff !important; } body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark ):not([data-bs-dismiss]):not([data-dismiss]):hover{ background: var(--dm-brand-primary-hover) !important; border-color: var(--dm-brand-primary-hover) !important; color: #fff !important; } body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark ):not([data-bs-dismiss]):not([data-dismiss]):active{ background: var(--dm-brand-primary-pressed) !important; border-color: var(--dm-brand-primary-pressed) !important; color: #fff !important; } /* Neutralize modal/offcanvas cancel buttons (No/Close) */ body.dm-app :is(.modal, .offcanvas) :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark ), body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark )[data-bs-dismiss], body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark )[data-dismiss]{ background: transparent !important; border-color: rgba(100,116,139,.35) !important; border-color: color-mix(in srgb, var(--dm-muted, #64748B) 35%, transparent) !important; color: var(--dm-text, #0F172A) !important; } body.dm-app :is(.modal, .offcanvas) :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark ):hover, body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark )[data-bs-dismiss]:hover, body.dm-app :is( .btn-dark, .btn--dark, .dm-btn--dark, .dm-btn-dark )[data-dismiss]:hover{ background: rgba(100,116,139,.08) !important; background: color-mix(in srgb, var(--dm-muted, #64748B) 10%, transparent) !important; } /* Outline primary (keep blue text + soft hover) */ body.dm-app :is(.btn-outline-primary, .dm-btn--outline, .dm-btn-outline){ background: transparent !important; border-color: rgba(37,99,235,.35) !important; border-color: color-mix(in srgb, var(--dm-brand-primary) 35%, transparent) !important; color: var(--dm-brand-primary) !important; } body.dm-app :is(.btn-outline-primary:hover, .dm-btn--outline:hover, .dm-btn-outline:hover){ background: rgba(37,99,235,.08) !important; background: var(--dm-brand-primary-soft) !important; border-color: rgba(37,99,235,.55) !important; border-color: color-mix(in srgb, var(--dm-brand-primary) 55%, transparent) !important; color: var(--dm-brand-primary) !important; } /* Outline secondary: keep readable on light background */ body.dm-app .btn-outline-secondary{ color: var(--dm-text, #0F172A) !important; } /* Cookie banner fixes ------------------- Cookie add-on uses .btn.btn-primary.btn-sm and without explicit color it may inherit link color. Ensure contrast. */ body.dm-app .dm-cookie-banner :is(.btn-primary, .btn-dark){ color: #fff !important; } /* Active pills/chips */ body.dm-app :is(.dm-pill.is-active, .dm-chip.is-active){ background: rgba(37,99,235,.10) !important; background: var(--dm-brand-primary-soft) !important; border-color: rgba(37,99,235,.35) !important; border-color: color-mix(in srgb, var(--dm-brand-primary) 35%, transparent) !important; } /* Focus ring */ body.dm-app :is(a, button, .btn, .dm-btn):focus{ outline: none; } body.dm-app :is(a, button, .btn, .dm-btn):focus-visible{ box-shadow: 0 0 0 4px rgba(37,99,235,.18); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-brand-primary) 22%, transparent); border-radius: 12px; } /* ------------------------------------------------------------------ Domaintico Brand Identity Pack (2026-03-08) A cohesive visual layer: fonts, logo treatment, buttons, icon surfaces, form controls, header/footer polish, and stronger brand rhythm. ------------------------------------------------------------------ */ :root{ --dm-brand-ink: #0B1220; --dm-brand-deep: #102B6A; --dm-brand-accent: #38BDF8; --dm-brand-soft-surface: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)); --dm-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --dm-font-heading: 'Manrope', 'Inter', system-ui, sans-serif; --dm-font-ar: 'Cairo', sans-serif; } body.dm-app{ font-family: var(--dm-font-body); background: radial-gradient(circle at top left, color-mix(in srgb, var(--dm-brand-primary) 7%, transparent), transparent 42%), linear-gradient(180deg, #F8FBFF 0%, #F8FAFC 34%, #F8FAFC 100%); } html[dir="rtl"] body.dm-app, html[dir="rtl"] body.dm-app :is(h1,h2,h3,h4,h5,h6,.dm-brand-name,.btn,.dm-nav__link){ font-family: var(--dm-font-ar); } body.dm-app :is(h1,h2,h3,h4,h5,h6,.dm-brand-name,.dm-nav__link,.btn,.dm-footer-title,.dm-account-menu__item,.dm-section__kicker,.dm-sidecard__title,.dm-feature-title,.dm-how-card h3){ font-family: var(--dm-font-heading); } body.dm-app .dm-header{ background: rgba(255,255,255,.86) !important; border-bottom-color: color-mix(in srgb, var(--dm-brand-primary) 12%, rgba(15,23,42,.08)) !important; box-shadow: 0 12px 34px rgba(15,23,42,.04); } body.dm-app .dm-header__inner{ padding-top: 12px; padding-bottom: 12px; } body.dm-app .dm-brand, body.dm-app .dm-footer-brand{ gap: 12px; } body.dm-app .dm-brand-logo, body.dm-app .dm-footer-logo{ width: 38px; height: 38px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.74)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px rgba(37,99,235,.18); padding: 4px; } body.dm-app .dm-brand-name, body.dm-app .dm-footer-name{ color: var(--dm-brand-ink); font-size: 18px; letter-spacing: -0.03em; } body.dm-app .dm-footer-name{ color: #fff; } body.dm-app .dm-nav__link{ color: rgba(11,18,32,.82) !important; border-radius: 999px; padding: 10px 12px; } body.dm-app .dm-nav__link:hover{ background: color-mix(in srgb, var(--dm-brand-primary) 8%, #fff); } body.dm-app .dm-nav__link.is-active{ color: var(--dm-brand-primary) !important; background: color-mix(in srgb, var(--dm-brand-primary) 10%, #fff); } body.dm-app .dm-nav__link.is-active::after{ display:none; } body.dm-app :is(.btn-primary,.btn--base,.btn--primary,.dm-btn--primary,.dm-btn-primary){ background-image: linear-gradient(135deg, var(--dm-brand-primary) 0%, #1D4ED8 58%, #102B6A 100%) !important; border-color: color-mix(in srgb, var(--dm-brand-primary) 72%, #102B6A) !important; box-shadow: 0 14px 28px rgba(37,99,235,.20); } body.dm-app :is(.btn-primary,.btn--base,.btn--primary,.dm-btn--primary,.dm-btn-primary):hover{ transform: translateY(-1px); box-shadow: 0 18px 34px rgba(37,99,235,.24); } body.dm-app :is(.btn-outline-primary,.dm-btn--outline,.dm-btn-outline){ background: rgba(255,255,255,.84) !important; border-color: color-mix(in srgb, var(--dm-brand-primary) 22%, rgba(15,23,42,.10)) !important; } body.dm-app .btn-light{ background: rgba(255,255,255,.82) !important; border-color: rgba(15,23,42,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.66); } body.dm-app .btn-outline-secondary{ background: rgba(255,255,255,.72) !important; } body.dm-app :is(.dm-input,.form-control,.form-select){ border-radius: 16px; border-color: rgba(15,23,42,.10) !important; background: rgba(255,255,255,.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.54); } body.dm-app :is(.dm-input,.form-control,.form-select)::placeholder{ color: rgba(100,116,139,.92); } body.dm-app :is(.card,.dm-card,.dm-surface,.dm-domain-card,.dm-sidecard,.dm-cta-card,.dm-how-card,.dm-feature,.dm-domain-result,.dm-domain-ideas__group){ background: var(--dm-brand-soft-surface); border-color: rgba(15,23,42,.08); box-shadow: 0 14px 40px rgba(15,23,42,.06); } body.dm-app .dm-icon-btn{ background: rgba(255,255,255,.84); border-color: rgba(15,23,42,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } body.dm-app .dm-icon-btn:hover{ background: color-mix(in srgb, var(--dm-brand-primary) 7%, #fff); border-color: color-mix(in srgb, var(--dm-brand-primary) 18%, rgba(15,23,42,.10)); } body.dm-app .dm-account-menu__meta{ background: linear-gradient(180deg, rgba(37,99,235,.09), rgba(37,99,235,.03)); border-radius: 16px; margin-bottom: 8px; } body.dm-app .dm-account-menu__name{ color: var(--dm-brand-ink); font-family: var(--dm-font-heading); } body.dm-app .dm-site-footer{ background: radial-gradient(circle at top right, rgba(56,189,248,.16), transparent 34%), linear-gradient(180deg, #0B1220 0%, #08101D 100%); } body.dm-app .dm-footer-link{ color: rgba(255,255,255,.78); } body.dm-app .dm-footer-link:hover{ color: #fff; transform: translateX(2px); } body.dm-app .dm-cart-badge{ background: linear-gradient(135deg, var(--dm-brand-accent), var(--dm-brand-primary)); box-shadow: 0 6px 18px rgba(37,99,235,.28); } body.dm-app .dm-section__kicker, body.dm-app .dm-section-kicker{ color: var(--dm-brand-primary); letter-spacing: .14em; } body.dm-app .dm-empty, body.dm-app .dm-alert--neutral{ background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)); } body.dm-app .dm-domain-idea__cta, body.dm-app .dm-link{ color: var(--dm-brand-primary); }