/* === DESIGN SYSTEM === */ :root { --color-bg-primary: #060d1f; --color-bg-secondary: #0a1628; --color-bg-card: rgba(10, 22, 40, 0.7); --color-cyan: #00d4ff; --color-cyan-dark: #0099cc; --color-violet: #7c3aed; --color-violet-light: #a855f7; --color-white: #ffffff; --color-gray-300: #a0aec0; --color-text-primary: #e2e8f0; --color-text-muted: #94a3b8; --color-border: rgba(0, 212, 255, 0.15); --color-glow-cyan: rgba(0, 212, 255, 0.3); --color-glow-violet: rgba(124, 58, 237, 0.3); --font-heading: 'Space Grotesk', 'Tajawal', sans-serif; --font-body: 'Tajawal', 'Space Grotesk', sans-serif; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-cyan: 0 0 30px rgba(0, 212, 255, 0.2); --shadow-violet: 0 0 30px rgba(124, 58, 237, 0.2); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4); --transition-fast: 0.2s ease; --transition-med: 0.4s ease; --transition-slow: 0.6s ease; --container-max: 1280px; --container-pad: clamp(16px, 4vw, 48px); /* ── v5.3.0: CSS Variables مفقودة — C1 Fix ──────────────── */ --color-bg: #060d1f; /* alias لـ --color-bg-primary */ --color-primary: #00d4ff; /* alias لـ --color-cyan */ --card-min: 260px; /* الحد الأدنى لعرض البطاقات */ --card-max: 380px; /* الحد الأقصى لعرض البطاقات */ --card-gap: 1.5rem; /* المسافة بين البطاقات */ --duo-primary: #00d4ff; /* Duotone icon — اللون الأساسي */ --duo-secondary: #7c3aed; /* Duotone icon — اللون الثانوي */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; direction: rtl; overflow-x: hidden; } body { font-family: var(--font-body); background-color: var(--color-bg-primary); color: var(--color-text-primary); font-size: 16px; line-height: 1.7; overflow-x: hidden; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-white); } a { color: var(--color-cyan); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-violet-light); } img { max-width: 100%; height: auto; display: block; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); } /* ================================================================ Universal card layout (centers last row safely) Add class .lahdod-cards to any "*-grid" container you want to behave like /services ================================================================ */ .lahdod-cards{ display:flex; flex-wrap:wrap; gap:var(--card-gap,24px); justify-content:center; align-items:stretch; } .products-grid.lahdod-cards, .features-grid.lahdod-cards, .services-grid.lahdod-cards, .pricing-grid.lahdod-cards, .team-grid.lahdod-cards, .about-stats-grid.lahdod-cards, .about-values-grid.lahdod-cards{ display:flex; flex-wrap:wrap; gap:var(--card-gap,24px); justify-content:center; align-items:stretch; } .lahdod-cards > *{ flex:1 1 var(--card-min,280px); max-width:var(--card-max,420px); } /* Auto Layout: adjust distribution by number of cards (data-count set in JS) */ .lahdod-cards[data-count="1"]{ --card-max:min(720px,100%); } .lahdod-cards[data-count="1"] > *{ flex:0 1 var(--card-max); max-width:var(--card-max); } @media (min-width:1025px){ .lahdod-cards[data-count="2"] > *{ flex:1 1 calc((100% - var(--card-gap,24px)) / 2); max-width:calc((100% - var(--card-gap,24px)) / 2); } .lahdod-cards[data-count="3"] > *{ flex:1 1 calc((100% - (var(--card-gap,24px) + var(--card-gap,24px))) / 3); max-width:calc((100% - (var(--card-gap,24px) + var(--card-gap,24px))) / 3); } } /* Per-section tuning */ .products-grid.lahdod-cards{ --card-min:340px; --card-max:520px; --card-gap:32px; } .features-grid.lahdod-cards{ --card-min:280px; --card-max:420px; --card-gap:24px; } .services-grid.lahdod-cards{ --card-min:300px; --card-max:420px; --card-gap:24px; } .pricing-grid.lahdod-cards{ --card-min:280px; --card-max:420px; --card-gap:24px; } .team-grid.lahdod-cards{ --card-min:260px; --card-max:380px; --card-gap:24px; } .testimonials-grid.lahdod-cards{ --card-min:300px; --card-max:420px; --card-gap:24px; } .about-stats-grid.lahdod-cards{ --card-min:160px; --card-max:240px; --card-gap:16px; } .about-values-grid.lahdod-cards{ --card-min:260px; --card-max:420px; --card-gap:24px; } /* ================================================================ Duo-tone SVG icons (optional) ================================================================ */ .lahdod-duotone-icon{ display:inline-flex; align-items:center; justify-content:center; line-height:1; --duo-primary: var(--color-cyan); --duo-secondary: var(--color-cyan); } .lahdod-duotone-icon svg{ width:1em; height:1em; display:block; transform-origin:center; } /* Default Duo-tone look (clean + readable) */ .lahdod-duotone-icon .duo-secondary{ fill: var(--duo-secondary); opacity: 0.16; } .lahdod-duotone-icon .duo-primary{ fill: none; stroke: var(--duo-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Color override helper (e.g. violet icon wrapper) */ .violet-icon .lahdod-duotone-icon{ --duo-primary: #fff; --duo-secondary: var(--color-primary); } /* Sizes in the UI (keeps layout safe) */ .service-icon .lahdod-duotone-icon{ font-size: 34px; } .feature-icon .lahdod-duotone-icon{ font-size: 32px; } .contact-card-icon .lahdod-duotone-icon{ font-size: 26px; } .pricing-guarantee .lahdod-duotone-icon{ font-size: 20px; } /* Smooth hover interaction (only when Duo-tone is enabled) */ .lahdod-duotone-on .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .lahdod-duotone-icon .duo-primary{ transition: opacity .25s ease, fill .25s ease, stroke .25s ease; } .lahdod-duotone-on .lahdod-duotone-icon svg{ transition: transform .25s ease; } /* Hover target list across the theme */ .lahdod-duotone-on .service-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .feature-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .pricing-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .product-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .contact-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .faq-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .team-card:hover .lahdod-duotone-icon .duo-secondary, .lahdod-duotone-on .about-vm-card:hover .lahdod-duotone-icon .duo-secondary{ opacity: 0.22; fill: #ffffff; } .lahdod-duotone-on .service-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .feature-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .pricing-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .product-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .contact-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .faq-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .team-card:hover .lahdod-duotone-icon .duo-primary, .lahdod-duotone-on .about-vm-card:hover .lahdod-duotone-icon .duo-primary{ stroke: #ffffff; } .lahdod-duotone-on .service-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .feature-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .pricing-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .product-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .contact-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .faq-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .team-card:hover .lahdod-duotone-icon svg, .lahdod-duotone-on .about-vm-card:hover .lahdod-duotone-icon svg{ transform: scale(1.06); } /* Animated BG */ .lahdod-bg-animated { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .lahdod-bg-animated::before, .lahdod-bg-animated::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.12; animation: floatOrb 8s ease-in-out infinite; } .lahdod-bg-animated::before { width: 600px; height: 600px; background: var(--color-violet); top: -200px; right: -200px; } .lahdod-bg-animated::after { width: 500px; height: 500px; background: var(--color-cyan); bottom: -150px; left: -150px; animation-delay: -4s; } @keyframes floatOrb { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-30px) scale(1.05)} 66%{transform:translate(-20px,20px) scale(0.95)} } /* Header */ .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 1000; transition: all var(--transition-med); } .site-header.scrolled { background: rgba(6,13,31,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); box-shadow: 0 4px 30px rgba(0,0,0,0.3); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--container-pad); max-width: var(--container-max); margin: 0 auto; } .header-left, .header-right { display:flex; align-items:center; gap:12px; } .header-right nav { display:flex; align-items:center; } /* Logo */ .site-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--color-cyan), var(--color-violet)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--color-white); font-family: var(--font-heading); box-shadow: var(--shadow-cyan); } .logo-text { font-family: var(--font-heading); font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--color-cyan), var(--color-violet-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Nav */ .nav-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .nav-menu > li { position: relative; } .nav-menu a { display: block; padding: 8px 16px; color: var(--color-text-muted); font-size: 15px; font-weight: 500; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .nav-menu a:hover, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a, .nav-menu .current-menu-parent > a, .nav-menu > li:hover > a, .nav-menu > li:focus-within > a, .nav-menu > li:hover > .menu-link-wrap > a, .nav-menu > li:focus-within > .menu-link-wrap > a { color: var(--color-white); background: rgba(0,212,255,0.08); } .nav-menu .menu-item-has-children > .menu-link-wrap { position: relative; display: flex; align-items: center; } .nav-menu .menu-item-has-children > a, .nav-menu .menu-item-has-children > .menu-link-wrap > a { position: relative; padding-inline-end: 40px; } .nav-menu .menu-item-has-children > a::after, .nav-menu .menu-item-has-children > .menu-link-wrap > a::after { content: ''; position: absolute; inset-inline-end: 16px; top: 50%; width: 8px; height: 8px; border-inline-end: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-65%) rotate(45deg); opacity: .8; pointer-events: none; transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-menu > li:hover > a::after, .nav-menu > li:focus-within > a::after, .nav-menu > li.is-submenu-open > a::after, .nav-menu > li:hover > .menu-link-wrap > a::after, .nav-menu > li:focus-within > .menu-link-wrap > a::after, .nav-menu > li.is-submenu-open > .menu-link-wrap > a::after { transform: translateY(-20%) rotate(-135deg); opacity: 1; } .nav-menu .sub-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 260px; list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; background: rgba(6,13,31,0.96); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 1010; } .nav-menu .sub-menu::before { content: ''; position: absolute; top: -16px; inset-inline-start: 0; inset-inline-end: 0; height: 18px; background: transparent; } .nav-menu .sub-menu::after { content: ''; position: absolute; top: -7px; inset-inline-start: 28px; width: 12px; height: 12px; background: rgba(6,13,31,0.96); border-top: 1px solid var(--color-border); border-inline-start: 1px solid var(--color-border); transform: rotate(45deg); } .nav-menu > li:hover > .sub-menu, .nav-menu > li:focus-within > .sub-menu, .nav-menu > li.is-submenu-open > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-menu .sub-menu li { width: 100%; } .nav-menu .sub-menu a { display: block; width: 100%; padding: 12px 14px; color: var(--color-text); line-height: 1.6; border-radius: 14px; white-space: normal; } .nav-menu .sub-menu a:hover, .nav-menu .sub-menu .current-menu-item > a, .nav-menu .sub-menu .current-menu-ancestor > a { color: var(--color-white); background: linear-gradient(135deg, rgba(0,212,255,0.14), rgba(130,80,255,0.14)); } .nav-menu .sub-menu .menu-item-has-children > a::after, .nav-menu .sub-menu .menu-item-has-children > .menu-link-wrap > a::after { display: none; } .nav-submenu-toggle { display: none; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; border: 1px solid var(--color-border); background: rgba(255,255,255,0.03); border-radius: 12px; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); flex: 0 0 34px; } .nav-submenu-toggle:hover, .nav-submenu-toggle:focus-visible { color: var(--color-white); border-color: rgba(0,212,255,0.35); background: rgba(0,212,255,0.08); outline: none; } .nav-submenu-toggle::before { content: ''; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast); } .menu-item-has-children.is-submenu-open > .nav-submenu-toggle::before, .menu-item-has-children.is-submenu-open > .menu-link-wrap > .nav-submenu-toggle::before { transform: rotate(-135deg); } .nav-cta a { background: linear-gradient(135deg, var(--color-cyan), var(--color-violet)) !important; color: var(--color-white) !important; padding: 10px 24px !important; border-radius: 50px !important; font-weight: 600 !important; } .nav-cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--color-glow-cyan); } .menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--color-cyan); border-radius: 2px; transition: all var(--transition-fast); } /* Hero */ .hero-section { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--container-pad) 80px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border: 1px solid var(--color-border); border-radius: 50px; background: rgba(0,212,255,0.06); color: var(--color-cyan); font-size: 14px; font-weight: 500; margin-bottom: 28px; backdrop-filter: blur(10px); animation: fadeInDown 0.6s ease both; } .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-cyan); animation: pulse 2s ease infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} } .hero-title { font-size: clamp(38px, 6vw, 80px); font-weight: 800; line-height: 1.1; margin-bottom: 24px; animation: fadeInUp 0.7s ease 0.1s both; } .gradient-text { background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-violet-light) 50%, #ff6b9d 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% auto; animation: gradientShift 4s linear infinite; } @keyframes gradientShift { 0%{background-position:0% center} 100%{background-position:200% center} } .hero-desc { font-size: clamp(16px, 2vw, 20px); color: var(--color-text-muted); max-width: 640px; margin: 0 auto 40px; line-height: 1.8; animation: fadeInUp 0.7s ease 0.2s both; } .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; animation: fadeInUp 0.7s ease 0.3s both; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition-med); text-decoration: none; font-family: var(--font-body); } .btn-primary { background: linear-gradient(135deg, var(--color-cyan), var(--color-violet)); color: var(--color-white); box-shadow: 0 4px 20px var(--color-glow-cyan); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 30px var(--color-glow-cyan); color: var(--color-white); } .btn-secondary { background: transparent; color: var(--color-cyan); border: 1px solid var(--color-border); backdrop-filter: blur(10px); } .btn-secondary:hover { background: rgba(0,212,255,0.08); border-color: var(--color-cyan); transform: translateY(-2px); color: var(--color-white); } /* Stats bar */ .hero-stats { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 28px 40px; background: rgba(10,22,40,0.6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); animation: fadeInUp 0.7s ease 0.4s both; max-width: 700px; margin: 0 auto; } .stat-item { text-align: center; } .stat-number { font-size: 28px; font-weight: 800; font-family: var(--font-heading); background: linear-gradient(135deg, var(--color-cyan), var(--color-violet-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; } .stat-divider { width: 1px; height: 40px; background: var(--color-border); } /* Sections */ section { padding: 100px 0; } .section-header { text-align: center; margin-bottom: 60px; } .section-tag { display: inline-block; padding: 6px 16px; border: 1px solid var(--color-border); border-radius: 50px; background: rgba(0,212,255,0.05); color: var(--color-cyan); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } .section-title { font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; margin-bottom: 16px; } .section-desc { font-size: 17px; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; line-height: 1.8; } /* Products */ .products-section { background: var(--color-bg-secondary); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; } .product-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 36px; backdrop-filter: blur(20px); transition: all var(--transition-med); position: relative; overflow: hidden; } .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-cyan), var(--color-violet)); opacity: 0; transition: opacity var(--transition-med); } .product-card:hover { transform: translateY(-8px); border-color: rgba(0,212,255,0.3); box-shadow: var(--shadow-cyan), var(--shadow-card); } .product-card:hover::before { opacity: 1; } .product-card.featured { border-color: rgba(124,58,237,0.4); box-shadow: var(--shadow-violet); } .product-card.featured::before { opacity: 1; background: linear-gradient(90deg, var(--color-violet), var(--color-violet-light)); } .card-badge { position: absolute; top: 20px; left: 20px; padding: 4px 12px; background: linear-gradient(135deg, var(--color-violet), var(--color-violet-light)); border-radius: 50px; font-size: 11px; font-weight: 700; color: var(--color-white); letter-spacing: 0.05em; } .card-icon { width: 60px; height: 60px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 24px; } .card-icon.cyan-icon { background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.2); } .card-icon.violet-icon { background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.2); } .card-title { font-size: 22px; font-weight: 700; margin-bottom: 12px; } .card-desc { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 24px; } .card-features { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; } .card-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text-primary); } .card-features li::before { content: '✓'; width: 20px; height: 20px; background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--color-cyan); font-weight: 700; flex-shrink: 0; } .card-pricing { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); } .price-amount { font-size: 36px; font-weight: 800; font-family: var(--font-heading); color: var(--color-cyan); line-height: 1; } .price-currency { font-size: 16px; color: var(--color-text-muted); margin-bottom: 4px; } .price-period { font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; } /* Features */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; } .feature-card { padding: 32px 28px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); backdrop-filter: blur(15px); transition: all var(--transition-med); } .feature-card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,0.25); box-shadow: var(--shadow-card); } .feature-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(124,58,237,0.1)); border: 1px solid var(--color-border); transition: all var(--transition-fast); } .feature-card:hover .feature-icon { background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(124,58,237,0.2)); box-shadow: var(--shadow-cyan); } .feature-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature-desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; } /* Testimonials */ .testimonials-section { background: var(--color-bg-secondary); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; } .testimonial-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px 30px; backdrop-filter: blur(16px); transition: all var(--transition-med); position: relative; overflow: hidden; text-align: right; } .testimonial-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, var(--color-violet), var(--color-cyan)); opacity:.5; } .testimonial-card:hover { transform: translateY(-6px); border-color: rgba(124,58,237,0.35); box-shadow: var(--shadow-card); } .testimonial-stars { color: #fbbf24; font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; } .testimonial-text { font-size: 15px; color: var(--color-text-primary); line-height: 1.9; margin: 0 0 18px; opacity: .95; } .testimonial-user { display:flex; align-items:center; gap: 12px; } .testimonial-avatar{ width: 44px; height: 44px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; font-weight: 800; color: var(--color-white); background: rgba(124,58,237,0.18); border: 1px solid rgba(124,58,237,0.25); flex-shrink: 0; } .testimonial-name { display:block; font-size: 14px; font-weight: 800; color: var(--color-white); } .testimonial-loc { display:block; margin-top: 2px; font-size: 12.5px; color: var(--color-text-muted); } /* CTA Section */ .cta-section { padding: 80px var(--container-pad); text-align: center; } .cta-inner { max-width: 800px; margin: 0 auto; padding: 60px 48px; background: var(--color-bg-card); border-radius: var(--radius-xl); position: relative; overflow: hidden; backdrop-filter: blur(20px); } .cta-border { position: absolute; inset: 0; border-radius: var(--radius-xl); padding: 2px; background: linear-gradient(135deg, var(--color-cyan), var(--color-violet), var(--color-cyan)); background-size: 200% auto; animation: gradientShift 3s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .cta-glow { position: absolute; inset: -60px; background: radial-gradient(circle at center, rgba(0,212,255,0.08) 0%, transparent 70%); pointer-events: none; } .cta-title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; margin-bottom: 16px; position: relative; } .cta-desc { font-size: 17px; color: var(--color-text-muted); max-width: 500px; margin: 0 auto 36px; position: relative; } .cta-buttons { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; } /* Footer */ .site-footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: 70px 0 30px; } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 50px; } .footer-brand-desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.8; margin-bottom: 24px; margin-top: 12px; } .social-links { display: flex; gap: 12px; } .social-link { width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: all var(--transition-fast); font-size: 14px; } .social-link:hover { border-color: var(--color-cyan); color: var(--color-cyan); background: rgba(0,212,255,0.05); } .footer-column h4 { font-size: 15px; font-weight: 700; color: var(--color-white); margin-bottom: 20px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 14px; color: var(--color-text-muted); transition: all var(--transition-fast); } .footer-links a:hover { color: var(--color-cyan); padding-right: 4px; } .footer-bottom { padding-top: 28px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-bottom p { font-size: 13px; color: var(--color-text-muted); } .footer-love { color: #ff6b9d; } .lahdod-footer--widgets-hidden .footer-bottom { padding-top: 0; border-top: 0; justify-content: center; text-align: center; } /* Animations */ @keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } .animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .animate-on-scroll.in-view { opacity: 1; transform: translateY(0); } /* Responsive */ /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg-primary); } ::-webkit-scrollbar-thumb { background: var(--color-violet); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-cyan); } ::selection { background: var(--color-glow-violet); color: var(--color-white); } /* ================================================================ FOOTER WIDGETS - Styles for widget areas ================================================================ */ /* Widget title inside footer column */ .footer-column .footer-widget-title, .footer-column h4.footer-widget-title { font-size: 15px; font-weight: 700; color: var(--color-white); margin-bottom: 20px; font-family: var(--font-heading); } /* Text widget */ .footer-widget p { font-size: 14px; color: var(--color-text-muted); line-height: 1.8; margin-bottom: 12px; } /* Navigation Menu widget in footer */ .footer-widget .menu { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-widget .menu a { font-size: 14px; color: var(--color-text-muted); transition: color var(--transition-fast), padding-right var(--transition-fast); } .footer-widget .menu a:hover { color: var(--color-cyan); padding-right: 4px; } /* Custom HTML widget */ .footer-widget .textwidget a { color: var(--color-text-muted); font-size: 14px; transition: color var(--transition-fast); } .footer-widget .textwidget a:hover { color: var(--color-cyan); } /* Recent Posts widget */ .footer-widget .widget_recent_entries ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-widget .widget_recent_entries a { font-size: 14px; color: var(--color-text-muted); transition: color var(--transition-fast); } .footer-widget .widget_recent_entries a:hover { color: var(--color-cyan); } /* Search widget */ .footer-widget .search-form { display: flex; gap: 8px; margin-top: 8px; } .footer-widget .search-field { flex: 1; padding: 8px 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-white); font-size: 13px; font-family: var(--font-body); } .footer-widget .search-submit { padding: 8px 16px; background: linear-gradient(135deg, var(--color-cyan), var(--color-violet)); border: none; border-radius: var(--radius-sm); color: var(--color-white); font-size: 13px; cursor: pointer; transition: opacity var(--transition-fast); } .footer-widget .search-submit:hover { opacity: 0.85; } /* Footer brand col - keep logo styles */ .footer-logo { margin-bottom: 16px; } .footer-logo .logo-text { font-size: 22px; } /* ================================================================ SOCIAL ICONS BAR (Customizer) ================================================================ */ .lahdod-social-bar { margin-top: 14px; border-top: 1px solid var(--color-border); padding: 12px 0; } .lahdod-social-bar.location-header { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--color-border); } .lahdod-social-links { display: flex; gap: 10px; direction: ltr; /* physical left/right alignment */ } .lahdod-social-bar.align-left .lahdod-social-links { justify-content: flex-start; } .lahdod-social-bar.align-center .lahdod-social-links { justify-content: center; } .lahdod-social-bar.align-right .lahdod-social-links { justify-content: flex-end; } .lahdod-social-bar.tone-dark .social-link { color: var(--color-text-muted); } .lahdod-social-bar.tone-light .social-link { color: var(--color-text-primary); } .lahdod-social-bar .social-link { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-card); transition: all var(--transition-fast); } .lahdod-social-bar .social-link svg { width: 18px; height: 18px; } .lahdod-social-bar .social-link:hover { transform: translateY(-2px); border-color: var(--color-cyan); color: var(--color-cyan); box-shadow: var(--shadow-cyan); } /* Inline social (inside header row) */ .lahdod-social-inline { display:flex; align-items:center; } .lahdod-social-inline .lahdod-social-links { display:flex; gap:10px; direction:ltr; margin:0; } .lahdod-social-inline.align-left .lahdod-social-links { justify-content:flex-start; } .lahdod-social-inline.align-center .lahdod-social-links { justify-content:center; } .lahdod-social-inline.align-right .lahdod-social-links { justify-content:flex-end; } .lahdod-social-inline.tone-dark .social-link { color: var(--color-text-muted); } .lahdod-social-inline.tone-light .social-link { color: var(--color-text-primary); } .lahdod-social-inline .social-link { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-card); transition: all var(--transition-fast); } .lahdod-social-inline .social-link svg { width: 16px; height: 16px; } .lahdod-social-inline .social-link:hover { transform: translateY(-2px); border-color: var(--color-cyan); color: var(--color-cyan); } /* Cart icon (WooCommerce) — styled like social icons */ .lahdod-cart-inline, .lahdod-cart-bar { display:flex; align-items:center; } .lahdod-cart-inline .lahdod-social-links, .lahdod-cart-bar .lahdod-social-links { display:flex; gap:10px; direction:ltr; margin:0; } .lahdod-cart-link { position: relative; } .lahdod-cart-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, var(--color-cyan), var(--color-violet)); color: var(--color-white); font-size: 11px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-cyan); border: 1px solid rgba(255,255,255,0.18); } /* Social links inside widgets */ .footer-widget .social-links { display: flex; gap: 10px; margin-top: 8px; } /* Header sticky/transparent variants */ .site-header.is-static { position: relative; } .site-header.is-sticky { position: fixed; } .site-header.is-solid { background: rgba(6,13,31,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); } /* Body top padding when sticky */ .site-header.is-sticky ~ * { scroll-margin-top: 80px; } body:has(.site-header.is-sticky) { padding-top: 0; } /* ================================================================ SITE WIDTH CONTROL (Customizer) ================================================================ */ /* Use CSS variable so header/footer/containers stay in sync */ body.layout-boxed { --container-max: 1200px; } body.layout-wide { --container-max: 1440px; } body.layout-full { --container-max: 100%; } body.layout-narrow { --container-max: 960px; } /* Back-compat (older direct overrides) */ body.layout-boxed .container { max-width: 1200px; } body.layout-wide .container { max-width: 1440px; } body.layout-full .container { max-width: 100%; } body.layout-narrow .container { max-width: 960px; } /* ================================================================ PAGE HERO (shared across all inner pages) ================================================================ */ .page-hero-section { padding: 140px var(--container-pad) 80px; text-align: center; position: relative; } .page-hero-inner { max-width: 800px; margin: 0 auto; } .page-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border: 1px solid var(--color-border); border-radius: 50px; background: rgba(0,212,255,0.06); color: var(--color-cyan); font-size: 13px; font-weight: 600; margin-bottom: 24px; backdrop-filter: blur(10px); } .page-hero-title { font-size: clamp(32px, 5vw, 64px); font-weight: 800; margin-bottom: 16px; line-height: 1.15; } .page-hero-subtitle { font-size: clamp(16px, 2vw, 20px); color: var(--color-text-muted); max-width: 600px; margin: 0 auto 16px; line-height: 1.8; } .page-hero-desc { font-size: 16px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto; line-height: 1.8; } .page-hero-desc p { margin-bottom: 8px; } .page-hero-meta { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--color-text-muted); font-size: 13px; line-height: 1.4; } .page-hero-meta time { color: inherit; } /* ================================================================ ABOUT PAGE ================================================================ */ .about-stats-section { padding: 0; } .about-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 2px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin: 0 0 80px; } .about-stat-item { background: var(--color-bg-secondary); padding: 40px 24px; text-align: center; } .about-stat-num { font-size: 36px; font-weight: 800; font-family: var(--font-heading); background: linear-gradient(135deg, var(--color-cyan), var(--color-violet-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; } .about-stat-lbl { font-size: 14px; color: var(--color-text-muted); } .about-vm-section { padding: 80px 0; } .about-vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .about-vm-card { padding: 48px 40px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); transition: all var(--transition-med); } .about-vm-card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,0.3); box-shadow: var(--shadow-cyan); } .about-vm-icon { font-size: 40px; margin-bottom: 20px; display: block; } .about-vm-title { font-size: 22px; font-weight: 700; margin-bottom: 12px; } .about-vm-desc { font-size: 16px; color: var(--color-text-muted); line-height: 1.8; } .about-values-section { background: var(--color-bg-secondary); padding: 80px 0; } .about-values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .about-team-section { padding: 80px 0; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; } .team-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; backdrop-filter: blur(15px); transition: all var(--transition-med); } .team-card:hover { transform: translateY(-6px); border-color: rgba(0,212,255,0.3); box-shadow: var(--shadow-card); } .team-avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 20px; overflow: hidden; border: 2px solid var(--color-border); background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(124,58,237,0.1)); display: flex; align-items: center; justify-content: center; } .team-avatar img { width: 100%; height: 100%; object-fit: cover; } .team-avatar-letter { font-size: 32px; font-weight: 800; color: var(--color-cyan); font-family: var(--font-heading); } .team-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .team-role { font-size: 13px; color: var(--color-cyan); font-weight: 600; margin-bottom: 10px; } .team-bio { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; } /* ================================================================ SERVICES PAGE ================================================================ */ .services-section { padding: 80px 0; background: var(--color-bg-secondary); } /* * Flex layout here intentionally: * - avoids the "empty slot" look when the number of cards isn't a multiple of the grid columns * - keeps the last row centered automatically * - preserves responsive behavior without needing the editor to manage columns */ .services-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: stretch; } .services-grid .service-card { flex: 1 1 min(100%, 300px); max-width: 420px; } .service-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px 32px; backdrop-filter: blur(20px); transition: all var(--transition-med); position: relative; overflow: hidden; display: flex; flex-direction: column; } .service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--color-cyan),var(--color-violet)); opacity:0; transition:opacity var(--transition-med); } .service-card:hover { transform:translateY(-6px); border-color:rgba(0,212,255,0.3); box-shadow:var(--shadow-cyan); } .service-card:hover::before { opacity:1; } .service-icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2); } .service-title { font-size:20px; font-weight:700; margin-bottom:12px; } .service-desc { font-size:14px; color:var(--color-text-muted); line-height:1.7; margin-bottom:16px; flex:1; } .service-price { font-size:15px; font-weight:700; color:var(--color-cyan); padding-top:16px; border-top:1px solid var(--color-border); } .page-cta-section { padding: 80px var(--container-pad); } .page-cta-inner { max-width: 700px; margin: 0 auto; padding: 52px 48px; background: var(--color-bg-card); border-radius: var(--radius-xl); position: relative; overflow: hidden; backdrop-filter: blur(20px); text-align: center; } /* ================================================================ CONTACT PAGE ================================================================ */ .contact-section { padding: 80px 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; } .contact-info { display: flex; flex-direction: column; gap: 16px; } .contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 24px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); backdrop-filter: blur(15px); transition: all var(--transition-fast); } .contact-card:hover { border-color: rgba(0,212,255,0.25); transform: translateX(-4px); } .contact-card-icon { font-size: 24px; flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0,212,255,0.08); border-radius: var(--radius-sm); } .contact-card-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .contact-card-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; } .contact-card-value { font-size: 14px; color: var(--color-cyan); font-weight: 600; transition: color var(--transition-fast); } .contact-card-value:hover { color: var(--color-violet-light); } .contact-socials { padding: 16px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .contact-socials p { font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; } /* Contact Form */ .contact-form-area { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 36px; backdrop-filter: blur(20px); } .lahdod-contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .lahdod-contact-form .cf-field { margin-bottom: 16px; } .lahdod-contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; } .lahdod-contact-form label span { color: var(--color-cyan); } .lahdod-contact-form input, .lahdod-contact-form textarea, .wpcf7-form input, .wpcf7-form textarea { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.04); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-white); font-size: 14px; font-family: var(--font-body); transition: border-color var(--transition-fast); direction: rtl; } .lahdod-contact-form input:focus, .lahdod-contact-form textarea:focus, .wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.08); } .lahdod-contact-form textarea, .wpcf7-form textarea { min-height: 130px; resize: vertical; } /* ================================================================ PRICING PAGE ================================================================ */ .pricing-section { padding: 80px 0; background: var(--color-bg-secondary); } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; } .pricing-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 32px; backdrop-filter: blur(20px); transition: all var(--transition-med); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 20px; } .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } .pricing-featured { border-color: rgba(124,58,237,0.5); box-shadow: var(--shadow-violet); transform: scale(1.03); } .pricing-featured::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--color-violet),var(--color-violet-light)); } .pricing-name { font-size: 20px; font-weight: 700; } .pricing-price-wrap { display: flex; align-items: flex-end; gap: 6px; } .pricing-features { margin: 0; } .pricing-guarantee { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 40px; padding: 16px 28px; background: rgba(0,212,255,0.04); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 14px; color: var(--color-text-muted); } .pricing-faq-section { padding: 80px 0; } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; } .faq-card { padding: 28px 24px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); backdrop-filter: blur(15px); } .faq-q { font-size: 15px; font-weight: 700; margin-bottom: 10px; } .faq-a { font-size: 14px; color: var(--color-text-muted); line-height: 1.7; } /* ================================================================ FAQ PAGE ================================================================ */ .faq-main-section { padding: 80px 0; } .faq-cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; } .faq-cat-btn { padding: 8px 20px; border-radius: 50px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-size: 14px; cursor: pointer; font-family: var(--font-body); transition: all var(--transition-fast); } .faq-cat-btn:hover, .faq-cat-btn.active { background: rgba(0,212,255,0.1); border-color: var(--color-cyan); color: var(--color-cyan); } .faq-accordion { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; backdrop-filter: blur(15px); transition: border-color var(--transition-fast); } .faq-item.open { border-color: rgba(0,212,255,0.3); } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: none; border: none; cursor: pointer; color: var(--color-white); font-size: 16px; font-weight: 600; font-family: var(--font-body); text-align: right; direction: rtl; } .faq-icon { font-size: 22px; color: var(--color-cyan); flex-shrink: 0; transition: transform var(--transition-fast); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 24px; } .faq-item.open .faq-answer { max-height: 500px; padding: 0 24px 20px; } .faq-answer p { font-size: 15px; color: var(--color-text-muted); line-height: 1.8; } /* ================================================================ RESPONSIVE for inner pages ================================================================ */ /* ============================================================= 📱 Mobile Small (≤480px) — إصلاح شريط التمرير الأفقي يُغطي جميع الصفحات: Home، About، Services، Contact، FAQ، Pricing، Landing pages، WooCommerce، Single Post/Page ============================================================= */ /* ============================================================= 📱 Ultra-small (≤360px) — شاشات استثنائية قديمة ============================================================= */ @media (max-width: 360px) { .about-values-grid, .about-stats-grid { grid-template-columns: 1fr !important; } section { padding: 40px 0 !important; } /* lahdod-cards: بطاقة واحدة فقط في العرض */ .lahdod-cards > * { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0 !important; } .lahdod-cards { gap: 12px !important; } .hero-stats { padding: 12px !important; gap: 8px !important; } .stat-number { font-size: 22px !important; } .pricing-card { padding: 20px 14px !important; } .product-card { padding: 20px 14px !important; } .service-card { padding: 20px 14px !important; } .feature-card { padding: 18px 14px !important; } .testimonial-card { padding: 18px 14px !important; } .about-vm-card { padding: 22px 14px !important; } .contact-form-area { padding: 18px 14px !important; } .faq-question { padding: 14px !important; } .cta-inner, .page-cta-inner { padding: 20px 14px !important; } .btn { padding: 10px 18px !important; font-size: 13px !important; } .nav-cta a { padding: 8px 16px !important; } .section-header { margin-bottom: 28px !important; } .footer-grid { gap: 20px !important; } } /* ========================================================= Duo-tone Icon Colors (Front-end Fix) Default: Cyan | Hover/Active: White (Added in v3.1.4 to ensure visibility across all pages) ========================================================= */ .lahdod-duotone-icon svg .duo-primary{ stroke: var(--color-cyan) !important; stroke-width: 1.7 !important; transition: stroke .25s ease, opacity .25s ease; } .lahdod-duotone-icon svg .duo-secondary{ fill: var(--color-cyan) !important; opacity: .20 !important; transition: fill .25s ease, opacity .25s ease; } :is( .service-card, .feature-card, .product-card, .pricing-card, .about-vm-card, .about-stat-card, .contact-card, .contact-info-card, .about-value-card, .about-vm-card, .pricing-card ):hover .lahdod-duotone-icon svg .duo-primary, :is( .service-card, .feature-card, .product-card, .pricing-card, .about-vm-card, .about-stat-card, .contact-card, .contact-info-card, .about-value-card, .about-vm-card, .pricing-card ).is-active .lahdod-duotone-icon svg .duo-primary, :is( .service-card, .feature-card, .product-card, .pricing-card, .about-vm-card, .about-stat-card, .contact-card, .contact-info-card, .about-value-card, .about-vm-card, .pricing-card ):focus-within .lahdod-duotone-icon svg .duo-primary{ stroke: #fff !important; } :is( .service-card, .feature-card, .product-card, .pricing-card, .about-vm-card, .about-stat-card, .contact-card, .contact-info-card, .about-value-card, .about-vm-card, .pricing-card ):hover .lahdod-duotone-icon svg .duo-secondary, :is( .service-card, .feature-card, .product-card, .pricing-card, .about-vm-card, .about-stat-card, .contact-card, .contact-info-card, .about-value-card, .about-vm-card, .pricing-card ).is-active .lahdod-duotone-icon svg .duo-secondary, :is( .service-card, .feature-card, .product-card, .pricing-card, .about-vm-card, .about-stat-card, .contact-card, .contact-info-card, .about-value-card, .about-vm-card, .pricing-card ):focus-within .lahdod-duotone-icon svg .duo-secondary{ fill: #fff !important; opacity: .26 !important; } /* ================================================================ BLOG / SINGLE POST / PAGE CONTENT يُطبَّق على: index.php (قائمة المقالات) و page.php (صفحة مفردة) ================================================================ */ /* ── Wrapper الرئيسي ──────────────────────────────────────────── */ .lahdod-blog-wrap, .lahdod-page-wrap { padding-bottom: 80px; } /* Sticky header compensation: body doesn't need padding since main has it */ .lahdod-page-wrap .lahdod-entry-header:first-child, .lahdod-blog-wrap > header:first-child { margin-top: 0; } /* ── قائمة المقالات ──────────────────────────────────────────── */ .lahdod-posts-list { display: flex; flex-direction: column; gap: 32px; margin-top: 16px; } /* ── بطاقة المقال ────────────────────────────────────────────── */ .lahdod-post-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 40px 36px; backdrop-filter: blur(20px); transition: all var(--transition-med); position: relative; overflow: hidden; } .lahdod-post-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-cyan), var(--color-violet)); opacity: 0; transition: opacity var(--transition-med); } .lahdod-post-card:hover { transform: translateY(-4px); border-color: rgba(0, 212, 255, 0.28); box-shadow: var(--shadow-card); } .lahdod-post-card:hover::before { opacity: 1; } /* ── Thumbnail ───────────────────────────────────────────────── */ .lahdod-post-thumb { width: 100%; margin-bottom: 24px; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 7; background: var(--color-bg-secondary); } .lahdod-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-med); } .lahdod-post-card:hover .lahdod-post-thumb img { transform: scale(1.04); } /* ── Meta (Date / Category) ──────────────────────────────────── */ .lahdod-post-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .lahdod-post-meta time, .lahdod-post-meta .post-cat, .lahdod-post-meta .post-author { font-size: 13px; color: var(--color-text-muted); display: flex; align-items: center; gap: 5px; } .lahdod-post-meta .post-cat a { color: var(--color-cyan); font-weight: 600; } /* ── العنوان والمقتطف ──────────────────────────────────────── */ .lahdod-post-title { font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; line-height: 1.3; margin-bottom: 14px; } .lahdod-post-title a { color: var(--color-white); transition: color var(--transition-fast); } .lahdod-post-title a:hover { color: var(--color-cyan); } .lahdod-post-excerpt { font-size: 15px; color: var(--color-text-muted); line-height: 1.8; margin-bottom: 24px; /* منع المقتطف من أن يطول أكثر من 3 أسطر */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lahdod-post-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-cyan); transition: all var(--transition-fast); } .lahdod-post-readmore:hover { color: var(--color-violet-light); gap: 10px; } /* ── Pagination ──────────────────────────────────────────────── */ .lahdod-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; } .lahdod-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text-muted); font-size: 14px; font-weight: 600; transition: all var(--transition-fast); text-decoration: none; } .lahdod-pagination .page-numbers:hover, .lahdod-pagination .page-numbers.current { background: linear-gradient(135deg, var(--color-cyan), var(--color-violet)); border-color: transparent; color: var(--color-white); box-shadow: var(--shadow-cyan); } /* ── Single Post / Page Content ─────────────────────────────── */ .lahdod-entry-header { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border); } .lahdod-entry-title { font-size: clamp(28px, 4vw, 52px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; } .lahdod-entry-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .lahdod-entry-meta time, .lahdod-entry-meta .entry-cat, .lahdod-entry-meta .entry-author { font-size: 13px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; } .lahdod-entry-meta .entry-cat a { color: var(--color-cyan); font-weight: 600; } /* ── Featured Image ──────────────────────────────────────────── */ .lahdod-featured-image { margin-bottom: 40px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 7; } .lahdod-featured-image img { width: 100%; height: 100%; object-fit: cover; } /* ── محتوى المقال / الصفحة (wp-content) ─────────────────────── */ .lahdod-entry-content { font-size: 16px; line-height: 1.9; color: var(--color-text-primary); } .lahdod-entry-content h1, .lahdod-entry-content h2, .lahdod-entry-content h3, .lahdod-entry-content h4, .lahdod-entry-content h5, .lahdod-entry-content h6 { font-family: var(--font-heading); font-weight: 700; margin-top: 2em; margin-bottom: 0.75em; line-height: 1.3; color: var(--color-white); } .lahdod-entry-content h2 { font-size: clamp(22px, 3vw, 32px); } .lahdod-entry-content h3 { font-size: clamp(18px, 2.5vw, 26px); } .lahdod-entry-content h4 { font-size: clamp(16px, 2vw, 22px); } .lahdod-entry-content p { margin-bottom: 1.5em; color: var(--color-text-primary); } .lahdod-entry-content a { color: var(--color-cyan); text-decoration: underline; text-underline-offset: 3px; } .lahdod-entry-content a:hover { color: var(--color-violet-light); } .lahdod-entry-content ul, .lahdod-entry-content ol { padding-right: 24px; margin-bottom: 1.5em; display: flex; flex-direction: column; gap: 8px; } .lahdod-entry-content ul li, .lahdod-entry-content ol li { font-size: 15px; color: var(--color-text-primary); line-height: 1.8; } .lahdod-entry-content ul li::marker { color: var(--color-cyan); } .lahdod-entry-content ol li::marker { color: var(--color-cyan); font-weight: 700; } .lahdod-entry-content blockquote { margin: 2em 0; padding: 20px 28px; border-right: 3px solid var(--color-cyan); background: rgba(0, 212, 255, 0.04); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-muted); font-style: italic; font-size: 16px; line-height: 1.8; } .lahdod-entry-content code { background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.18); border-radius: 4px; padding: 2px 7px; font-size: 0.875em; color: var(--color-cyan); direction: ltr; display: inline-block; } .lahdod-entry-content pre { background: rgba(10, 22, 40, 0.8); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 24px; overflow-x: auto; margin-bottom: 1.5em; direction: ltr; } .lahdod-entry-content pre code { background: none; border: none; padding: 0; font-size: 14px; color: var(--color-cyan); } .lahdod-entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 12px 0; } .lahdod-entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: 14px; } .lahdod-entry-content table th, .lahdod-entry-content table td { padding: 12px 16px; border: 1px solid var(--color-border); text-align: right; } .lahdod-entry-content table th { background: rgba(0, 212, 255, 0.06); color: var(--color-white); font-weight: 700; } .lahdod-entry-content table tr:hover td { background: rgba(255, 255, 255, 0.02); } .lahdod-entry-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2.5em 0; } /* ── Post Tags ───────────────────────────────────────────────── */ .lahdod-post-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); } .lahdod-post-tags .tag-label { font-size: 13px; color: var(--color-text-muted); } .lahdod-post-tags a { display: inline-flex; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 50px; font-size: 12px; color: var(--color-text-muted); transition: all var(--transition-fast); } .lahdod-post-tags a:hover { border-color: var(--color-cyan); color: var(--color-cyan); background: rgba(0, 212, 255, 0.05); } /* ── Empty content message ───────────────────────────────────── */ .lahdod-no-content { text-align: center; padding: 60px 24px; color: var(--color-text-muted); } .lahdod-no-content h2 { margin-bottom: 12px; } /* ── 404 Page ─────────────────────────────────────────────── */ .lahdod-404-wrap { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding-top: clamp(80px, 12vh, 130px); padding-bottom: 60px; } .lahdod-404-inner { text-align: center; max-width: 560px; } .lahdod-404-code { display: block; font-size: clamp(72px, 18vw, 140px); font-weight: 800; font-family: var(--font-heading); line-height: 1; margin-bottom: 16px; letter-spacing: -4px; } .lahdod-404-title { font-size: clamp(22px, 4vw, 36px); font-weight: 700; margin-bottom: 12px; color: var(--color-white); } .lahdod-404-desc { font-size: 16px; color: var(--color-text-muted); margin-bottom: 36px; line-height: 1.7; } .lahdod-404-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } /* ── Mobile Responsive ───────────────────────────────────────── */ /* ========================================================= ♿ FOCUS-VISIBLE & ACCESSIBILITY — v5.2.0 يضمن وجود focus indicator واضح لمستخدمي لوحة المفاتيح ========================================================= */ /* ── إزالة outline الافتراضي القبيح — سيُستبدل أدناه ─────── */ *:focus { outline: none; } /* ── focus-visible: يظهر فقط عند التنقل بلوحة المفاتيح ───── (لا يظهر عند النقر بالماوس — سلوك أكثر احترافاً) */ *:focus-visible { outline: 2px solid var(--color-cyan, #00d4ff); outline-offset: 3px; border-radius: 4px; } /* ── الأزرار ─────────────────────────────────────────────── */ button:focus-visible, .button:focus-visible, [type="button"]:focus-visible, [type="submit"]:focus-visible, .lahdod-btn:focus-visible, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible { outline: 2px solid var(--color-cyan, #00d4ff); outline-offset: 4px; border-radius: 50px; box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.20); } /* ── الروابط ─────────────────────────────────────────────── */ a:focus-visible { outline: 2px solid var(--color-cyan, #00d4ff); outline-offset: 2px; border-radius: 3px; } /* ── حقول النماذج ────────────────────────────────────────── */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-cyan, #00d4ff); outline-offset: 0; border-color: var(--color-cyan, #00d4ff) !important; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important; } /* ── قائمة التنقل ────────────────────────────────────────── */ .lahdod-nav a:focus-visible, .lahdod-header nav a:focus-visible { outline: 2px solid var(--color-cyan, #00d4ff); outline-offset: 4px; border-radius: 6px; } /* ── WooCommerce product cards ───────────────────────────── */ .lahdod-wc-card a:focus-visible, .woocommerce ul.products li.product a:focus-visible { outline: 2px solid var(--color-cyan, #00d4ff); outline-offset: 3px; border-radius: 8px; } /* ── Skip Navigation Link ────────────────────────────────── */ /* مخفي بصرياً — يظهر فقط عند التنقل بلوحة المفاتيح */ .lahdod-skip-link { position: absolute; top: -100px; right: 0; z-index: 99999; padding: 12px 24px; background: var(--color-cyan, #00d4ff); color: #0D1B2A; font-family: 'Tajawal', Arial, sans-serif; font-size: 16px; font-weight: 700; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s ease; /* لا يؤثر على التخطيط حين يكون مخفياً */ clip: rect(0 0 0 0); white-space: nowrap; } .lahdod-skip-link:focus, .lahdod-skip-link:focus-visible { top: 0; clip: auto; outline: 3px solid #0D1B2A; outline-offset: -3px; } /* ── @media (max-width: 768px) — MERGED v5.4.0 (3 blocks → 1) ── */ @media (max-width: 768px) { /* Header */ .header-inner { padding: 14px var(--container-pad); } .logo-text { font-size: 18px; } .logo-icon { width: 36px; height: 36px; font-size: 16px; } .lahdod-cart-badge { min-width: 16px; height: 16px; font-size: 10px; } /* Nav mobile */ .header-right nav { position: static; } .nav-menu { display: none; flex-direction: column; position: absolute; top: 100%; right: 0; left: 0; background: rgba(6,13,31,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 18px; border-bottom: 1px solid var(--color-border); gap: 8px; box-shadow: 0 18px 40px rgba(0,0,0,0.28); } .nav-menu.open { display: flex; } .nav-menu > li { width: 100%; } .nav-menu > li > a { padding: 12px 14px; font-size: 15px; border-radius: 14px; } .nav-menu .menu-item-has-children { display: block; } .nav-menu .menu-item-has-children > a, .nav-menu .menu-item-has-children > .menu-link-wrap > a { padding-inline-end: 14px; } .nav-menu .menu-item-has-children > a::after, .nav-menu .menu-item-has-children > .menu-link-wrap > a::after { display: none; } .nav-menu .menu-item-has-children > .sub-menu { position: static; min-width: 0; margin-top: 8px; margin-inline-start: 0; padding: 8px; gap: 6px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; display: none; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); } .nav-menu .menu-item-has-children > .sub-menu::before, .nav-menu .menu-item-has-children > .sub-menu::after { display: none; } .nav-menu .menu-item-has-children.is-submenu-open > .sub-menu { display: flex; } .nav-menu .menu-item-has-children > .menu-link-wrap { display: flex; align-items: center; gap: 10px; } .nav-menu .menu-item-has-children > .menu-link-wrap > a { flex: 1 1 auto; min-width: 0; } .nav-submenu-toggle { display: inline-flex; } .nav-menu .sub-menu a { padding: 11px 12px; font-size: 14px; } .nav-cta a { margin-top: 8px; text-align: center; justify-content: center; } .menu-toggle { display: flex; } /* Hero */ .hero-stats { gap: 20px; padding: 20px; } .hero-title { font-size: clamp(30px, 8vw, 52px) !important; } .stat-divider { display: none; } /* Grids */ .footer-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr; } /* CTA */ .cta-inner { padding: 40px 24px; } .cta-buttons { flex-wrap: wrap; justify-content: center; } /* Sections spacing */ section { padding: 64px 0; } .section-header { margin-bottom: 40px; } /* About */ .about-vm-card { padding: 36px 28px; } .about-stat-item { padding: 30px 16px; } /* Footer */ .site-footer { padding-top: 56px; } .footer-bottom { flex-wrap: wrap; gap: 12px; } /* page-cta */ .page-cta-inner { padding: 40px 28px; } /* feature / testimonial cards */ .feature-card { padding: 28px 22px; } .testimonial-card { padding: 28px 22px; } /* Layout fixes */ .about-vm-grid { grid-template-columns: 1fr; gap: 18px; } .contact-grid { grid-template-columns: 1fr; gap: 24px; } .faq-grid { grid-template-columns: 1fr; gap: 14px; } .pricing-featured { transform: none; } .lahdod-contact-form .cf-row { grid-template-columns: 1fr; } .about-values-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 2px; } .team-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 20px; } .pricing-grid { gap: 18px; } /* Card padding reductions for 768 */ .product-card { padding: 32px 26px; } .contact-form-area { padding: 32px 26px; } .faq-card { padding: 22px 18px; } .about-vm-card { padding: 32px 24px; } /* Section spacing */ .about-vm-section, .about-values-section, .about-team-section, .services-section, .contact-section, .pricing-section, .pricing-faq-section, .faq-main-section { padding: 60px 0; } .lahdod-post-card { padding: 28px 24px; } .lahdod-entry-header { margin-bottom: 28px; padding-bottom: 24px; } .lahdod-featured-image { margin-bottom: 28px; } } /* ── @media (max-width: 480px) — MERGED v5.4.0 (3 blocks → 1) ── */ @media (max-width: 480px) { /* ── Global ─────────────────────────────────────────────────────── */ * { max-width: 100%; } img, video, iframe, embed, object { max-width: 100% !important; } /* ── Container ──────────────────────────────────────────────────── */ .container { padding-inline: 16px !important; } /* ── Sections ───────────────────────────────────────────────────── */ section { padding-left: 0 !important; padding-right: 0 !important; } /* ── Hero ────────────────────────────────────────────────────────── */ .hero-section { padding-top: 90px !important; padding-bottom: 60px !important; } .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px !important; } .hero-ctas .btn { width: 100%; justify-content: center; } .hero-stats { padding: 16px !important; gap: 12px !important; width: 100% !important; } /* ── Page Hero ───────────────────────────────────────────────────── */ .page-hero-section { padding-top: 110px !important; padding-bottom: 40px !important; } /* ── CTA ─────────────────────────────────────────────────────────── */ .cta-inner, .page-cta-inner { padding: 28px 20px !important; margin-inline: 0 !important; } .cta-buttons { flex-direction: column; gap: 10px !important; } .cta-buttons .btn { width: 100%; justify-content: center; } /* ── About ───────────────────────────────────────────────────────── */ .about-values-grid { grid-template-columns: 1fr 1fr !important; } .about-stats-grid { grid-template-columns: 1fr 1fr !important; } .about-vm-card { padding: 28px 20px !important; } .about-stat-item { padding: 24px 12px !important; } .about-stat-num { font-size: 28px !important; } /* ── Section vertical spacing ────────────────────────────────────── */ section { padding: 52px 0 !important; } /* ── Grids ───────────────────────────────────────────────────────── */ .features-grid, .testimonials-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .products-grid { grid-template-columns: 1fr !important; gap: 20px !important; } /* ── lahdod-cards: override flex-basis so cards stack on small screens */ .lahdod-cards > * { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Restore gap/layout on the container */ .lahdod-cards { gap: 16px !important; } /* ── Product card ────────────────────────────────────────────────── */ .product-card { padding: 28px 20px !important; } /* ── Features card ───────────────────────────────────────────────── */ .feature-card { padding: 24px 18px !important; } /* ── Testimonial card ────────────────────────────────────────────── */ .testimonial-card { padding: 24px 18px !important; } /* ── Pricing ─────────────────────────────────────────────────────── */ .pricing-card { padding: 28px 20px !important; } .pricing-grid { gap: 16px !important; } .pricing-featured { transform: none !important; } .pricing-guarantee { padding: 14px 18px !important; gap: 10px !important; } /* ── Services ────────────────────────────────────────────────────── */ .service-card { flex-basis: 100% !important; max-width: 100% !important; padding: 28px 20px !important; } .services-grid { gap: 16px !important; } /* ── Contact ─────────────────────────────────────────────────────── */ .contact-section { padding-block: 48px !important; } .contact-form-area { padding: 24px 18px !important; } .contact-card { padding: 16px !important; gap: 12px !important; } /* ── FAQ ─────────────────────────────────────────────────────────── */ .faq-cats { flex-wrap: wrap !important; gap: 8px !important; } .faq-cat-btn { font-size: 0.82rem !important; padding: 7px 14px !important; } .faq-question { padding: 16px 18px !important; font-size: 15px !important; } .faq-item.open .faq-answer { padding: 0 18px 16px !important; } /* ── Footer ──────────────────────────────────────────────────────── */ .footer-grid { gap: 28px !important; } .site-footer { padding-top: 48px !important; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px !important; } /* ── Team ────────────────────────────────────────────────────────── */ .team-grid { gap: 16px !important; } .team-card { padding: 24px 16px !important; } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn { padding: 12px 24px !important; font-size: 14px !important; } /* ── Section header ──────────────────────────────────────────────── */ .section-header { margin-bottom: 36px !important; } .section-title { margin-bottom: 12px !important; } /* ── Page/Post content ───────────────────────────────────────────── */ .lahdod-post-card { padding: 22px 16px !important; } .lahdod-page-wrap, .lahdod-blog-wrap { padding-bottom: 48px !important; } .lahdod-404-actions { flex-direction: column; gap: 10px; } .lahdod-404-actions .btn { width: 100%; justify-content: center; } .lahdod-404-desc { font-size: 14px; margin-bottom: 28px; } .lahdod-post-card { padding: 22px 16px; gap: 14px; } .lahdod-post-thumb { aspect-ratio: 16 / 9; margin-bottom: 18px; } .lahdod-post-meta { gap: 10px; } .lahdod-entry-content { font-size: 15px; } .lahdod-entry-content blockquote { padding: 14px 18px; } .lahdod-entry-content pre { padding: 14px 16px; } .lahdod-pagination .page-numbers { min-width: 36px; height: 36px; font-size: 13px; } } /* ── @media (max-width: 1024px) — MERGED v5.4.0 (2 blocks → 1) ── */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } .about-values-grid { grid-template-columns: repeat(2, 1fr); } .about-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Scroll To Top Button ══════════════════════════════════════════ */ /* Moved from footer.php inline