/* * Domaintico Visual Upgrade — 2026-04 * ------------------------------------ * تحسين بصري شامل لجميع الصفحات: * - Manrope للعناوين (أقوى وأوضح) * - spacing أكبر ومتناسق * - تحسين العناصر (cards, buttons, sections) * - font loading via @import * * الملف يُحمّل بعد domaintico-brand.css في * أو يُدمج محتواه في domaintico-brand.css */ /* Manrope already loaded in layout — no @import needed */ /* =================================================== 1. TYPOGRAPHY — Manrope for headings =================================================== */ :root { --heading-font: "Manrope", "Inter", system-ui, sans-serif; } body.dm-app :is(h1, h2, h3, h4, h5, h6) { font-family: var(--heading-font); } body.dm-app .dm-brand-name, body.dm-app .dm-footer-name { font-family: var(--heading-font); } body.dm-app .dm-section-title, body.dm-app .dm-section__title { font-family: var(--heading-font); } body.dm-app .dm-sidecard__title, body.dm-app .dm-home-search__title, body.dm-app .dm-cta-card__title, body.dm-app .dm-card__title, body.dm-app .dm-feature-title, body.dm-app .dm-how-card h3, body.dm-app .dm-price-card__ext { font-family: var(--heading-font); } /* =================================================== 2. SECTION SPACING — more breathing room =================================================== */ :root { --dm-section-pad: clamp(40px, 5.5vw, 72px); --dm-section-pad-tight: clamp(28px, 4vw, 52px); } body.dm-app .dm-section-head, body.dm-app .dm-section__head { margin-bottom: 40px; } body.dm-app .dm-section-subtitle, body.dm-app .dm-section__text { max-width: 540px; margin-left: auto; margin-right: auto; } body.dm-app .dm-section-kicker, body.dm-app .dm-section__kicker { color: var(--dm-primary, #2563EB); font-weight: 700; letter-spacing: 0.14em; margin-bottom: 8px; } /* =================================================== 3. HERO — more generous =================================================== */ body.dm-app .dm-hero, body.dm-app .dm-section.dm-page-hero { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(40px, 5vw, 72px); } body.dm-app .dm-hero__inner { gap: 56px; align-items: center; } body.dm-app .dm-hero__lead { margin-top: 16px; } body.dm-app .dm-hero__actions { gap: 12px; margin-top: 28px; } body.dm-app .dm-hero__links--pills { margin-top: 18px; } body.dm-app .dm-trust { gap: 16px; margin-top: 26px; } /* =================================================== 4. CARDS — roomier padding and gaps =================================================== */ body.dm-app .dm-card, body.dm-app .card { padding: 28px; border-radius: var(--dm-radius, 14px); } body.dm-app .dm-feature-grid { gap: 20px; } body.dm-app .dm-feature__illo { margin-bottom: 18px; } body.dm-app .dm-feature-title { margin-bottom: 8px; } body.dm-app .dm-feature-text { line-height: 1.6; } /* =================================================== 5. SIDECARD =================================================== */ body.dm-app .dm-sidecard { padding: 28px; } body.dm-app .dm-kv { padding: 12px 0; } body.dm-app .dm-sidecard__actions { margin-top: 18px; gap: 10px; } /* =================================================== 6. SEARCH SECTION =================================================== */ body.dm-app .dm-home-search__card { padding: 36px; } body.dm-app .dm-home-search__head { margin-bottom: 24px; } body.dm-app .dm-home-search__row { gap: 10px; margin-top: 12px; } body.dm-app .dm-input { padding: 13px 18px; } /* =================================================== 7. PRICING GRID =================================================== */ body.dm-app .dm-pricing-grid { gap: 16px; } body.dm-app .dm-price-card { padding: 22px 16px; } body.dm-app .dm-pricing-preview__actions { margin-top: 28px; } /* =================================================== 8. HOW IT WORKS =================================================== */ body.dm-app .dm-how-grid { gap: 20px; } body.dm-app .dm-how-card { padding: 28px; } body.dm-app .dm-how-top { gap: 10px; margin-bottom: 16px; } body.dm-app .dm-how-card h3 { margin-bottom: 8px; } body.dm-app .dm-how-card p { line-height: 1.55; } /* =================================================== 9. CTA CARD =================================================== */ body.dm-app .dm-cta-card { padding: 48px; border-radius: var(--dm-radius-lg, 18px); gap: 40px; } /* =================================================== 10. FOOTER =================================================== */ body.dm-app .dm-site-footer .dm-footer-wrap, body.dm-app .dm-footer-wrap { padding-top: 48px; padding-bottom: 28px; } body.dm-app .dm-footer-top { margin-bottom: 32px; } body.dm-app .dm-footer-grid { gap: 36px; margin-bottom: 36px; } body.dm-app .dm-footer-col { gap: 10px; } body.dm-app .dm-footer-bottom { padding-top: 22px; } /* =================================================== 11. HEADER — blur backdrop =================================================== */ body.dm-app .dm-header { backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); background: rgba(248, 250, 252, 0.88); } /* =================================================== 12. BUTTONS — slightly larger touch targets =================================================== */ body.dm-app .btn { padding: 10px 22px; font-weight: 600; border-radius: var(--dm-btn-radius, 14px); transition: all 0.2s ease; } body.dm-app .btn-lg { padding: 12px 28px; font-size: 15px; } body.dm-app .btn-primary:hover, body.dm-app .btn--primary:hover { transform: translateY(-0.5px); box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22); } /* =================================================== 13. CARDS — hover lift =================================================== */ body.dm-app .dm-card:hover, body.dm-app .dm-how-card:hover, body.dm-app .dm-price-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); border-color: rgba(37, 99, 235, 0.12); } /* =================================================== 14. PAGE BODY — consistent backgrounds =================================================== */ body.dm-app .dm-section--alt { background: var(--dm-surface); } body.dm-app .dm-section:not(.dm-section--alt):not(.dm-page-hero) { background: var(--dm-surface-2); } /* =================================================== 15. MOBILE OVERRIDES — keep proportional =================================================== */ @media (max-width: 991.98px) { :root { --dm-section-pad: clamp(32px, 5vw, 52px); --dm-section-pad-tight: clamp(22px, 4vw, 36px); } body.dm-app .dm-hero__inner { gap: 32px; } body.dm-app .dm-cta-card { padding: 32px; gap: 24px; } } @media (max-width: 575.98px) { :root { --dm-section-pad: clamp(28px, 6vw, 44px); --dm-section-pad-tight: clamp(18px, 4.5vw, 28px); } body.dm-app .dm-card, body.dm-app .card { padding: 22px; } body.dm-app .dm-home-search__card { padding: 24px; } body.dm-app .dm-cta-card { padding: 24px; gap: 16px; } body.dm-app .dm-sidecard { padding: 22px; } body.dm-app .dm-hero, body.dm-app .dm-section.dm-page-hero { padding-top: 36px; padding-bottom: 32px; } } /* =================================================== 16. GRADIENT TEXT — consistent across all pages =================================================== */ body.dm-app .dm-gradient-text { background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #2563EB 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: dm-gradient-shift 4s ease-in-out infinite; } @keyframes dm-gradient-shift { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } } body.dm-app .dm-hero__title em { font-style: normal; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #2563EB 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: dm-gradient-shift 4s ease-in-out infinite; } body.dm-app .dm-hero-title em, body.dm-app .dm-section-title em, body.dm-app .dmpp-title em, body.dm-app .dmfp-title em, body.dm-app h1 em { font-style: normal; background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #2563EB 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: dm-gradient-shift 4s ease-in-out infinite; } /* =================================================== 17. NAV ACTIVE STATE =================================================== */ body.dm-app .dm-nav__link.is-active { color: var(--dm-primary, #2563EB); font-weight: 600; position: relative; } body.dm-app .dm-nav__link.is-active::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 20px; height: 2.5px; border-radius: 2px; background: var(--dm-primary, #2563EB); } body.dm-app .dm-mobile-nav__link.is-active { color: var(--dm-primary, #2563EB); font-weight: 600; background: rgba(37, 99, 235, 0.06); border-radius: 8px; }