@charset "UTF-8"; /* ========================================================================== AlKhowatir Digital Solutions — Design System Concept: "الختم الرقمي" — the digital seal of trust. A Saudi business dossier, reworked around the brand's technology map: a low-poly teal/cyan Saudi Arabia rendered as a circuit board. Palette derived from the official logo mark. Light/dark theme aware. ========================================================================== */ :root{ /* fixed brand tokens — do not swap with theme (the "paper/ink dossier" motif used by hero-doc, testimonial cards, the CTA band and accent chips) */ --ink-fixed: #0A1E24; --paper-fixed: #EAF6F6; /* dark theme (default) */ --bg: #0A1E24; --bg-2: #102A31; --bg-3: #16373F; --text: #E9F5F5; --text-dim: #8FB9BC; --line: rgba(233,245,245,0.14); --line-strong: rgba(233,245,245,0.28); --accent: #17B4C0; --accent-2: #5EE1E8; --secondary: #2C8C7C; --secondary-2: #3AA491; --header-bg: rgba(10,30,36,0.92); --shadow: 0 20px 50px rgba(4,12,15,0.45); /* type */ --display: 'Cairo', sans-serif; --body: 'IBM Plex Sans Arabic', sans-serif; --mono: 'IBM Plex Mono', monospace; --radius: 2px; } /* light theme override — used when [data-theme="light"] is set (manual choice, persisted to localStorage) or, if no manual choice was ever made, matched automatically via the prefers-color-scheme block further down */ [data-theme="light"]{ --bg: #F6FAFA; --bg-2: #EAF3F3; --bg-3: #DCEBEC; --text: #0B242A; --text-dim: #43666A; --line: rgba(11,36,42,0.12); --line-strong: rgba(11,36,42,0.22); --accent: #0E8C97; --accent-2: #0B6E77; --secondary: #1F7A6C; --secondary-2: #185F55; --header-bg: rgba(246,250,250,0.92); --shadow: 0 14px 40px rgba(10,40,45,0.10); } /* Respect the OS/browser preference by default when the user hasn't made an explicit manual choice yet (no data-theme attribute set). The inline bootstrap script in head.php sets data-theme from localStorage or from this same media query before first paint, so there is no flash — this block is the no-JS / first-visit fallback. */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg: #F6FAFA; --bg-2: #EAF3F3; --bg-3: #DCEBEC; --text: #0B242A; --text-dim: #43666A; --line: rgba(11,36,42,0.12); --line-strong: rgba(11,36,42,0.22); --accent: #0E8C97; --accent-2: #0B6E77; --secondary: #1F7A6C; --secondary-2: #185F55; --header-bg: rgba(246,250,250,0.92); --shadow: 0 14px 40px rgba(10,40,45,0.10); } } *,*::before,*::after{ box-sizing:border-box; } /* ========================================================================== RTL / LTR The site is direction-driven by the `dir` attribute head.php sets on (rtl for Arabic pages, ltr for English pages) — the browser mirrors block flow, text alignment and flex/grid ordering from that automatically. The rules below are the handful of spots that need an explicit override because they don't fall out of `dir` alone: fixed- position elements, and one icon that should never flip. ========================================================================== */ html[dir="ltr"] .dropdown-menu{ right:auto; left:0; } html[dir="ltr"] .nav-links .drop-toggle.active::before{ right:auto; left:0; } /* the WhatsApp launcher stays bottom-left in both languages by convention (matches WhatsApp's own placement everywhere else) — intentionally not mirrored */ .wa-float svg{ transform:none; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:900; letter-spacing:-0.01em; } p{ margin:0; } :focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; } .container{ max-width:1180px; margin:0 auto; padding:0 28px; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; color:var(--accent-2); text-transform:uppercase; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); } /* ---------------------------------------------------------------------- */ /* Ledger rule — a divider that reads like a line on an official form */ /* ---------------------------------------------------------------------- */ .ledger-rule{ height:10px; background: repeating-linear-gradient(90deg, var(--line-strong) 0, var(--line-strong) 1px, transparent 1px, transparent 34px); border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); margin:0; } .ledger-rule.light{ border-top-color:rgba(10,30,36,0.18); border-bottom-color:rgba(10,30,36,0.08); background: repeating-linear-gradient(90deg, rgba(10,30,36,0.14) 0, rgba(10,30,36,0.14) 1px, transparent 1px, transparent 34px); } /* ---------------------------------------------------------------------- */ /* Header / Nav */ /* ---------------------------------------------------------------------- */ .site-header{ position:sticky; top:0; z-index:100; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 28px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:900; font-size:19px; color:var(--text); } .brand .seal-mini{ width:34px; height:34px; flex-shrink:0; } .brand small{ display:block; font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.12em; color:var(--accent-2); } .nav-links{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .nav-links a{ font-size:14.5px; font-weight:500; color:var(--text-dim); position:relative; padding:6px 0; transition:color .2s ease; } .nav-links a:hover, .nav-links a.active{ color:var(--text); } .nav-links a.active::after{ content:""; position:absolute; right:0; left:0; bottom:0; height:2px; background:var(--accent); } .nav-cta{ display:flex; align-items:center; gap:14px; } .nav-toggle{ display:none; } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; font-family:var(--body); font-weight:700; font-size:15px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--accent); color:var(--ink-fixed); } .btn-primary:hover{ background:var(--accent-2); color:var(--ink-fixed); } .btn-ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; } .btn-ghost:hover{ border-color:var(--accent-2); color:var(--accent-2); } .btn-whatsapp{ background:var(--secondary); color:var(--paper-fixed); } .btn-whatsapp:hover{ background:var(--secondary-2); } .btn-block{ width:100%; } .btn-sm{ padding:10px 18px; font-size:13.5px; } /* ---------------------------------------------------------------------- */ /* Seal / stamp — the signature element */ /* ---------------------------------------------------------------------- */ .seal{ color:var(--accent); } .seal-spin{ animation:sealSpin 40s linear infinite; transform-origin:center; } @keyframes sealSpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .seal-spin{ animation:none; } } /* ---------------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------------- */ .hero{ position:relative; padding:76px 0 60px; overflow:hidden; } .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(700px 420px at 12% 8%, rgba(184,134,63,0.10), transparent 60%), radial-gradient(600px 500px at 90% 90%, rgba(60,96,88,0.16), transparent 60%); pointer-events:none; } .hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; } .hero h1{ font-size:clamp(34px,4.6vw,58px); line-height:1.16; margin:18px 0 22px; color:var(--text); } .hero h1 em{ font-style:normal; color:var(--accent-2); } .hero .lede{ font-size:18px; color:var(--text-dim); max-width:52ch; margin-bottom:34px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .hero-doc{ position:relative; background:var(--paper-fixed); color:var(--ink-fixed); border-radius:6px; box-shadow:var(--shadow); padding:0; transform:rotate(1.2deg); } .hero-doc-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(10,30,36,0.12); } .hero-doc-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(10,30,36,0.18); } .hero-doc-body{ padding:26px 24px 34px; } .hero-doc-body .line{ height:9px; background:rgba(10,30,36,0.10); border-radius:2px; margin-bottom:11px; } .hero-doc-body .line.w60{ width:60%; } .hero-doc-body .line.w40{ width:40%; } .hero-doc-body .line.w80{ width:80%; } .hero-stamp{ position:absolute; left:-28px; bottom:-28px; width:130px; height:130px; filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35)); } /* ---------------------------------------------------------------------- */ /* Trust bar */ /* ---------------------------------------------------------------------- */ .trust-bar{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); padding:26px 0; } .trust-item{ display:flex; align-items:center; gap:14px; padding:0 22px; border-right:1px solid var(--line); } .trust-item:first-child{ padding-right:0; } .trust-item:last-child{ border-right:none; } .trust-item .ic{ width:30px; height:30px; flex-shrink:0; color:var(--accent-2); } .trust-item h4{ font-family:var(--body); font-size:14.5px; font-weight:700; margin-bottom:3px; } .trust-item span{ font-size:12.5px; color:var(--text-dim); } /* ---------------------------------------------------------------------- */ /* Section scaffolding */ /* ---------------------------------------------------------------------- */ .section{ padding:88px 0; } .section-head{ max-width:640px; margin-bottom:52px; } .section-head h2{ font-size:clamp(28px,3.2vw,40px); margin:16px 0 14px; color:var(--text); } .section-head p{ color:var(--text-dim); font-size:16.5px; } .section.on-paper{ background:var(--paper-fixed); color:var(--ink-fixed); } .section.on-paper .section-head p{ color:#3E5C5F; } .section.on-panel{ background:var(--bg-2); } /* ---------------------------------------------------------------------- */ /* Service dossier cards */ /* ---------------------------------------------------------------------- */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .dossier{ position:relative; background:var(--bg-2); border:1px solid var(--line); padding:30px 26px 26px; transition:border-color .2s ease, transform .2s ease; } .dossier:hover{ border-color:var(--accent); transform:translateY(-4px); } .dossier .tab{ position:absolute; top:-1px; right:26px; background:var(--accent); color:var(--ink-fixed); font-family:var(--mono); font-size:11px; font-weight:500; padding:4px 10px 5px; letter-spacing:.06em; } .dossier .ic{ width:38px; height:38px; color:var(--accent-2); margin-bottom:18px; } .dossier h3{ font-family:var(--body); font-size:19px; font-weight:700; margin-bottom:10px; } .dossier p{ color:var(--text-dim); font-size:14.5px; margin-bottom:16px; } .dossier .price{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:13px; color:var(--text-dim); border-top:1px dashed var(--line-strong); padding-top:14px; } .dossier .price b{ color:var(--accent-2); font-size:16px; font-weight:500; } .dossier a.more{ display:inline-block; margin-top:16px; font-size:13.5px; color:var(--accent-2); font-weight:600; } /* ---------------------------------------------------------------------- */ /* Offer / stamped ribbon panel */ /* ---------------------------------------------------------------------- */ .offer{ position:relative; background:var(--bg-3); border:1px solid var(--accent); padding:44px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; } .offer::before{ content:"عرض محدود"; position:absolute; top:22px; left:-40px; transform:rotate(-40deg); background:var(--accent); color:var(--ink-fixed); font-family:var(--mono); font-weight:700; font-size:12px; padding:5px 46px; letter-spacing:.08em; } .offer-table{ width:100%; border-collapse:collapse; } .offer-table th{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2); text-align:right; padding:0 0 12px; font-weight:500; } .offer-table td{ font-size:15px; padding:14px 0; border-top:1px solid var(--line); } .offer-table td.p{ font-family:var(--mono); color:var(--accent-2); font-weight:500; text-align:left; } /* ---------------------------------------------------------------------- */ /* Contact page grids */ /* ---------------------------------------------------------------------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:start; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px; } .field input, .field select, .field textarea{ width:100%; padding:12px 14px; background:var(--bg); border:1px solid var(--line-strong); color:var(--text); font-family:var(--body); } .field textarea{ resize:vertical; } @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } } /* ---------------------------------------------------------------------- */ /* Value list — replaces pricing on pages where prices shouldn't show */ /* ---------------------------------------------------------------------- */ .value-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-bottom:32px; } .value-item{ display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px dashed var(--line-strong); } .value-item svg{ width:20px; height:20px; flex-shrink:0; color:var(--accent); margin-top:2px; } .value-item strong{ display:block; font-size:15px; margin-bottom:3px; } .value-item span{ font-size:13.5px; color:var(--text-dim); } /* ---------------------------------------------------------------------- */ /* Testimonials */ /* ---------------------------------------------------------------------- */ .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .testi{ background:var(--paper-fixed); color:var(--ink-fixed); padding:30px 26px 24px; position:relative; } .testi .mark{ font-family:var(--display); font-size:44px; color:var(--accent); line-height:1; margin-bottom:10px; } .testi p.quote{ font-size:15.5px; line-height:1.7; margin-bottom:22px; min-height:96px; } .testi .sig{ display:flex; align-items:center; justify-content:space-between; border-top:1px dashed rgba(10,30,36,0.2); padding-top:14px; } .testi .sig strong{ display:block; font-size:14.5px; } .testi .sig span{ font-family:var(--mono); font-size:11.5px; color:#4E7376; } /* ---------------------------------------------------------------------- */ /* CTA band */ /* ---------------------------------------------------------------------- */ .cta-band{ background:var(--accent); color:var(--ink-fixed); padding:64px 0; text-align:center; } .cta-band h2{ font-size:clamp(26px,3vw,36px); margin-bottom:18px; } .cta-band p{ font-size:16.5px; margin-bottom:30px; opacity:.85; } .cta-band .btn-ghost{ border-color:rgba(10,30,36,0.4); color:var(--ink-fixed); } .cta-band .btn-ghost:hover{ border-color:var(--ink-fixed); } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ .site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:70px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:50px; } .footer-grid h5{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent-2); text-transform:uppercase; margin-bottom:18px; } .footer-grid p{ color:var(--text-dim); font-size:14px; margin-bottom:16px; } .footer-grid ul li{ margin-bottom:11px; } .footer-grid ul a{ font-size:14px; color:var(--text-dim); } .footer-grid ul a:hover{ color:var(--accent-2); } .footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:900; font-size:18px; margin-bottom:16px; } .footer-brand .seal-mini{ width:30px; height:30px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding:22px 0; font-family:var(--mono); font-size:12px; color:var(--text-dim); } .footer-bottom a{ color:var(--text-dim); } .footer-bottom .legal-links{ display:flex; gap:20px; } /* ---------------------------------------------------------------------- */ /* WhatsApp sticky */ /* ---------------------------------------------------------------------- */ .wa-float{ position:fixed; bottom:26px; left:26px; z-index:200; width:56px; height:56px; border-radius:50%; background:var(--secondary); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px rgba(0,0,0,0.4); transition:transform .2s ease; } .wa-float:hover{ transform:scale(1.08); } .wa-float svg{ width:28px; height:28px; } /* ---------------------------------------------------------------------- */ /* Breadcrumb (inner pages) */ /* ---------------------------------------------------------------------- */ .breadcrumb{ padding:20px 0; border-bottom:1px solid var(--line); } .breadcrumb ol{ display:flex; gap:8px; font-family:var(--mono); font-size:12.5px; color:var(--text-dim); } .breadcrumb a{ color:var(--text-dim); } .breadcrumb a:hover{ color:var(--accent-2); } .breadcrumb li:not(:last-child)::after{ content:"/"; margin-right:8px; color:var(--line-strong); } /* ---------------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------------- */ @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } .hero-doc{ max-width:440px; margin:0 auto; } .trust-grid{ grid-template-columns:repeat(2,1fr); row-gap:22px; } .trust-item{ border-right:none; padding:0; } .services-grid{ grid-template-columns:repeat(2,1fr); } .testi-grid{ grid-template-columns:1fr; } .offer{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:720px){ .nav-links{ position:fixed; inset:66px 0 0 0; background:var(--bg); flex-direction:column; padding:30px 28px; gap:22px; transform:translateY(-120%); transition:transform .25s ease; } .nav-links.open{ transform:translateY(0); } .nav-toggle{ display:flex; background:none; border:none; color:var(--text); font-size:26px; cursor:pointer; } .services-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; gap:14px; text-align:center; } } /* ---------------------------------------------------------------------- */ /* Brand logo (official image asset — see /assets/images/logo.jpg) */ /* A small paper-toned plate sits behind the logo so the light-background */ /* artwork stays crisp against the dark header/footer in dark mode. */ /* ---------------------------------------------------------------------- */ .brand .logo-plate, .footer-brand .logo-plate{ display:inline-flex; align-items:center; justify-content:center; background:var(--paper-fixed); border-radius:50%; padding:3px; flex-shrink:0; } .brand .logo-plate{ width:34px; height:34px; } .footer-brand .logo-plate{ width:30px; height:30px; } .brand .logo-plate img, .footer-brand .logo-plate img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; } /* ---------------------------------------------------------------------- */ /* Theme switcher */ /* ---------------------------------------------------------------------- */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-strong); background:transparent; color:var(--text); border-radius:50%; cursor:pointer; transition:border-color .2s ease, color .2s ease; flex-shrink:0; } .theme-toggle:hover{ border-color:var(--accent-2); color:var(--accent-2); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .icon-moon{ display:none; } [data-theme="light"] .theme-toggle .icon-sun{ display:none; } [data-theme="light"] .theme-toggle .icon-moon{ display:block; } @media (prefers-color-scheme: light){ :root:not([data-theme]) .theme-toggle .icon-sun{ display:none; } :root:not([data-theme]) .theme-toggle .icon-moon{ display:block; } } /* ---------------------------------------------------------------------- */ /* Nav dropdowns (Services / Contact Us / About Us / Our Work / Blogs) */ /* ---------------------------------------------------------------------- */ .nav-links li{ position:relative; } .nav-links .drop-toggle{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font:inherit; color:var(--text-dim); padding:6px 0; font-size:14.5px; font-weight:500; } .nav-links .drop-toggle:hover, .nav-links li.open .drop-toggle, .nav-links .drop-toggle[aria-expanded="true"], .nav-links .drop-toggle.active{ color:var(--text); position:relative; } .nav-links .drop-toggle.active::before{ content:""; position:absolute; right:0; left:0; bottom:0; height:2px; background:var(--accent); } .nav-links .drop-toggle .chev{ width:10px; height:10px; transition:transform .2s ease; flex-shrink:0; } .nav-links li.open .drop-toggle .chev, .nav-links .drop-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); } .dropdown-menu{ list-style:none; margin:0; padding:10px; position:absolute; top:calc(100% + 14px); right:0; min-width:230px; background:var(--bg-2); border:1px solid var(--line-strong); box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:50; } html[dir="ltr"] .dropdown-menu{ right:auto; left:0; } .nav-links li.open > .dropdown-menu, .nav-links li:hover > .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); } .dropdown-menu li{ margin:0; } .dropdown-menu a, .dropdown-menu .placeholder{ display:block; padding:10px 14px; font-size:14px; color:var(--text-dim); border-radius:1px; } .dropdown-menu a:hover{ background:var(--bg-3); color:var(--text); } .dropdown-menu .placeholder{ color:var(--text-dim); opacity:.55; cursor:default; } @media (max-width:720px){ .nav-links .drop-toggle{ width:100%; justify-content:space-between; padding:10px 0; font-size:16px; color:var(--text); } .dropdown-menu{ position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; background:transparent; padding:0 0 6px 18px; min-width:0; } .nav-links li.open .dropdown-menu{ display:block; } .dropdown-menu a, .dropdown-menu .placeholder{ padding:9px 0; font-size:14.5px; } } /* ---------------------------------------------------------------------- */ /* Back to top */ /* ---------------------------------------------------------------------- */ .back-to-top{ /* fixed to the right corner regardless of LTR/RTL — the WhatsApp button (.wa-float) always sits at the left corner on every page, so this stays on the opposite side to avoid ever overlapping it */ position:fixed; bottom:26px; right:26px; z-index:199; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-2); color:var(--text); border:1px solid var(--line-strong); box-shadow:var(--shadow); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease, border-color .2s ease, color .2s ease; } .back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{ border-color:var(--accent-2); color:var(--accent-2); } .back-to-top svg{ width:20px; height:20px; } @media (max-width:720px){ .back-to-top{ bottom:92px; width:44px; height:44px; } }