/* ============================================ 8on — Landing Page Stylesheet Premium dark-warm aesthetic (coral / amber / cocoa) ============================================ */ :root { /* Brand */ --primary: #ff6a3d; --primary-light: #ff8a65; --primary-dark: #e0461a; --accent: #ffb499; --accent-light: #ffd5c2; --gold: #ffc28a; /* Comma-separated RGB triplets so rgba() inside the rest of the stylesheet can be themed by overriding these instead of repeating literal numbers. */ --primary-rgb: 255,106,61; --primary-dark-rgb: 224,70,26; --accent-rgb: 255,180,153; /* Per-section colors that don't always derive from primary — overridable. */ --cta-bg-from: #ff6a3d; --cta-bg-to: #e0461a; --cta-text: #1a0f0a; --cta-text-soft: #2a160d; --cta-btn-bg: #1a0f0a; --cta-btn-text: #ffd5c2; /* Text rendered on top of the primary gradient (buttons, badges, icon tiles). For dark-text primaries leave this dark; for blue/green primaries it flips to white. */ --text-on-primary: #1a0f0a; --gradient: linear-gradient(135deg, #ff6a3d 0%, #ffb499 100%); --gradient-text: linear-gradient(135deg, #ff8a65 0%, #ffd5c2 60%, #ffb499 100%); --gradient-soft: linear-gradient(135deg, rgba(var(--primary-rgb),0.12) 0%, rgba(var(--accent-rgb),0.12) 100%); --glow: radial-gradient(ellipse at center, rgba(var(--primary-rgb),0.35) 0%, transparent 65%); /* Surfaces — DARK by default to match brand */ --bg: #0f0805; --bg-alt: #150a07; --bg-darker: #080403; --surface: #1a0f0a; --surface-2: #221610; --surface-3: #2d1d15; --border: rgba(var(--accent-rgb),0.10); --border-strong: rgba(var(--accent-rgb),0.18); --text: #f5e6d8; --text-muted: #b8a89a; --text-light: #7a6a5e; --text-on-dark: #f5e6d8; --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 8px 32px rgba(0,0,0,0.4); --shadow-lg: 0 30px 80px -10px rgba(0,0,0,0.6); --shadow-glow: 0 0 80px rgba(var(--primary-rgb),0.35); --t-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --t: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1); --font: 'Tajawal', 'Inter', -apple-system, system-ui, sans-serif; --font-display: 'Cairo', 'Tajawal', sans-serif; --font-serif: 'Playfair Display', 'Cairo', serif; --header-h: 80px; } /* Optional light theme (toggleable) */ [data-theme="light"] { --bg: #fdf8f4; --bg-alt: #f6ece3; --bg-darker: #efe0d2; --surface: #ffffff; --surface-2: #fdf3ea; --surface-3: #f6ece3; --border: rgba(var(--primary-dark-rgb),0.12); --border-strong: rgba(var(--primary-dark-rgb),0.20); --text: #2a160d; --text-muted: #7a5e4e; --text-light: #b09684; --shadow: 0 4px 24px rgba(120,60,30,0.08); --shadow-lg: 0 30px 60px -10px rgba(120,60,30,0.18); } * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { -webkit-tap-highlight-color: transparent; } /* scroll-padding-top accounts for the header height PLUS the iPhone safe-area inset, so anchor scrolls don't land hidden under the notched header. env() resolves to 0 on non-notch devices. */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); } /* ----- Mobile pinch-zoom fix ----- iOS Safari + Chrome on Android get confused when overflow-x:hidden sits on AND . When the user pinch-zooms, the visual viewport tries to pan horizontally, but overflow-x:hidden on blocks it — Safari sometimes reacts by showing the native "يتعذر فتح الصفحة" (page can't be loaded) overlay mid-gesture. Fix: uses `clip` instead. `clip` hides overflow the same way but doesn't create a new scroll container, so the visual viewport can pan freely while still blocking page-level horizontal scroll bars on desktop. keeps `hidden` as a fallback for older browsers that don't support `clip` (pre-iOS 16 Safari, old Android). */ html { overflow-x: clip; } body { overflow-x: hidden; overflow-x: clip; } /* ----- Comprehensive mobile pinch-zoom safety ----- The earlier overflow:clip fix solved one half of the iOS Safari "يتعذر فتح الصفحة" bug. The other half is fixed-position elements (the WhatsApp FAB and the scroll-to-top button) that stay anchored to screen coords during pinch. When the user pinches and a finger happens to land on one of them, iOS Safari sometimes registers a tap on the link mid-gesture, tries to navigate, and shows the "page can't open" overlay because the navigation collides with the active touch gesture. touch-action: manipulation tells the browser this element only accepts taps + drags — explicitly NOT pinch-to-zoom. The browser then knows a 2-finger gesture isn't aimed at this element and routes it to page-level pinch-zoom instead. Apply to every fixed/sticky interactive element that floats over content. Section content keeps the default (auto) so pinch on text still zooms naturally. */ .fab, .scroll-top, .menu-toggle, .header, .mobile-overlay, .mobile-menu { touch-action: manipulation; } /* On the largest touch targets (FAB, scroll-top) we ALSO disable the double-tap-to-zoom delay, which is the gesture that historically collided with pinch. tap-highlight stays so the user still sees a visual response on tap. */ .fab, .scroll-top { -webkit-touch-callout: none; /* no "preview" sheet on long-press */ } body { font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); transition: background var(--t), color var(--t); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--primary-rgb),0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 0% 30%, rgba(var(--primary-rgb),0.08), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 60%, rgba(var(--accent-rgb),0.06), transparent 60%); background-attachment: fixed; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, textarea, select { font-family: inherit; } ul { list-style: none; } svg { flex-shrink: 0; } /* Default size for icons emitted by svg_icon() — explicit sizing on a wrapper still wins */ svg.icon { width: 1em; height: 1em; vertical-align: middle; } ::selection { background: var(--primary); color: white; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.18); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* Sections flow — each section inside gets style="order: N" from PHP based on the saved drag-and-drop order in the admin sections page */ .sections-flow { display: flex; flex-direction: column; } /* === TYPOGRAPHY === */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; } .h-display { font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; } .h-section { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; margin-bottom: 16px; } .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--text-muted); line-height: 1.7; } .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gradient-italic { font-family: var(--font-serif); font-style: italic; font-weight: 500; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-weight: 700; font-size: 15px; transition: all var(--t); cursor: pointer; white-space: nowrap; border: 1px solid transparent; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%); transform: translateX(100%); transition: transform 0.7s; } .btn:hover::before { transform: translateX(-100%); } .btn svg { width: 18px; height: 18px; } .btn-primary { background: var(--gradient); color: var(--text-on-primary); box-shadow: 0 10px 40px -10px rgba(var(--primary-rgb),0.6), inset 0 1px 0 rgba(255,255,255,0.3); font-weight: 800; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 50px -10px rgba(var(--primary-rgb),0.8), inset 0 1px 0 rgba(255,255,255,0.4); } .btn-secondary { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--border-strong); backdrop-filter: blur(10px); } .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: var(--primary); color: var(--primary-light); } .btn-ghost { background: transparent; color: var(--text); } .btn-ghost:hover { background: var(--surface-2); } .btn-lg { padding: 18px 36px; font-size: 16px; } /* === BADGE === Background uses a NEUTRAL surface tint (not the primary) so the bright primary-colored text stays readable across every theme — same-hue text on same-hue tint was the wash-out cause when switching to blue/green/etc. */ .badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(255,255,255,0.06); color: var(--accent-light); border: 1px solid rgba(var(--primary-rgb),0.35); border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 24px; backdrop-filter: blur(10px); } .badge .dot { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 0 4px rgba(var(--primary-rgb),0.2); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--primary-rgb),0.2); } 50% { box-shadow: 0 0 0 10px rgba(var(--primary-rgb),0); } } /* === SECTIONS === */ section { padding: 100px 0; position: relative; } .section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; } .section-tag { display: inline-block; padding: 6px 16px; background: rgba(255,255,255,0.05); color: var(--accent-light); border: 1px solid rgba(var(--primary-rgb),0.28); border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.5px; } /* === HEADER / NAVBAR === Matches the Hero stage exactly — solid #0a0a0a from page load so the navbar visually melts into the Hero with no seam. When the user scrolls past the Hero, the header deepens very slightly + adds a subtle border to stay distinct against the themed sections below. Local var overrides keep nav links, language switch, and theme-toggle icons readable on the always-dark strip even when the page theme is light. */ .header { position: fixed; top: 0; left: 0; right: 0; /* Add the safe-area inset to the header height so the navigation row sits BELOW the iPhone notch / Dynamic Island, not under it. Without this, the recent viewport-fit=cover change lets the page extend under the notch and the nav buttons appear "glued to the top edge" of the screen, which is the bug the user reported. The padding-top pushes the actual content (logo + buttons) down by the safe-area height so they stay visible and tappable. On non-notch devices env() resolves to 0px, so desktops/Androids/older iPhones are unaffected. */ height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); /* Match left/right insets too for landscape on notched devices. */ padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); z-index: 1000; transition: background var(--t), border-color var(--t), box-shadow var(--t); background: var(--header-bg, #0a0a0a); border-bottom: 1px solid transparent; --text: #f5e6d8; --text-muted: rgba(245,230,216,0.78); --text-light: rgba(245,230,216,0.55); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.22); } .header.scrolled { /* On scroll, the strip transforms into a frosted-glass bar tinted with the active theme's primary + accent — the picked palette becomes clearly visible across the whole header surface, not just the accents. Icons and nav text stay white (via the scoped vars above) so contrast holds against the themed glass. */ background: var(--header-scrolled-bg, linear-gradient(135deg, rgba(var(--primary-rgb), 0.28) 0%, rgba(var(--accent-rgb), 0.18) 100% ) ), rgba(8,8,8,0.78); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border-bottom-color: rgba(var(--primary-rgb), 0.45); box-shadow: 0 4px 30px -8px rgba(var(--primary-rgb), 0.38), 0 10px 28px -10px rgba(0,0,0,0.55); } /* The header is intentionally kept dark across all themes — keeps the nav icons, language switch, and theme toggle high-contrast regardless of which palette the rest of the page uses. */ .nav { display: flex; align-items: center; justify-content: space-between; height: 100%; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); /* Admin-controlled in رأس الصفحة → حجم الشعار النصي. index.php/page.php inject --logo-text-size when admin picks a custom size. */ font-size: var(--logo-text-size, 28px); font-weight: 900; letter-spacing: -0.03em; } .logo-mark { width: 44px; height: 44px; background: var(--gradient); border-radius: 12px; display: grid; place-items: center; color: var(--text-on-primary); font-size: 22px; font-weight: 900; box-shadow: 0 8px 24px -6px rgba(var(--primary-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.3); position: relative; overflow: hidden; } .logo-mark::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4), transparent 70%); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .logo-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Adapt elegantly to long company names */ max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Responsive shrink — scale the admin-chosen size proportionally instead of hardcoding a px value, so the admin's slider is respected on mobile too. */ @media (max-width: 1024px) { .logo { font-size: calc(var(--logo-text-size, 28px) * 0.85); } .logo-text { max-width: 16ch; } } @media (max-width: 640px) { .logo { font-size: calc(var(--logo-text-size, 28px) * 0.7); } .logo-text { max-width: 12ch; } } /* ==================================================================== PREMIUM "BADGE PLATE" LOGO -------------------------------------------------------------------- The logo sits inside a visible card/plate that's taller than the header. Roughly half the plate is inside the header, the other half protrudes below — giving the brand a deliberate, prominent "badge" appearance (think luxury car dealerships, jewelry brands). Structure: Header line: ─────────────┬──────────────┬───────────── │ ┌─────┐ │ │ │LOGO │ │ ← half inside │ │ │ │ ───────────┤ │ │ ├────────── │ BADGE│ ← half outside └─────┘ ↓ shadow Implementation: - `.logo` is the badge container (background + rounded + shadow) - We use `:has(.logo-img)` so this styling ONLY kicks in for uploaded-image logos. The plain text logo stays minimal. - `transform: translateY(...)` shifts the badge down so its center aligns with the header's bottom edge — natural ~50/50 split. - The padding around the image gives the badge visible "skin", which is what makes it read as a card not just a floating image. ==================================================================== */ .logo:has(.logo-img) { /* The plate itself — visible background distinguishes it from the surrounding header strip. Default is a dark gradient; admins can override via --logo-badge-bg (set inline by the layout from the logo_badge_bg setting). The fallback is the original dark plate. */ background: var(--logo-badge-bg, linear-gradient(180deg, #15100c 0%, #0a0706 100%)); border-radius: 20px; padding: 14px 28px; box-shadow: /* Outer drop shadow — gives the "floating above page" feel */ 0 22px 50px -12px rgba(0, 0, 0, 0.75), 0 6px 18px -6px rgba(var(--primary-rgb), 0.45), /* Inner top highlight — catches light from above */ inset 0 1px 0 rgba(255, 255, 255, 0.10), /* Outer hairline — defines the edge against the glass header */ 0 0 0 1px rgba(255, 255, 255, 0.06); /* Center of badge sits ~at the header's bottom line. Header is 80px tall; badge is ~108px tall (image 80 + pad 28). translateY(28px) pushes the center down, so ~half each side. */ transform: translateY(28px); /* Above everything in the header */ position: relative; z-index: 1001; /* Don't let the gradient bleed past the rounded corners */ overflow: hidden; transition: transform 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease; } .logo:has(.logo-img) .logo-img { height: 80px; width: auto; max-width: 240px; object-fit: contain; display: block; /* Subtle highlight for the logo art itself, so it pops on the dark plate */ filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } /* When the header glasses up on scroll, the badge tightens (smaller padding, less protrusion) so it sits more compactly with the scrolled bar. */ .header.scrolled .logo:has(.logo-img) { padding: 10px 20px; transform: translateY(18px); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), 0 4px 14px -4px rgba(var(--primary-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(var(--primary-rgb), 0.30); } .header.scrolled .logo:has(.logo-img) .logo-img { height: 64px; } @media (max-width: 1024px) { .logo:has(.logo-img) { padding: 12px 22px; transform: translateY(22px); } .logo:has(.logo-img) .logo-img { height: 66px; max-width: 200px; } .header.scrolled .logo:has(.logo-img) { padding: 9px 18px; transform: translateY(14px); } .header.scrolled .logo:has(.logo-img) .logo-img { height: 56px; } } @media (max-width: 640px) { .logo:has(.logo-img) { padding: 9px 16px; transform: translateY(16px); border-radius: 16px; } .logo:has(.logo-img) .logo-img { height: 50px; max-width: 160px; } .header.scrolled .logo:has(.logo-img) { padding: 7px 14px; transform: translateY(10px); } .header.scrolled .logo:has(.logo-img) .logo-img { height: 42px; } } .nav-menu { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); border: 1px solid var(--border); padding: 6px; border-radius: 100px; } .nav-menu a { padding: 10px 20px; border-radius: 100px; font-weight: 600; font-size: 14px; color: var(--text-muted); transition: all var(--t-fast); } .nav-menu a:hover, .nav-menu a.active { background: rgba(var(--primary-rgb),0.12); color: var(--accent); } /* === NAV DROPDOWNS === */ .nav-item { position: relative; display: inline-flex; } .nav-has-dropdown > a { display: inline-flex; align-items: center; gap: 6px; } .nav-caret { display: inline-flex; align-items: center; transition: transform .25s; } .nav-caret svg { width: 14px; height: 14px; } .nav-has-dropdown:hover .nav-caret, .nav-has-dropdown:focus-within .nav-caret { transform: rotate(-180deg); } .nav-dropdown { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; min-width: 240px; padding: 10px; background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(var(--primary-rgb), 0.35); border-radius: 16px; box-shadow: 0 22px 40px -16px rgba(0,0,0,0.6), 0 6px 20px -8px rgba(var(--primary-rgb), 0.25); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .22s, transform .22s, visibility .22s; z-index: 100; } /* Bridge the hover gap between trigger and dropdown so the menu doesn't snap shut when the cursor crosses the 12px gap. */ .nav-dropdown::before { content: ''; position: absolute; top: -14px; inset-inline-start: 0; inset-inline-end: 0; height: 14px; } .nav-has-dropdown:hover .nav-dropdown, .nav-has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; color: rgba(245,230,216,0.85); white-space: nowrap; transition: background .15s, color .15s, transform .15s; } .nav-dropdown a:hover { background: rgba(var(--primary-rgb), 0.18); color: #fff; transform: translateX(-3px); } html[dir="ltr"] .nav-dropdown a:hover { transform: translateX(3px); } .nav-dropdown a svg { width: 16px; height: 16px; color: var(--primary); } /* Menu-only trigger — a parent that opens a dropdown but has no destination of its own. Same hover behaviour as a real link, but the cursor reads as a button so the user doesn't expect navigation on click. */ .nav-menu-only { cursor: default; } .nav-menu-only:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.45); outline-offset: 2px; } /* mobile children — visually indented under their parent */ .mobile-menu .mobile-child { padding-inline-start: 32px; font-size: 14px; color: var(--text-muted); border-inline-start: 2px solid rgba(var(--primary-rgb), 0.3); margin-inline-start: 16px; } /* Mobile menu-only header — a label above children when the parent has no URL */ .mobile-menu .mobile-menu-only-header { padding: 14px 18px 6px; font-weight: 800; font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; pointer-events: none; } .nav-actions { display: flex; align-items: center; gap: 12px; } /* CTA button inside the header is taller than the 44px icon buttons next to it because .btn defaults to padding:14px 28px. Slim it down to ~44px total height so it aligns with the lang/theme icons visually. Horizontal padding kept generous so the text + icon still breathe. */ .nav-actions .btn { padding-top: 9px; padding-bottom: 9px; font-size: 14px; line-height: 1.2; } .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); transition: all var(--t-fast); } .icon-btn:hover { background: rgba(var(--primary-rgb),0.12); color: var(--primary-light); border-color: var(--primary); transform: scale(1.05); } .icon-btn svg { width: 20px; height: 20px; } .menu-toggle { display: none; } .hide-mobile { display: inline-flex; } /* === HERO — Cheggout style with HUGE company name === */ .hero { /* Hero is a fixed dark "stage" that holds the brand splash regardless of which theme the admin picked. The dark canvas itself lives on .hero-bg (z-index: -2) so it sits BEHIND any uploaded background image; we only scope the text-color vars here so contrast stays high without blocking the image layer. */ --text: #f5e6d8; --text-muted: rgba(245,230,216,0.72); --text-light: rgba(245,230,216,0.48); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.18); min-height: 100vh; /* Hero content must clear the (potentially safe-area-inflated) header height, otherwise its top padding falls under the notched header bar. env() = 0px on devices without safe areas. */ padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 60px); padding-bottom: 80px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-bg { position: absolute; inset: 0; z-index: -2; background-color: #0a0a0a; /* solid dark canvas when no image */ background-size: cover; background-position: center; background-repeat: no-repeat; } /* No image: paint a fully-opaque dark gradient + brand-color glow on top. The bottom layer is OPAQUE (rgb, not rgba) so a light theme body bg can never bleed through. */ .hero-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 70% at 50% 100%, rgba(var(--primary-rgb),0.18) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--primary-rgb),0.12) 0%, transparent 60%), linear-gradient(180deg, #0c0c0c 0%, #060606 100%); } /* With image: keep the overlay translucent so the photo shows through. The image itself is painted by the inline background-image on .hero-bg. Admin-controlled dim: --hero-overlay (0..1, default 0.8) scales every alpha value below so the slider in Hero admin can take the photo from pure true colors (0) to fully-themed dim (1). We multiply each rgba's alpha via calc() — modern browsers support that inside color functions when wrapped in rgb()/rgba() with numeric channels. */ .hero-bg.has-image::before { background: radial-gradient(ellipse 100% 70% at 50% 100%, rgba(var(--primary-rgb), calc(0.25 * var(--hero-overlay, 0.8))) 0%, transparent 60%), linear-gradient(180deg, rgba(10,10,10, calc(0.55 * var(--hero-overlay, 0.8))) 0%, rgba(10,10,10, calc(0.75 * var(--hero-overlay, 0.8))) 50%, rgba(10,10,10, calc(0.92 * var(--hero-overlay, 0.8))) 100%); } .hero-bg-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--accent-rgb),0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb),0.04) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); z-index: -1; } .hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); z-index: -1; animation: float 14s ease-in-out infinite; } .hero-blob.b1 { top: 20%; right: 20%; width: 500px; height: 500px; background: rgba(var(--primary-rgb),0.30); } .hero-blob.b2 { bottom: 5%; left: 10%; width: 400px; height: 400px; background: rgba(var(--accent-rgb),0.22); animation-delay: -5s; } .hero-blob.b3 { top: 60%; right: 5%; width: 350px; height: 350px; background: rgba(var(--primary-dark-rgb),0.18); animation-delay: -9s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -40px) scale(1.1); } 66% { transform: translate(-30px, 30px) scale(0.95); } } .hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; animation: heroIn 1s var(--t) backwards; } .hero-inner > * { animation: heroIn 1s var(--t) backwards; } .hero-inner > *:nth-child(1) { animation-delay: 0.1s; } .hero-inner > *:nth-child(2) { animation-delay: 0.25s; } .hero-inner > *:nth-child(3) { animation-delay: 0.40s; } .hero-inner > *:nth-child(4) { animation-delay: 0.55s; } .hero-inner > *:nth-child(5) { animation-delay: 0.70s; } .hero-inner > *:nth-child(6) { animation-delay: 0.85s; } @keyframes heroIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* Brand logo image — sits above .hero-brand text. Centered and fade-in on scroll-in for a polished entrance. The actual rendered height comes from inline style="height:Npx" set by index.php from the admin's slider. */ .hero-brand-logo { display: flex; justify-content: center; align-items: center; margin: 0 auto 18px; animation: heroLogoIn 0.8s cubic-bezier(.34,1.56,.64,1) both; } .hero-brand-logo img { display: block; /* Aspect-ratio safe sizing: height and width both auto, capped by max-height (admin's slider) and max-width:100% (viewport). This replaces the old `height:Npx + max-width:100%` combo which distorted the image on phones narrower than its natural width. min(--brand-logo-h, 60vh) caps the logo at 60% viewport-height on every screen, so a 400px logo doesn't dominate a 700px phone screen. */ height: auto; width: auto; max-height: min(var(--brand-logo-h, 120px), 60vh); max-width: 100%; filter: drop-shadow(0 8px 30px rgba(0,0,0,0.4)); } @keyframes heroLogoIn { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Extra-small phones (≤480px): squeeze the cap further to 40vh so a tall logo can't push the headline + CTA below the fold. */ @media (max-width: 480px) { .hero-brand-logo img { max-height: min(var(--brand-logo-h, 120px), 40vh); } .hero-brand-logo { margin-bottom: 12px; } } /* HUGE company brand */ .hero-brand { font-family: var(--font-display); /* Admin-controlled in رأس الصفحة (Hero) → حجم اسم الشركة. index.php injects --hero-brand-size as the upper bound, default 14rem. clamp() keeps it readable on phones (min 5rem) and scales with viewport width (18vw) up to the admin's chosen ceiling. */ font-size: clamp(5rem, 18vw, var(--hero-brand-size, 14rem)); font-weight: 900; line-height: 0.9; letter-spacing: -0.06em; background: linear-gradient(180deg, var(--accent-light) 0%, var(--primary-light) 50%, var(--primary) 80%, var(--primary-dark) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 24px; text-shadow: 0 0 80px rgba(var(--primary-rgb),0.5); position: relative; filter: drop-shadow(0 20px 60px rgba(var(--primary-rgb),0.4)); } .hero h1 { /* Admin-controlled in الـ Hero → حجم العنوان الرئيسي. index.php injects --hero-title-size as the upper bound. clamp() keeps a sensible minimum and viewport-relative middle so the headline still scales nicely on phones. */ font-size: clamp(1.6rem, 3.5vw, var(--hero-title-size, 48px)); line-height: 1.2; margin-bottom: 24px; font-weight: 800; color: var(--text); } .hero .lead { margin: 0 auto 36px; max-width: 680px; /* Admin-controlled in الـ Hero → حجم الوصف. */ font-size: clamp(0.95rem, 1.4vw, var(--hero-desc-size, 18px)); } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .hero-meta { display: flex; gap: 48px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); flex-wrap: wrap; justify-content: center; } .hero-meta-item .num { font-family: var(--font-display); font-size: 36px; font-weight: 900; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .hero-meta-item .lbl { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* === STATS === */ .stats { padding: 80px 0; background: var(--bg-alt); border-block: 1px solid var(--border); position: relative; } .stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(var(--primary-rgb),0.08), transparent 70%); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .stat { text-align: center; padding: 32px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); transition: all var(--t); backdrop-filter: blur(10px); } .stat:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 40px -10px rgba(var(--primary-rgb),0.25); } .stat-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: rgba(var(--primary-rgb),0.12); color: var(--primary-light); display: grid; place-items: center; border: 1px solid rgba(var(--primary-rgb),0.2); } .stat-icon svg { width: 28px; height: 28px; } .stat-num { font-family: var(--font-display); font-size: 48px; font-weight: 900; line-height: 1; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { color: var(--text-muted); font-weight: 600; margin-top: 8px; } /* === SERVICES === */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .service-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: all var(--t); position: relative; overflow: hidden; cursor: pointer; } .service-card::before { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: var(--gradient); border-radius: 50%; filter: blur(80px); opacity: 0; transition: opacity var(--t); } .service-card:hover::before { opacity: 0.4; } .service-card:hover { transform: translateY(-8px); border-color: rgba(var(--primary-rgb),0.4); box-shadow: 0 30px 60px -10px rgba(0,0,0,0.5); } .service-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 24px; color: var(--text-on-primary); position: relative; transition: transform var(--t); } .service-card:hover .service-icon { transform: scale(1.1) rotate(-5deg); } .service-icon svg { width: 30px; height: 30px; } /* All six service-icon variants derive from the active theme — admin's color pick becomes a "style variant" (different gradient stops + direction) while the hue family stays cohesive with primary/accent. Theme-aware end-to-end. */ .service-icon-blue { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb),0.6); } .service-icon-purple { background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%); box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb),0.5); } .service-icon-cyan { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb),0.6); } .service-icon-green { background: linear-gradient(135deg, var(--gold) 0%, var(--accent-light) 100%); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb),0.5); } .service-icon-red { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); box-shadow: 0 10px 30px -10px rgba(var(--primary-dark-rgb),0.6); } .service-icon-orange { background: linear-gradient(135deg, var(--primary) 0%, var(--gold) 100%); box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb),0.55); } .service-card h3 { font-size: 22px; margin-bottom: 12px; } .service-card p { color: var(--text-muted); margin-bottom: 20px; } .service-features { list-style: none; margin-bottom: 24px; } .service-features li { padding: 8px 0; color: var(--text-muted); font-size: 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--border); } .service-features li:last-child { border-bottom: 0; } .service-features li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a65' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-color: rgba(var(--primary-rgb),0.12); background-size: 12px; background-position: center; background-repeat: no-repeat; } .service-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-light); font-weight: 700; font-size: 14px; transition: gap var(--t-fast); } .service-link:hover { gap: 12px; color: var(--accent); } .service-link svg { width: 18px; height: 18px; } /* === ABOUT === */ .about { background: var(--bg-alt); position: relative; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-visual { position: relative; aspect-ratio: 1; } .about-image { width: 100%; height: 100%; border-radius: var(--radius-xl); background: var(--gradient); position: relative; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 80px -20px rgba(var(--primary-rgb),0.5); } .about-image::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%), radial-gradient(circle at 70% 70%, rgba(0,0,0,0.2), transparent 50%); } .about-image img { width: 100%; height: 100%; object-fit: cover; } .about-badge { position: absolute; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 20px 24px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 16px; animation: floatCard 5s ease-in-out infinite; backdrop-filter: blur(20px); } @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .about-badge-1 { top: 20px; right: -20px; } .about-badge-2 { bottom: 20px; left: -20px; animation-delay: -2.5s; } .about-badge-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--gradient); display: grid; place-items: center; color: var(--text-on-primary); } .about-badge-icon svg { width: 24px; height: 24px; } .about-badge strong { display: block; font-size: 18px; } .about-badge span { font-size: 13px; color: var(--text-muted); } /* === ABOUT EXTRA BLOCKS (flexible 12-col grid) === */ .about-blocks { margin-top: 80px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; align-items: stretch; } .about-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all var(--t); display: flex; gap: 24px; align-items: center; } .about-block:hover { border-color: rgba(var(--primary-rgb),0.4); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4); transform: translateY(-4px); } /* Width: column span out of 12 */ .about-block.w-full { grid-column: span 12; } .about-block.w-half { grid-column: span 6; } .about-block.w-third { grid-column: span 4; } /* Image positions */ .about-block.img-right { flex-direction: row; } .about-block.img-left { flex-direction: row-reverse; } .about-block.img-top { flex-direction: column; } .about-block.img-bottom { flex-direction: column-reverse; } .about-block.no-image, .about-block.img-none { display: block; } .about-block-img { flex-shrink: 0; border-radius: var(--radius); overflow: hidden; align-self: stretch; background: var(--bg-alt); } .about-block-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 200px; } /* Image sizes — apply to horizontal layouts */ .about-block.img-right .about-block-img, .about-block.img-left .about-block-img { width: auto; } .about-block.imgsize-small.img-right .about-block-img, .about-block.imgsize-small.img-left .about-block-img { flex: 0 0 25%; } .about-block.imgsize-medium.img-right .about-block-img, .about-block.imgsize-medium.img-left .about-block-img { flex: 0 0 40%; } .about-block.imgsize-large.img-right .about-block-img, .about-block.imgsize-large.img-left .about-block-img { flex: 0 0 60%; } .about-block.imgsize-full.img-right .about-block-img, .about-block.imgsize-full.img-left .about-block-img { flex: 0 0 100%; } /* Vertical image sizes (top/bottom) */ .about-block.img-top .about-block-img, .about-block.img-bottom .about-block-img { width: 100%; } .about-block.imgsize-small.img-top .about-block-img, .about-block.imgsize-small.img-bottom .about-block-img { max-height: 160px; } .about-block.imgsize-medium.img-top .about-block-img, .about-block.imgsize-medium.img-bottom .about-block-img { max-height: 240px; } .about-block.imgsize-large.img-top .about-block-img, .about-block.imgsize-large.img-bottom .about-block-img { max-height: 360px; } .about-block.imgsize-full.img-top .about-block-img, .about-block.imgsize-full.img-bottom .about-block-img { max-height: none; aspect-ratio: 16/9; } .about-block-body { flex: 1; min-width: 0; } .about-block-body h3 { margin-bottom: 14px; line-height: 1.3; } .about-block-body .about-block-desc { color: var(--text-muted); line-height: 1.8; font-size: 15px; white-space: pre-wrap; } /* Title size scales with block width */ .about-block.w-full h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); } .about-block.w-half h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); } .about-block.w-third h3 { font-size: clamp(1.05rem, 1.4vw, 1.25rem); } .about-block.w-third .about-block-desc { font-size: 14px; } /* Text alignment */ .about-block.align-center .about-block-body { text-align: center; } .about-block.align-end .about-block-body { text-align: end; } /* Smaller padding for thirds */ .about-block.w-third { padding: 22px; } /* Responsive: collapse to single column on small screens */ @media (max-width: 900px) { .about-block.w-half { grid-column: span 12; } .about-block.w-third { grid-column: span 6; } } @media (max-width: 640px) { .about-blocks { margin-top: 48px; gap: 16px; } .about-block, .about-block.w-third { grid-column: span 12; flex-direction: column !important; padding: 20px; } .about-block .about-block-img { width: 100% !important; flex: 0 0 auto !important; max-height: 240px !important; } } /* === FEATURES === */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature { background: var(--surface); padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); transition: all var(--t); position: relative; } .feature:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(var(--primary-rgb),0.2); } .feature-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--primary-rgb),0.12); color: var(--primary-light); display: grid; place-items: center; margin-bottom: 20px; transition: all var(--t); border: 1px solid rgba(var(--primary-rgb),0.2); } .feature:hover .feature-icon { background: var(--gradient); color: var(--text-on-primary); transform: rotate(-8deg) scale(1.1); border-color: transparent; } .feature-icon svg { width: 28px; height: 28px; } .feature h3 { font-size: 20px; margin-bottom: 10px; } .feature p { color: var(--text-muted); font-size: 15px; } /* === PROCESS === */ .process { background: var(--bg-alt); } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .process-step { background: var(--surface); border-radius: var(--radius-lg); padding: 32px; position: relative; border: 1px solid var(--border); transition: all var(--t); overflow: hidden; } .process-step:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 20px 40px -10px rgba(var(--primary-rgb),0.2); } .process-number { position: absolute; top: 20px; left: 20px; font-family: var(--font-display); font-size: 80px; font-weight: 900; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.2; line-height: 1; } .process-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--gradient); color: var(--text-on-primary); display: grid; place-items: center; margin-bottom: 20px; box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb),0.5); } .process-icon svg { width: 26px; height: 26px; } .process-step h3 { font-size: 20px; margin-bottom: 8px; } .process-step p { color: var(--text-muted); font-size: 15px; } /* === PROJECTS === */ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .project-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: all var(--t); position: relative; } .project-card:hover { transform: translateY(-8px); border-color: rgba(var(--primary-rgb),0.4); box-shadow: 0 30px 60px -10px rgba(0,0,0,0.5); } .project-image { aspect-ratio: 4/3; background: var(--gradient); position: relative; overflow: hidden; } .project-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,8,5,0.7), transparent 50%); } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .project-card:hover .project-image img { transform: scale(1.1); } .project-content { padding: 24px; } .project-cat { display: inline-block; padding: 4px 12px; background: rgba(var(--primary-rgb),0.12); color: var(--primary-light); border: 1px solid rgba(var(--primary-rgb),0.2); border-radius: 100px; font-size: 12px; font-weight: 700; margin-bottom: 12px; } .project-card h3 { font-size: 20px; margin-bottom: 8px; } .project-card p { color: var(--text-muted); font-size: 14px; } .projects-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; } .projects-filter button { padding: 8px 18px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 14px; transition: all var(--t-fast); } .projects-filter button:hover, .projects-filter button.active { background: var(--gradient); color: var(--text-on-primary); border-color: transparent; } /* === TESTIMONIALS === */ .testimonials { background: var(--bg-alt); } .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .testimonial { background: var(--surface); padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); position: relative; transition: all var(--t); } .testimonial:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 20px 40px -10px rgba(var(--primary-rgb),0.2); } .testimonial::before { content: '"'; position: absolute; top: 20px; left: 24px; font-family: var(--font-serif); font-size: 100px; line-height: 1; color: var(--primary); opacity: 0.15; } .testimonial-rating { display: flex; gap: 2px; margin-bottom: 16px; } .testimonial-rating svg { width: 18px; height: 18px; fill: var(--gold); color: var(--gold); } .testimonial p { color: var(--text); font-size: 16px; line-height: 1.7; margin-bottom: 24px; } .testimonial-author { display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--border); } .testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; color: var(--text-on-primary); font-weight: 900; font-size: 18px; flex-shrink: 0; } .testimonial-info strong { display: block; font-size: 16px; } .testimonial-info span { font-size: 13px; color: var(--text-muted); } /* === FAQ === */ .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; transition: all var(--t); } .faq-item.open { border-color: var(--primary); box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb),0.2); } .faq-question { width: 100%; padding: 20px 24px; text-align: right; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--text); transition: color var(--t-fast); } .faq-question:hover { color: var(--primary-light); } .faq-question svg { width: 22px; height: 22px; transition: transform var(--t); color: var(--text-muted); } .faq-item.open .faq-question svg { transform: rotate(180deg); color: var(--primary-light); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--t); } .faq-item.open .faq-answer { max-height: 500px; } .faq-answer-inner { padding: 0 24px 24px; color: var(--text-muted); line-height: 1.8; } /* === CTA === */ .cta { background: linear-gradient(135deg, var(--cta-bg-from) 0%, var(--cta-bg-to) 100%); color: var(--cta-text); padding: 100px 0; position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15), transparent 40%), radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1), transparent 40%); z-index: 1; } /* Faded image background — uses CSS variables set from PHP */ .cta.has-bg-image::after { content: ''; position: absolute; inset: 0; background-image: var(--cta-bg-url); background-size: cover; background-position: center; opacity: var(--cta-bg-opacity, 0.2); mix-blend-mode: var(--cta-bg-blend, overlay); z-index: 0; pointer-events: none; filter: saturate(1.1); } .cta .container { position: relative; z-index: 2; } .cta-inner { text-align: center; max-width: 720px; margin: 0 auto; position: relative; } .cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 16px; color: var(--cta-text); } .cta p { font-size: 18px; opacity: 0.85; margin-bottom: 32px; color: var(--cta-text-soft); } .cta .btn-primary { background: var(--cta-btn-bg); color: var(--cta-btn-text); } .cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); } /* === CONTACT === */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .contact-info > div { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: all var(--t); } .contact-info > div:hover { transform: translateX(-6px); border-color: var(--primary); } .contact-icon { width: 48px; height: 48px; background: var(--gradient); color: var(--text-on-primary); border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; } .contact-icon svg { width: 22px; height: 22px; } .contact-info h4 { margin-bottom: 4px; } .contact-info p, .contact-info a { color: var(--text-muted); font-size: 15px; line-height: 1.6; } .contact-info a:hover { color: var(--primary-light); } .contact-form { background: var(--surface); border: 1px solid var(--border); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .form-control { width: 100%; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1.5px solid var(--border); border-radius: 12px; font-size: 15px; color: var(--text); transition: all var(--t-fast); outline: none; } .form-control:focus { border-color: var(--primary); background: rgba(var(--primary-rgb),0.05); box-shadow: 0 0 0 4px rgba(var(--primary-rgb),0.12); } .form-control.error { border-color: #ef4444; } .form-control.success { border-color: #fbbf24; } textarea.form-control { min-height: 130px; resize: vertical; } .field-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .field-error { font-size: 12px; color: #f87171; margin-top: 4px; display: none; } .form-group.invalid .field-error { display: block; } /* === FOOTER with HUGE brand watermark === */ .footer { background: var(--bg-darker); color: var(--text-on-dark); padding: 80px 0 0; position: relative; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; position: relative; z-index: 2; } .footer-about p { color: var(--text-muted); margin: 20px 0; line-height: 1.7; } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); transition: all var(--t-fast); } .footer-social a:hover { background: var(--gradient); color: var(--text-on-primary); border-color: transparent; transform: translateY(-3px); } .footer-social svg { width: 18px; height: 18px; } .footer h4 { color: var(--text); font-size: 18px; margin-bottom: 20px; } .footer-links li { margin-bottom: 12px; display: flex; align-items: center; } .footer-links a { color: var(--text-muted); font-size: 14px; transition: color var(--t-fast); display: inline-flex; align-items: center; gap: 8px; } .footer-links a:hover { color: var(--primary-light); } .footer-links a svg, .footer-links li > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary-light); } .footer-bottom { border-top: 1px solid var(--border); padding: 24px 0; margin-top: 20px; text-align: center; color: var(--text-muted); font-size: 14px; } /* === FAB & SCROLL TOP === */ .fab { position: fixed; bottom: 30px; left: 30px; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: white; display: grid; place-items: center; box-shadow: 0 10px 30px -5px rgba(37,211,102,0.5); z-index: 100; transition: transform var(--t); animation: pulse-soft 2s infinite; } .fab:hover { transform: scale(1.1); } .fab svg { width: 28px; height: 28px; } @keyframes pulse-soft { 0%, 100% { box-shadow: 0 10px 30px -5px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.5); } 50% { box-shadow: 0 10px 30px -5px rgba(37,211,102,0.5), 0 0 0 15px rgba(37,211,102,0); } } .scroll-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 12px; background: var(--gradient); color: var(--text-on-primary); display: grid; place-items: center; box-shadow: var(--shadow-lg); z-index: 100; opacity: 0; pointer-events: none; transform: translateY(20px); transition: all var(--t); } .scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top:hover { transform: translateY(-3px); } .scroll-top svg { width: 20px; height: 20px; transform: rotate(180deg); } /* === TOAST === */ .toast-container { position: fixed; top: 100px; left: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; } .toast { background: var(--surface); border: 1px solid var(--border-strong); padding: 16px 20px; border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 400px; animation: toastIn 0.4s var(--t); border-right: 4px solid var(--primary); } .toast.success { border-right-color: #fbbf24; } .toast.error { border-right-color: #ef4444; } .toast.warning { border-right-color: #f59e0b; } .toast.removing { animation: toastOut 0.3s forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { to { opacity: 0; transform: translateX(-100%); } } .toast-icon { font-size: 22px; flex-shrink: 0; } /* === AOS === */ [data-anim] { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--t), transform 0.8s var(--t); } [data-anim].in { opacity: 1; transform: translateY(0); } [data-anim="fade"] { transform: none; } [data-anim="left"] { transform: translateX(-40px); } [data-anim="right"] { transform: translateX(40px); } [data-anim="left"].in, [data-anim="right"].in { transform: translateX(0); } [data-anim="scale"] { transform: scale(0.92); } [data-anim="scale"].in { transform: scale(1); } [data-delay="100"] { transition-delay: 0.1s; } [data-delay="200"] { transition-delay: 0.2s; } [data-delay="300"] { transition-delay: 0.3s; } [data-delay="400"] { transition-delay: 0.4s; } [data-delay="500"] { transition-delay: 0.5s; } /* === RESPONSIVE === */ @media (max-width: 1024px) { .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; } .services-grid, .projects-grid, .process-grid, .features-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .nav-menu { display: none; } .menu-toggle { display: grid; } .hide-mobile { display: none; } } @media (max-width: 640px) { section { padding: 70px 0; } .container { padding: 0 20px; } .services-grid, .projects-grid, .process-grid, .features-grid, .stats-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .form-row { grid-template-columns: 1fr; } .hero-cta { flex-direction: column; align-items: stretch; width: 100%; } .hero-cta .btn { justify-content: center; } .hero-meta { gap: 24px; } .contact-form { padding: 24px; } .testimonial, .service-card, .feature, .process-step { padding: 24px; } .fab { width: 56px; height: 56px; bottom: 20px; left: 20px; } .scroll-top { bottom: 20px; right: 20px; } /* Mobile: cap at ~50% of the admin's choice so the brand doesn't overflow the narrow viewport. Falls back to 7rem if the admin hasn't set a custom size yet. */ .hero-brand { font-size: clamp(4rem, 25vw, calc(var(--hero-brand-size, 14rem) * 0.5)); } } /* === MOBILE MENU === */ .mobile-menu { position: fixed; top: 0; right: 0; width: 320px; max-width: 100%; height: 100vh; background: var(--surface); border-left: 1px solid var(--border); z-index: 1100; padding: 80px 32px 32px; transform: translateX(100%); transition: transform var(--t); overflow-y: auto; } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { display: block; padding: 16px 0; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 16px; transition: color var(--t-fast); } .mobile-menu a:hover { color: var(--primary-light); } .mobile-menu .btn { margin-top: 24px; width: 100%; justify-content: center; } .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 1050; opacity: 0; pointer-events: none; transition: opacity var(--t); } .mobile-overlay.open { opacity: 1; pointer-events: auto; } .mobile-close { position: absolute; top: 24px; left: 24px; } /* === SERVICE DETAIL MODAL (public site) === */ .svc-detail-overlay { position: fixed; inset: 0; background: rgba(8, 4, 2, 0.7); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); z-index: 1200; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 24px; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; } .svc-detail-overlay.open { opacity: 1; pointer-events: auto; } .svc-detail { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-alt) 100%); border: 1px solid var(--border-strong); border-radius: 24px; width: 100%; max-width: 720px; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 80px -10px rgba(0,0,0,0.7), 0 0 80px -20px rgba(var(--primary-rgb),0.5); transform: translateY(40px) scale(0.95); opacity: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; position: relative; } .svc-detail-overlay.open .svc-detail { transform: translateY(0) scale(1); opacity: 1; } .svc-detail::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--primary-rgb),0.15), transparent 60%); border-radius: 24px; pointer-events: none; } .svc-detail-close { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.06); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: all 0.2s; z-index: 3; backdrop-filter: blur(10px); border: 1px solid var(--border); } .svc-detail-close:hover { background: var(--primary); color: white; transform: rotate(90deg); } .svc-detail-close svg { width: 20px; height: 20px; } .svc-detail-head { padding: 36px 36px 28px; text-align: center; position: relative; border-bottom: 1px solid var(--border); } .svc-detail-head .svc-big-icon { width: 88px; height: 88px; border-radius: 20px; margin: 0 auto 20px; display: grid; place-items: center; color: var(--text-on-primary); box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5); position: relative; overflow: hidden; } .svc-detail-head .svc-big-icon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%); } .svc-detail-head .svc-big-icon svg { width: 44px; height: 44px; position: relative; z-index: 1; } .svc-detail-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 12px; font-weight: 900; line-height: 1.2; } .svc-detail-head .svc-short { font-size: 16px; color: var(--text-muted); line-height: 1.6; max-width: 500px; margin: 0 auto; } .svc-detail-body { padding: 32px 36px; position: relative; } .svc-detail-section { margin-bottom: 32px; } .svc-detail-section:last-child { margin-bottom: 0; } .svc-detail-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary-light); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-weight: 800; } .svc-detail-section h3::before { content: ''; width: 5px; height: 18px; background: var(--gradient); border-radius: 3px; } .svc-detail-section p { color: var(--text); font-size: 16px; line-height: 1.85; white-space: pre-wrap; } .svc-detail-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; } .svc-detail-features li { background: rgba(var(--primary-rgb),0.06); border: 1px solid rgba(var(--primary-rgb),0.15); border-radius: 12px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14.5px; line-height: 1.5; transition: all 0.25s; } .svc-detail-features li:hover { background: rgba(var(--primary-rgb),0.12); border-color: var(--primary); transform: translateY(-2px); } .svc-detail-features li::before { content: ''; width: 22px; height: 22px; flex-shrink: 0; background: var(--gradient); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0f0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"), var(--gradient); background-size: 12px; background-position: center; background-repeat: no-repeat; margin-top: 1px; box-shadow: 0 4px 10px -2px rgba(var(--primary-rgb),0.4); } .svc-detail-foot { padding: 24px 36px 32px; border-top: 1px solid var(--border); display: flex; gap: 12px; flex-wrap: wrap; } .svc-detail-foot .btn { flex: 1; min-width: 180px; justify-content: center; } /* "Learn more" arrow chip on the public card */ .service-link.svc-open { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(var(--primary-rgb),0.08); border: 1px solid rgba(var(--primary-rgb),0.2); border-radius: 100px; color: var(--primary-light); transition: all 0.25s; } .service-link.svc-open:hover { background: var(--gradient); color: var(--text-on-primary); border-color: transparent; gap: 12px; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(var(--primary-rgb),0.5); } @media (max-width: 640px) { .svc-detail-overlay { padding: 0; } .svc-detail { max-height: 100vh; border-radius: 0; border: 0; } .svc-detail-head { padding: 60px 22px 22px; } .svc-detail-head .svc-big-icon { width: 72px; height: 72px; } .svc-detail-head .svc-big-icon svg { width: 36px; height: 36px; } .svc-detail-body { padding: 22px; } .svc-detail-foot { padding: 18px 22px 28px; } .svc-detail-features { grid-template-columns: 1fr; } .svc-detail-close { top: 14px; left: 14px; } } /* === LANGUAGE SWITCHER === */ .lang-switch { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); transition: all var(--t-fast); font-weight: 800; font-size: 13px; letter-spacing: 0.5px; font-family: 'Inter', var(--font); } .lang-switch:hover { background: var(--gradient); color: var(--text-on-primary); border-color: transparent; transform: scale(1.05); } .lang-switch .lang-code { line-height: 1; } /* === LTR-specific overrides === */ html[dir="ltr"] body { font-family: 'Inter', 'Tajawal', system-ui, sans-serif; } html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3, html[dir="ltr"] h4, html[dir="ltr"] h5, html[dir="ltr"] h6 { font-family: 'Inter', 'Cairo', sans-serif; letter-spacing: -0.025em; } html[dir="ltr"] .hero-brand { letter-spacing: -0.04em; } html[dir="ltr"] .testimonial::before { left: auto; right: 24px; transform: scaleX(-1); } html[dir="ltr"] .about-badge-1 { right: auto; left: -20px; } html[dir="ltr"] .about-badge-2 { left: auto; right: -20px; } html[dir="ltr"] .contact-info > div:hover { transform: translateX(6px); } html[dir="ltr"] .badge { letter-spacing: 0.3px; } html[dir="ltr"] .nav-menu a { font-family: 'Inter', sans-serif; } html[dir="ltr"] .mobile-menu { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); transform: translateX(-100%); } html[dir="ltr"] .mobile-menu.open { transform: translateX(0); } html[dir="ltr"] .mobile-close { left: auto; right: 24px; } html[dir="ltr"] .toast-container { left: auto; right: 30px; } html[dir="ltr"] .toast { border-right: 0; border-left: 4px solid var(--primary); } html[dir="ltr"] .toast.success { border-left-color: #fbbf24; } html[dir="ltr"] .toast.error { border-left-color: #ef4444; } html[dir="ltr"] .toast.warning { border-left-color: #f59e0b; } html[dir="ltr"] .fab { left: auto; right: 30px; } html[dir="ltr"] .scroll-top { right: auto; left: 30px; } html[dir="ltr"] .service-features li::before { transform: scaleX(-1); } @media (max-width: 640px) { html[dir="ltr"] .fab { right: 20px; } html[dir="ltr"] .scroll-top { left: 20px; } } /* ==================================================================== Bidi isolation for phone/email/WhatsApp values -------------------------------------------------------------------- is the HTML5 element for "isolate this text from the surrounding bidi context, force it LTR". We use it around every contact value (phone, email, URL) so "+966 50 123 4567" never gets reversed when the page direction is rtl. These rules just reinforce the dir="ltr" attribute so even browsers that under-implement render the contents correctly. ==================================================================== */ bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; /* inline-block isolates the element fully without breaking the surrounding line layout. */ display: inline-block; /* Don't let the contained text wrap mid-number. */ white-space: nowrap; }