/* ============================================================================= IT Land Iraq — core stylesheet Same architecture as the main Wazzifni landing (landing/web/css): tokens and cross-component primitives here, one file per section under components/, and responsive.css reserved for concerns that cut across all of them. Mobile-first throughout: every component styles the phone layout first and only adds desktop rules inside min-width queries. The palette is the Wazzifni brand palette on the same light surface the main landing uses (landing/web/css/main.css): identical --bg/--surface/--ink/ --border values, so the two pages read as one site. The navbar and footer stay navy for the same reason they do on the main landing — they frame the page rather than being part of it. ============================================================================= */ @import url('components/nav.css'); @import url('components/hero.css'); @import url('components/about.css'); @import url('components/services.css'); @import url('components/projects.css'); @import url('components/design.css'); @import url('components/contact.css'); @import url('components/footer.css'); @import url('responsive.css'); /* ---------------------------------------------------------------- tokens -- */ :root { /* Brand — carried over from the Wazzifni landing page. */ --blue: #0087c6; /* The accent that used to be a light-on-dark cyan. On the light surface it has to carry text, so it is deepened until it clears 4.5:1 against white. */ --blue-bright: #0071ad; --navy: #004080; --navy-deep: #001e3c; --orange: #f68a29; --gold: #ffb43c; /* Gold is a fill colour, not a text colour, at these sizes — this is the readable ink version of it for labels set on the light surface. */ --gold-ink: #a06407; /* Surfaces & text — same values as landing/web/css/main.css. */ --bg: #f0f6fb; --bg-alt: #e6f1f9; --surface: #ffffff; --surface-solid: #ffffff; --ink: #1a2a3a; --muted: #6a8aa0; --border: #cde4f0; --border-strong: #a4cfe6; --grad: linear-gradient(135deg, #004a8c 0%, #0078b8 50%, #0099d4 100%); --grad-gold: linear-gradient(135deg, #f68a29, #ffb43c); --grad-text: linear-gradient(100deg, #003a75 10%, #0087c6 55%, #f68a29 100%); --shadow-sm: 0 4px 12px rgba(0, 64, 128, 0.1); --shadow-md: 0 8px 24px rgba(0, 64, 128, 0.15); --shadow-lg: 0 16px 36px rgba(0, 64, 128, 0.2); --glow: 0 0 0 1px rgba(0, 135, 198, 0.3), 0 18px 44px rgba(0, 64, 128, 0.18); /* Radii */ --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* Layout. --gutter is the only horizontal padding on the page; sections own their vertical rhythm through --section-y so nothing can double up. */ --nav-h: 58px; --maxw: 1200px; --gutter: clamp(1rem, 4.5vw, 2rem); --section-y: clamp(3rem, 9vw, 6rem); --grid-gap: clamp(0.8rem, 2.4vw, 1.5rem); --safe-b: env(safe-area-inset-bottom, 0px); /* Type — fluid, so phones get a compact scale without max-width overrides. */ --fs-display: clamp(2rem, 7.5vw, 4rem); --fs-h2: clamp(1.4rem, 4.8vw, 2.6rem); --fs-h3: clamp(1.02rem, 3vw, 1.2rem); --fs-body: clamp(0.92rem, 2.6vw, 1.02rem); --fs-sm: clamp(0.8rem, 2.3vw, 0.88rem); --fs-xs: clamp(0.72rem, 2vw, 0.78rem); /* Minimum comfortable touch target (WCAG 2.5.8). */ --tap: 44px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 0.18s var(--ease); --t: 0.28s var(--ease); } @media (min-width: 900px) { :root { --nav-h: 68px; } } /* ------------------------------------------------------------------ base -- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Keeps anchored sections clear of the fixed navbar. */ scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; } /* Direction comes from the dir attribute on , which js/i18n.js flips with the language — hardcoding `direction: rtl` here would pin the page to RTL even in English. */ body { font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.75; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Stops iOS from bouncing the page behind fixed overlays. */ overscroll-behavior-y: none; } img, svg { display: block; max-width: 100%; } ul { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; /* Removes the 300ms tap delay and the grey flash on iOS. */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(0, 135, 198, 0.2); color: var(--navy-deep); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Lets a horizontal rail bleed to both screen edges while its first and last cards still line up with the surrounding text. */ .bleed { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .skip-link { position: absolute; inset-inline-start: 50%; top: -100px; transform: translateX(50%); z-index: 1200; background: var(--gold); color: var(--navy-deep); font-weight: 700; padding: 0.7rem 1.4rem; border-radius: 0 0 var(--r-md) var(--r-md); transition: top var(--t); } .skip-link:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------- reveal on scroll -- */ /* Hidden only once JS has confirmed it is running (html.js is set inline in the head), so a failed module load leaves the page readable instead of blank. */ .js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } .js .rv.show { opacity: 1; transform: none; } /* --------------------------------------------------------- section shells -- */ .section { position: relative; padding-block: var(--section-y); } .section--alt { background: var(--bg-alt); } .section-header { text-align: center; margin-bottom: clamp(1.8rem, 5vw, 3.2rem); } .section-tag { display: inline-block; background: rgba(0, 135, 198, 0.1); color: var(--blue-bright); padding: 0.3rem 0.95rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.8rem; border: 1px solid rgba(0, 135, 198, 0.25); } .section-tag--gold { background: rgba(255, 180, 60, 0.2); color: var(--gold-ink); border-color: rgba(246, 138, 41, 0.4); } .section-title { font-size: var(--fs-h2); font-weight: 900; line-height: 1.3; color: var(--navy); text-wrap: balance; } .section-subtitle { font-size: var(--fs-body); color: var(--muted); max-width: 52ch; line-height: 1.85; margin: 0.8rem auto 0; text-wrap: pretty; } /* --------------------------------------------------------------- buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap); padding: 0.75rem 1.6rem; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; text-align: center; cursor: pointer; font-family: inherit; border: none; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); } .btn--block { width: 100%; } .btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 22px rgba(246, 138, 41, 0.28); } .btn-secondary { background: var(--surface); color: var(--navy); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); } .btn-outline { background: transparent; color: var(--blue-bright); border: 1.5px solid var(--blue-bright); } .btn:active { transform: scale(0.97); } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* Hover lift is desktop-only: on touch devices :hover sticks after a tap. */ @media (hover: hover) { .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(246, 138, 41, 0.45); } .btn-secondary:hover { border-color: var(--border-strong); transform: translateY(-2px); } .btn-outline:hover { background: rgba(0, 135, 198, 0.1); transform: translateY(-2px); } } /* --------------------------------------------- floating controls & toasts -- */ .scroll-progress { position: fixed; top: var(--nav-h); inset-inline: 0; height: 3px; z-index: 900; background: linear-gradient(90deg, var(--blue-bright), var(--gold)); transform: scaleX(0); transform-origin: right center; pointer-events: none; } /* The bar grows from the edge the page starts at, so it follows the direction. */ [dir='ltr'] .scroll-progress { transform-origin: left center; } .whatsapp-button, .back-to-top { position: fixed; left: 14px; z-index: 940; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform var(--t), opacity var(--t), visibility var(--t); } .whatsapp-button { bottom: calc(14px + var(--safe-b)); width: 52px; height: 52px; background: #25d366; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); } .whatsapp-button svg { width: 28px; height: 28px; } .back-to-top { bottom: calc(76px + var(--safe-b)); width: 44px; height: 44px; font-size: 1.15rem; background: var(--navy); color: #fff; border: 2px solid var(--gold); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; } .back-to-top.visible { opacity: 1; visibility: visible; } @media (min-width: 768px) { .whatsapp-button, .back-to-top { left: 24px; } .whatsapp-button { width: 58px; height: 58px; } .back-to-top { bottom: calc(94px + var(--safe-b)); width: 50px; height: 50px; } } @media (hover: hover) { .whatsapp-button:hover { transform: scale(1.1); } .back-to-top:hover { background: var(--blue); } } .toast { position: fixed; top: calc(var(--nav-h) + 12px); left: 50%; z-index: 1100; transform: translateX(-50%); max-width: min(90vw, 460px); padding: 0.8rem 1.4rem; border-radius: var(--r-pill); color: #fff; font-weight: 600; font-size: var(--fs-sm); text-align: center; box-shadow: var(--shadow-md); animation: toast-in 0.3s var(--ease); } .toast--success { background: #1c9c4d; } .toast--error { background: #d33b3b; } .toast--info { background: var(--navy); } .toast--leaving { animation: toast-out 0.25s var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -16px); } } @keyframes toast-out { to { opacity: 0; transform: translate(-50%, -16px); } }